推荐

资深UI设计师搞定输入框和表单的20个秘诀

2021-04-19 00:00 5863 浏览

编者按:这篇文章来自资深设计师 Taras Bakusevych,长期从事金融和企业类数字产品的设计,在表单设计领域造诣精深。这篇文章梳理了他总结的 20 条表单和输入框的设计经验,实用性极强。

表单是 UI 界面中最为常见的元素,它通常是用来搜集和呈现一些数据、信息和特定的字段。在现实世界中,印刷的表格存在的时间更为久远,它们身上有很多设计可以作为重要的参考,帮助我们优化 UI 中的表单元素。

1、充分了解文本输入框的构成

文本输入框是 UI 表单的基本组成部分,无论是表单还是对话框中,它都非常常见。文本字段是提供内容输入交互的核心组件,在进行布局和交互设计的时候,它其实有着不低的设计要求:它需要高效、显著且有良好的可访问性。

这些是文本输入框的关键元素:

  • 1、文本容器——可交互的输入区域
  • 2、输入文本——所输入的文本内容
  • 3、标签文本——告诉用户这个表单字段中要输入的内容属性
  • 4、占位符文本——输入信息的范例,用户后续需要用自己的内容替代它
  • 5、帮助和验证(可选)——提供上下文信息和验证信息
  • 6、前导图标(可选)——描述文本字段所需的输入类型和特征
  • 7、后缀图标(可选)——对输入内容进行控制,比如现实和隐藏

2、明确文本输入框的类型

文本输入框确实是用来输入文本内容的,但是不同类型的文本差别很大,特定类型的文本输入框都应该进行合理的优化,比如银行卡号。下面列举出了我们在 UI 设计的时候,最常用到的一些输入框:

(这里暂时不具体展开文本输入框的具体类型,因为在系列文章后面会单独列举的)

3、选择合理的输入格式

不同的文本输入的格式和类型是不一样的,通过合理的格式约束,能够方便系统更好地搜集数据,而避免错误出现。

4、根据状态和用户交互来改变输入框样式

通过不同的外观样式来呈现当前所处的状态,是输入框在 UI 界面中的必须做到的事情。非激活状态,光标悬停状态,禁用状态、选定输入状态、验证识别状态、出错状态等等。所有的输入框设计当中都应该保持一致,尽量不要进行反常规设计,避免和用户思维模型发生冲突。

5、选择最佳的文本框样式

绝大多数情况下,表单中用来说明的文本标签可以放在顶部,可以左对齐,也可以右对齐。但是最佳的样式通常取决于输入框的大小、位置和整个表单的样式,以及组件库和平台。每种设计都各有优劣。

在最初的 Material Design 的设计规范当中,使用下划线作为输入框并不是最佳的设计样式,有趣的是,有研究表明,用户更喜欢带有圆角的输入框。

6、输入框标签左对齐

当用户不太熟悉你所提供的表单之时,左对齐是一个不错的选择:

  • 优点:易于扩展,可以充分利用垂直空间
  • 缺点:标签和输入框之间的距离可能会过长,显得参差不齐,并且完成表单填写会耗费更多时间。

7、输入框标签右对齐

和左对齐的标签相比,右对齐的标签在测算数据当中,用户填写速读快了近2倍:

  • 优点:文本标签和输入框之间的距离固定,用户浏览扫视速度更快,完成时间更短文本标签和输入框之间的距离固定,用户浏览扫视速度更快,完成时间更短
  • 缺点:因为左侧参差不齐,整体扫读表单的时候不容易了解全部信息

8、输入框标签顶部对齐

在多数情况下,这是最佳的选择,在移动端设备上效果更好,因为不需要太多水平空间。

  • 优点:用户上下扫读即可快速捕获信息,并填写表单,更快完成
  • 缺点:纵向上需要更多空间

9、输入框长度应符合用户预期

表单那中文本字段可能的输入长度,和输入框本身长度应该一致,这样不仅在体验上一致,而且在视觉体验上更加愉悦。

10、占位符不能替代标签

在输入框中用作示意和说明的占位符,在输入之前可以给用户一个指引性的短期记忆。它本身应该是标签的补充。但是如果没有标签,占位符又消失了,用户可能会因为快速遗忘而不知道要输入啥。如果你需要极简的输入框设计,可以采用 Material Design 中所推荐的浮动式标签设计。

占位符有时候会让用户感到迷惑,标签是必不可少的。

10、帮助用户填写表格

  • 借助自动填写功能,帮助用户填写表单。用户在填写过程在自动查询匹配,提供建议,用户可以使用回车和方向键快速选择。
  • 使用自动建议功能,基于关键词查询相关短语,以下拉框形式呈现。
  • 使用预填充字段作为默认值,比如基于IP地址帮用户填写好国家和地区。这类解决方案很灵活多样,根据填写字段属性、功能,可以灵活处理。
  • 提供上下文信息。比如用户在转账的时候,提供余额相关的信息。

11、使用内联验证

「实时在线验证」可以解决用户输入信息的有效性的问题,而不是等到用户最后提交的时候再验证,使用这一技术并不会造成太大问题:

  • 可以将验证结果和错误提示靠近输入框呈现
  • 不用做的过于醒目,错误信息主要告诉用户如何解决问题,而不是让用户感到紧张挫败
  • 避免过早进行验证,在用户完成当前字段填写之后再进行,避免一直报错
  • 考虑使用更加令人愉悦的「积极验证」模式,增加愉悦感

12、尽量减少填写字段数量

太多的填写内容会增加认知负荷,尽量让表单显得更加简单。

  • 不要将名字和日期分成多个字段
  • 不要多次询问相同信息
  • 重复输入的内容尽量减少

13、隐藏不相关的字段

不要一次性将所有的信息和步骤都呈现出来,而是要在用户需要的时候再呈现,合理控制复杂性。

14、使用条件逻辑

基于用户的不同选择,将表单字段中不相关的部分隐藏掉,或者新增,这种灵活的机制就是条件逻辑。这种方式可以帮用户规避掉很多不必要的填写内容,并且让填写过程更加个性化。

分享:
相关内容
  • 如何设计小程序?来看这份超全面的指南!
    前言最近正好在做小程序相关的项目,发现现在关于小程序相关的文章还比较少,能吸收的运用到实际工作中的技巧也「比较有限」,所以我想着自己来尝试写一篇「相对全面和实战」的文章,来帮助到越来越多做小程序的设计师们。小程序的发展史2017 年 1 月 9 日,张小龙在 2017 微信公开课 Pro 上发布的微信小程序正式上线。2017 年 1 月 9 日微信小程序平台正式发布,在业界
  • 深度分析设计师能力模型(一) : 从心理学角度聊聊职业规划 ...
    这一篇,从心理学的角度结合「冰山模型」里提到的,最深层的人的心理「动机」,来分析作为职场中的我们,对于自己职业生涯该从哪些角度去理解和分析。(结尾附上性格测试量表及如何发现自己潜意识的文章地址)先来几个灵魂拷问:「我是谁?我想做什么?我能做什么?」「 我是谁?」- 了解自己笛卡尔从哲学思想里提出「我思故我在」表达了所谓的「自己」就是正
相关推荐
  • 如何设计小程序?来看这份超全面的指南!
    前言最近正好在做小程序相关的项目,发现现在关于小程序相关的文章还比较少,能吸收的运用到实际工作中的技巧也「比较有限」,所以我想着自己来尝试写一篇「相对全面和实战」的文章,来帮助到越来越多做小程序的设计师们。小程序的发展史2017 年 1 月 9 日,张小龙在 2017 微信公开课 Pro 上发布的微信小程序正式上线。2017 年 1 月 9 日微信小程序平台正式发布,在业界
  • 深度分析设计师能力模型(一) : 从心理学角度聊聊职业规划 ...
    这一篇,从心理学的角度结合「冰山模型」里提到的,最深层的人的心理「动机」,来分析作为职场中的我们,对于自己职业生涯该从哪些角度去理解和分析。(结尾附上性格测试量表及如何发现自己潜意识的文章地址)先来几个灵魂拷问:「我是谁?我想做什么?我能做什么?」「 我是谁?」- 了解自己笛卡尔从哲学思想里提出「我思故我在」表达了所谓的「自己」就是正
热门内容
  • 想做好线下物料?收了这份平面设计师必修的基础印刷知识
    如果一个设计师对印刷流程和工艺不够了解,那么作品落地时必将大打折扣,所以了解印刷技术方面的基础知识,是每个平面设计师的必修课。平版印刷平版印刷是将油墨印至橡皮滚筒,再藉由压力滚筒印刷至纸上。这是多种印刷方式中最常见的一种,印刷质量较好,图文精细、层次丰富,图像色彩的还原性好,大部分画册、海报、杂志、书刊、包装等都是用单张纸平版胶印
  • 如何设计小程序?来看这份超全面的指南!
    前言最近正好在做小程序相关的项目,发现现在关于小程序相关的文章还比较少,能吸收的运用到实际工作中的技巧也「比较有限」,所以我想着自己来尝试写一篇「相对全面和实战」的文章,来帮助到越来越多做小程序的设计师们。小程序的发展史2017 年 1 月 9 日,张小龙在 2017 微信公开课 Pro 上发布的微信小程序正式上线。2017 年 1 月 9 日微信小程序平台正式发布,在业界
  • 用经典的设计原则,深度解析闲鱼的用户体验设计
    今天我们主要从用户体验的部分原则来看闲鱼,主要以产品视觉设计四大原则、交互设计十大可用性原则、情感化设计来看闲鱼,今天先讲两个部分:视觉和交互的用户体验。其实主要是因为用户体验分为这个几个方面:视觉的感官体验,给用户带来的是视觉表现层的体验,所以我们把产品视觉设计四大原则来对照用户的感官体验。交互的用户体验,也就是产品设计中给用户
  • 资深UI设计师搞定输入框和表单的20个秘诀
    编者按:这篇文章来自资深设计师Taras Bakusevych,长期从事金融和企业类数字产品的设计,在表单设计领域造诣精深。这篇文章梳理了他总结的 20 条表单和输入框的设计经验,实用性极强。表单是 UI 界面中最为常见的元素,它通常是用来搜集和呈现一些数据、信息和特定的字段。在现实世界中,印刷的表格存在的时间更为久远,它们身上有很多设计可以作为重要的参考,帮助
  • 设计师们,别停留在以用户为中心的时代了
    在互联网的下半场,初期的各种红利被消耗殆尽,用户变得越来越难「伺候」,获取用户的成本也越来越高。这个时候我们不再像蓝海市场(指:当今还不存在的产业)时代,只要做好产品体验就可以轻松收获大批用户,为了生存和赚更多的钱,越来越多的企业开始全面数据化,定量测评每个部门的价值,以此「开源节流」。所以如果只是停留在以用户为中心的思路进行产品
联系方式
  • 400-1234-5678
  • 13333333333
  • test#qq.com