超简单！从这6个方面入手，彻底掌握表单设计

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

编者按：这篇文章出自英国创意设计机构 Make it Clear 的资深设计师 Sarah Edwards，她将繁复的表单设计知识融会贯通总结成了非常容易理解和使用的 6 个要点，特别值得学习：

表单是数字化设计当中最常见的一种元素，但是也是最为琐碎和基础的一个设计元素。简单的任务可能会用到表单，复杂的 B 端项目则会涉及到更加庞大，更加复杂的表单。因此，对于表单设计，从来都不是一件简单的事情，但是如果你能够掌握一些最为核心的原则，则可以在绝大多数情况下，设计出足够好用的表单。这篇文章当中，我将会从6个不同的角度，帮你梳理出表单设计最为重要的原则和注意事项。

另外，这两篇文章也值得看看：

资深 UI 设计师搞定按钮和选框的14个秘诀

编者按：这篇文章来自资深设计师 Taras Bakusevych，他长期从事金融和企业类数字产品的设计，在表单和控件设计领域造诣精深。

资深UI设计师搞定输入框和表单的20个秘诀

编者按：这篇文章来自资深设计师 Taras Bakusevych，长期从事金融和企业类数字产品的设计，在表单设计领域造诣精深。

1、表单输入框基础剖析

首先，我们需要弄清楚表单输入框的基础结构。表单通常是由很多不同的字段输入框构成主题，这些输入框会帮你搜集数据，其中涉及到不同类型的数据字段，但是在基础的输入框单元上，它们有着统一的特征：

• 文本标签（Label）：描述这个输入框内数据的属性特征
• 输入框容器（Container）：输入框的边界
• 占位符/输入文本：占位符通常是浅色的，以文本的形式告诉用户需要输入的数据是什么样的，但是占位符不应该取代标签。
• 前导图标（可选）：通常用来指示输入框内字段的属性和功能
• 后缀图标（可选）：通常用来标识字段输入格式的正确与错误
• 帮助信息（可选）：提供辅助信息，帮助用户了解一些必要的信息内容
• 上下间距：适当留白
• 左间距：适当留白

2、典型的表单字段类型

表单字段类型千变万化，但是我们实际生活和设计中所涉及到的常见类型输入框和字段其实类型非常有限，这里我整理出我们最容易碰到的 6 个类型，吃透它们，可以帮助你更好地完成日常的表单设计：

• 文本输入框：通常这类表单输入框包含有一个标签，输入框大小和需要输入的字段的实际长度或者预期长度是接近的，一般会有简单的占位符作为提示和说明。
• 搜索框：搜索框通常是在界面中特别明显的位置，同时，搜索框内的占位符文本，通常会以示例的方式，提供一些常见的搜索内容，来引导用户进行搜索。
• 日期选择框；日期选择器可以呼出日期选择控件，同时也支持直接以占位符示意的方式，手动输入日期。
• 下拉菜单：下拉菜单可能是最为常见的选择器形式，下拉菜单提供一个交互式的下拉框和备选项，允许用户在预定义的选项中，直接选取单个选项。通常下拉菜单中选项会比较多。
• 密码输入：默认情况下，密码输入框中的字段内容会被隐去，以小圆点或者星号来展示，
• 单选按钮：这是另外一种常见的交互元素，允许用户从数量较少（不超过3个）的互斥选项中选择的控件。这种控件最重要的特质，就是选项之间是互斥的。

3、表单输入框的状态

在尼尔森的交互设计十大启发式当中，排名第一的原则是「系统状态的可见性」，这是因为交互设计当中，需要始终让用户知道当下正在发生的情况，因此需要借助设计来表明状态：

• 未触发状态（Inactive）：这个输入框已经准备好，并等待与用户交互
• 悬停状态（Hover）：光标已经移动到输入框上方并停止移动，输入框描边状态提示用户可交互
• 已触发状态（Active）：这个时候用户已经点击输入框，可以直接输入内容了，输入框高亮显示它已经被触发，其内部已经显示输入光标来指示将要输入的内容的位置。
• 已禁用状态（Disabled）：某些输入框因为特定的原因已经不可输入，整体呈现灰色来告诉用户数据已不再允许被提交或者输入。

4、文本标签的使用

每个字段都应该有一个明确的标签，用来告知用户这个字段的内容和属性。设计师 Luke Wroblewski 推荐在设计文本标签的时候，采用如下策略：

• 想要高效输入或者输入熟悉的字段，标签置于输入框顶端并靠左对齐
• 对于用户不熟悉的，或者是重要的字段，可以将标签置于输入框左侧并对齐

将标签置于输入框顶部还有利于多语言支持，而且这种布局特别适合快速扫视并填写。文本标签的可访问性在这种情形下也更强，因为这种布局对于屏幕阅读器也更加友好。

除此之外，还有这些注意事项：

• 不要使用占位符作为标签，因为用户在输入的时候，占位符会消失并失效，容易让人困惑。
• 文本标签应当尽量简明扼要。
• 占位符可以使用示例，并且确保可读性。

5、表单错误提示的注意事项

在表单填写过程中，经常会出现错误，这个时候系统要告知用户填写出错以及出错的原因。这个时候不仅要允许用户即时更正，而且需要以合理的视觉指示，来告诉用户这些信息。

所以，比较合理的方式是通过输入框的色彩改变来提示用户出错，同时加入文本提示来告诉用户出错的原因和改正的方法。

6、表格应用一栏式布局

表单应该尽量使用自上而下一栏式的布局，这样用户很难错过需要填写的内容。而多栏式的布局之下，用户需要同时左右扫读并上下浏览，这种情况下非常容易错过某些字段内容。

结语

除了以上的 6 组要点之外，还有一些额外的小点需要注意：

• 需要针对移动端的使用场景，对表单进行优化
• 省略不必要的字段
• 将更容易填写的字段置于表单顶部
• 将相关的字段打包分组

设计表单其实是用户体验设计中，最需要注意的组成部分之一，它有很多细节需要注意，但是最核心的就是以上提及的这些。帮助用户有效、尽快完成表单的输入，并且避免出现胡乱的情况，是所有这些设计的核心目标。