UI设计 | 文本字段和表单设计-UI组件你用对了么？超级实用
简单的规则将帮助你设计用户希望完成的表单
规范已经存在了很长时间，极大地简化了起草投诉和其他各种法律诉状的任务。随着信息及其处理的进步，收集数据的手段也在不断发展。由于印刷表格已存在多年，因此我们可以从其设计中学到一些技巧。
文字栏位剖析
文本字段允许用户在UI中输入文本。它们通常显示在表单和对话框中。文本字段组件设计应为交互提供明确的承受力，使字段在布局中可发现，高效填充且可访问。
以下是基本Text字段的关键元素：
1. 容器 -可交互输入的区域
2. 输入文本 -在文本字段中输入
3. 标签文本 -告诉用户给定表单字段中属于什么信息
4. 占位符文本 -是所需信息的描述或示例，被输入文本替换在用户提供之后
5. 帮助程序或验证文本（可选） -提供其他上下文或验证消息
6. 前导图标（可选） -描述文本字段所需的输入类型
7. 尾随图标（可选） —对输入的文本的附加控制，例如清除，隐藏/显示等
文字栏位类型
它们中的大多数基于基本文本字段，这些文本字段经过修改以更好地处理特定类型的信息，例如信用卡号。以下是我们创建的整个UI中最常用的输入类型的一些示例：
（我们具体不是在讨论几种输入类型，例如复选框和单选按钮，因为我们将在本系列的后面部分介绍它们）
对你收集的数据使用适当的输入类型
为请求的数据提供正确的文本字段类型将帮助用户以正确的格式输入信息并避免错误，从而使过程尽可能简单高效。
文本字段必须根据状态和用户交互来更改其外观
这可以通过提供视觉提示来传达文本字段的状态来完成。输入文本字段可以具有以下状态之一：不活动，悬停，禁用，集中，验证，错误。所有州应清楚地区分，并在整个表格和申请中保持一致。最好遵循最佳实践，以不挑战形成的用户思维模型。
选择最佳的文本字段样式
通常，你将使用三个主要的标签定位选项：顶部，左侧和右侧对齐。最佳的样式取决于关键目标和表单的大小，组件库和设计平台。它们都有优点和缺点。
原始材料设计指南中流行的下划线输入不是最佳选择。我已经根据大型材料设计研究的建议进行了修订，我建议你检查一下。有趣的是，同一项研究表明，用户更喜欢带有圆角的输入。
左对齐标签
当用户不熟悉所请求的数据时，这是一个不错的选择
优点：易于扩展的标签，充分利用垂直空间
缺点：标签和相应输入之间的距离过长和可变距离会增加完成时间
右对齐标签
与左对齐标签相比，完成时间快了将近两倍
优点：文本字段标签和输入位置紧密，限制了眼睛移动的次数，从而缩短了完成时间
缺点：较难快速扫描表单并了解所需的所有信息
顶部对齐的标签
在大多数情况下，最快的完成时间和全面的最佳选择。在移动设备上效果很好，因为它们不需要大量的水平空间
优点：允许用户单眼移动即可捕获输入标签和输入文本，最快的完成时间
缺点：需要更多垂直空间
文本字段的长度应与预期的用户输入成比例
为表单中的所有文本字段使用相同的输入长度会使它们在视觉上令人愉悦，但很难完成。
占位符不能替代标签
消失的占位符文本会拉长用户的短期记忆。没有标签，用户将无法在提交表单之前检查他们提供的所有信息。如果你需要极简的表单设计，则可以使用“材料设计”浮动标签方法。
表单内的占位符文本有时会使用户感到困惑，最好在字段外使用提示文本。
帮助用户填写表格
使用自动完成功能帮助解决部分查询。这 会在你输入的输入框中发生，你可以按Enter或“右箭头键”接受它。
使用Auto-Suggest搜索几乎无边界的相关关键字和短语列表。该 列表以下拉形式显示为多个建议列表。
预填充字段并使用智能默认值。通常，你可以通过IP或地理位置轻松检测用户所在的国家和城市。根据最常见的方案和分析，你可以定义默认情况下应选择的内容。电子商务是一个例外，请勿预先选择与购买相关的任何偏好，例如尺寸或颜色。
提供上下文信息。如果你知道为了做出正确的决定或避免错误，用户在进行转帐时将需要一些其他信息，例如帐户余额，请随时提出。
使用内联验证
“实时在线验证”是在用户浏览表单时实时检查用户输入的有效性，而不是在用户提交表单时一次性检查输入。正确实施它不会造成更多危害：
显示靠近输入的验证消息，并一起显示
不要大喊大叫，错误消息应该告诉用户如何解决问题，而不是责怪他们
当字段在完成输入之前被标记为无效时，请避免“ 过早验证”
考虑使用“积极验证”，可以增加一种愉悦感和进步感
减少字段数
它将消除视觉和认知负担，并且看起来更加简单。
不要将全名和日期之类的文本分成多个字段
不要多次询问相同的信息
使用标签和提示复制以尽可能地缩短它
隐藏不相关的字段
通过逐步公开信息，我们仅揭示要点，并帮助用户仅在需要时才管理复杂性。
使用条件逻辑
条件逻辑允许根据访问者的答案自动显示或隐藏字段，并以表格形式跳过页面。这种方法不仅可以减少字段数，而且可以使填写过程更具个性化和对话性。
组相关领域
简化复杂表格的最简单方法之一就是开始对相关字段进行分组。格式塔心理学中有多种分组原则，可以使项目感觉相关：接近度，相似度，连续性，闭合性和连通性。将数十个非结构化字段分组为几个可管理的集合将显着提高表单的可用性。
避免使用多个列布局
一列布局为用户创建了一条清晰的完成路径。使用多列表单布局的后果包括用户跳过他们实际要输入数据的字段，将数据输入到错误的字段中或者只是停下来而可能导致放弃。
将复杂的表格分为几个简单的步骤
有时即使删除了所有不必要的内容，某些表格也会变得很大。将大型任务分解为一系列较小的任务看起来容易得多，并促使他们将过程执行到最后。
显示步骤并以视觉方式传达用户的进度，这可以提高满意度并激励他们前进
不要细化表格，太多的步骤将无济于事，只会惹恼用户
对关键信息进行总结以减轻焦虑，最后需要进行复查
最小化向导外部的导航能力
如果表单足够大，可以分成多个步骤，则应为它分配一个单独的，清晰集中的空间。公开常规导航或任何会破坏该过程的链接只会造成混乱。我也建议不要在小型弹出窗口中使用多步骤表单。
显示适当的键盘类型
Android或iOS提供了几种不同的键盘类型，每种类型的键盘都旨在促进不同类型的输入。为了简化数据输入，在编辑文本字段时显示的键盘应适合该字段中的内容类型。注意键盘将出现的位置。为了避免不必要地引入滚动，请将文本字段放在上方区域。
停止荒谬的密码创建设计
允许用户取消隐藏密码，而不是要求他们输入两次密码，这对于生成密码的应用程序也将更有效
始终显示密码要求，并指示用户在满足所有条件方面的进度。尝试简化对用户的要求。
使用强度表鼓励用户创建更强的密码
分享最新鲜的设计文章！提供最优质的设计服务！
合作微信：2762076706
Our Work ★★★★★
平面设计 / LOGO设计 / UI设计 / 交互设计 / 三维建模 /
海报设计 / 易拉宝 / 三折页 / 宣传单 / 画册 / 产品包装 /
网站设计 / APP设计 / H5设计 / ICON设计 / 小程序设计
微信扫一扫二维码关注解锁更多精彩设计
