在年初的时候，有个重要活动，需要用户进行表单输入，但是因为输入框特别小，操作起来非常不容易，导致用户进行了投诉，还严重影响了活动参与数据。

自互联网发展到现在，当我们想使用某个站点的服务时，站点也想了解用户的信息资料，这时候就产生了表单，在站点提供服务给用户前，需要用户进行填写资料。但是冗长负责麻烦的表单，会立马劝退用户。这时不禁抛出以下疑问：

怎样做出简洁干净令用户愉悦填写的表单呢？

我们不能忽略一些交互细节，往往一些好的交互提升会带给用户不一样的美妙感受，而我们这边通过查阅了一些表单设计文章，输出了以下表单的设计功能建议：

类别	优化建议
输入框	清晰的文本标签 合理的输入框尺寸，通常18-33个字节 合适的字体大小，推荐14-16px字号 颜色与背景对比度建议大于4.5 提供舒适的点击区域，拇指触发区（PC端：45-57px，移动端：32-40px 键盘tab访问表单内容（PC端） 输入框显示边框，聚焦时高亮输入框 避免使用占位符文本作为标签
单选&多选	合理的输入框尺寸，通常18-33个字节 合适的字体大小，推荐14-16px字号 颜色与背景对比度建议大于4.5 根据选项的数量选择合适的设计形式
步进器	严格校验，超出范围提醒 默认值设置与用户目标尽量接近
滑块	拇指直径建议20px左右 滑块的选择，牵涉附近的更改应即刻反应
日历	建议使用线上可显示整个日历而且可更换样式的日历插件或者日历组件
操作按钮	区分主次按钮，建议存在视觉差异，注意颜色使用 建议按钮矩形带有圆角 按钮大小应大于最小的触摸尺寸 将按钮放置在用户路径视线中 按钮文案应该描述清楚目的 不要使用重置按钮 按钮看起来可点，并且点击后应该提示用户表单状态
反馈	需要进行输入验证 在对应的位置显示错误的信息 不要隐藏帮助文本
整体	使用一列的表格，多列会破坏用户的垂直动量 抛弃*号并把可选的表示出来 信息稍多的情况下建议组合相关信息 信息多的情况下建议步骤化表单 表单有误或者有异常情况刷新时建议可以保留填写过的表单 图片文字识别或者地理位置识别等代替输入 有登录态信息获取可以自动填入对应信息表单 验证过滤，注意XSS注入
移动端（横屏）	建议使用响应式输入框采用水平样式或者悬浮式

表单组件

输入框

一般输入包含文本标签，输入框本身以及信息提示组成。

建议规范：

1. 清晰的文本标签

让用户正确识别需要输入什么，文本标签必须要有的，还可以增加普遍认知的图标，用户一瞬间即可反应输入内容（例如搜索的放大镜图标）。  

2. 合理的输入框尺寸

输入框尺寸根据输入内容的长短来设计，会更加适宜用户阅读和输入，如果一个字段太长或太短，用户就会开始怀疑他们是否误解了这个标签。

对于具有可变输入(姓名或电子邮件)长度但在标准平均范围内的表单字段，应该根据可能输入的平均长度找到合适的宽度。研究表明，这些输入字段的范围通常在18到33个字符之间。

譬如我们经常输入的验证码，一般为4个字符的长度，减低用户浏览时感受的输入负担。

3. 合适的字体大小

应该确保字体足够大，尽量让它们清晰可辨，参考了苹果跟安卓的设计规范，安全文字一般14px-16px之间。

在移动端输入框，如果设置了12px的输入字号，浏览器会对此进行放大处理，让用户能辨识出输入的具体内容，但是设置字号为16px的就没有进行放大处理。

4. 颜色与背景高对比度

标签和输入文案的颜色，确保在W3C的对比度范围中，较小的文本应当确保至少和背景之间有4.5:1的对比度比率。

5. 提供舒适的点击区域

确保用户用户点击输入的时候，触发区足够宽松舒适，而不是很难点击。查阅到别人研究的文章《Designing Perfect Text Field》指出，拇指的触发区域应当控制在 45~57px之间，但是在移动端上，控件看起来太大会让人觉得不舒服，所以你的文本框高度应该设计在32~40px之间，这样看起来足够友好，又不会太大。

6. 选择合适的键盘（平板&移动端）

输入框选择合适的键盘，可以让用户更快的填写表单，例如输入框内容如果只需输入数字的，可以选择数字键盘。

7. 键盘tab访问（PC端）

根据W3C的用户实践设计模式中键盘交互模式提及，表单应该只能通过键盘上的tab按钮来访问和编辑。

8. 输入框显示边框，聚焦时高亮输入框

具有定义边界的输入字段对于有移动障碍和认知障碍的用户非常重要。

点击聚焦输入框时，建议在输入框提供一个清晰的视觉提示——改变颜色，在框中淡出，高亮显示，缩放等等。

9. 避免使用占位符文本作为标签

虽然占位符文本用作标签非常节约表格的空间，但是对于用户来说非常容易出现忘记输入的是什么，然后又要删除掉输入框所写的，才能看到占位符的标签内容，所以目前更推荐使用悬浮标签。

更详细的分析可查看：《Placeholders in Form Fields Are Harmful》

样式选择

输入框目前大多采用以下三种方式：

1. 垂直式

   根据Matteo Penzo的眼动实验发现，顶部标签方式，标签移动到输入框需50毫秒，比左对齐标签方式（500毫秒）快了10倍，比右对齐标签方式（240毫秒）快了5倍左右（资料来源：《web表单设计：点石成金的艺术》）。在PC端表单页中推荐使用，但在移动端或者小弹窗上使用会占据较大的空间，内容过多时会有滚动条的出现，增加操作难度；但如果还有其他表单控件，类似选择框使用垂直布局的话，为保持样式一致性输入框也采用垂直式，整体来说还是视情况而定。

2. 水平式

   比垂直式要节省空间，在移动端和小弹窗展示上都可以考虑使用，但是如果左边标签内容过多时，会缩小右边输入框的空间，可能会无法展示完整的信息。移动端横屏中较推荐使用。

3. 悬浮式

   行内式的进化版，行内式将标签作为占位符放到输入框内，虽然极大的节省了空间，但是用户在输入的时候容易忘掉标签的内容，会产生输入是否正确的疑问；而悬浮式即在输入时把标签悬浮到顶部，让用户可以判断输入的内容是否跟标签符合。

样式设置如下：

三端样式建议选择如下：

1. PC端，优先考虑垂直式，再考虑悬浮式。
2. 移动端，优先考虑水平式，空间允许下可考虑垂直式和悬浮式。
3. 游戏内置横屏，优先考虑水平式。

单选组件

单选，在提供的选项中只能选择其中一项。

建议规范：

1. 合适的字体大小。

   同输入框的规范一样，建议安全文字一般14px-16px之间。

2. 颜色与背景高对比度。

   同输入框的规范一样，确保文本和背景之间有4.5:1的对比度比率。

3. 舒适的点击区域

   

   建议将整个单选框和标签选项作为点击区域。

4. 合适的单选设计形式

   根据选项的数量来选择对应的设计形式（单选常见样式如开关形式、分段控件式、垂直列表式、输入筛选式还是下拉菜单式）

5. 考虑预填写

   让容易被选中的放在选项的最前处，例如生日年份，有些控件一拉下来就是1960-2018，但是目标用户也不大可能是1,2岁的小孩吧，这种选项完全可以排除掉。

 

样式选择

单选形式目前大多采用以下五种方式：

1. 开关形式：适合二选一形式，选项是互斥状态；

2. 水平列表式：适合选择项少于6项，还可以节省空间，适合移动端；

3. 垂直列表式：同样适合选择项少于6项，显示更直观，也容易选中，但是较浪费空间，适合PC端；

4. 输入筛选式：适合选择项非常多的情况，输入第一个文字时，下拉出现相应的匹配项；

5. 下拉菜单形式：适合选项较多的情况，而且应该是形式都不适用后的最后的选择使用。

样式设置如下：

选择建议：

1. 开关式：只有两个选项，并且是互斥状态
2. 水平列表式：小于6个选项，适合移动端
3. 垂直列表式：小于6个选项，适合PC端
4. 输入筛选式：适合非常多选项，移动端&PC端皆可
5. 下拉菜单形式：适合选项较多情况，上面形式选择皆不适合时，考虑使用。

多选组件

建议规范：

建议规范基本跟单选组件一致。

样式选择：

单选形式目前大多采用以下四种方式：

1. 开关形式：表示选中或非选中两种状态之间的切换，一般只有一条单独使用

2. 水平放置式：适合选择项不非常多和移动端展示，节省空间

3. 垂直列表式：适合选择项少于6项的情况和PC端显示，更直观，也容易选中，但是较浪费空间

4. 输入筛选式：适合选项较多的情况，增加搜索筛选功能

 

选择建议：

1. 开关式：只有两个选项，并且是互斥状态
2. 水平列表式：小于6个选项，适合移动端
3. 垂直列表式：小于6个选项，适合PC端
4. 输入筛选式：适合非常多选项，移动端&PC端皆可

步进器

步进器（Stepper），对于表示数量的谨慎的数值选择，例如买东西时的购物数量。（Google在Material Design里把Stepper定义为步骤指示器，但其他设计规范都将Stepper定义为步进器。）

设计注意：

1. 步进器里面是有input输入的，需要特别注意安全，前后端都需要校验，输入数值超出最大或者最小值要对用户进行提醒并矫正数据为最大或者最小值。
2. 设置的默认值最好与用户目标数组较近，减少用户的点击次数；
3. 考虑数值的上限与下限，在到达限制后禁用相关按钮。

滑块

滑块，对于刻度范围上的非谨慎选择，例如捏脸的时候对脸部的调整。由轨道，拇指，选中值（可选）和刻度线（可选）组成。

建议规范：

1. 触碰范围，让用户容易点中滑块上的拇指，拇指直径建议20px左右。
2. 即刻反应，当与滑块交互时，周围涉及的更改立即有反应执行。

日历

日历，选择最近日期，例如输入出版时间，千万别用于生日日期输入。

建议规范

1. 默认的日期选择代码，PC端日历组件显得比较小，而且不利于进行样式更换，影响页面的美观，而移动端的日历选择是下拉选择的形式，如果选择日期离当前日期多于3天，就越来越需要较久的时间进行选择。建议使用线上的日历组件，直接展示当前月的日子，选择时非常直观，而且对于样式也可控。

 

操作按钮

操作按钮，当用户点中时，将执行表单操作。

建议规范：

1. 主按钮和辅助按钮之间建议存在视觉差异，以帮助最小化潜在错误的风险，并帮助用户获得成功的结果。

   

2. 颜色在按钮中非常重要，它帮助用户更清楚地导航和理解操作。注意红绿颜色不能同时使用，不利于色盲用户的可访问性。

   

3. 建议按钮矩形带有圆角。研究表明，带圆角的按钮的效果最好，因为圆角指向内部时，会将注意力吸引到按钮的内部。而从心理学的角度来看，我们已经进化到远离任何尖角的东西，因为它们代表着受伤的威胁。

   

4. 合适的按钮大小，根据麻省理工学院触摸实验室的研究，手指垫的平均尺寸在10-14mm之间，指尖为10mm x10mm，这是一个很好的最小触摸目标尺寸，设计的按钮大小不能小于这个最小触摸尺寸。例如iPhone6（10.41cm x 5.85cm,10mm大概是12px左右）

   

5. 应该将按钮放置在用户路径视线中，这些按钮需要合理的位置来确定用户接下来要去哪里，以及人们实际如何阅读页面。

   

6. 操作行为描述清楚目的

   

   例如：上图将提交按钮改成注册，让用户清晰知道填写表单的目的是用来注册。

   表单缺乏清晰度确实会损害用户焦虑的可用性和可访问性，提交按钮应清楚地说明用户点击它们时会发生什么。提交按钮应该有“发送消息”，“完成购买”，“继续下一步”或“注册完成”等文本。使用提交按钮可以做的最糟糕的事情之一是它写着“提交”。

7. 不要使用重置按钮

   因为如果用户在意外情况下点击重置按钮，而整个表单被删除，他们会因为沮丧而放弃表单。

8. 按钮看起来可点

   确保按钮看起来是可以点击的，并且加入点中时效果，点中之后清楚地提醒表单正在处理，这有助于防止重复提交。

反馈

建议规范：

1. 需要进行输入验证

   表单验证主要有三种：

   1. 每个字符输入都进行验证，实时反馈
   2. 完成输入字段输入离开的时候验证
   3. 提交表单的时候再进行验证

   第三种验证方式不建议使用，因为它不具有良好的用户体验，而最受欢迎的方法是第一种实时内联验证，因为它可以帮助用户更快地完成表单，并且花费更少的精力和更少的错误。

2. 在对应的位置显示错误的信息

   

   使用颜色、图标和文本突出显示错误区域，并在对应区域下方显示错误信息，即使发生错误，也不要清除已完成的字段信息。

3. 不要隐藏帮助文本

   

 

表格整体建议

设计方面

1. 使用一列的表格，多列会破坏用户的垂直动量

   

    对于复杂繁多输入要求的后台系统录入时，可按实际情况考虑，可以参考文章《Form Design for Complex Applications》

2. 抛弃*号并把可选的表示出来

   

   简化表单的填写最好只出现必写，但有些可选的可出现1-2个即可，然后标明是可选的，减少用户填写的压力。可查看文章：《Form fields Required vs Optional》

3. 组合相关信息

   

   长形式的表单填写会让用户感到压力，通过组合相关信息的表单，用户可以更快地理解表单。或者将表单步骤化，显示进度条。

4. 信息多的情况下建议步骤化表单

   

   例如由于淘宝涉及安全支付问题，注册填的信息较QQ多，淘宝这边主要分步骤进行注册的填写。

功能方面

1. 信息保留

   试想一下，当我们将要填完一个表单，然后点击提交时，弹出网络异常请刷新重试，接着点击刷新后发现刚刚辛苦填写的内容全没，那会是非常打击用户心理的事情。

    

   又譬如像上图的情况，当我进入页面看到写故事有奖励的页面，然后立马就写上一段长故事，但是当我点发布故事之后呢？却提示需要登录，点击快速登录后，页面进行了刷新，刚刚写的故事都没了！！！如果刷新后书写的内容还在的话会让用户好感备升。

   注意：但对于注重隐私的用户来说，需要特别说明信息的保留仅在本地，在信息未被用户发送之前站点并不会获取到。

2. 识别代替输入

   可经过用户允许后自动获取用户的当前位置，自动填入当前地址。或者输入证件银行卡信息可通过图片识别证件号银行卡号自动填入输入框中，即准确又省事。

   

   例如使用腾讯优图的识别技术，获取文字的身份证号码，即可自动填入输入框。

3. 能确定的就省略输入

   客户端内的页面，在打开客户端时已经经过注册登录，那在这些客户端内置页面里，如果需要输入用户信息来参与活动的话，可以通过拉取客户端保存的用户信息，即可参与活动，省略用户的报名输入操作。

   

4. 验证过滤，注意XSS注入

   对输入的内容进行内容格式验证，避免黑客对站点进行恶意攻击。

   

移动端横屏建议

由于在手机游戏里面的内置浏览器大多是使用横版来展示页面，但是当手机处于横屏模式时，巨大的键盘让问题变得更加复杂，只有三分之一的屏幕用于显示页面情况(在某些情况下甚至更少!)

例如，在iPhoneX上，横屏下弹窗后，页面内容非常少，垂直式的输入框更是看不到标签内容，用户一旦想确认标签内容时，还需要把输入框拉回下来才行。而水平式和悬浮式的输入框明显还能看到标签内容。

建议使用响应式对移动端横屏应用水平式或者悬浮式的输入框。

图片摘录自：《UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 1)》

对于单选&多选，根据选项的个数10个以下的情况下，选择水平列表式会更好，一是没有默认键盘下来菜单出现，下拉菜单的选项需要用户轻弹滚动选择；二，选项列表出现选择，用户可更直观浏览可选内容；三，样式可进行自定义。

总结

以上的表单优化建议内容主要通过收集资料整理的，欢迎多多提意见交流~~~