如何打造优质 Web 表单.pdfVIP

如何打造优质 Web 表单 这篇文章算是笔者交的一份读书笔记 ，与 CRM 系统打交道了这么久 ，表单 见。如果表 单有感情的话 ，我猜它应该都不想再看见我了。也是有缘 ，老板推荐了一本表单设计的书— — 《Web Fo rm Design – Filling t he blanks》by Luke Wro blewski ，得此书如获至宝。该书对 表单描述详尽 ，案例充分 ，解决了许多笔者多年未解决的问题。接下来进入正题 ，我们来聊 一聊如何打造优质 Web 表单。黑喂狗 ！ 1. 标签推荐使用右对齐方式 （图示1 ：淘宝网注册页面 ） 马泰奥·彭佐在2 6年7月的眼动研究发现 ，标签如果采用顶对齐方式 ，用户的视线从标签移动到输 入框只需要5 毫秒 ，右对齐方式需要24 毫秒 ，左对齐方式需要5 毫秒。如果从高效上讲 ，应该 是优先考虑标签顶部对齐。 我们再看淘宝注册页的表单采用了右对齐方式 ，是考虑到顶部对齐会占用过多的垂直空间 ，一旦表 单项过多 ，对表单页的操作也会造成不便 ，所以采用了右对齐方式。 所以笔者在此建议 ，如果表单项不多 ，有限考虑标签顶部对齐 ；而同时要兼顾高效和页面的垂直 空间 ，则选择右对齐方式吧。那是不是左对齐标签无用呢 ？其实并不是 ，研究也有表明 ，在涉及到 专业性过强 ，用户不熟悉的表单 ，需要更长时间理解的标签项时 ，则可以考虑左对齐方式。 2. 必填和选填 （图示2 ：必填V S选填 ） 本书里提出一个观点 ，如果必填字段比较多 ，把选填项标记出来则足够 ；如果选填字段比较多 ，则 标记必填字段。 这的确能最高效率区分出来必填字段和选填字段 ，然而现在大部分互联网用户对于 「* 」就代表必填 这都已领会 ，所以笔者还是推荐在表单中尽可能用 「* 」去区分必填和选填 ，毕竟这属于最通用的 方案。不过登录表单可以不遵循这个规则 ，大家都知道登录表单中的标签项都为必填 ，同时也可以 根据标签项是否输入的状态来激活 「登录」按钮。 3. 即时反馈 早期的表单里面对标签项的说明文字都直接放置在标签旁边 ，但很多用户不会去看这些文字 ，或者 直接忽略掉。其实可以结合用户操作表单行为来动态显示帮助信息 ，例如用户聚焦在哪一个标签项 ，则显示哪一项对应的解释文案。腾讯微博注册页有一个细节做的比较好 ： （图示3 ：腾讯微博注册页面 ） 当用户输入邮箱已经被注册过 ，则会即时给出相应的提示 ，节省用户输入额外注册信息的成本 ，而 不是让用户填写完再点击 「提交」按钮交给服务器去做一次判断。 当然除了这条 ，还有密码强度和密码要求的即时校验 ，旨在节省用户输入时的思考时间 ，让用户更 高效率地填写表单。 4 . 错误消息 表单中的错误提示信息 ，或者一些不合规的提示信息展示也是表单设计中影响比较大的元素。 （图示4 ：Erro r Message ，图片来源ht t p://www.f o rmulat e.co m.au/blog/well-designed-erro r- messages ） 上图中的表单项就比较多 ，可能在小尺寸屏幕中需要滚动页面才能看到完整表单信息 ，而因为采用 了点击 「提交」按钮之后交给服务器校验数据 ，所以在多个表单项出现错误的情况下 ，则需要统一 在表单头部提示出来错误信息 ，并且最好要有锚点 ，点击之后能够直接到错误的位置 ，节省用户寻 找的时间。 然而如之前所说 ，如果能够在前台即时校验的信息 ，就尽量交给前台校验 ，除了可以节省用户的表 单操作时间 ，可以保证体验的一致。 5. 智能默认 （图示5 ：淘宝/ 猫购物车页面 ，图中敏感数据已经抹去 ） 表单设计中可以通过智能默认的方式帮助用户填写一些需要重复填写的表单 ，这样可以节省大量的 时间。例如图中的淘宝/ 猫购物车页面 ，用户在每次购买之后都需要经过收货地址填写环节 ，如果 说将填写过的地址帮助用户保存起来并设置成默认 ，在后来的每次购买过程 ，可以直接进入到下一 个环节 ，省去了这一步的时间。 6. 设置 Tab 键跳转 笔者认为 Tab 键跳转也是一个能够提