泸艺鸣

（吉林大学，吉林 长春 130000）

0 引言

当前移动端App设计逐渐形成体系，App界面由多种组件/控件及文本构成。这些组件控件经过设计合理布局，才能给用户良好的体验。其中App里的表单组件必不可少，这类组件是系统可获得用户信息达到用户指令的主要功能。表单里的操作组件类型决定了表单的类型，笔者把表单分为 3类：输入型表单、选择型表单、复合组件表单，本文将依次阐述这3类表单的体验设计要点。

1 输入型表单

输入型表单的交互状态不同涉及的视觉元素样式也有所不同。输入型表单交互可以分为5种状态：默认常态、点击焦点状态、输入状态、禁用状态及验证状态。

1.1 输入型表单的默认常态设计

在默认常规状态下，输入型表单可由标签、占位符（默认提示文案）、输入框外框这3个元素组成。标签可以理解成一个标题，用来说明用户输入时所需要填写的内容。在移动App的UI设计中，会根据不同页面场景及用户的认知感知适当调整标签的形式[1]。首先，用纯文字标签样式居多，标签文字尽量控制在6个字符以内，内容文字言简意赅。其次，图形标签的运用，视觉上看多个表单的图形标签比文字标签字符长短不齐要舒服得多。用图形标签的前提条件是用户对界面有一定的认知，比如登录注册页面的用户名人像图形和密码钥匙图形。再次，无标签的情况，设计师需要把占位符的文字内容处理的简单易懂，不能含糊其辞。比如“请输入”这样非常不友好，用户不知道自己需要输入什么内容，如果占位符写“请输入姓名”，就可以避免用户的困惑。Giles Colborne提到简单的特性和个性应该源自于使用的方法和所要表现的产品，以及用户执行的任务[2]。

1.2 输入型表单的点击焦点状态设计

在用户操作移动端界面的时候，通常用手势操作界面，点击触发表单。这时候表单就处于点击焦点状态，表单里的占位符消失，光标在输入框内闪烁，提示用户当前可以输入文字或者数字，同时键盘也随之弹出。在这里需要注意的是键盘弹出会遮挡住页面一半的内容，所以要给键盘做个特殊处理或者表单内容置顶处理。比如招商银行App的记账页面设计，当数字键盘弹起时，键盘右上方显示“完成”按钮，用户点击完成按钮就可把键盘收起，方便用户进行下一步操作。招商银行App修改交易详情页面，由于输入型表单在页面最下方，用户点击表单输入框时，该输入表单整体随着键盘弹出向页面顶部移动，这样用户可以看到当前输入表单的内容。

1.3 输入型表单的输入状态设计

当用户点击焦点状态开始输入内容时，要把输入文字颜色做一个主要醒目的颜色，意在提示用户已输入了相关内容。从用户体验角度讲，输入操作对用户来说很烦琐，那么智能输入就起到了很好的作用。此外智能模块还可以进行图像识别，通过用户选择上传的图片分析出地址信息，系统会自动把内容填写到表单里，这一项功能也是输入型表单的一大进步。最后是表单输入状态下的容错性，让用户修改删除已输入的内容，这里要设置一键删除按钮，避免用户在输入内容过长时逐字删除。

1.4 输入型表单的禁用状态设计

输入型表单有不可点击的禁用状态，这种情况下要用视觉引导，从而告诉用户该输入框不可用。通常设计师用颜色的饱和度即颜色的深浅来设计，把输入边框的颜色饱和度降低，具体降低数值是边框正常状态颜色的30%透明度。第二种做法是禁用状态的输入框底色填充灰色，与正常状态下的输入框底色白色作色相上的区分。除了视觉引导，设计师还会在交互形式上作提示，禁用表单在用户点击焦点状态时，键盘不做弹出或者弹窗提示“不可用”。

1.5 输入型表单的验证状态设计

用户在输入内容后是否是符合系统所需内容，必须要经过验证，这里涉及两种验证—主动验证与被动验证[3]。主动验证与被动验证最大的区别在于验证的时间点是在输入过程中还是输入完成后。验证错误的提示一定要给用户指明方向，即提示错误的具体问题或正确的字符内容，如填写淘宝App收货信息页面，该页被动认证toast会提示用户“请输入11位电话号码”，文案很明确告诉用户填写电话号码的位数不对。为了降低用户操作错误次数，标签占位符的文案处理和键盘处理上都应该做暗示与引导。比如输入姓名时，占位符明确写出名字的文字范式及字符限制，从而提高用户输入效率。

2 选择型表单

选择型表单是设计表单最为推崇的一类表单，选择总是比输入方便，给用户准备好相关内容的选项，其实就是给用户减少思考的负担。选择型表单主要构成有：标签、占位符（默认提示文案）、输入框外框和选择按钮这4个元素。选择型表单交互分为4种状态：默认常态、点击焦点状态、选择完成状态及验证状态。选择型表单与输入型表单不同的是，焦点状态选择型表单的占位符不会消失。选择表单点击焦点状态，弹出选择框或者跳转新页面进行选择，为了不让用户感到交互层级过深，一般首选弹窗形式选择框。如果页面里有连续多个选择型表单，建议弹窗做连续可选择的样式，这样会避免用户反复点击表单的操作。

3 复合组件表单

复合组件表单包括选择按钮、操作（如增加或删除）按钮、输入框等组件组合一起的操作表单。笔者认为复合组件表单的体验设计应遵循用户心智，在复杂组件操作里要做简单明了的视觉引导，做到“简单”就应该遵循规律标准，以心理学研究成果—格式塔心理学为依据。格式塔心理学阐述设计的原则有很多版本。这里笔者简化到3个原则可应用到表单设计中，分别是：简单原则、相似原则、接近原则。

3.1 复合组件表单设计的简单原则

格式塔心理学研究表明，人脑对于复杂的东西不容易理解，而简单的基本几何形状就会被很好地接受。那么设计复合组件表单的视觉元素也应该尽量简单地用几何图形来表达。比如在设计的红圈报销App里的创建编辑审批流页面，复合组件表单里包括删除按钮、选择设置人员按钮及设置优先级计数器组件。这几个组件都需要遵循简单原则，笔者在设计的时候运用了扁平化风格，由单色线条组成以“圆”为基础轮廓的几何形状按钮。为了用户更好理解每个组件的操作，这里不提倡用复杂图形及颜色渐变的图标样式。

3.2 复合组件表单设计的相似原则

人的眼睛很容易关注复杂环境中外表相似的东西，由于复合组件表单里组件按钮多样，可以利用相似原则设计区分功能操作及层级关系。笔者在设计红圈报销App添加模板页面表单时，该页面表单有删除、栏位名称、栏位类型选择及拖动排序按钮组件，其中栏位类型包括单个表单以及整组类型表单。表单的删除是针对整个表单的操作，所以在设计中颜色是红色，有别于其他操作按钮颜色。栏位类型选择及拖动排序按钮组件都是可分别点击编辑的，属于相似操作所以用最深的黑灰色。其中整组类型表单下方要显示其组里的各个栏位内容（在当前表单里不可编辑只做展示），这里的文字颜色用浅一个层级的颜色，文字的大小也是比表单可操作内容文案要小。也就是说可见视觉元素的大小、颜色、质感相似，给用户的引导操作就是相似的。

3.3 复合组件表单设计的接近原则

表单里组件接近原则简单来说就是越是距离相近的元素越容易被看成同一组信息，或者被看作一个整体。比如飞猪App入住海外酒店表单填写页面，其中一表单有主标签（标签下有提示语及解释按钮）、两个输入框（入住人员姓氏与名字）和查看通讯录按钮。该表单的主标签、提示语与解释按钮在一个模块区域内，与其他右侧输入框的间距大约在48 px，即标签与右侧间距相对最大，人的肉眼很快把该区域看成一整体。也就是说该表单通过视觉上距离的区分，从而区分出了4个模块。

4 结语

移动端表单分为3种：输入型表单、选择型表单及复合组件表单。设计师要通过视觉元素的大小、颜色、质感及动画效果去做信息层级区分。还要注意不同的人机交互状态下视觉元素要随机应变，目的就是以用户为中心，让用户感知信息的输入是简单愉悦的，如果能让用户做选择就尽量做出选择项目，避免用户频繁输入操作。未来表单设计也要根据产品特殊应用场景去实现，像医疗行业、交通行业及金融业务等等，希望利用AI人工智能等新型科技技术，有越来越多的方便、快捷的表单形式服务于各行各业。