更好的前端设计形式——设计者犯的常见错误及修改方法

想学更多的设计知识能够到咱们的群（801466587）来交流哦~

不管是注册表、多视图步进器仍是单调数据输入界面，表单都是产品设计中最重要的组成部分之一。本文着重论述了表格设计的常见问题和不足之处。记住，这些是通常准则，每一个规则都有例外。

表格应该是一列

多栏会干扰用户垂直动量。

标签顶部对齐

顶部对齐的标签能够很好地在手机上被翻译。

组标签及其输入

把标签和输入放在一块儿，确保字段之间有足够的间距，这样用户就不会感到困惑。

不要全为大写字母

全为大写字母都比较难阅读。

若是低于6个选项，能够显示全部能够选择的选项

在选择器下拉中放置选项须要两次单击，并隐藏选项。若是有超过5个选项，请使用输入选择器。若是有超过25个选项，能够在下拉菜单中加入上下文搜索。

将选框放在彼此之下

将选框放在彼此下方能够方便用户选择

准确陈述按钮做用

对按钮应准确陈述意图。

显示错误提示

向用户显示错误发生的地方并提供缘由。

在用户填写字段后使用内联验证（除非在过程当中帮助它们）

在用户键入“--”时不要使用内联验证，除非它帮助他们-例如在建立密码、用户名或带有字符计数的消息的状况下。

不要隐藏基本的帮助文本

尽量地公开基本的帮助文本。对于复杂的帮助文本，请考虑在聚焦状态下将其放置在输入旁边。

区分主次

须要区分按钮的主次关系。

使用字段框长度做为启示

框的长度提供了答案的长度。如电话号码、邮政编码等。

显示出可选字段

用户并不会都知道所需的字段标记（*）所隐含的内容。相反，最好是表示出可选字段。

群体相关信息

长长的表单会让人感到不知所措。经过建立逻辑组，用户将更快地理解窗口。

使它有趣

生命短暂。没有人想填写表格。有趣可使用户逐步参与。设计师的角色是表达他们公司的品牌以引发情感上的反应。若是你能正确运用上面的技巧，能够提升你的完成率。

若是你想学习更多关于网页前端设计的技巧，网页排版的知识能够去学习一下《欧美范网页设计实战课程》，若是你没有ps基础能够去学习一下《PS网页前端设计基础》这是一套彻底免费的教程，相信你将会有更多的收获~ 若是你喜欢这篇文章或发现它有用，能够点❤，也能够点击分享它，这样更多的人能够从中受益~