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

成长值达到300分以上才可以发布哟!~

先看看别人的即刻>

设计更好的表单

自译外文 分类: 规范/资料 版权: 原作者: 未知
1472 14 11 0
2016-12-01
0.0

Image title


前言:无论是网站注册流程、多视窗任务步骤、还是单单的数据输入页面,表单是数字产品设计最重要的组成部分之一。本文重点研究表单设计中常见的正确和错误用法。但是请记住这些都是一般状况下的指导建议,每一个规则都会有例外。


原文链接:https://uxdesign.cc/design-better-forms-96fadca0f49c#.fy2fkzr5q


1.表单纵向上应保持一列

多列会干扰用户垂直纵向上的阅读顺序。


2.顶对齐标签

用户完成填写顶对齐标签表单的效率比左对齐标签表单更高,而且顶对齐标签也能很好地适用于移动端界面。

但是,在用于大数据集输入和选择项的表单时会考虑左对齐标签,因为左对齐标签表单的各项易于用户一起浏览,减少页面高度,且用户在填写过程中需考虑得更细致。


3.组织好标签和输入框的位置

让标签更靠近所对应的输入框,并且确保字段之间有足够的高度,这样用户就不会感到困惑。


4.避免英文全大写

全大写的英文字段阅读和浏览起来更加困难。


5.如果选项低于6个时就直接全部展示出来

在下拉菜单中设置选项需要用户两次点击才能选择,并且隐藏了选项。当超过5个选项时可以使用下拉菜单,而超过25个选项时应该加入文字搜索功能。


6.不要把输入框内的占位符文本作为标签使用

使用输入框内标签能减少界面空间,但会导致许多可用性问题(已经被尼尔森诺曼总结过)。


7.将复选框和单选组的选项上下排列以便于浏览

将复选框和单选组的选项上下排列更易于浏览。


8.让操作按钮更有指向性

一个行动按钮文案应呼应其背后的意图。


9.在指定表单项上反馈错误

告知用户哪里发生了错误,并提供错误原因。


10.用户填写完某一项后进行在线验证(必须确保这样做在流程中能够帮助用户)

当用户在输入例如密码、用户名、消息等字符数内容时不要在线验证,除非这样做能够帮助他们。


11.不要隐藏基本的帮助文本

应尽可能展示基本的帮助文本。对于较复杂内容的帮助文本,可考虑在鼠标聚焦状态时将其展示在输入框的旁边。


12.区分主要和次要操作

关于在这里是否有必要存在辅助选项,应该辩证地看待。


13.输入框长度的可视性

通过输入框的长度来表示需输入字段的长度。使用这种方式来表示如电话号码、邮编等输入项的字符数。


14.不用*表示必填项而是直接标示出可选项

用户往往不知道通过用*标记的是必填项,而明确标示出可选项会更加直观易于理解。


15.组合有关联的信息

当用户面对大量长表单时会感到不知所措,通过这种具有逻辑性的信息组合,用户能够更高效地理解表单内容。



扪心自问

忽略传统可选项的方式,想想用其他方式来收集你想要(但是用户不愿填)的数据。要多问自己这个问题能否推断出结论、或推迟处理、或者完全排除不用处理。


数据输入日益自动化,例如,手机和可穿戴设备能够在用户无意识中收集其大量的用户数据。你可以利用社交工具、对话界面、短信、邮件、语音、光学识别、定位、指纹识别、生物识别等方法来收集数据。


让表单设计的有趣

生命是短暂的,没人愿意花时间去填一个表单。应该让表单呈对话形式、更加生动、循序渐进,并且超出用户预期。通过引起用户的情感共鸣来展现他们公司的品牌形象,这就是设计师的工作。如果表单设计的好,其完成率会大大增加。只要你确保不会违反以上提出的原则。



Image title




半木zxy

https://www.zhihu.com/people/ban-mu-zxy/posts

592粉丝/24关注

小有名气首页达人小有见解一鸣惊人收藏家lv.2
梳理适合自己的交互自查表设计师应普及的VR行业信息

半木zxy

半木zxy

https://www.zhihu.com/people/ban-mu-zxy/posts

小有名气首页达人小有见解一鸣惊人收藏家lv.2

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

半木zxy

TA已经获得7枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

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

  • 经验

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

  • 活跃

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

  • 拓展

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

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

Cw9sdfed

朕收下了