6941 浏览编者按：这篇文章来自资深设计师 Taras Bakusevych，长期从事金融和企业类数字产品的设计，在表单设计领域造诣精深。这篇文章梳理了他总结的 20 条表单和输入框的设计经验，实用性极强。
表单是 UI 界面中最为常见的元素，它通常是用来搜集和呈现一些数据、信息和特定的字段。在现实世界中，印刷的表格存在的时间更为久远，它们身上有很多设计可以作为重要的参考，帮助我们优化 UI 中的表单元素。
文本输入框是 UI 表单的基本组成部分，无论是表单还是对话框中，它都非常常见。文本字段是提供内容输入交互的核心组件，在进行布局和交互设计的时候，它其实有着不低的设计要求：它需要高效、显著且有良好的可访问性。
这些是文本输入框的关键元素：
文本输入框确实是用来输入文本内容的，但是不同类型的文本差别很大，特定类型的文本输入框都应该进行合理的优化，比如银行卡号。下面列举出了我们在 UI 设计的时候，最常用到的一些输入框：
（这里暂时不具体展开文本输入框的具体类型，因为在系列文章后面会单独列举的）
不同的文本输入的格式和类型是不一样的，通过合理的格式约束，能够方便系统更好地搜集数据，而避免错误出现。
通过不同的外观样式来呈现当前所处的状态，是输入框在 UI 界面中的必须做到的事情。非激活状态，光标悬停状态，禁用状态、选定输入状态、验证识别状态、出错状态等等。所有的输入框设计当中都应该保持一致，尽量不要进行反常规设计，避免和用户思维模型发生冲突。
绝大多数情况下，表单中用来说明的文本标签可以放在顶部，可以左对齐，也可以右对齐。但是最佳的样式通常取决于输入框的大小、位置和整个表单的样式，以及组件库和平台。每种设计都各有优劣。
在最初的 Material Design 的设计规范当中，使用下划线作为输入框并不是最佳的设计样式，有趣的是，有研究表明，用户更喜欢带有圆角的输入框。
当用户不太熟悉你所提供的表单之时，左对齐是一个不错的选择：
和左对齐的标签相比，右对齐的标签在测算数据当中，用户填写速读快了近2倍：
在多数情况下，这是最佳的选择，在移动端设备上效果更好，因为不需要太多水平空间。
表单那中文本字段可能的输入长度，和输入框本身长度应该一致，这样不仅在体验上一致，而且在视觉体验上更加愉悦。
在输入框中用作示意和说明的占位符，在输入之前可以给用户一个指引性的短期记忆。它本身应该是标签的补充。但是如果没有标签，占位符又消失了，用户可能会因为快速遗忘而不知道要输入啥。如果你需要极简的输入框设计，可以采用 Material Design 中所推荐的浮动式标签设计。
占位符有时候会让用户感到迷惑，标签是必不可少的。
「实时在线验证」可以解决用户输入信息的有效性的问题，而不是等到用户最后提交的时候再验证，使用这一技术并不会造成太大问题：
太多的填写内容会增加认知负荷，尽量让表单显得更加简单。
不要一次性将所有的信息和步骤都呈现出来，而是要在用户需要的时候再呈现，合理控制复杂性。
基于用户的不同选择，将表单字段中不相关的部分隐藏掉，或者新增，这种灵活的机制就是条件逻辑。这种方式可以帮用户规避掉很多不必要的填写内容，并且让填写过程更加个性化。
