想学更多的设计知识可以到我们的群(801466587)来交流哦~
无论是注册表、多视图步进器还是单调数据输入界面,表单都是产品设计中最重要的组成部分之一。本文着重论述了表格设计的常见问题和不足之处。记住,这些是一般准则,每个规则都有例外。
表格应该是一列
多栏会干扰用户垂直动量。
标签顶部对齐
顶部对齐的标签可以很好地在手机上被翻译。
组标签及其输入
把标签和输入放在一起,确保字段之间有足够的间距,这样用户就不会感到困惑。
不要全为大写字母
全为大写字母都比较难阅读。
如果低于6个选项,可以显示所有可以选择的选项
在选择器下拉中放置选项需要两次单击,并隐藏选项。如果有超过5个选项,请使用输入选择器。如果有超过25个选项,可以在下拉菜单中加入上下文搜索。
将选框放在彼此之下
将选框放在彼此下方可以方便用户选择
准确陈述按钮作用
对按钮应准确陈述意图。
显示错误提示
向用户显示错误发生的地方并提供原因。
在用户填写字段后使用内联验证(除非在过程中帮助它们)
在用户键入“--”时不要使用内联验证,除非它帮助他们-例如在创建密码、用户名或带有字符计数的消息的情况下。
不要隐藏基本的帮助文本
尽可能地公开基本的帮助文本。对于复杂的帮助文本,请考虑在聚焦状态下将其放置在输入旁边。
区分主次
需要区分按钮的主次关系。
使用字段框长度作为启示
框的长度提供了答案的长度。如电话号码、邮政编码等。
显示出可选字段
用户并不会都知道所需的字段标记(*)所隐含的内容。相反,最好是表示出可选字段。
群体相关信息
长长的表单会让人感到不知所措。通过创建逻辑组,用户将更快地理解窗口。
使它有趣
生命短暂。没有人想填写表格。有趣可以使用户逐步参与。设计师的角色是表达他们公司的品牌以引起情感上的反应。如果你能正确运用上面的技巧,可以提高你的完成率。
如果你想学习更多关于网页前端设计的技巧,网页排版的知识可以去学习一下《欧美范网页设计实战课程》,如果你没有ps基础可以去学习一下《PS网页前端设计基础》这是一套完全免费的教程,相信你将会有更多的收获~ 如果你喜欢这篇文章或发现它有用,可以点❤,也可以点击分享它,这样更多的人可以从中受益~