最近工作中经常接触到表单设计，发现表单看起来是很无聊的东西，
无非是一个标签加个输入框，在来个按钮就万事大吉了，
其实深究起来并不简单。（涉及到心理学，用户体验，交互，UI视觉等多方面）
那些看起来细小的不被重视的细节，往往是需要设计师格外关注的。
几乎每个互联网产品都会有 形形色色的表单，用于登录账号、填写信息以获取服务、发布内容等，
然而填写表单的过程往往不是特别愉悦的，我们需要消耗时间输入信息，点击提交，可能还需要等待审核。
尤其是碰到较为复杂、流程长的表单，如果用户体验较差，很容易让人产生挫败感，在中途选择放弃。
比如
公安机关互联网备案注册页面
崩不崩溃！！！
当我的个人网站做完工信部备案，按照要求去做公安部备案时，看着这些表单
我放弃了备案……
所以说，合理的设计表单对提升用户好感度非常重要，简洁流畅的表达信息并创建合理的表单，可以被当做是产品与用户之间的一次对话。
那么，如何设计好一个易用好用的表单呢?
从而防止用户出错或中途流失，提升愉悦度及转化率。
本文就Web表单设计，总结了以下的一些套路
摊主打算在表单的组成，原则，交互及UI四个方向来进行套路拆分。
本篇主讲前两个，交互及UI将会在下周进行。
一.表单的组成
典型的表单由以下五个组成部分
1.标签
（1）定义
包括文本字段，密码字段，复选框，单选按钮，滑块等为用户输入而设计的其他字段。
京东注册页面
（2）套路
必填项和选填项不要都进行标注，尽可能减少信息量。
某某学会注册页面
以上截图自某某协会网站注册页，先放下这长长的注册表单不说，单说这满屏的“*”，就让人看起来很不舒服。
通常情况下我们会认为表单标签上的“*”标识意味着这一项表单内容为必填项，当然这也不是必须的，即便是这样的“常识”，在设计表单时我们还是必须在下面加入一句类似于“请注意，含’*’内容为必填项”， 用户并不总是知道标签后的星号字符意味着什么。
比如这周六摊主去招行办卡时，在操作大厅内的可视化自助界面时， 完善个人信息界面，填写完姓名，手机号，下边还有什么公司名，公司地址的信息，而对于十年近视的我来说，并没有注意到那个小小的“*”符号，所以当作必填表单也一并填了，然后大堂经理告诉我说，“先生这个可以不填，你看那不是有星号吗？”
大写的WHAT?
怎么在你家星号就成了选填的代名词了呢？
再说了，你这个星号真的很小，我还以为是个蚊子呢，
再再说了，星号是选填项，你应该在显著位置提示我一下吧，
我辛辛苦苦填好了，告诉我是选填项……
2.占位符文本
（1）定义
占位符告诉用户相应的输入字段是什么意思。
京东注册页面
（2）套路
合理选择输入框的类型，可以引导用户正确填写信息，比如区号限定了该输入框的输入内容为数字类型。
淘宝新增收货地址页面
（此处可看出，淘宝在页头部分提示用户，必填项有哪些，并标出“*”，不过“请选择省市区”这个提示字段的色值应为“#333”，而不是“#ccc”，此处不应做为占位符处理 ）
这才是占位符的正确姿势
3.操作按钮
（1）定义
当用户按下此按钮时，执行操作（如获取验证码，提交数据）。
京东注册页面
（2）套路
一级和二级动作之间缺乏视觉上的区别很容易导致失误。
减少次要行为的视觉突出性可以最大限度地减少错误的风险，并强化人们成功取得成功的途径。
在对按钮命名时，避免使用通用单词，例如“提交”操作，因为它们给人的印象是表单本身是通用的，提交后会怎样，用户可能会感到迷茫。
相反，最好说明按钮在单击时将执行什么操作，例如“创建我的帐户”或“去购物车”。
区分一级动作（比如保存）和二级动作（比如取消）。
可以用按钮定义一级动作，用链接定义二级动作，或者相对于二级动作按钮来说，赋予一级动作按钮更为明显的风格。
4.反馈信息
（1）定义
用户通过反馈了解其输入的结果。 大多数应用程序和网站都使用纯文本作为反馈形式。消息将通知用户有关结果，反馈可以是积极的（表示表单提交成功）或否定（“您提供的号码不正确”）。
（2）套路
成功信息
用户填写成功，需要有明确的成功反馈，给予用户鼓励。
错误信息
明确每个输入框产生错误的原因，并给出清晰的解决方法
警告信息
格式正确，但是有外部条件限制，比如用户名已被占用
提示信息
给予用户正确填写表单的线索，减少操作误差
二.表单的原则
1.减少用户思考
比如苹果官网中的注册表单中，当鼠标移动到“出生日期”输入框时，会将placeholder字段“出生日期” 显示为“yyyy年mm月dd日”，
这样就可以减少用户思考出生日期填写的格式。
比如我是1993年4月10日出生，那么没有这个提示性文字时，
我也许会输入
1993-04-10,1993-4-10,1993.4.10,1993.04.10,
或者其他奇葩的日期组合，
而有了这个提示，用户只需按照步骤依次输入年（1993）月（04）日（10）即可，
不会发生因日期格式提交错误而二次填写的操作。
未输入状态
hover状态
已输入状态
2.减少用户操作
继续拿苹果官网来举例子
在选择“国家和地区”的下拉列表中，合理地给出一个默认值“中国”，（苹果中国区官网，用户肯定以中国人为主吧），毕竟对于用户来说，填写信息永远都不是一件有趣的事情，合理的默认值可以节省用户的操作时间。
（但是一向精致的苹果官网，却出现了错别字，一个“登录”，一个“登陆”，最起码统一一下嘛。）
是登录，不是登陆。又不是诺曼底。
还比如支付宝官网的注册页面
将国籍地区和国字区号的默认值都给出，减少用户筛选。
类似的还有模糊搜索功能
豆瓣搜索
如果能让用户少打一个字，这就能极大改善用户体验和减少错误，提升用户的输入效率，从而提升pv ，uv，等各种v。
3.减少操作误差
光是减少用户操作还不够完美，还必须在此基础上减少操作误差。
比如在填写银行卡号时，支付宝会把每四位数字进行分组，用空格分割，减少了用户的视觉负担。心理学研究表明，人一次能记住四项事物，将信息组块化更有助于记忆。
（相关文章可点击蓝字阅读 人如何记忆 ）
同时在填写卡号时，程序会调出数字键盘，填写完卡号会自动选择用户，不需用户进行二次点击，这也是呼应了上一条中的减少用户操作。
还拿招行来说事，发现大厅内的可视化自助界面中，输入银行卡号却没有进行信息分割，整整16位数字紧紧挤在一起，相亲相爱一家人啊 。
导致我输错两次……
啊，我那亲爱的招行！
以上是表单套路的前两招拆解
下周将会继续拆解表单的 交互和 UI
同时也会分享一些吊炸天的表单视觉页面
最后，给自己的文章打个广告
最后，
每周日21:00整，摊主在杂货摊准时等你。
不见不散。
