赞助商
立即赞助

可能是最全面的表单设计完全手册!

UI设计3年前 (2021)更新 流光
2.2K 0 0

表单设计可以设界一老常谈的话题,针对它的重性自不必多言。本文结合自身验所看所学所得总结,希望能帮到家。

从「子(构成要件)」度,将表单逐拆分,从而能够全看待。

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

  • 结构
  • 标签
  • 输字段
  • 占位符
  • 帮
  • 操作
  • 验证
  • 反馈

一、结构 Structure

段序、节奏、观和组织。

1. 问所需

必要而不是全部,简化表单,或许是优化表单最大议。简化办法是追溯个段为什么需要,是否是前最相关信息,如它是可选,最好不要显示。

2. 有理排序

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

3. 从易到难

从用户相抵触信息开始逐渐到隐私信息,而不是开始让用户萌生退意。

4. 组织相关

在繁多段情况下,将相关段按照序进分类组合,并过增加些额空或者主标题将它们分成语义组,增加了页呼吸和节奏感,从而帮助用户更加轻松完成表单。

可能是最全面的表单设计完全手册!

5. 单列呈

单列,只需眼睛沿自然的方向从至下,便于用户理解操作。多列,眼睛需按照「之」形行浏览,从增加浏览理解认知的时间。

然单列呈现是多列,并绝,需根据页空,表单内容及性质共决定。

可能是最全面的表单设计完全手册!

6. 提高对比度

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

可能是最全面的表单设计完全手册!

二、标签 label

标签告诉户需要输入么。

1. 名词标签

名词具有很好的描述性且简洁明了。的字可使大熟悉的图标代替本。

2. 标签位置

左对齐、右对齐、顶对齐、联标签、图标标签和浮标签。

可能是最全面的表单设计完全手册!

可能是最全面的表单设计完全手册!

数情况下,谨慎使用内联标签,在用户输,内联标签消失,用户无法判断输的内容是否符合,当在用户熟悉且简单的字段下采用(例登录中只有账号和密码)。针对以上问题,你以采用内联浮动标签决内联标签在输标签消失的弊端。

三、输入字段 Input

承载用户输的区域。

1. 自动对焦(PC端)

进行表单页面,自动对焦一个输字段以引导用户开始进行输。

2. 提供默认值

根据已信息,帮助用户预判内容。例以通 IP 检测出用户的地理位置。

3. 存输的数据

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

4. 字段约束

为有要求的字段设置。例,最大字符数,电中数字、字母符号等要求,从而有效的避免脏数据。

5. 式化(掩码)输

提供输式,帮助用户理所填内容且减少错误生。常用手机号码、期、银行卡和邮编等。

6. 匹键盘(移动端)

提供合适的键盘,帮助用户快速完成。

7. 区分填

上所述,尽量避免填字段。果不避免,应该做明确区分。根据经验,填和必填的数量少的做标说明。

规做法:必填,使「*」星号符;可填,使「(填)」。

四、占位符 Placeholder

标签的额外描述,帮助户了解可输入的数据类和格式示。

1. 颜色区分

它是容示,而是容。

2. 是有输入框都需要占位符

占位符是对输入容有特殊要求的示或醒,可解为对标签的补充,并是有的输入框都需要占位符。

3. 输入后消失

要在鼠标键入后消失,而是在输入容后消失,这样可在户还未输入的时候,依然帮助到户。

如果提示特别复杂或者重,请使用帮,它会一直显示那里。

五、帮助提示 Tips

明求,解释原因,甚至帮回忆。

1. 三种方式

常驻、按需提供、偶尔需。

可能是最全面的表单设计完全手册!

可能是最全面的表单设计完全手册!

2. 给予释

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

六、操作 Submit

对当前用户输数据的提等动。

1. 区分主次

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

可能是最全面的表单设计完全手册!

2. 理放置

理放置操作的位置,可根据表的排列方式理摆放,避免居中。例如表采用的是顶部对齐,你可以将操作输入字段左对齐,这用户在完成输入的候,轻地操作按钮。

可能是最全面的表单设计完全手册!

3. 准确命名

晰可预测。应该准确地描述用户击按钮后会发生什么。

可能是最全面的表单设计完全手册!

4. 行动召

按钮应始终强烈的动词,鼓励用户行动。

为了用户提供足够上下文,在按钮上使用「动词」 +「名词」格,除了保存,关闭,取消或确定等常用操作。

5. 禁用操作

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

七、验证 Required

用户输入数据验证反馈。

1. 前端验证和后端验证

前端验证不需要服务上传验证数据,可以判断,例如手格等;是要记住在用户输入后才进验证,为空不验证;

后端验证,例如机注册输入效验码,通过后才注册成功,需要通过服器判断,才知道用户输入的是否正确。

2. 错在哪,显示在哪

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

可能是最全面的表单设计完全手册!

3. 结合颜色、图标和文

我们不仅仅需要视觉上区(请考虑色盲用户),需要文说明并告知原和解决办法,而不是简单「输入误」。

4. 请勿除

误段,请勿在键入后接除,请用户在此基础上改会,记住用户才是决定者。

八、反馈 Feedback

用户为反馈,告知前状态。

1. 操作前:标状态

鼠标在屏幕上映射,我们称为标(指针),它会随着操作象及系统状态而呈现出不形状,让用户操作为及结有预先心理感知。

2. 操作:操作反馈

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

可能是最全面的表单设计完全手册!

3. 操作后:按钮加载

呈按钮的加载过程,不禁止不动,用户会以系统执行操作,从行多次点击,呈加载并禁止用户的后续点击操作。

总结

以便对表单设的一些总结,多的提供一种分析问题的框架,从结构化的思维分析设问题,从能够全面的认识一事并行了解掌握,愿对所帮。

欢迎关注作者微信公众号:「int-PD」

可能是最全面的表单设计完全手册!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

随着移动互联网行业的飞速发展,人们原本习惯在 PC 端填写的长表单,也渐渐地在移动端越来越常见。本文将基于驴妈妈移动端供...
移动端设计
编者按:本文由途牛UED 出品,作者将结合实际案例,从7个方面介绍表单设计中的常见注意事项。 表单作为平台与用户联系最为紧...
UI 设计
最为常见的信息收集表单,却最容易忽视它的体验。 表单(不是表格),作为最为常见的页面模块,是不是都快忽略它的存在了?...
Web设计
网易UEDC – 仉长娟 :从事 B 端产品交互设计工作的半年时间里,有幸接触了面向开发和运维人员的 B 端业务类列表交互设计工作...
Web设计
您最近填写过在线表单了吗? 答案应该是肯定的。根据最近的研究,84% 的人每周至少会填写一份线上表单。 虽然你可能没有感...
用户体验
大家好,这里是 TCC 翻译情报局,我是李泽慧。数据表单是一种常见的平台设计样式,在看似乏味呆板的设计中,沉淀着许多优质的...
B端设计
58UXD:表单是收集用户信息的方式。如果你的产品需要收集大量用户信息来完成为其提供的服务,那么在用户进行信息输入的过程中...
实战案例
前文已经提到:对于特别复杂的B端表单,「简化」只是提升其易用性的方法之一。遇到数据量大,层级深,数据之间有交叉或嵌套关...
B端产品