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

表单应为一栏

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

顶部对齐标签

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

将标签及其输入分组

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

文字避免用全大写

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

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

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

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

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

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

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

使 CTAs 具有描述性

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

内联指定错误

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

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

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

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

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

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

这里有着很大的哲学原因

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

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

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

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

组相关信息

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

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

笔录

Posted by:Bruce

Hi! I’m Bruce Wu UI/UX Design, Product Designer, Freelance👋 Some Availability For Projects. My superpower is to channel my interdisciplinary skill sets to create appealing and delightful experience for users in meaningful ways, to make people's lives easy and simple.