表单-设计完全手册

原创文章 分类: 经验/观点 版权:
3156 119 47 8
更新于:2018-11-27
31.3
编辑推荐

表单设计可以说是设计界一个老生常谈的话题,针对它的重要性自不必多言。本文结合自身经验和所看所学所得总结至此。


从“因子(构成要件)”的角度,将表单逐一拆分,从而能够全面的看待。

如下,大卸八块,一一道来:

  1. 结构
  2. 标签
  3. 输入字段
  4. 占位符
  5. 帮助
  6. 操作
  7. 验证
  8. 反馈


一. 结构 Structure
字段的顺序、节奏、外观和组织

只问所需

必要而不是全部,简化表单,或许是优化表单的最大建议。简化的办法之一就是追溯每个字段为什么需要,是否是当前最相关的信息,如果它是可选的,最好不要显示。

有理排序

先问什么,再问什么,前后字段根据相关性循循渐进。

从易到难

从用户相对无抵触的信息开始逐渐到隐私的信息,而不是一开始就让用户萌生退意。

组织相关

在繁多字段的情况下,将相关字段按照顺序进行分类组合,并通过增加一些额外的空间或者组标题将它们分成语义组,增加了页面呼吸和节奏感,从而帮助用户更加轻松完成表单。

组织相关

单列呈现

单列,只需眼睛沿着自然的方向从上至下,便于用户理解操作。多列,眼睛需要按照“之”形进行浏览,从而增加浏览和理解认知的时间。
当然单列呈现还是多列,并非绝对,需根据页面空间,表单内容及性质共同决定。

单列呈现

提高对比度

提高颜色的对比度,你的用户群体可不是高清屏,飞行员。

提高对比度


二. 标签 label
标签告诉用户需要输入什么

名词标签
名词具有很好的描述性且简洁明了。常用的字段可以使用大家熟悉的图标代替文本。

标签位置

左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签

标签位置

标签位置

多数情况下,谨慎使用内联标签,在用户输入后,内联标签会消失,用户无法判断输入的内容是否符合,当然在用户熟悉且简单的字段的下可采用(例如登录中只有账号和密码)。针对以上问题,你可以采用内联浮动标签解决内联标签在输入后标签消失的弊端。
表单的标签位置
为什么占位符有问题的11个原因


三. 输入字段 Input
承载用户输入的区域

自动对焦(PC端)
进行表单页面,自动对焦第一个输入字段可以引导用户开始进行输入。

提供默认值
可根据已知信息,帮助用户预判内容。例如可以通过IP检测出用户的地理位置

保存输入的数据

记住用户已经填写的内容,以防万一(例如页面刷新),从而避免用户需要再次输入而放弃。

字段约束
为有要求的字段设置限制。例如,最大字符数,电话中数字、字母符号等要求,从而有效的避免脏数据。

格式化(掩码)输入
提供输入格式,帮助用户理解所填内容且减少错误发生。常用于手机号码、日期、银行卡和邮编等

匹配键盘(移动端)
提供合适的键盘,帮助用户快速完成。
使用 HTML5 input 类型提升移动端输入体验

区分可填
如上所述,尽量避免可填字段。如果不可避免,应该做明确区分。根据经验,可填和必填的数量少的做标记说明。
常规做法:必填,使用“*”星号符;可填,使用“(选填)”。


四. 占位符 Placeholder
标签的额外描述,帮助用户了解可输入的数据类型和格式提示

颜色区分
它是内容提示,而不是内容。

不是所有输入框都需要占位符
占位符是对输入内容有特殊要求的提示或提醒,也可理解为对标签的补充,并不是所有的输入框都需要占位符。

输入后消失
不要在鼠标键入后消失,而是在输入内容后消失,这样可以在用户还未输入的时候,依然帮助到用户。
如果提示特别复杂或者重要,请使用帮助,它会一直显示在那里。


五. 帮助提示 Tips
说明要求,解释原因,甚至帮助回忆

三种方式

常驻、按需提供、偶尔需要

三种方式

三种方式

给予解释

当前需要用户填写相对隐私的信息时,请给予解释这么做的原因及目的。

六. 操作 Submit
对当前用户输入数据的提交等动作

区分主次
主操作,是我们期望用户的使用途径,应该在视觉上与次操作做出明显的区分,以突显号召用户点击。

区分主次

合理放置
合理放置操作的位置,可根据表单的排列方式合理摆放,避免居中。例如表单采用的是顶部对齐,你可以将操作与输入字段左对齐,这样用户在完成输入的时候,轻松地看到操作按钮。

合理放置

准确命名
清晰可预测。应该准确地描述用户点击按钮后会发生什么。

准确命名

行动号召
按钮应始终带有强烈的动词,鼓励用户行动。
为了给用户提供足够的上下文,在按钮上使用 {动词} + {名词} 格式,除了保存,关闭,取消或确定等常用操作。

禁用操作
在未完成必填字段,禁用操作按钮,通过直观的视觉上告诉用户是否完成了要求,并在恰当的时刻(表单填写完成,按钮被激活)将用户的视线吸引到按钮上。


七. 验证 Required
对用户输入数据的验证反馈

前端验证和后端验证
前端验证至不需要服务器上传验证的数据,就可以判断,例如手机格式等;但是要记住在用户输入键入出才进行验证,为空不验证;
后端验证,例如手机注册输入效验码,通过后才注册成功,需要通过服务器判断,才知道用户输入的是否正确。
表单内联验证 - 设计体验

错在哪里,显示在哪里

就近原则,方便用户发现并修改操作

错在哪里,显示在哪里

结合颜色、图标和文字

我们不仅仅需要视觉上的区别(请考虑色盲用户),还需要文字说明并告知原因和解决办法,而不是简单的“输入错误”。

请勿清除

错误的字段,请勿在键入后直接清除,请给用户在此基础上修改的机会,记住用户才是决定者。

八. 反馈 Feedback
对用户行为的反馈,告知当前状态

操作前:光标状态

鼠标在屏幕上的映射,我们称之为光标(指针),它会随着操作对象及系统状态而呈现出不同形状,让用户对操作的行为及结果有预先的心里感知。
被你忽略的交互-鼠标指针

操作中:操作反馈

如default,disabled,hover,fouce,pressed,active,error,success等。例如输入框的悬停和键入的视觉反馈,从而帮助用户聚焦

操作中:操作反馈

操作后:按钮加载

呈现按钮的加载过程,而不是禁止不动,用户会以为系统没有执行操作,从而进行多次点击,呈现加载并禁止用户的后续点击操作。


总结:

以上便是对表单设计的一些总结,更多的是提供一种分析问题的框架,从结构化的思维分析设计问题,从而能够全面的认识一个事物并进行了解掌握,愿对你有所帮助!


推荐阅读:

组件-设计完全手册

内容策略-设计完全手册1

内容策略-设计完全手册2

表格-设计完全手册

Image title

Wiiii

微信公共号:int-PD

976粉丝/0关注

老马识途小有名气首页达人收藏家lv.3
开始设计的 3 条建议如何构建 SaaS 网站
2
Ban_Will

表单组成三大件:标签、输入框、交互反馈。《Web表单设计——点石成金的艺术》和《Web表单设计——创建高可用性的网页表单》,这2本书基本讲得很清楚了,市面上的表单拉出来看看也逃不过书中的方法及实践。当然,也感谢作者的经验分享。

精彩!

Wiiii

Wiiii

微信公共号:int-PD

老马识途小有名气首页达人收藏家lv.3

扫描二维码
去手机端查看海报

Wiiii

TA已经获得8枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN