目录：

一、文本输入框

二、下拉框

三、单选框

四、复选框

五、开关按钮

六、穿梭框

七、日期选择

八、步进器

九、标签

十、提示

十一、按钮

一、文本输入框

1.输入框简介

输入框用于数据输入，表单的部分输入框会验证数据准确性。

2.输入框状态

有6种状态，分别是一般、激活、输入、输入成功、输入失败、禁用状态。

1）输入框一般状态，输入框常为浅灰色，也有部分重要输入框为饱和度较高的颜色。

2）激活状态，即鼠标移上或点击时，鼠标会变成可输入标志，输入框常为高亮色，给用户一个选中的反馈。当鼠标移入后移出或输入框选中后失焦时，输入框会变回一般状态，输入框呈浅灰色。现实中有的输入框也有激活状态输入框颜色不变的情况。

3）输入状态，输入框常为高亮色，起聚焦作用，现实中也有输入状态输入框颜色不变。文本框一般可输入字符、数字、密码等。

4）输入成功状态，一般无需验证的输入框都不存在输入成功的状态，有的需要验证的输入框存在输入成功的状态。

输入成功一般有两种，一是跟平常的输入框状态一样，输入完成后没有明显提示，大多数用在不需要验证的输入；

二是输入完成后显示‘√’（+文字提示）表示输入成功。‘√’（+文字提示），大多出现在验证用户身份是否唯一的情况，比如用户名、手机号等。

5）输入错误状态，需要验证的输入框会存在错误状态，比如用于识别用户身份是否唯一时的用户名或手机号等、对输入格式或内容有限制的输入框。会通过用把输入框标红和‘×’+文字，提示用户输入错误。错误状态的样式有多种，也有输入框不标红，只出现‘×’+文字或输入框标红+文字。

6）禁用状态，整个文本框为浅灰色，不可编辑。常用于编辑时，输入框内容为固定不可更改的情况。

3.输入框类型

输入框分为单行输入框和多行输入框，其中单行输入框包括一般输入框、自动匹配输入框。

1）单行输入文本框。一般有无提示输入框（有外标签）、有提示输入框（内标签）、icon+提示输入框（内标签） 。根据实际场景运用不同的单行输入框。

2）自动匹配文本输入框。可识别用户输入的内容，在下拉框显示与输入内容相关的列表。这种输入框也称联想输入框。

主要有两种场景：

一种是识别在本IP上输入过的内容，保护用户隐私。比如在某台电脑上登录QQ，输入用户名，会识别出登陆过的用户名而不是QQ系统的所有的用户名。

第二种是筛选系统内部内容，比如在后台系统某个字段数据十分多，希望通过输入实现字段填充，在输入框中输入后，后台自动筛选包含该字段的系统内容，比如百度的搜索输入框，在输入中，在输入框底部显示匹配你输入的内容，按照搜索热度和你关键字的匹配度进行排序。

另外如果你输入的是拼音，自动匹配下拉框也能显示出你可能想要搜索的内容，自动匹配下拉框也起着防错的功能。

自动匹配文本输入框能帮用户快速输入，也能有效防错， 节省时间，提高体验。

3）多行文本输入框。可输入备注等会有多行文本的信息。要是信息行数超过文本框长度，信息可在文本框内用滚动条滚动展示。

二、下拉框

1.下拉框简介

当选项过多或操作命令过多时，此控件可用于收纳数据/操作元素。

优点：不需要占用屏幕大空间，可以把元素隐藏，可预计屏幕需预留的空间，可扩展性强。

缺点：一次只能看到一个选项，不便于看到剩下的选项，对于选项选择增加了一个层级。

2.下拉框状态

有2种状态，分别是一般、激活状态。

1）一般状态，下拉框常为浅灰色。初始框内一般会有描述性文字。

2）激活状态，有两种情况，一种是点击激活，一种是移上激活。

1-鼠标移上下拉框时，或点击下拉框时，下拉框呈展开激活状态。

2-鼠标移上下拉框时，下拉框呈展开激活状态。

3.下拉框类型

下拉框存在单选下拉框和多选下拉框，多选下拉框有两种不同的形式，一种是列表多选，一种是树多选。若列表内容长于下拉框展示区，内容用滚动条滚动展示。

1）单选下拉框。单选下拉框可在下拉列表中选择一个选项。

选择某个选项，输入框的数据会被替换，下拉列表收起。或没选中选项，下拉列表失焦，下拉列表收起。

2）多选下拉框。多选下拉框可在下拉列表中选择多个选项。

选择多个选项，输入框的数据会显示选中的数据或数据数量，下拉框失焦时列表收起。

3）树形菜单下拉框。树形菜单下拉框可在下拉列表中选择多个选项。

三、单选框

1.单选框简介

用于选择2个或以上一组选项中的某一个选项，选项之间呈互斥关系。

优点：能直观看到有哪些选项。

缺点：元素多的时候，占用屏幕空间较大。

2.单选框状态

单选框有四种状态，分别为：未选中、选中、未选中且禁用、选中且禁用

3.单选框样式

1）传统的radio样式

传统radio样式常用于表单设计，多用于选择‘是’、‘否’或者选项较少的一组选项

2）按钮样式

目前的单选按钮控件样式也多用按钮样式，因为按钮样式选中区域大且视觉效果明显，有利于转化。

按钮样式不仅用到表单中，也会用于单个条件筛选。

四、复选框

1.复选框简介

用于需要同时选中多个选项的情况，选项呈并列关系。

2.复选框框状态

复选框也有四种状态，分别为：未选中、选中、未选中且禁用、选中且禁用

3.复选框类型

1）单复选框

类似于选‘是’、‘否’，在这种场景下用单复选框能极大地节省了空间，也能较好传达信息。

2）多复选框

多个并列选项皆可选的时候，常用到多复选框。

五、开关按钮 

1.开关简介

类似于现实场景中的开关按钮，一般用于选择‘开’、‘关’两种状态。

优点：通过开关两种不同状态，模拟现实，符合用户心理逻辑，且占用屏幕面积小。

缺点：不像现实场景按一下会有明显的反馈，比如按一下灯会开或关。在软件上，即使通过颜色区分，若没有明显反馈，开关两种状态容易会让用户混淆。

2.开关按钮状态

开关按钮有两种状态，分别为：开和关，进行开或关操作，按钮会有明显的颜色变化。

六、穿梭框

从左到右多选控件一般用于表单新增或编辑。

此控件是把左侧的列表元素选择到右侧，右侧为选中元素。也可以取消选中元素，把右侧元素转移到左侧。可多选操作，也可全部操作。

优点：可以从多个选项中直观看到选中了哪些选项，且选中或取消操作成本低。

缺点：占用屏幕面积固定且大，没用过此控件的用户需要花一定的学习成本。

 

question：

上述这么多的单选和多选控件，用的时候要怎么选呢？

用于单选的控件有：

1）单选下拉框

2）单选框，radio样式

3）单选框，按钮样式

4）单复选框

5）开关按钮

遇到这么多的单选控件，要根据使用场景去选择合适的控件。

 

1）单选下拉框

可以把多个数据隐藏起来。适用于做查询条件、做表单输入、合并隐藏多个并行操作等。

如：

2）单选框，radio样式

把多个选项展示出来。适用于表单填写时，用于选择互斥的一组选项。

与按钮样式相比，选中状态较为不突出。若希望用户弱化的某个选项，相比按钮样式，用radio样式会比较好。

如： 1-

2-

3）单选框，按钮样式

把多个选项展示出来，且选中效果直观明显，有利于转化。

适用于表单填写时，用于选择互斥的一组选项，和查询条件中的单个条件筛选。

如：

4）单复选框

单个复选框，只存在选中或未选中状态，用于表示是否，能极大节省空间。

常用于购买、登录、安装等 需要同意某一协议场景，或选中是否使用工具的场景，或有无完成等场景。

5）开关按钮

只存在‘开’、‘关’两种状态，常用于启动或停用某种功能或产品状态。

用于多选的控件有：

1）多选下拉

 

2）组合复选框

3）选择从左到右

思考：每一种多选控件适用于哪一种场景

七、日期选择

1.日期选择（一天）：选择某天的日期（年月日）。

2.日期选择（一天＋时间）：选择某天的日期＋时间。选择完日期之后，在下拉框底部可以输入具体时间，点击确定即完成输入。

3.时间段选择（多天）：选择时间段（年月日）。通过点击开始时间和结束时间来选择时间段。

下面的控件区别于两个单独选择日期的控件优点在于可以保证开始时间是在结束时间之前的，存在防错机制。

如果单独两个选择时间控件，容易选到开始时间晚于结束时间，出错几率较大。

八、步进器

通过增减符号对中间的数字进行+1或-1操作。

步进器适合做细小数值调整，比如购买商品时选择商品数量。如：

九、文本标签

文本标签有多种对齐用法：

1）顶对齐

标签可读性强，可节省大量的横向空间，浪费纵向空间。

2）左对齐

标签可读性弱，若标签与输入框间距过大，不符合格式塔原理。

3）右对齐

标签可读性强，减少占用垂直空间。

市面的软件用顶对齐和右对齐的相对比较多。

十、提示

1）帮助提示：用于可隐藏的不那么重要的信息提醒。鼠标移动到图标，会自动出现文字提示，移开提示消失。

2）一般提示：一般重要信息的提示，不可隐藏。

3）文字警告提示：用户输入错误后提醒或重要信息提醒，不可隐藏。

4）悬停重要／警告提示：用户 输入错误后提醒或重要信息提醒，消息可隐藏。

5）带背景文字提示（正常）：一般重要信息提示，不可关闭或隐藏。

6）带背景文字提示（可关闭）：一般重要信息提示，可关闭。适用于初次使用系统提示，或会多次重复出现的提醒提示。

7）带背景重要信息提醒：不可忽略的重要信息提示。跟一般重要提示用饱和度更高的颜色区分开，突出重要性。

十一、按钮

1、按钮作用：点击按钮时，帮我们触发某个动作。

2、按钮状态

按钮有4种状态：正常、悬停、按下、禁用 4种。

其中悬停和选中状态颜色要与正常状态区分，作为悬停或选中的反馈。禁用一般文字与按钮都置灰，表示不能点击。

3、按钮类型

按钮有4种类型：一般按钮、突出按钮、线性按钮、复合按钮

1）一般按钮

一般按钮主要用来触发特定操作的，当操作不是特别重要的时候，会用一般按钮配色，让用户容易发现该操作。

2）突出按钮

突出按钮主要用来突出重要操作的，当操作为高频重要操作时，且与一般操作放到一起时，颜色上做区分，让用户一眼能发现该操作。

4）线性按钮

线性按钮主要用来展示频率偏低或重要性较低的操作。

5）复合按钮

复合按钮主要用在有多个操作并列展示时，把低频且重要性低的操作放到‘更多’里面，减少页面复杂度与用户认知负荷。

最后说两句，

控件知识是交互工作中最基础的知识，以上的控件只是日常工作中后台设计的部分常用控件，很多控件还没提及，另外控件还有优化的地方，以后会在日常工作中不断思考、积累与补充。

写于2016年12月

来源：http://ued.chinanetcenter.com/?p=1439