设计更好的表单

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

表单应该是单列的

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

标签应该顶部对齐

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

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

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

杜绝大写

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

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

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

不用要占位符替代标签

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

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

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

文字要能够触发行动

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

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

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

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

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

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

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

区分主要动作和次要动作

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

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

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

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

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

把相关字段放在一起

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

为什么要问用户?

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

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

有趣很重要

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,423评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,339评论 1 289
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,241评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,503评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,824评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,262评论 1 207
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,615评论 2 309
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,337评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,989评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,300评论 2 240
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,829评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,193评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,753评论 3 230
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,970评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,708评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,295评论 2 267
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,207评论 2 258

推荐阅读更多精彩内容

  • 原文作者:Andrew Coyle 原文链接:Design Better Forms 无论是注册流程,多图递进,或...
    ShusQ阅读 218评论 0 1
  • [译文]设计更好的表单(常见错误&如何解决) 字数525阅读639评论16喜欢25 无论是连贯试、分布式,亦或是单...
    匡亮UX阅读 455评论 1 6
  • 无论是登陆,分步骤的流程还是单调的日期输入,表单设计都是其中最重要的部分。这篇文章主要分析了表单设计中哪些是常用和...
    瓦力UX阅读 293评论 0 1
  • 无论是连贯试、分布式,亦或是单调的数据输入界面,表单都是数码产品的重要组成部分。这篇文章聚焦在表单设计中常见的该做...
    Z_Yuhan阅读 1,919评论 13 43
  • HTML表单 在HTML中,表单是 ... 之间元素的集合,它们允许访问者输入文本、选择选项、操作对象等等,然后将...
    兰山小亭阅读 3,358评论 2 14