设计更好的表单

作者: Ironben | 来源:发表于2016-07-14 12:32 被阅读166次

无论是注册流程、多页面的步进还是单纯的数据录入,表单都是最重要的组件之一。这篇文章将会介绍在表单设计中我们该做什么,不该做什么。需要说明的是,本文只是一篇常规的设计指南,实际生产过程中,每一条规则都可能有例外。

表单应该是单列的

多列的表单有损用户的垂直注意力

标签应该顶部对齐

相对于左对齐的标签,用户更有可能完成标签顶部对齐的表单。另外,顶部对齐的标签在移动设备中的显示效果通常也更好。不过对于有大量字段需要输入的表单,可以考虑采用标签左对齐,这样可以减少表单高度,让字段一目了然。

标签和对应的输入控件要在视觉上形成一组

标签与输入控件靠近一些,确保用户不会产生疑惑

杜绝大写

大写的单词会增加阅读难度。当然,中文没这毛病

如果选项小于6个,将他们全部展示出来

把选项放在Select中要求用户进行两次点击。只有当选项数目超过6个,才考虑将他们放入select中,如果超过25个,还需要为下拉控件提供搜索功能

不用要占位符替代标签

用占位符替代标签很诱人,考虑到能节省不少控件。但这样做会导致很多可用性问题

checkbox和radio采用垂直布局,方便扫视

采用垂直布局,用户更方便扫视

文字要能够触发行动

文字要站在用户的角度去描述,增加用户采取行动的机会

错误提示要与对应的控件在一行

当错误发生时,在错误发生的位置后面紧跟错误原因

在表单填写完成后使用内联验证

不要在用户输入没有完成时对表单进行验证,除非验证提示能对输入提供指导作用,比如实时统计用户名或者密码的字符长度

不要隐藏基本的帮助性文字

对于简单的帮助性文字,直接将其显示在对应的控件周围。对于复杂的文字描述,可以考虑在控件获得焦点后置于其后

区分主要动作和次要动作

现在甚至在讨论次要动作是否应该包括在内

输入控件的长度要反映出内容的可接受长度

对那些具有固定长度的字段请采用该方法,比如电话号码、邮编等。

不要再使用 * 标记必要字段,用“可选”把非必填字段标记出来

虽然*是一个常用的标记必要字段的符号,但仍不能保证所有的用户都能理解其含义,更好的选择是用文字标出非必填字段

把相关字段放在一起

有很多字段的表单可能会让用户不知所措,将相关的字段放置在一起有助于用户更快地进行思考和响应

为什么要问用户?

对于可选的内容,我们应该考虑采用其他的办法去搜集这部分信息而不是直接向用户提出。始终问自己这个问题是否可以通过已有数据推算得到、是否可以推迟甚至完全不需要。

数据获取正逐渐自动化,现在的移动设备和可穿戴设备可以在用户毫不知情的情况下获取大量信息。始终思考是否能购利用社交网络、对话式的UI设计、短信、电子邮件、语音、光字符阅读器(OCR)、位置、指纹和生物特征等来获得我们想要的信息。

有趣很重要

生命短暂、没人想把宝贵的时光浪费在填写表单上。所以,表单务必要友好、有趣,能慢慢吸引用户。要能打破常规,对设计者来说,将公司品牌传达给用户并激发出情感共鸣是自己的重要职责,如果做得好,将会在很大程度上增加用户完成表单的可能性。

相关文章

  • 设计更好的表单

    无论是注册流程、多页面的步进还是单纯的数据录入,表单都是最重要的组件之一。这篇文章将会介绍在表单设计中我们该做什么...

  • 设计更好的表单

    [译文]设计更好的表单(常见错误&如何解决) 字数525阅读639评论16喜欢25 无论是连贯试、分布式,亦或是单...

  • 译文 | 设计更好的表单

    无论是登陆,分步骤的流程还是单调的日期输入,表单设计都是其中最重要的部分。这篇文章主要分析了表单设计中哪些是常用和...

  • 设计出更好的表单

    无论是注册流程,多视图步进或单调的数据输入界面,表单都是数字产品的设计中最重要的组成部分之一。本文重点介绍了常见的...

  • 「译」设计更好的表单

    欢迎关注我的微信公众号:Shyanne 主要介绍了设计师经常会犯的错误以及如何来修正这些错误。 无论这是一个注册流...

  • Bootstrap - 表单1

    基础表单 表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素...

  • 如何设计出更好的表单?

    如何才能设计出更好更实用的表单呢? 无论是注册流程、多视点布局、或者是单调的纯数据录入界面,表单都是其中最重要的组...

  • 关于表单设计的思路

    表单设计的典型流程: 数据建模---------------设计表单------------布局---------...

  • 更好的设计表单和登录框

    Design Better Forms and Log-In access 你觉得一个人平均每天要输入登录框多少次...

  • 设计更好的表格

    设计更好的表格 设计师常犯的错误以及如何解决这些错误 无论是注册流程,多视图步骤还是单调数据输入界面,表单都是数字...

网友评论

    本文标题:设计更好的表单

    本文链接:https://www.haomeiwen.com/subject/cxkejttx.html