工作了几年，需要借助重读一些书本来整合总结一下，写读书笔记为了更方便的记忆和运用。《web表单设计-点石成金的艺术》这本书中提供了大量通过基础数据研究得出的结论，对于没有充足时间做研究测试的项目，参考本书里的结论是一种比较保险的做法。虽然有些举例和观点已过时，但不妨碍从中学到些东西。

开始吧~

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

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

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

1.表单设计原则： 

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

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

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

③延迟：不需要马上回答的问题，放到直到感觉不到任何违和的地方出现 。
栗子：

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

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

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

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

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

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

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

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

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

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

9.标签的对齐方式 

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

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

栗子：

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

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

栗子：

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

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

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

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

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

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

栗子：

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

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

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

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

栗子：

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

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

21.即时验证 

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

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

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

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

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

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

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

栗子：

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

栗子：

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

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

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

栗子： 

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

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

栗子： 

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

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

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

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

栗子：

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