提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
在后台设计,以及B端的设计中,经常涉及到大量的数据输入以及选择,以及编辑删除,在实际场景中这两种控件的使用,也有很多使用场景,基于所设计的项目,在这里和大家分享相关的总结。
输入框&选择器的基本形式
1.输入框
输入框,以及暗提示文字(占位文本)
2.选择器
文本框,以及暗提示文字、下拉icon(提示更多选型)、滑块(当选型较多的时候)。
其中暗提示文字向用户说明要输入的信息,避免用户在空白中输入
输入框&选择器的尺寸
尺寸的大小,主要指高度,宽度可根据场景自由变化。一般有大中小三种尺寸,我们可以根据项目场景选择,我们一般默认选用中的尺寸。我们以8px为模数进行变化,即:24px(小)、32px(中)、40px(大)
其中圆角大小全局采用4px,文字大小为14px(其中文字颜色根据交互太变化)。
输入框延展形式
1.前缀和后缀图标
这种常见与登录页面,图标说明了输入框的属性。
2.搜索框
几种常见的搜索形式
3.复合型输入框
复合型输入框常用选择框结合使用:在两种或三种数据相关联,例如在输入证件号的时候,我们会选择证件类型(身份证、护照等),然后输入相关号码;有固定后缀的时候,可以采用后缀内容固定,减少用户的输入操作。
4.文本域
输入框一般输入的文字较少,当需要输入长文本的时候我们采用文本域的形式。
5.选择框
选择框和输入框都有前缀图标的形式,选择框常见的为常规选择框和时间选择框。下拉选框常见的有:多选和层级选择。
交互形式
在交互形式中,一般有以下几种状态:默认状态、输入状态、输入成功、输入成功鼠标悬浮状态、禁用状态、错误提示状态。
在这里我们会定义好输入框颜色:默认颜色,错误提示的颜色、禁用填充色、高亮色。
文字状态主要为:正文、不可用状态、错误提示。
颜色详见之前的文,颜色部分:https://www.zcool.com.cn/article/ZOTE4Mzcy.html
1.默认状态
提示语言越详细(良好的默认值、结构化的格式、暗提示、输入提醒),将减少用户输入的错误。
2.输入状态
主要为提示文字转化为光标形式,输入框高亮显示。可清除的内容icon,可以快捷清除已输入的内容。
3.输入成功状态
文字样式的改变。
4.输入成功,鼠标悬浮状态
鼠标悬浮状态,可清除的内容icon,可以快捷清除已输入的内容,方便重新编辑。
5.禁用状态
不可输入或不可修改的选项,一般会用灰色背景,文字为不可用样式。
6.错误提示
输入框红色显示,并显示提示语。因为在大量数据输入的时候,数据在后台的及时校检,在用户输入数据就反馈,比全部输入完成,点击提交后再提示,返回从头到尾检查要好很多。
关于标签(Lable)
标签(Lable),我们经常会遇到要不要加标签的问题,以及标题名文字长度不一致的问题。以下是几种业务场景,自己处理的方式。
1.注册/登录
不加标签,会让整体的界面很干净,但是这是在输入选项3项左右的时候比较合适。
例如注册的场景,一般有账户名和密码两种选项,这种情况下,一般可以不加标题,同时不影响用户记忆内容。
用户在输入数据的时候,一般记忆有限,尤其在需要输入大量数据的时候,常常会需要检查和校检。在这种情况下,我们就需要添加输入选项的标题,以明确此输入框和选择器的输入内容类型。但是标签的字数确实很难保持一致的,因为我们一般会根据具体情况处理。
2.基础表单
这种适用于相对较少的表单输入的情况,这种情况一般是一行一个的上下排列,整体的视觉效果相对统一。
3.综合表单
这种适用于大量的数据,选择一行一列数据,会造成页面太长。这时候就需要一行展示多个数据。
根据人从上到小,从左到右的阅读顺序,当然选择一个方向展示数据会更有利于数据的展示,以及用户获取数据的直观和准确。
所以在我们展示数据的时候,我们一行的数据会造成页面过长,多列展示数据的时候,尽量展示相关性较强的数据。
注意点:
1.留出适当的间距,显示错误提示语
2.一排展示多条数据的时候,展示相关性比较强的数据
3.根据用户的阅读顺序,尽量选择单向展示数据
4.分步表单
将表单内容进行分步,可以将复杂信息分解,可以提高用户处理的专注度,降低页面的复杂性。
在实际场景中,需要综合使用,这里只是举例,更多的业务场景,需要设计师发动大脑,综合处理。
原创不易,且赞且珍惜!长得好看的人,都给我点赞了!
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册