表单的目的、内容、大小长度等虽然各不相同，但基本元素比较固定；合理组织这些元素有助于用户轻松完成表单填写。

Amazon创建账户表单解析

i. 标题：这个元素帮助用户引导完成表单填写的整个过程，当你把信息分成很多组来让用户填写的时候，标题就特别有用。例如：个人资料、职业详情、财务明细。

ii. 标签：标签告诉用户在任何特定的输入区域期望他们填写什么内容。

iii. 占位符 ：占位符是对标签进行额外的信息描述。

iv. 错误信息提示：错误信息提示给予用户错误反馈，提醒用户为什么填错了。

v. 动作按钮：动作按钮是在表单的结尾，有个确认提交的动作控件。

表单状态

基本上，表单在用户的交互过程中需要经历三个阶段。

i. 默认状态：用户在未进行任何操作前表单的状态。

ii. 聚焦状态：这个状态强调用户正在填写的区域，帮助用户聚焦和减少反复扫描屏幕的时间。

ii. 反馈状态：反馈状态是指用户收到的反馈时的页面状态(大多数是指错误信息反馈)。有时候，有时候对于上一个输入信息的反馈在用户聚焦到下一个填写区域时就会显示。然而，如果数据不能得到立即验证的话，就要等到用户点击提交按钮后再给予反馈提示。

Amazon创建账户表单的“默认、聚焦、反馈”页面状态

最佳实践

1. 保持简洁

让你的表单保持简短精炼，只保留最有必要的数据，避免以验证的名义让用户重复输入，例如不要重复密码字段，取而代之的是要让用户直接看到他们输入的密码。

2. 使用及时验证

当给予用户输入进行报错时，最好将反馈定位到具体位置。

Facebook和Amazon采用了两种不同的验证反馈方式

3. 将相近的字段打组

将相关信息进行分组并按照常见规则排序很重要。这样的话可以帮助用户减少认知负荷和注意力消耗。

付款页面相近的功能区域被适当地分组

4. 将标签左对齐

要将标签放置到输入框上面（像上面所解析的Amazon的表单一样）。不要把占位符文字作为输入框的标签，那样的话用户输入完成后将看不到标签，用户将很难对已输入的内容做最终的核对，会让他们思考很多。

始终将标签放置在输入框上面并左对齐，有一个很全面的研究报告来说明这是高效率的做法。（详见链接https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php）

5. 输入区域与内容类型或尺寸相匹配

简单地说，要保证输入字段的长度与预期的输入类型相匹配，例如：地址就要比邮政编码长。

Flutterwave’s Rave的登录页面，输入区域的尺寸与预期的输入字段的长度比例一致

payporte的输入区域与预期的输入字段的长度比例不匹配

6. CTA（call to action）按钮

在表单的末尾通常会有个确认按钮或者下一步按钮，在有些场景下，必须有一个以上的按钮。要强调主要的按钮，弱化次要按钮。

Amazon的主要次要按钮处理的很好

当运用模态弹窗进行信息收集时（表单在模态弹窗上），那么次要按钮有时候就是关闭按钮，另一种弱化它的方法就是使用X icon代替关闭按钮，如下所示。

Medium的登录模态弹窗使用X icon 来代表关闭按钮

7. 搜索区域

不要隐藏你的搜索框，特别是你的网站内有大量内容时，搜索或许是最好的选择。

Amazon的搜索框特别的显眼

当用户执行了搜索操作后并显示了搜索结果，不要立即清除搜索框内的内容，以便让可以用户很容易地去回顾他起初所搜索的内容。

Medium没有清除搜索后的输入内容

8. 清晰

给用户传达清楚的信息，给予他们所预期的，不要模棱两可。没有人喜欢填写表单，没有人愿意填写两遍。

Cowrywise的标签内容非常的清晰，甚至按钮的文字都描述得很好

本文所有的案例既不是广告，也没有贬义，仅用于学习。

原文地址：blog.prototypr

译文地址：点融设计中心DDC

原文作者：Momoh Silm

译文作者：孙梦超

]]> //www.laura-marie.com/48514.html/feed 0 //www.laura-marie.com/45747.html //www.laura-marie.com/45747.html#respond Sun, 10 Jul 2016 16:07:27 +0000

创建表单时，交互设计师总是会面临一个选择，选用哪种UI元素来表示可选项的操作。当然，我们每个人都有自己的法则。但是，在选用可选项控件时，仍然要多加考虑。

可选项可以用勾选框、开关、单选框和下拉菜单表示。选择得当的话，任何一种都非常出色。本文中，我们重点关注勾选框和开关。

勾选框

勾选框用在一系列选项中，用户可以选择任意数量，包括0个、1个，或者许多个。换言之，每个勾选框在列表中都是相互独立的，勾上一个框并不会取消其他选项。

带有标签的勾选框

开关

开关组件是在仿照物理开关，让用户打开或关闭某个项目。

开关提供了两种简单直接的对立选项

开关组件通常用于表现一个动作（例如开始或停止某个操作）。它类似于电灯开关：

开关通常用在电灯开关上

勾选框和开关的最佳实践

使用标准的视觉表现

勾选框应当是一个小方框，选中时有一个勾，或者一个叉。

选中和未选中的勾选框组件。图片来源：Material Design

开关应当看起来有开和关的状态

选中和未选中状态的开关组件。图片来源：Material Design

用户在操作各种控件时，应当提供清晰的视觉反馈。细微的动画能让体验更细致——在移动应用中尤其如此，

iOS7/8的开关按钮。来源：Dribbble

纵向排列列表

纵向展示列表，每行一个选项。这对于开关和勾选框都有效。如果一定要横向排列，一行有多个选项，就要调整好按钮和标签的距离，哪个选项对应哪个标签清晰明了。下面的例子中，元素之间的距离都太近了。

很难确定选项4对应的到底是哪个选框

开关的当前状态应该在控件外面

设计开关时，你应该避免状态和操作的歧义。我们以iOS6的开关设计为例，注意看写着ON的蓝色状态按钮。

并不能确定标签（例子中是“ON”）是指当前状态，还是按下的操作

你能判断按钮当前是开着的吗，或者拖动滑块、点击、点按时会开启？“ON”在这里是个状态（名词）还是动作（动词）？并不清楚。

不应该让用户感到困惑，区分出操作和状态非常重要。实际上，高亮显示当前状态，能够让它更加友好。

文字颜色表明了现在的状态（亮起的是ON）

勾选框使用肯定的文案

使用肯定、有效的文案作为勾选框的标签，用户就很清楚如果勾上选框会发生什么。避免“不要给我发邮件”这样的否定文案，这就意味着用户要勾上选框来阻止某些事发生。

勾选框永远都应该使用肯定的指令，不能用否定文案，例如“请勿……”

勾选框使用Label标签，增大操作区域

所有的勾选框都有标签，但并非都使用label标签。勾选框本质上很小，但是根据费茨定律，它们就很难点击或者点按。要增大操作区域，让用户在点击或点按标签与相关文字时就能选中选项，而不仅仅是那个小方框。

让用户通过点击方框或它的标签来选中选项

勾选框只用来改变设置，不能作为操作按钮

作为一个二元选择，勾选框和开关的主要区别，是勾选框是状态，而开关是操作。如果一个操作适合用物理开关表示，那么开关可能就是最适合的控件。

下面的例子很明显，在开关中，无线网络是开着的。但在勾选框里，用户还需要思考无线网络是否开启，是否需要勾选这个框来开启无线网络。

用开关来开启或关闭服务或硬件组成，例如WIFI

勾选框和开关的提交操作

勾选框的操作可以延后（例如作为表单的一部分），但开关的操作应当立即触发。

良好的用户体验，是立即改变开关对应的设置项，而不是点按了“保存”或返回上个界面之后才保存。我们在现实生活中对开关的期望就是如此（例如我们知道，按下开关灯立刻就亮了）。

iOS中的开启WIFI

当用户必须执行额外步骤才能让改变生效时，使用勾选框。

当用户必须点击“提交”或“下一步”按钮，修改才能生效时，选用勾选框

结论

设计界面时，交互元素的选择要保持一致、可预期。遵循设计标准，能让用户更好预测控件的功能、如何操作。相反，违背标准会让界面感觉很脆弱——好像会毫无预兆发生任何事情。

非常感谢！

原文链接：http://babich.biz/checkbox-and-toggle/

译文链接：http://colachan.com/post/3510

作者信息：
Nick Babich

1、表单应该排成一列

多列排布会分散用户的竖向注意力

2、标签顶部对齐

相比使用左对齐的标签，使用顶部对齐的标签后，更高比例的用户会完成表单的填写；顶部对齐的方式也更适用于小屏幕的手机。不过，在面临多选项多数据的输入时，尽量还是考虑左对齐标签，这样用户更容易一起浏览，

3、将标签跟输入框作为绑定的一组

把标签和输入框靠在一起，相邻输入框间设置合适的距离避免用户困惑

4、避免全部大写

全部大写的标签会造成阅读和浏览上的困难

5、如果可选项少于6个，全部显示出来

若将选项隐藏至下拉列表中，用户需要执行两次点击才能完成选择；这种方法最好在选项数量多于5个时再去使用，当数量甚至超过25个时，最好将搜索也融入其中

6、避免使用占位文本作为标签

使用占位文本确实能优化屏幕空间的利用，但其会带来一些可用性问题，详见这里：https://www.nngroup.com/articles/form-design-placeholders/

7、将复选框（或单选按钮组）垂直排列

将复选框垂直排列易于阅读

8、使“行为召唤”类按钮具有描述性

一个行为召唤类按钮应该描述其目标意图

9、在行内指明错误

在错误发生的地方告诉用户，并指明原因

10、在用户完成输入后再执行行内校验（除非在输入过程中执行有用）

用户输入过程中不要使用行内校验——除非确实能帮到用户——比如在设置密码、用户名过程中字符长度唱超过限制时

11、不要隐藏基本的帮助文本

要尽可能显示出基本的帮助文本。对于复杂的帮助文本，可以考虑在输入框获得焦点后将其放置于输入框旁边

12、主要选项和辅助选项要做区分

关于是否应该显示辅助选项甚至在哲学界引发了一场很大的争论

13、使用合适的输入框长度

输入框的长度应该令用户可预见能够输入的字符长度，面对有明确长度边界的字段时（比如手机号、邮编），最好这样做

14、避开使用*，标示出可选项

用户并不总是知道标签后的*暗示什么，还是最好将可选项标示出来

15、将关联信息分组显示

批量性的长表单通常令用户无法忍受，通过将相关信息分成合理的一组，用户能够更快的理解表单元素间的关联
 

译／三达不留点gpj

原文链接：https://uxdesign.cc/design-better-forms-96fadca0f49c#.q9x1ddl3n

　　“输入框表单元素应该合理分布，以便于使你的大脑可以处理表单框架和与之相关的页面区域”选自文章《HTML: the Definitive Guide》

　　工作中可能会遇到的问题，我们通过如下图示分析一下“标签”和“表单”的关系：