恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何设计好表单
0.0°
2017-06-27 自译外文 经验/观点 原作者: Andrew Coyle 举报 1069 4 5 0

设计师常犯的错误以及如何解决这些错误

无论是注册流程,多视图步进器还是单调的数据输入界面,表单都是数字产品设计中最重要的组件之一。本文重点介绍了表单设计的常见含义和不足之处。请记住,这些是一般准则,每个规则都有例外。


表格应该是一列

Image title

多列破坏了用户的垂直动量。


顶部对齐标签

Image title

相比左对齐标签,用户能够以更快的速度完成顶部对齐标签的输入。顶级对齐的标签在移动设备上也可以很好地转换。但是,有可变可选性的大型数据集条目要考虑使用左对齐的标签,因为它们更易于一起浏览,它们降低高度,并提示比顶部对齐的标签更多的考虑。


组标签与其输入框

Image title

将标签和输入框贴在一起,确保字段之间有足够的高度,以免用户感到困惑。


避免所有字母大写

Image title

所有字母大写更难阅读和浏览。


如果6个以下,显示所有选择选项

Image title

在选择器下拉列表中放置选项需要两次点击,并隐藏选项。如果有超过5个选项,请使用输入选择器。如果有超过25个选项,则在下拉列表中包含上下文搜索。


不要使用占位符文本作为标签

Image title

通过使用占位符文本作为标签来优化空间是很诱人的。这导致Nielsen Norman Group 的Katie Sherwin总结的许多可用性问题。


将复选框(和单选框)放在彼此的下方以便浏览

Image title

将复选框放在彼此之下允许轻松浏览。


行动描述

Image title

行动操作应说明意图。


内联指定错误

Image title

显示用户发生错误的地方,并提供原因。

在用户填写该字段后使用内联验证(除非在该过程中帮助他们)

在用户打字时不要使用内联验证,除非有帮助,比如在创建密码,用户名或具有字符数的消息的情况下。


不要隐藏基本的帮助文本

Image title

尽可能公开基本的帮助文本。对于复杂的帮助文本,请考虑将其放置在焦点状态下的输入旁边。


区分主要和次要行动

Image title

还有一个更大的哲学辩论是否应该包括二级选项。


使用字段长度作为可用性

Image title

字段的长度提供了长度的答案。将此字段用于具有确定字符数的字段,如电话号码,邮政编码等。


将*表示为可选字段

Image title

用户并不总是知道所需字段标记(*)所暗示的内容。相反,最好是指出可选字段。


组相关信息

Image title

用户批量思考,长表单会让人不知所措。通过创建逻辑组,用户可以更快地理解形式。


为什么这么问?

省略可选字段,并考虑其他方式收集数据。长问自己是否可以暗示,放在次要地位或完全排除。

数据输入越来越自动化。例如,移动和可穿戴设备在用户无意识的情况下收集大量数据。想一想你可以利用社交,对话用户界面,短信,电子邮件,语音,OCR,位置,指纹,生物识别等方法。

让它很有趣

生命短暂。没有人想填写表单。对话, 有趣, 逐渐搞定, 做意想不到的, 设计师的角色是表达自己公司的品牌,引起情绪反应。如果正确完成,则会提高完成率。只要确保你不违反上面列出的规则。

构建一个专注于可用性和美学十字路口的用户界面模式库,本文只是这一倡议的一部分。如果这听起来很有趣,订阅接收更新。

更新:2017-06-27

收藏

4人已收藏

  • 5

    作品

  • 12

    粉丝

  • 2

    关注

  • 设计高效的表单:结构,输入,标签和操作
  • 复杂应用的表单设计
  • 如何设计好表格
  • B端金融交易类App

    猜你喜欢

      2017-06-27 自译外文 经验/观点 原作者: Andrew Coyle 举报 1069 4 5 0

      如何设计好表单

      0.0°

      你确定要举报如何设计好表单

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年06月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录