不管是APP还是Web端界面设计，我们最常见的元素应该就是表单了，表单几乎是每一款数字产品都不可或缺的组成部分，也是设计师必须要亲身经历的设计组件之一，它的作用无可替代。下面介绍表单和设计表单时会碰到的问题。
一、什么是表单？
表单在产品中主要负责数据采集的功能，用来搜集和呈现一些数据、信息和特定的字段，大部分涉及到数据采集功能的模块，我们都可以称其为表单。范畴极为广泛，应用情况牵涉到方方面面，可以被灵活运用于多种功能模块中。
表单并不是表格，是最为常见的页面模块， 比如登录网站填写信息、购物填写地址、填写调查问卷、修改个人中心信息时……都是在和表单发生互动。表单是由多种元素组成，最常用的元素就那么几个，在设计过程中，设计师需要合理组织这些元素，帮助用户在填写表单时，轻松愉快的完成。
二、Bee express项目表单存在的问题
以下使用Bee Express案例来解析。Bee Express主要经营的是快递、速递柜业务，前期主要经营泰国市场，所有APP/网页的视觉语言定为中文、英文、泰文三种。那么我们设计的界面就需要去考虑在表达同一个信息时，中、英、泰三文不同长度的占比，需要预留足够的位置以供所有译文显示完整。
同时也碰到了诸多问题，在设计之前，基本就是以中文为主，组织好视觉语言后是没有办法随时提供英、泰两文的，即使提供了，也会碰到一些比较尴尬问题，下面我就以表单为主，将存在的问题列举部分。
△ 从上面的实例，我们能看出来，在中文正常的情况下，翻译英/泰文时候，很多问题就显现出来：
◆ 标签左对齐的方式在英、泰两文状态下，显的不够友好，参差不齐造成视觉有些混乱；
◆ 英文翻译在超过3个单词或某个单词过长时，就会出现重叠/覆盖的情况；
◆ 泰文都是非常碎小的单个符号，在标签过长时，无法确定从哪里折行以确保词组不会脱节；
◆ 输入的部分信息因横向距离过短，造成显示不全而自动省略，给用户带来记忆负担；
◆ 因视觉的混乱，导致可操作性很差，易用性过低；
......
上面只是根据展示的单个页面列举的部分问题，其实在其他各种类型的表单里，还有更多可改进及优化的空间，比如完成的先后顺序、合适的输入格式、下拉还是弹窗、状态反馈、操作按钮、如何简化以及分页等，都需要设计师去细心的打磨，以便于用户高效、愉快的完成表单内容。
三、表单的组成结构与类型
1. 表单的组合元素
表单的目的、内容、大小长度等虽然各不相同，但基本元素比较固定，在进行布局和交互设计的时候，这些元素有着较高设计要求，合理组织这些元素有助于用户轻松完成表单填写，在产品上需要高效、显著且有良好的可访问性。表单主要有以下几部分组成：
◆ 标签：告诉用户这里应该输入的元素是什么，如：姓名、电话、地址；
◆ 输入域：可交互的输入区域，如：文本框、选项框、下拉选择、文件上传；
◆ 占位符：占位符是对标签进行额外的信息描述，如：输入信息的范例、填写帮助；
◆ 前导图标（可选）：描述文本所需的输入类型和特征，如：登录的账号、密码、验证码；
◆ 后缀图标（可选）：对输入内容进行控制，如：下拉的展开与收起、清空；
◆ 帮助（可选）：提供表单内容的注释或辅助类容，如：说明、注意事项；
◆ 反馈（可选）：告知用户当前操作可能或已出现的问题，如：提交成功、错误提示、网络问题；
◆ 键盘（可选）：在文本编辑时需要使用键盘，如：设备系统键盘、应用内置键盘；
◆ 动作按钮：动作按钮是在表单的结尾，如：提交、下一步、清空所有信息。
2. 选择合理的对齐方式
常见的对齐的方式有三种，左对齐、右对齐和顶对齐。不同的对齐方式都有各自的优点和缺点，我们需要根据项目实际情况来选择最合适的对齐方式。
标签左对齐：
◆ 优点：左对齐有足够的垂直空间，可以充分利用，而且便于信息的扩展。
◆ 缺点： 需要更多的横向空间，主要由标签的字数决定，需要刻意控制，否则会显得参差不齐。与输入字段关联性弱，完成速度最慢，导致加长用户完成表单的时间，增加用户的时间成本。
△ 从上面的实例，Bee Express项目在中文/英文/泰文状态下，不适合标签左对齐的方式。
标签右对齐：
◆ 优点：标签到输入框的间距是固定的，用户在浏览时速度更快，减少了用户完成表单的时间
◆ 缺点：所占空间与左对齐相同，左右边缘呈锯齿状，标签与输入字段距离一致，完成速度一般。感觉上有些随意，在视觉上不易快速了解表单的全部信息，且缺乏统一感。
△ 从上面的实例，Bee Express项目在中文/英文/泰文状态下，相比左对齐可以提升用户完成效率，但并未解决因不同文本信息过长而造成自动省略的问题，同样不适合标签右对齐的方式。
标签顶对齐：
◆ 优点：符合自然视线，完成速度最快，好布局，适合长短不同的标签，用户在视觉扫描时能快速的捕捉表单信息，更快的完成操作。
◆ 缺点：面对表单内容较多、内容过长时，需要更多的纵向空间。
△ 从上面的实例看，相比左对齐和右对齐的方式，Bee Express项目在中文/英文/泰文状态下，更加适合标签顶对齐。虽然面对表单内容较多、内容过长时，会占据更多的纵向空间，但方便用户能更加快速便捷的完成表单，提升易用性，视觉更加统一。还能根据表单内容进行分页来解决单页纵向空间过长的问题。
3. 选填与必填
需要正确区分必填及选填的字段信息，尽量避免可填字段，如果不可避免，应该做明确区分。避免用户不知道哪些字段必须填写、哪些是选择性填写。根据用户长期使用产品被培养出来的习惯，可以用下列方式区分：
◆ 使用带 * 标记加入标签提示，来告知用户必填字段，选填字段不做标记；
◆ 必填字段过多时，不用做任何标记，选填字段标签处备注“选填”；
◆ 避免必填和选填字段同时标记或者都没有任何标记。
4. 内容分组
在我们设计表单需要的字段内容较多是，需要合理的使用内容分组，这样整体看起来更加有组织性。接近性（格式塔原理）原则告诉我们： 相互靠近的物体被认为比相互距离较远的物体更有关联性，这样能使设计界面层次有序，视觉清晰，减少视觉噪音。分组时需要注意：
◆ 内容属性相近或有关联性的放在一组；
◆ 根据信息的重要性及难易程度排列分组，将选填的表单内容靠后。
5. 合理分页
表单信息内容过多时，需要合理的使用分页，避免用户在事先就觉得需要在这个表单上花费大量的时间，就有可能产生放弃的想法。比如我们申请信用卡，就是采用多个表单页面逐步完成的。
另外，在表单信息较少时，为了提升易用性和转化率，也可以采用分页、分步骤完成。如问卷调查，每个问题都是单独的页面，这样可以避免信息的相互干扰，也让用户得以放松心情，专注于当前选项，提升易用性；还有部分APP登录，把手机号输入和验证码分为两个页面操作，Facebook 的数据表明，分步也是可以提高成功率的。
6. 展示与隐藏
部分内容在用户需要的时候可以展示，或者系统强烈推荐的选填内容也可以呈现给用户，但在用户明确不需要时，适时将信息隐藏，避免多余表单信息的干扰，造成用户的不确定性。
7. 匹配合适的键盘
根据表单内容的不同属性，应对不同的输入需求，应该提供不同的键盘类型，以便于用户使用更加快捷。常见键盘有以下类型：
◆ 设备系统内置的输入法，或者下载符合我们长期使用习惯的输入法APP；
◆ 涉及资产安全方面，提供内置键盘，打乱键盘字母及数字的固定位置，可以防止窥窃，提高安全性；
◆ 数字输入，提供纯数字键盘，能够提升用户的完成效率，让输入变的更简单。
以上内容主要为UI中的表单设计（上篇）内容，可继续查看（下篇）。本文章仅作个人学习笔记，如需了解详情可移步到UI中国查看@大漠飞鹰CYSJ原文章。