04 表单
文／付铂璎
用App时每次遇到填写表单都会是一件头疼的事情，所以作为设计师，每次设计表单界面时也不可以忽略它的重要性。通过了解表单的基本组件样式和使用场景，将其运用到设计当中，在不同的情境下使用最合理的组件来搭建表单，可以让表单填写变得更轻松。
表单中的内容有很多，例如复选框、单选框、输入框、下拉选择、开关、分段控件等元素。表单对于用户而言是数据的录入和提交界面；对于网站而言是获取用户信息的途径。表单可以帮助我们通过采集更多的用户信息来给用户提供更贴心的服务。
移动端表单中的基本组件及使用场景
正确设计表单的前提则是了解表单中常用的组件以及它们的特性，以及在不同场景下如何选择表单组件。这里再次强调下，下文的组件讲的都是在表单中的运用。
1. 输入框
这是接受用户主动输入文本的区域，当用户主动点击输入区域时，会唤起键盘。输入完毕后，点击键盘的确认键，应用会自动根据输入的信息显示对应的内容，如下图所示：
当然，相比那些只需要点击或者滑动的组件来说，输入框对用户来说操作成本较高，所以我们在选择用输入框时，应该考虑是否还有其他方式能减少用户的操作成本，例如下拉菜单，可以直接选择其中的内容。
2. 分段控件
分段控件来源于iOS规范，通常在单选项为2～5个的场景下使用，如下图所示：
在界面中分段控件起到分割和筛选同类数据的作用。另外，它可以把所有的选项都呈现给用户，用户可以快速地做出选择。交互部分需要注意的是，分段控件只能通过点击控件本身的分段来进行操作，不可横滑切换。
3. 状态切换器
状态切换器又称开关，是仿照真实的开关理念而设计的。选择开关的前提是需要两种简单且直接对立的选项。例如“开”和“关”，“显示”和“隐藏”，如下图所示：
使用状态切换器的项目通常重要性相对较低，都是附加功能，不会影响表单的提交流程。
4. 滑动控制器
当表单中存在选择一个值或一个范围时，可以舍弃复杂的下拉菜单或者系统默认的选择控件改用滑动控制器。既减少用户的操作，又增加界面的设计感，如下图所示：
滑动控制器在表单中多用于调整额度，相对输入和步进器来说更加方便，但占据界面中的空间比较大。当然其他产品中也有用到滑动控制器的，不过都不是在表单中的运用，这里就不一一列举了。
5. 数字步进器
可以被用在只能递增／递减其数量的选项上，以便让用户能快捷地微调数值。使用步进设计代替下拉列表，既可以降低操作失误率，也能在一定程度上减少点击次数，如下图所示：
步进器在产品中经常出现在购物列表中，相比单纯的选择数字和输入数字，这种方式允许用户遇到大数额时可以手动输入，遇到小数额变化时又可以通过点击逐步增减。
如何提升用户信息录入效率
1. 防止输入框的遮挡
错误示例：如图，当我们要输入最下面“亲友公司名称”时，键盘被唤醒，同时遮挡了所有需要填写的表单组件，需要滑动底层界面才能继续填写。这种体验是十分糟糕的。
正确示例：在用户输入完当前表单的某一段落时，底层界面位置应该自动往上移动，显示当前该填写项目的完整输入框，确保表单在填写时无任何元素的遮挡，方便用户的输入。
2. 实时校验
错误示例：需要用户填完所有信息提交时，才反馈存在很多错误，用户需要根据系统所给出的提示再次修改提交，影响用户体验。
正确示例：每当用户离开当前输入项时，系统根据用户输入的信息进行判断并及时告知用户输入的正确性，甚至还能引导用户进行接下来一系列有关的输入。如此就会减少用户的反复操作，表单也会变得更容易让用户接受。
3. 键盘匹配
在表单中通常会出现不同的输入需求，有需要输入文字的，有需要输入英文的，有需要输入数字的，届时我们应该为不同的输入需求匹配不同样式的键盘，减少用户的切换操作，提高用户的输入体验。例如，输入电话号码时就可以只存在数字键盘；而输入邮箱时不需要拼音，键盘就只保留英文和数字即可。
4. 智能预设
错误示例：表单中的信息每次都需要重新填写，填写表单本身对用户来说就是一件很头痛的事情，这样不仅增加了用户的操作，出错率也会相对提升。
正确示例：每日优鲜中第一次添加收货地址时，由于产品不了解用户的个人信息，所以所有项目都需要自己手动完成。但当我们再次添加地址时，产品会自动默认填充收货人、手机号码、城市等之前的信息，这就减少了用户的填表时间。
画重点
（1）表单的基本组件：表单中的内容有很多，例如复选框、单选框、输入框、下拉选择、开关、分段控件等等，本文主要分析了输入框、分段控件、状态切换器、滑动控制器、数字步进器。
（2）提升录入效率的方法：防止输入框遮挡、实时校验、键盘匹配、智能预设。
通过明确表单中组件的功能以及在不同场景的使用，可以让表单的设计变得清晰易懂，提高用户的填写率。同时我们应该思考如何优化用户在使用时的交互效果，避免造成反复的操作。
参考资料
App设计必修课：如何设计出规范的移动表单组件 http://t.cn/Eq1AeNN
移动端下拉表单的更好选择 http://t.cn/RKIWZ8s
干货！移动端表单最佳实践 http://t.cn/Eh6EBOL
如何设计选择菜单 http://t.cn/R5jpjS6
表单中的勾选框和开关 http://t.cn/RtvoZdb
小功能、大细节丨关于选择菜单的套路 http://t.cn/RDUU8QY
移动端表单设计小妙招 http://t.cn/EfiiOTd
这个控件叫：Segment Control/分段控件（附录与Tabs的区别） http://t.cn/Efii1PR