魔鬼在细节中——《web表单设计》

表单肯定是我们页面设计中经常遇到的部分,当遇到单选按钮、复选按钮、下拉菜单、问题组合等等联合在一个页面时,我经常会顾此失彼,同时也感觉没有一个outline之类的东西给我指导。直到读完这本《web表单设计》,感觉自己对表单设计的技能点终于被点亮了。

表单肯定是我们页面设计中经常遇到的部分,当遇到单选按钮、复选按钮、下拉菜单、问题组合等等联合在一个页面时,我经常会顾此失彼,同时也感觉没有一个outline之类的东西给我指导。

直到——对,你猜对了——读完这本《web表单设计》,感觉自己对表单设计的技能点终于被点亮了。下面把书中一些要点罗列一下:

0,少即是多的大原则:去掉不必要的问题,甚至可要可不要的问题。

1、大家都知道用户在页面上的视线轨迹是近似Z字形眼动,那么将表单放到用户可视的第一位。

2、如果有多个并列的问题,一般使用输入框高度的50%-70%作为问题之间的间隔高度。

3、问题之间都是有联系的,可以进行分块,有逻辑的组织各个问题。

4、表单应该少使用复杂的交互和视觉样式,以免增加用户负担。

5、但是各组问题之间需要区隔,使用很简单的方法(比如虚线、淡背景色)来区分各组。

6、除了表单自身,页面其他位置尽可能不要让用户注意到,也即是说,页面其他地方的信息用户也不应该注意到,那么最好不放内容。

7、整体流程栏上不要加表示步骤的数字,因为在填写表单的过程中,某个步骤可能会被增加(登录、选择支付方式等)

8、只在必要的地方出现表单。表单上每个问题都要多问自己几次:是不是一定得在这儿让用户填写?

9、不要仅仅用颜色来传递功能(如出错时候的提示),各个用户对颜色的理解是会有偏差的。解决方法是应同时使用文字。

10、如果要使用Tab键作为表单内容间的跳转,要考虑到对于两栏表单的从第一栏底部跳到第二栏顶部时的显示问题。

11、一定要有表单名称,并且符合人们的期望,并简述表单的目的

12、顶部对齐/左对齐/右对齐,各有优劣。顶部,符合眼动效率。右对齐,标签和输入框距离近。左对齐,方便用户快速掌握问卷内容。根据场景和表单目的来选择。

13、如果屏幕空间珍贵,标签内容放到输入框中提示。但这并不适用于问题很多或答案很长的情况,因为写完无法check回答的内容是不是符合问题。

14、输入框的长度要和用户对答案的预期长度基本符合。

15、如果要对“必填项”还是“选填项”进行标注,那只有在这两种问题数量差异悬殊时标注有意义。同时要标注问题少的那个。

16、单独出现“ * ”是没有意义的,因为没有图例说明这是必填还是选填。直接用文字。

17、表单完成时有主动作和次动作之分,一般来说“提交”为主动作。主动作标示要显眼。如果可能,去掉次动作的按钮。

18、主动作按钮和主输入框对齐。

19、提交时应有动作提示表单已在提交(特别是网络不好的时候),避免重复提交。

20、帮助文字在需要时才出现,不遮挡页面其他文字,与当前输入框融为一体。·

21、帮助文字在当前输入时不能消失,否则就失去了帮助文字的意义。

22、如果有多输入框都需要相同的帮助文字,该帮助文字保持显示。

23、如果输入有误,先告知“出错”。在出错的地方用不同的颜色/字号/图形显示错误

24、多采用即时验证,比如支付宝的验证码。最适合错误率高,或有特殊格式要求的表单项,但要在输入完成后验证,不要在输入过程中验证。

25、减少问题是必要的,但是不能增加其他问题的复杂程度。

26、尽可能在所有地方提供默认答案,可以根据用户信息或是普遍用户行为推断,要符合大多数用户的预期。

以上是书中诸多要点的一小部分,强烈建议大家都去读一下这本书,去豆瓣看看。

本文系作者 王睿-Ray 授权钛媒体发表,并经钛媒体编辑,转载请注明出处、作者和本文链接。
本内容来源于钛媒体钛度号,文章内容仅供参考、交流、学习,不构成投资建议。
想和千万钛媒体用户分享你的新奇观点和发现,点击这里投稿 。创业或融资寻求报道,点击这里。

敬原创,有钛度,得赞赏

赞赏支持
发表评论
0 / 300

根据《网络安全法》实名制要求,请绑定手机号后发表评论

请 登录后输入评论内容

快报

更多

2026-10-14 16:20

铭芯启睿首款1Gb RRAM芯片完成流片,采用1T4R存储结构

2026-07-26 19:41

印度央行发布2026年6月金融稳定报告。

2026-06-29 18:55

欧洲央行管委帕察利季斯表示不应仓促加息

2026-06-03 15:11

国内商品期货多数收涨,菜油涨近4%

2026-06-03 15:10

港股收评:恒指收涨0.38% 医药股强势领涨

2025-10-09 17:53

最新测试

2025-10-09 17:51

测试

2025-09-03 10:53

芯片股震荡回升 成都华微20cm涨停

2025-08-27 11:38

国内期货主力合约多数下跌

2025-08-25 16:57

正裕工业:上半年净利润同比增长420.67%

2025-08-25 16:56

长高电新:上半年归母净利润1.06亿元,同比下降13.12%

2025-08-25 16:53

北海国发董事长增持股份3001.66万元,计划实施完毕

2025-08-25 16:29

河南省十四届人大常委会第十七次会议5月27日在郑州举行,《关于内河航运和港口建设工作情况的报告》提请审议。

2025-08-25 16:11

巴伦中文网 8月25日消息,科股要闻首页推荐列表

2025-08-25 16:09

钛媒体App 8月25日消息,投资日历

2025-05-27 14:55

河南:计划“十五五”期间港口吞吐量突破1亿吨,完成投资1000亿元

2025-05-27 14:20

多家银行理财子公司正申请加入保险资管业协会

2025-05-27 12:30

欧洲4月汽车销量同比下降0.3%

2025-05-27 12:17

以创新缔造用户和社会价值,满帮集团获评最具创新力上市公司

2025-05-23 15:48

工信部等四部门联合组织开展2025年“百场万企”大中小企业融通对接活动

扫描下载App