从七个方面介绍表单设计中的常见注意事项(组图)

　　

从七个方面介绍表单设计中的常见注意事项(组图)

　　

　　编者注：本文由途牛UED制作。笔者将结合实际案例，从7个方面介绍表单设计中常见的注意事项。

　　表单作为平台与用户联系最紧密的部分，也是影响商业交易成败的重要分水岭。好的表单设计可以为用户提供流畅自然的交易体验，保证用户购物情绪的正向增长，而混乱无序的表单会引起用户的负面情绪，影响甚至阻碍用户交易的完成，减少用户' 品牌好感度。和值得信赖。

　　那么在设计过程中，如何规避风险，提升表单页面的产品体验呢？下面我们将结合实际案例，从七个方面介绍表单设计中常见的注意事项。当然，这些规则是表单设计的一般准则，每个规则都有例外。

　　保持秩序 1.单栏浏览

　　表单载体的主要功能是将信息清晰地传达给用户。保持有序的列表形式更有利于用户浏览。它可以帮助用户识别和填写内容，而多栏表单会破坏用户的填写。法律影响效率。

　　

　　2.竖排

　　当表单中有多个选项供用户选择时，将每个选项垂直排列放置在每个选项下方，更有利于用户的阅读和浏览习惯。

　　

　　3.相同操作

　　我们应该避免在表单填写过程中更改按钮样式和颜色。需要用户确认的操作行为的一致性，可以有效减少用户在操作过程中的困惑和犹豫，保证用户在填表过程中的流畅体验，从而实现最终的商业交易成就。

　　

　　清晰的描述 1.标题不可替换

　　虽然通过使用占位符代替标题来扩大表单的填充空间并减少视觉噪音，但这种方法不利于用户的短期记忆。一旦用户触发输入并且占位符消失，用户可能会不知道在这里填写什么。在再次显示标题之前，您必须删除所有输入。显然，这是违背人性的。

　　

　　2. 输入域符合预期

　　输入框的长度与预期的输入内容成正比，保证输入框的长度满足用户的心理预期，并能在表单中完整呈现。

　　

　　3. 不隐藏基本帮助信息

　　作为购物过程中的信息确认和采集链接，用户需要对所购买的产品有一个清晰的了解。因此，在设计过程中，应强调或显示对用户填写表单有帮助的信息，避免因隐藏帮助信息而引起客户投诉。

　　

　　化繁为简 1.减少二次确认

　　基于OTA行业的特点，出行单业务较为繁琐，填写标准电商购单业务所需的信息层次较为繁琐。删除或合并信息，以方便用户输入信息。

　　以注册链接为例。在网页设计中，经常会有两次确认密码的链接。但是在移动端进行这样的操作会增加用户填写的负担，所以我们不推荐密码信息确认两次，通过明文显示或者优化交互来提升这个链接的体验密码消失的方法。

　　

　　2.*号的使用

　　遵循常用符号的习惯。在表单设计中，如果业务需要信息，我们经常使用*的形式来帮助用户区分信息的优先级。但是，当表单中的必填信息多于非必填信息时，大量的*应用会增加用户的认知负担，导致无法快速识别哪些需要哪些不需要。因此，在表单设计中，当必填项多于非必填项时，隐藏*号，对非必填项打上深色提示，帮助用户识别。

　　

　　帮助用户 1.暗提示应用

　　深色提示是帮助用户填写表单的主要方式。在设计中，要尽量减少视觉噪音，保证文字简洁，表达形式不干扰用户。因此，对比度太深或太亮，颜色太突出，不适合深色提示的视觉表现。

　　在交互方面，暗提示并不总是存在。当光标触发表单项时，仍会显示深色提示以引导用户输入。当用户进入该字段时，隐藏的提示内容被隐藏，让用户专注于填写的内容。

　　

　　2. 设置默认选项

　　在复杂的表格中，对于*敏*感*词*类型、手机区号、国籍等较为常见的选项，为用户提供默认选择交互，可以有效简化操作步骤，减轻用户填写表格的负担，并帮助用户更快地完成表单填写内容。

　　

　　3. 替代输入

　　对于在填表过程中可以固化的信息，应该允许用户选择而不是手动输入，这样用户可以尽可能降低输入成本。

　　例如：访问信息采集时，提供添加常用访问者的选项，可以帮助减少重复填写的负担；当证书类型为采集时，提供证书类型选项可以减少用户混淆，快速从现有选项中进行选择；邮箱采集自动显示时，可自动显示Email地址，帮助用户规范文本格式，快速完成表单填写。

　　

　　4.键盘匹配

　　根据填表类型自动匹配键盘类型。如“中文输入”呼出中文键盘，“姓名（英文）”输入呼出锁定为大写的英文键盘，“手机号码”呼出数字键盘......省去切换的步骤用户的键盘操作。

　　同时，根据填充步骤，合理定义键盘右下角的功能键，帮助用户实现换行/补全操作，消除用户关闭启动的重复动作点开键盘，在表单的上下填写项之间切换，让填写表单的过程更加流畅，不中断用户的思考。

　　

　　5. 按钮级别

　　当用户面临多个按钮场景选择时，我们应该帮助用户提前区分主动作和次动作，通过视觉语言强调主按钮，弱化次按钮，引导用户做出选择。

　　

　　6.二次确认

　　由于移动端的特性，用户在填写场景时相对不稳定，比如吃饭或者开车。在用户花费精力填写部分表单信息后，为了防止用户误操作，丢失填写信息的场景，此时需要进行二次操作确认，确认用户的操作意图。当然，如果用户没有对表单进行任何编辑，这个退出操作不需要二次确认。

　　

　　信息分组 1.多行文字

　　在复杂的表单中，用户在预览填充内容过长的类似表单时会产生输入压力。使用字号、颜色、间距等视觉手段对相似级别的信息进行逻辑分组，帮助用户更好地区分多行文本的信息级别，方便输入。

　　

　　2.数字组合法

　　对于一些常用的数字字段，可以使用离线通用的数字组合规则来帮助用户阅读和记忆。例如，电话号码的组合规则是3 4 4，银行卡号码的组合规则是4 4 4 3。虽然空格在数字表示中的应用很微妙，但它们仍然可以为用户在阅读中提供识别方便长号场景。

　　

　　减少跳转 1.选项暴露

　　在网页端表单设计中，当用户在填写表单时需要选择选项时，常见的交互表单是在选择器下拉列表中的选项上进行二次点击。在移动端设计中，触发选择器后的第二次点击会增加用户的填充成本。 Therefore, when designing, when the options are less than 8, all available options are directly displayed in the form, and when the options exceed too many, they are selected in the floating layer of the list.

　　

　　2. 减少页面跳转

　　在填写表单时，我们希望用户保持专注，并尽量避免填写导致用户离开当前页面的交互。这样的交互跳转很容易打断用户固有的行为轨迹。所以采集，通过浮动图层、弹窗等交互来完成辅助信息，是我们比较推崇的交互形式。

　　

　　及时反馈 1.关联标签

　　用户提交表单信息后，如果填写的内容有偏差，需要明确标注有问题的数据和错误原因，以帮助用户查找和解决问题。防止错误信息的描述含糊不清，与信息无关的错误信息给用户造成混淆。

　　

　　2.实时验证

　　在一些业务场景中，为了帮助用户在提交信息前更正自己填写的内容，避免*敏*感*词*报错场景的发生。我们可以在用户输入完成后，采用实时验证的方式对结果进行判断和反馈。比如登录注册过程的验证码验证，可以采用实时验证报错的方式。

　　当然需要注意的是，使用实时验证的表单需要在用户明确离开输入状态时进行反馈，而不是在填写过程中进行实时验证，避免在填写时持续报错填写。

　　

　　3.密码保护

　　在密码输入表单中，部分平台会在输入密码时显示密文字段，以保护用户隐私。针对上述第七条标准，移动终端密码已经简化为只输入一次，并且会显示密文，让用户无法确认输入的密码信息。因此，在需要隐私保护的场景下，我们需要改进密码交互的呈现形式。输入时，输入位短时间显示为明文，并保持1秒或保持直到下一个密码输入，然后变成密文。这种交互的改进可以保证用户对输入的内容一目了然，同时也满足了他们的隐私需求。

　　4.提交反馈

　　当用户完成整个任务链接时，提供成功或失败的反馈可以让用户在填写无聊的表格后有更强烈的情感反馈。因此，在设计时，我们需要提供积极的激励来表扬用户表单的成功。当表单未完成时，鼓励用户修改内容并重新提交，不能对用户进行负面指责。

　　

　　酒店业态重构

　　今年上半年，本着提升途牛产品调性、提升内容投放效果的初衷，途牛UED组织启动了对现有关键页面进行升级改造的项目。在全面实施架构升级的初期，我们选择了酒店业态作为本次设计重构的首选测试点。

　　作为更理性的产品，形式直接影响着从用户决策到产品转化的数据。在这个环节，要降低用户成本，保持产品决策积极性，才能实现商业价值成功。在酒店业态的改版过程中，除了应用以上七大设计准则帮助提升用户体验外，我们还结合酒店存在的问题和产品特点，进行了更精细化的设计重构。

　　1. 综合信息框架

　　系统优惠

　　对于用户来说，途牛是一个整体的产品，所有形态的基础体验应该是一致的。过去，基于企业平台的发展，酒店细分的*敏*感*词*酒店业务相对独立。虽然它们也是订购流程的一部分，但业务迭代流程和关注方向的差异导致表单前台存在较大差异。

　　借助途牛整体关键页面升级项目，在酒店业务重构初期，我们将协调两大业务的产品、设计、研发，整合资源，解决历史经验问题，并提供*敏*感*词*酒店形式业务的统一和提升整体体验。另一方面，UED也通过酒店业务的试点思路，将基本的表单框架细分为模块，并逐渐影响和扩展到整个站点表单业务的升级。

　　

　　框架搭建

　　回想一下现有酒店业态存在的问题，主要体现在内容层次模糊、类型样式混乱。这些随着每次迭代需求增加而增加的新表单项，只是基于业务类型的单一模块设计。对于用户来说，差异化的表单项样式无形中增加了填写时的信息获取成本。

　　当我们获取文本信息时，我们不会逐字阅读。我们经常使用“扫一扫”的方法来识别段落的轮廓来获取信息。定期安排也有助于延续这次“扫一扫”的节奏，完善信息。转换效率。

　　所以在设计上，我们遵循相似信息的一致性原则，简化重复和冗余的视觉噪音，每个单元表单项模型遵循“上类型+下内容”的形式，帮助用户快速填写需要填写的表格类型建立心理预期。在大量相同的填充区域中，统一内容标题在左边的对齐方式，通过字体颜色、字体粗细等形式确保内容标题在不被触发时为主。 ，深色提示是辅助。视觉表达，从而在表单的不同阶段仍然保证用户对主要和次要信息的识别体验。

　　

　　品牌信息传播

　　为了减少表单填写页面冰冷的感觉，在整合框架信息的基础上，我们在这次改版中也对品牌进行了解构，用颜色的形式来整合表单页面的设计，将品牌功能化，并协助产品深化品牌用户的形成。立体感知。

　　当然，品牌功能化的整合也需要加以限制。这次我们主要从氛围、控制、操作、提示四个方面展开。在不影响表单主要信息呈现的基础上，原则上遵循两者。

　　

　　2. 内容层次排序

　　用户吸引力

　　回顾整个购买流程，订单填写业务负责维护用户在产品详情中产生的内容，以吸引内容转化。如何在枯燥的酒店形式中保持稳定甚至加强用户的内容吸引力？为此，我们参考“Actionable Gamification”对人性的八大核心驱动力：“拥有与占有”和“失去与逃避”来帮助我们。

　　

　　结合用户使用场景的需求分析，我们对信息在用户心目中的注意力进行了重新排序。第一个屏幕弱化了用户已经在详情页面指定的酒店名称。相反，用户需要在此链接中明确。加强和整合房型、入住时间、退房时间等内容，明确产品归属。同时，为了加强用户的内容吸引力，我们提供了酒店的“优价”、“免费取消”等信息，解除用户对产品价格和沉没成本的疑虑，从而积极激励用户完成后续表格填写。

　　

　　细分模块

　　除了重置首屏信息的排序，我们还对每个需要用户填写的单元模块进行了一些调整。

　　如果取消保险模块，为了避免客户投诉，所有需要用户确认和查看的信息都被突出显示并以行动为导向。虽然这些信息是我们需要用户知道的，但并不一定是用户在填写时想要详细了解的信息。过多的信息干扰影响了有用信息的识别，降低了用户填写表单的效率。所以在新版表格重构的时候，我们会把协议信息整合到最后统一确认，同时在视觉上减少文字和图标的负担，统一弱化辅助信息的呈*敏*感*词*额和用户需要确认的保单持有人模块。

　　

　　从上图国际酒店改版前后的方案对比可以看出，每个细分模块都有或多或少的细节调整，当然还有辅助信息交互浮动的统一未显示的层框架。信息呈现的形式和交互的逻辑也遵循了前面“保持秩序、清晰描述、简化复杂性、帮助用户、分组信息、减少跳转、及时反馈”的七项原则。每个细节都可以扩展。详细分析一下，这里不再赘述。

　　结论

　　蠕虫也可以摇动树。在产品升级的过程中，用户体验的提升往往需要依靠表单等小商家作为切入点，让裂变反馈全局。从产品来看，酒店形态改造项目在功能上并没有发生变化，而是通过用户场景的替代、用户感知、用户行为习惯等方面的细化体验升级。未来，我们将进行更深入的探索和迭代，继续将体验升级推广到其他业务，为每一位途牛用户带来更便捷、更自然的出行体验。