用户界面是网络和应用程序实现人机交互的最重要形式。他们无处不在，注册、订阅服务、客户反馈、结账等都会用到，交互界面的存在实现了用户与企业的对接，用户通过交互界面向计算机输入信息、进行操作，计算机则通过交互界面向用户提供信息，以供阅读、分析和判断。开发人员应该特别注意改善交互界面的可用性与可操作性，因为一个细致有效的界面设计能有效的提高用户的体验速度，完成窗口的响应。

在这篇文章中，你会看到一些实用的建议，这些建议都是从可用性测试，现场测试，眼睛跟踪和用户实际投诉中摸索出来的，相信这些建议将会成为你设计人机交互界面的出发点。

1、交互界面具备逻辑性，只问必要问题

• 交互界面是人机的对话形式，和任何其他对话一样，界面都应该表现出用户与应用程序之间交互的逻辑性。你应该：直观的体现出问题的顺序，你应该从用户的角度按照一定的逻辑提问，而不是按照应用程序或数据库的顺序。保证直观的顺序能让一组问题到另一组问题之间的连接更像是一次对话。
• 在一个直观的序列中添加顺序选项（例如，一周按照星期一，星期二……的顺序）。如果是那些没有直接意义的序列，那就按照字母顺序排列。
• 总是问自己为什么，哪些信息是用户必须填列的。记住，删除不必要的问题，减少用户的工作量，提高完成效率。

2、单列布局

多列布局的问题可能会造成用户理解上的不统一。如果界面上有水平相邻的字段，用户就会形成Z型浏览模式，这种浏览模式会降低个人的理解速度和路径的完成速度。但是，如果字段都是按照单列布局的，那浏览的路径是根据网页一路向下的直线型。因此，不要把界面分成好几列，一行只问一个问题即可。

http://jiasuhui.com/wp-content/uploads/2016/08/3.1.jpg

左：两列布局的浏览模式。右：单列布局的浏览模式。

3、减少输入界面的数量和用户的输入字数

最大限度地减少输入字段的数量，减少窗口的加载量，尤其是要求获得大量用户信息的时候。

http://jiasuhui.com/wp-content/uploads/2016/08/2.png

保持尽可能短而简单的形式。图片来源：lukew

但是，只是最大限度地减少输入字段的数量是不够的，你也应该注意到用户输入数据的工作量。打字具有很高的交互成本，即使是一个完整的键盘（甚至更多的是在触摸屏上），也是很容易出错且耗时的。所以尽量减少打字形式，可以使用复选框、单选按钮或下拉菜单来限制容易出错的选项的数目，减少用户出错的概率。

4、输入字段位数的匹配

Baymard研究所的可用性研究发现，如果一个字段过长或过短，用户会开始怀疑他们是否正确理解标签。尤其是对于那些不寻常的数据或技术领域的标签，比如CVV（信用卡验证码），这种情况会更多。

http://jiasuhui.com/wp-content/uploads/2016/08/3.4.jpg

图：Skype的名字、信用卡号码、信用卡验证码字段都太长

为了实现更好的操作性，你应该调整字段的宽度，让它刚刚好包含输入的所有字符（用户应该能够看到他们的全部输入位数），但不超过标准宽度。

5、为每个输入字段贴上标签

用户浏览你的窗口是多么不容易，如果您的窗体很难浏览，用户需要更长的时间来完成它。避免这类麻烦方法是让你的界面从用户第一次看见到完成它都能快速的浏览。Matteo Penzo的文章中暗示了位于输入框顶部的标签位置能让用户浏览的更快。

http://jiasuhui.com/wp-content/uploads/2016/08/4.5.jpg

左对齐的标签、右对齐的标签和顶部的标签。图片来源：uxmatters

如果你想让用户尽快的浏览完页面的话，顶部对齐的标签是最好的（注意：我不是说'完成'，只是'浏览'）。顶部对齐的标签的另一个优势是不占用太多的水平空间（与左或右对齐的标签相比），这使得不同大小的标签更容易排版，适用用户的界面（尤其适用于有限屏幕的手机页面）。

6、宽松的格式

一些任务确实需要用户输入非常精确的信息，但迫使人们以一种特定的格式提供这种信息时则会妨碍可用性原则。如果你要求用户输入一种格式的数值信息（如电话号码），那可以更为灵活一些，设计的屏幕可以识别多个输入的格式和方式，另外，为防止出错，可将输入信息转化成更易浏览的方式。

http://jiasuhui.com/wp-content/uploads/2016/08/6.png

7、不使用占位符文本作为输入字段的标签

占位符文本坐落在表单域时，通常有一个额外的提示说明的作用，例如为某一特定领域所需的信息。当用户在输入框内编辑时，这些提示通常会消失。

http://jiasuhui.com/wp-content/uploads/2016/08/7.png

一些设计师会利用占位符文本来替代字段标签，减少页面上的内容，或缩短表单的长度。虽然这种方法可以很好地适用于简单的形式（例如，登录窗口，其中包含两个字段），但是，当要获得更多的用户信息时，这种形式却很烂。为什么这种方案不利于常规的表单：

• 一旦用户在文本框内点击，提示标签就会消失，因此用户无法确认他/她改写什么内容。
• 当用户看到文本框内的东西，他们可能会认为它是默认值，可以忽略它。

如果你还想在界面中使用占位符文本，那将占位符文本作为一个浮动的标签。占位符文本默认显示的，但是一旦输入字段，占位符文本就会淡出，顶对齐标签就会显示。

http://jiasuhui.com/wp-content/uploads/2016/08/3.8.gif

浮动标签能确保用户填写正确的字段。图片来源：Dribbble

8、区分可选的和必需的字段

首先，正如我之前说的，尽量避免表单中的可选字段。但是，如果你要用到它们，你至少应该清楚地分辨哪一个输入字段是可选的。将窗体限制为只有1个或2个可选字段，并将它们清晰地标注为可选的，惯例是使用“可选”提示，因为它比长窗体更为可取。

9、避免“重置”按钮

“重置”按钮几乎就是一个罪恶按钮。在网络界面中，意外“重置”的风险比真的需要“重新开始”的可能高很多。在现实中，这个按钮几乎从来没有帮助到用户，反而总是伤害到他们。如果能取消所有不必要的“复位按钮”，用户体验估计会更好。

http://jiasuhui.com/wp-content/uploads/2016/08/3.10.gif

10、提供高度可见和特定的错误信息

在理想世界中，所有的用户都会填写那些必要的信息，并成功有效地完成任务。但在现实世界中，用户往往会犯错误。这就是需要帮助并验证的地方。10条可用性的启发式的建议之一，就是对用户温柔灵活和清晰的沟通错误。因此，在应用程序中的错误处理应该具有以下属性：

在用户提交信息之后，在确定的时间内通知用户提供的数据的成功或失败，因为用户不喜欢在填写整个表格后停留在提交界面，他们已经犯了一个错误。

http://jiasuhui.com/wp-content/uploads/2016/08/11.png

即时内联验证信息，立即通知用户提供数据的正确性。

• 错误信息必须是明显的，用一目了然的颜色标注，用图标和文本来突出问题区域。

http://jiasuhui.com/wp-content/uploads/2016/08/12.png

图：Facebook使用颜色，图标和文本来突出显示在注册窗口的问题区域。

• 如果需要的答案是在一个特定的格式，事先说明。并在错误区域的附近，如上方或下方清晰的表示出正确的格式说明。

http://jiasuhui.com/wp-content/uploads/2016/08/13.png

• 在错误发生后，永远不清除已完成的字段！

结论

用户在填写表格时可能会犹豫，所以你应该使这个过程尽可能容易。我们要让表格设计的更优化，稍稍的改变，如分类相关字段，并指示每个字段的输入信息，这些都可以显着增加表单的可用性。设计上的改进能加快用户的完成效率，减少试验次数，减少用户的浏览，让用户的体验更加完美。

谢谢!

本文来自：加速会

原文地址：http://jiasuhui.com/archives/92606