不熟悉文本框交互设计？来看这篇全方位拆解！

文框的出现几乎以追溯到视化互诞生的源头，是一个经典不的「鼻祖」控件。我们每天在和文框打道，不论你是产品设计者还是用户。

越显易见的东越易被我们忽略掉细节。今天就家一起梳理一下文本框。

文本框的拆解

文本框（Text Fields）根据 Material Design 指导规范，被拆解七部分。分别：

• 容（Container）
• 前导图标（Leading icon）
• 标签文本（Label text）
• 输入文本（Input text）
• 尾随图标（Trailing icon）
• 激活指示（Activation indicator）
• 帮助文（Helper text）

然，MD为我们展示是已经经过其团队长期摸索后，基于其平台规范下标准样。想要探索文本框交互演变，我们是要回溯到文本框最初模样。

这是个文本框最基础样了， 个标签文本+容，已经基本可以确保用户传递文本框最观信息。

但今的文框已经演变出形形的样式和互形式，究竟MD的文框是何演变到今天番样子？下面我根据个人的拙见，一步一步从场进行分析。

基础的文本框布局方式

我自认为，激励设计师不停探索文框新的互形式的根原因之一，一定包含总让人头疼的排版问题。在决基视问题之，才是思考何设计文框来 提升用户的填写和使用效率。

例如面我们所看到的基础的文本框样式，如果简单行单列布局，自然然会出让众多设师纠结的一问题： 标签文本究竟应该如何对齐？

如果标签文本采用 右对齐，标签文本的短问题易导致左侧的视觉隐形界错乱，用户的规律眼动易被打乱；

如果标签文本采用左对齐，文本的长短问题会导致部较短标签文本容器间距增大，让用户从左至右浏览的效率降低，并且起来不够协调。

于是乎本框的布方式有了进一步的演变：标签本与容器顶端对齐。

顶端对齐的方式使得户眼变得十分规律，竖直向浏览可捷地解标签本并进行填写，本的长短问题再成为干扰设计师进行版的一个纠结点。

纵布局是把问题迁移到了另个维度，那是在表单数据量过多时，纵布局会使纵空耗损增加，用户需要不地滑动页才能实现表单完填写。

么看来， 文框的局需要方位评估标签文长度、表单数据量等问题，才能对具场进行有效设计。

文本框的改良

当文框横向局或是纵向局很难决具场问题的时，更新颖的文框互形式就出现。

初的演变形式众多的应用始采用导图标替标签文本，使用图标可以效解决标签文本导致的排版错落问题。

这种方案轻表单中较常见，一般都表单内少、用户对于场景的熟悉度较高的景当中（例如登录场景）。

因为每个用户对于图标的认知性存在差异，在生疏景或表内容过多的情况下，图标容易导致用户对文本框息产生更多的认知成本。所以用图标来代替标签文本的普适性其实并不高。

于是后来 iOS人机交互规范 和 MD规范 都给设计师了一条指导建议： 当占位符字中包含必要容时，可合地使占位符来承载标签本。

例如 iOS 讯录新增联系，采用了占位符承载标签文本。

这形样也存在个弊端：用户旦输入内容后，占位符被内容文本填充覆盖了，有时用户会忘记所填写信息是关于什么内容，必须要空文本进新确认。于表单内容繁多或要内容需要谨慎填写场景，这样交互其实是有些不妥。

是乎，类似MD的指导规范下样普适高的文框形式就诞生。 采用占位符承载标签文，并且在用户填写信息时，标签文始终见，由占位符转移到文框顶部。

一文框互形式的诞生，不论是对排版空间的节省、遵循用户眼动习惯、微动效提升文框趣味等方面，得到一定提升。并且许应用开始进行借鉴效仿。

其实以这种巧用占符的场景已越越常见了，占符已不再仅仅用承载无用信息或提示性信息，也可以用于承载 默认，帮用户自动填充， 提高用户填写信息的效率（例如手游当中，创建账时系统帮玩家默认填充一可用昵称）。

但填充默认值的法也不仅仅局限于提升用户体验和填写效率，甚至也被运用了一些商业景中。

例如淘宝、京东等电商平台，将商名称作为占位符填充在搜索栏中，一方面给推荐商增了曝光；另一方面，在户直接点击搜索时，将会当前占位符容进行搜索，达到为推荐商引流的效果。

合理的反馈

理的反馈机制对于提升用户填写文本框效率也起着重要的作用，MD规范中的帮助文本不仅仅是告诉计者可以用于指导用户该如何正确填写文本框息，也为反馈提示提供了展示空间。

MD的反馈状态可归纳为几种：

在这里我大概总结了一本框的负反馈示信息，希望在你设计表单的时候，够帮助到你对负反馈示状态进行走查（可全，补充）：

• 内容是否为空（例：必填项不能为空）
• 二次确认容是否一致（例：确认密码与首次输入一致）
• 内容是否合规 （例：昵称含不文明词语）
• 内容式是否合规（例：昵称中不能包含特殊字符）
• 内度否合规（例：手机输入不足11）
• 内容的是否符唯一性（例：验证码输入错误）

及时给予用户负反馈，可以让用户清晰排查所发的错误。但交互设讲究「以人本」，某些场景中，当用户所填写的信息合理的，及时展示 向反馈也必的。

例如，部应用在用户创建账号的景中，当用户输入账号息后，系统将立刻检索用户的账号是否已存在在当前数据库中，避免用户忘记已创建过该账号而进行重复创建的徒劳步骤。

所以不要狭隘地认为MD所给的帮助文本只能用于「批评」用户（负反馈）， 当用户做了正确的事，也应该适当地激励用户，这也正符了尼尔森可见性则。

大注作者微信公众号：「UCD耍」