表单设计经常被初学交互的同学忽略，甚至在实际开发过程中也被产品经理和设计师忽略，感觉它似乎没那么重要，设计起来也很简单。但其实，一个好的表单设计可以极大地提升用户的体验，好的表单设计案例也是很值得小白设计师仔细研究的。
表单是用户和app之间的对话，是人机交互的一个重要入口，所以好的交互方式是十分重要的。糟糕的表单设计会给用户带来令人抓狂的体验，影响信息录入的效率，也是登入率流失的一个重要原因。
今天，小编就带大家好好探究一下表单设计。
规范的移动表单组件
想要提升表单设计的用户体验，规范的移动表单组件是十分重要的。
| 输入框 |
输入框由标签、输入框、提示、校验四个元素组成。
标签：明确告诉用户输入什么。
标签一般有三种形式：左标签、顶部标签和行内标签。他们各有利弊，需要根据实际情况进行选择。
左标签是目前最为常见的一种标签样式。但左标签会占据较大的屏幕空间，导致输入框可能无法完整展示信息，严重影响用户体验。
顶部标签就是标签在输入框的上方，这样输入框就可以足够长展示完整信息，但是这样加长了信息展示的长度，用户可能需要滚屏才能填完。
行内标签似乎很适合手机端的表单设计，可以节省页面空间，但是用户一旦切换到输入状态，就看不到这些标签了。
输入框：它包括文本字段，数字字段，混合字段，密码字段等。
在输入框的设计中，键盘的调用是十分重要也是值得设计师思考的，比如输入数字时，可以主动调用系统的数字键盘而不是全键盘。
提示：帮助用户完成输入。
常见的几种方式：把提示的内容置于输入框内；当输入框获取焦点时，出现文字气泡提示；使用icon提示等。
校验：用户厌恶等提交时才发现他们之前输入错了东西，所以输入过程中的校验是非常必要的。
小tips：
要尽量减少输入个数，在隐私允许的情况下获取有用信息，简化用户操作，让填写表单变得更轻松。
对齐很重要，对齐很重要，对齐很重要！重要的事情说三遍。
对齐的方式多种多样，归根结底也是要根据用户需求进行选择。
如果希望用户快速扫描表单，就把标签放在输入框上面，如果希望用户仔细阅读，放在输入框左侧。
对信息进行分组，可以有效提升用户的使用体验。
表单不建议有多列。
| 单选框 |
单选框 (Radio)用于一组相关但互斥的选项中，用户能且仅能选择一个选项。
单选框的选项数量不宜过多。如果选项内容较多，当选项内容重要需要罗列出来时，可以选择单选框，否则应使用下拉列表控件。
点选范围也是需要设计师考虑的，如果单选按钮的按钮很小，根据费茨定律它将会很难被点击。在设计单选的时候，需要把点选热区尽量做大，让用户不仅只能点击按钮才能选择，点击选项词也可以选中。
在布局上，尽量垂直放置单选项，每行放置一个选项。水平放置的单选按钮在整个表单中眼动扫描的效率会下降。当然，现在也有很多设计师尝试使用横排单选框，通过视觉手法把选项设计的清楚分明。
提供一个默认的选项也是必要的。UI设计中的10项启发式评估原则认为，用户可随时撤销他们的行为，这意味着应该让他们易于把UI控件恢复到原始状态。
对于选项的排序，需要根据具体的需求决定，可以选择按照逻辑的优先级顺序进行排序，比如可以按照选项由易到难进行排列，另外对于多语言使用的app，不考虑使用字母顺序排列。
一个适当的动效会给用户带去微妙的用户体验。
| 复选框 |
复选框为用户提供一组相互关联但内容不兼容但选项，用户可以任意选择一个或多个选项，也可以不选任何选项。
和单选框一样需要注意的是，复选框也要让用户容易选择。
| 开关 |
开关通常用于表现一个动作(例如开始或停止某个操作)，提供了两种简单直接但对立选项。有点类似于点灯的开关。
iOS和android系统的不同，开关一般有如下两种形式 。
| 按钮 |
按钮在之前的文章中就有过详细的讲解，本篇就不再累述。
原文传送门：一个UI按钮设计关乎整个交互体验
| 下拉列表 |
下拉列表由标签、下拉的列表和选项组成。
下拉列表较为紧凑，节省空间，对于那些不需要强调选项的选择非常合适。
下拉列表一般均为单选。
下拉列表的提示也很重要 ，要让用户清楚明白自己要选择什么。
在下拉选项中，如果选项长度差别很大，尽量让选项一行显示，以最长的选项为基准设计下拉框的宽度。
要避免出现超过15个的选项。
| 滑块 |
滑块是表单设计中经常被设计师忽略的一个控件，它用户精确度不是很高的范围选择，例如选择房价的范围时，可以使用滑块代替手动输入。
为了有效且易于操作，滑块按钮必须足够大，轨道必须足够宽以便于点击。
与滑块进行交互的重点是要快速显示结果。
*部分图片来自于网络搜集，如侵权，则删
>>> 过往文章
[免费福利]鞋子x手绘 五一带你GOT’EM
才女从不担心工作，她只纠结阿尔托还是隆德～
预测2019年10个有影响力的技术趋势
本文由WELLDESIGN独家编译，未经授权请勿转载。
2992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
