分类
Articles

设计更好的表单

“设一世,表一世”,表单设计是 UI设计 中较为重要的部分,本文主要讨论表单设计的常见注意事项。注意,这些并非绝对。

“设一世,表一世”,表单设计是 UI设计 中较为重要的部分,本文主要讨论表单设计的常见注意事项。注意,这些并非绝对。

表单应为一栏

多列会破坏用户的垂直动量

顶部对齐标签

左侧对齐的表单可以让用户更快的方式阅读和编辑内容,因为更方便查看。

将标签及其输入分组

将标签和输入端放在一起,并确保字段之间有足够的高度。以免用户感到困惑

文字避免用全大写

全部使用大写字母会让用户难以阅读。

如果切换小于 6 个,则展示所有选择选项

将选项放置在选择器下拉菜单中需要单击两次,然后再隐藏。
如果有5个以上的选项,可使用输入选择器。
如果有超过25个选项,则在下拉列表中合并上下文搜索。

不要使用占位符文本作为标签

通过使用占位符文本作为标签来优化空间是一个看似简约的设计。但这导致了许多可用性问题。这些问题已由 Nielsen Norman Group 的 Katie Sherwin整理了

将复选框彼此左对齐上下设计,更方便阅读。

将复选框放置在彼此下方,用户阅读起来更方便

使 CTAs 具有描述性

提交按钮需要说明用途的文案,一般是动词就对了

内联指定错误

向用户显示“发生错误的位置”并“说明原因”

用户填写字段后再进行内联验证(除非在输入过程中的提示很有帮助)

用户键入时不要使用内联验证(除非对用户有帮助),例如设置密码、用户名或带有字符数的消息时。

不要隐藏基本的帮助程序文本

最好展开对用户有帮助的填写说明。
如果是复杂的帮助文本,可在其“聚焦状态下”将其放置在输入旁边。

将主要按钮与次要按钮区分开

这里有着很大的哲学原因

使用输入后字段长度作为表单长度

字段长度可告诉用户答案的长度。
用于具有已定义字符计数的字段,例如电话号码,邮政编码等。

丢掉开*吧!可使用 可选 文案

用户并不总是知道所需字段标记(*)隐含的含义。相反,最好表示可选文案。

组相关信息

让用户分批思考,长篇幅会让人感到不知所措。
通过创建逻辑组,用户可更快地理解表单。

生命短暂,没有人愿意老填写表单。去沟通、说笑和做自己喜欢的事情吧。设计师的作用是表达他们公司的品牌,和用户引起情感上的反应。如果做得好,它可以高用户的参与度。在设计中,只要确保您没有违反上面列出的规则即可。

笔录

发表评论

电子邮件地址不会被公开。 必填项已用*标注