|
|
一、文本输入框
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）多复选框
多个并列选项皆可选的时候，常用到多复选框。
后台系统的控件繁多，遇到这么多的控件，我们要根据使用场景去选择合适的控件。关注我们，下回继续分解。
|
|
发表于 2018-11-3 00:19:57