| 设计表单的知识点 | |
| 【返回本版】 【发表帖子】 【回复帖子】 | 浏览量 1064 回帖数 0 |
 |
lanlan123 等级 ☆ 0 楼 发表于 2019/9/9 11:38:22 编 辑 |
|
|
表单是产品设计中的重要组成部分，如果说弹框的主要作用是完成信息反馈，那么表单的主要作用就是完成信息录入。任何一个表单都可以被拆解成三个最基本要素：标签（标题）、输入框和按钮。 标签 根据标签所处的位置，可以将其分为左标签、顶部标签和行内标签。 1.左标签：左标签在目前来说是最常见的一种标签样式，但是这并不意味着我们可以无所顾虑地使用它。以手机端为例，手机端的屏幕尺寸（宽度）有限，左标签会占据屏幕较大的空间，此时右边的输入框就可能无法展示完整的信息。 2.顶部标签：顶部标签是指位于输入框上方的标签，这样输入框就可以独占整个页面，信息可以得到更完全的展示。 但是这种布局方式也有缺点：会占据更多的纵向空间，之前一屏就可以展示的内容，现在用户需要滑动页面才可以看完。 3.行内标签：行内标签又可以被看成是输入提示，其样式看起来很适合手机端的表单设计，因为它可以极大地节省页面空间。但是一旦用户点击切换到输入状态以后，就看不到这些标签了。如果操作提示字数很多，例如密码规范，那么用户记忆会很吃力。我们可以在调起的键盘顶部加上提示，减少用户的记忆成本。 但是，如果表单项目过多，则用户在填写的时候很容易串行，可能会出现把家庭住址填到毕业院校一栏中的情况。更严重的是，用户因为无法看到标签，这类错误是无法被检查出来的。为了解决这个问题，我们可以在行内标签前加一个图标来标识这个列表项，图标所占据的空间不会太大，而且会提高页面的美观性。 当表单项目过多时，我们要对其进行整合分组来提升内容的可读性。 输入框的作用是供用户完成信息录入，这里我们的设计思路是如何提升信息的录入效率。容错性设计：在理想状态下，用户填写完表单信息，然后点击「提交」按钮，系统显示提交成功。但是，现实情况却是用户在填写过程中经常会发生错误，那么如何将容错性原则融入表单设计中呢？ 首先我们需要给予用户足够的操作提示，日期录入就是最典型的例子。不同的地区对于日期录入的格式也不一样，「02/12/2019」到底是2019年2月12日还是2019年12月2日？如果我们不提示用户，用户就不知道应该怎么输入。 为了避免用户犯错和提升用户的信息录入效率，我们可以提供自动完成录入功能，当用户在文本框里输入时，系统可以猜测可能的答案，显示可选列表，避免了用户手动输入造成的错误。 按钮：表单中的提交类按钮，其实在很多表单中，不是所有的信息都需要用户手动录入的。以前面提到的邮政编码为例，只要用户输入了地址，系统就能获取邮政编码，相关信息是可以直接回显的，用户没有看到此类信息的必要性。所以，对于一些重要性不是很高、不强制用户看完的表单项目，很适合使用这类底部悬浮按钮。最常见的就是各种协议页。可能在这里提到的一些技法过一段时间就会落伍了。要成为一名优秀的设计师，必须具备持续学习的能力。更多文章就在蓝蓝设计每日一贴，为众多优秀企业提供卓越的UI咨询、竞品分析、交互设计、UI界面设计、嵌入式显示屏界面设计开发、图标icon设计、大型网站设计。 欢迎访问,开始愉快的合作! 网站：www.lanlanwork.com 全国统一客服热线：400-608-6026 公司邮箱:weibaobei@163.com  |
||
| 1 |