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