web表单设计-点石成金的艺术

原文链接

重要观点：绝大多数表单都是“由内向外”设计的，从系统记录数据的需求出发，让用户填写内容；但从用户角度来看，他们需要的是“由外向内”的，填写了这些内容能带给我什么？能做什么？好的表单设计需要内外兼顾 。

表单用户需要告知目的和可能受到的影响。对于用户来说他是拒绝的。他只关心最后的结果。所以表单尽量将必要的信息用最舒服的方式尽可能少的打扰用户的体验。

告诉用户为什么需要填写手机号，填写手机号后能得到什么服务

电商网站不会在一进网站就让用户注册/登录，直到你需要下单时

1.表单设计原则：

①减少痛苦，约简单越好，用户要的是填写完之后的东西 。
②清晰告诉用户如何完成表单（流程引导、帮助提示） 。
③考虑表单使用场景，用户、业务、环境 。
④保证多个团队能共用一份表单（不同业务部门可能需要不同数据，但用户只需要填写一份） 。

2.表单问题设计四大策略：

①保留：问题与用户渴望给出的答案一致 。
栗子：当用户下单决定要买东西时，让用户提供收货的地址，就是顺理成章的事
②删减：并不是非要用户来回答的问题就不要问 。
栗子：

绑定银行卡，输入卡号判断属于哪家银行，省略“选择所属银行”这一步

③延迟：不需要马上回答的问题，放到直到感觉不到任何违和的地方出现 。
先试用后注册也是一样的道理，除非用户对你认知或你很重要，否则不要绑架用户直接注册。这样只会让用户讨厌而离开你

站酷，不用登陆就可以浏览点赞，但当你需要发布文章时，就需要填写用户名等个人信息啦，不过在点赞时会引导用户去登录

④解释：用户不想回答的问题，但对公司确实有重要意义。那么解释此问题的缘由 。
栗子：填写生日，很多网站想要获取用户的年龄数据，在用户生日时送出礼物。解释清楚原因，让用户放心填写。

3.相关且必要的

若问题需要按顺序回答，且需要看到所有问题，则应把问题放在一页内；与表单关系不大的可选性营销类问题放在表单填写后出现，给人的侵略性更小。

栗子：“想更进一步了解我们吗？”“对我们感兴趣吗？”这些问题与主要问题无关，可以等用户填完表单后再出现。

4.慎用明显的底色和线条区分问题组，会分散对主要内容的注意力 。

5.问题的排列需要清晰的浏览线，单一垂直向下的浏览线比“之”字形效率更高。

6.问题之间的间隔最好在输入框高度的50%-75%之间 。

7.对于关键任务表单，应去掉会分散注意力的信息

栗子：结算页，不要出现其他商品推荐

8.设计表单布局时，应考虑键盘操作的体验，特别是长表单和总是需要填写的表单

9.标签的对齐方式

Image title

10.输入框的长度可提供有意义的暗示

11.表单结尾的动作，尽量只出现主动作，实在需要次动作，那么应减少次动作的视觉表现，以降低出错率，引导完成主动作。

“确定”为主动作，“取消”为次动作，通过明显的视觉效果区分

12.主动作与输入框对齐，能提供明确完成路径

Image title

13.若采用了“撤销”“删除”等动作，需要有相应的容错方式

14.尽量减少帮助文字，没人会看长文字 。但凡页面上多出任何一个元素，都会增加用户思考时间

15.若每个问题都需要大量的说明解释，可采用及时帮助，以避免网页拉升跳动 。网页拉升跳动可能影响用户感知当前页面中的位置。

栗子：

添加信用卡时，光标聚焦到某一栏，右侧出现对应提示

16.尽量使你的网站只有2种消息：错误与成功。消息越少越好 ，每一种消息的出现都可能加重用户理解负担，甚至造成误解

17.对于较短的表单，可以为每个出错的输入添加双重视觉效果的错误提示；对于长表单（超出一屏），可考虑页面顶部提示。

Image title

18.红色文字习惯上表示警示、错误。所以一般帮助提示不要使用红色。

19.错误提示需提供可操作的补救措施

栗子：如支付失败，提供“重新支付”“查看支付规则”等操作按键，比只有一句支付失败好很多。

20.当任务成功后，要让用户知道接下来可以做什么

支付成功后，可以去查看订单状态，也可以继续逛逛

成功获得返现后，可以去查看金额，可以立即提现

21.即时验证

Image title

22.即时确认应出现在输入完答案之后，二次输入开始时就应消失

23.有特殊格式限制的，更倾向于通过视觉和交互让格式固定死，避免用户思考过多。

栗子：有区号的电话号码输入

24.设置恰当的默认项来减少输入，但默认选项容易被忽略，所以要确保默认选项符合大多数人目标

25.针对不同用户设置个性化默认选择

栗子：检测到用户地址只能用EMS，那么快递公司自动选择为EMS

26.额外输入，根据需求优先顺序放置。最重要的问题保持直接可见，次要的问题点击一次后可见。

Image title

27.如果额外选项很重要，且需要单独考虑（或需要排除其他信息干扰），考虑使用模态叠层。

提交订单时，添加新地址。输入项很多，使用模态弹框保证填写过程不收其他信息干扰

28.基于选择的输入（根据初始选项的选择，出现不同的额外输入）

①页面级选项（使用两个单独的网页展示不同步骤的问题）：若每个初始选项的额外输入选项数量很多，使用不同网页放置问题。

淘宝商家发布商品，第一页先选择商品品类，第二页填写商品信息

②水平\垂直选项：选择速度快，错误率低，但选项卡之间存在互斥问题，考虑通过视觉和交互方式避免

Image title

选择支付方式，每个初始选项后都会出现额外选项。

③下拉列表选项：如果选项超出了水平/垂直选项卡能支持的范围，可考虑使用下拉列表选择

④单选按钮下方/内部显示：适用于每个初始选项只有很少量的额外输入项。若选项内容较多，则选项间的关系不明确，且导致页面跳动，体验非常不理想；初始选项应尽量和其对应的额外输入项靠近显示

⑤隐藏无关表单控件有助于快速完成表单

Image title

为了使初始选项和对应的额外输入项尽量靠近，也可采用上图的方式。选择后收起（隐藏/弱化）其他初始选项