返回

从零开始学 UI

#设计知识
#知识库
52%
进度
0/14
知识点
0
笔记
概述
移动端UI设计的基本认识
移动端UI设计的基本认识
UI 界面设计所需的技能解析
UI 设计的软件介绍
移动端的基础规范认识
移动端的规范认识
屏幕和分辨率的规范
设计的单位和格式
UI 中的字体与显示
UI 文字的属性设置
基本色彩模式的认识
UI 设计中的原子理论
iOS 的基本规范认识
iOS 的控件和组件认识
标准规范下的APP 设计演示
苹果音乐主页的设计
资料库页面的设计
专辑页面的设计
播放页面的设计
界面的合并和输出
移动端的基本控件和组件设计
UI 中的尺寸定义逻辑
按钮的设计逻辑
输入框的设计逻辑
列表行的设计逻辑
图标的尺寸定义
分页器控件的设计
轮播广告组件设计
快速入口的设计
瓷片区的设计
动态卡片的设计
商品卡片的设计
模态弹窗的设计
移动端页面设计的解析
登录页面的设计
综合型主页设计
动态列表页面设计
商品列表页面设计
电商详情页面设计
影音详情页设计
用户设置页面设计
表单页面设计
UI 中的视觉风格
夜间模式的设计
UI 中的投影应用
首页知识库设计知识从零开始学 UI

输入框的设计逻辑

UX百科编辑部 编辑于 2023-12-1827人正在学
50

输入框 Input,是用于向系统输入信息的表单控件。

在一套系统中,同样会包含很多的输入框,而根据场景、权重的不同,也会应用不同的输入框高度大小。通常,输入框只需要分成两个尺寸区间即可。

大输入框:大于等于 44,如账号、密码、搜索等操作

小输入框:大于 28 小于 44,如筛选条件、次级搜索等操作

输入框的样式包含背景色、描边、下划线三种主要类型,部分设计中会以列表行的形式呈现。

输入框内可以包含多种信息,如图标、占位字符、按钮等,需要在制定完输入框的尺寸后再按需填入。

作为可交互控件,输入框包含默认、聚焦、输入、已输入四个状态。

默认:通常是输入框内没有输入内容的状态

聚焦:点击后准备输入的状态,左侧会有光标闪烁示意

输入:是有内容置入到输入框中,光标显示在内容最右侧

已输入:在输入完成后退出输入中的状态

在表单类控件中有许多控件都是根据输入框的设计拓展出来的,如下拉菜单、步进器、时间选择器等,所以只要掌握输入框的设计逻辑,就可以快速掌握其它相关控件的设计方法。

课后作业

想要进行相关的练习,就可以复制下面的截图到软件内,完成对应输入框的设计:

对比界面:

点赞
收藏
学会
10035027
下一篇: 列表行的设计逻辑
列表行 row 是应用在单行列表中的行元素,要理解它就要先认识列表。 列表是由多个同类元素按相同规则排列出来的组件,表现形式多种多样,可以是横向多列,也是纵向单列、纵向多列。 纵向单列的列表,就是由若干列表行组成,前面提过 iOS 组件库中就提供了大量的列表行样式,基础的列表行中内容只有一行,而复杂...
笔记 (4)
只看自己
logo
凯尔队长 记录于 2024-02-25
1
在有搜索框的需求时,记得绘制完默认状态后,别把剩下的交互状态忘了……
原文: 作为可交互控件,输入框包含默认、聚焦、输入、已输入四个状态。 默认:通常是输入框内没有输入内容的状态 聚焦:点击后准备输入的状态,左侧会有光标闪烁示意 输入:是有内容置入到输入框中,光标显示在内容最右侧 已输入:在输入完成后退出输入中的状态
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞