赞助商
立即赞助

超全面的移动端表单设计准则总结(附实战案例)

UI设计3年前 (2021)更新 流光
2.4K 0 0

编者按:本文由途牛UED 出品,者将结合际案例,从7个方面介绍表单设计中的常见注意事项。

表单为平台与用户联系最为紧密的一,也是影响业易成功与否的重要分水。良的表单设计以给用户提供流畅自的易验,证用户购物情绪的正向增长,而混乱无序的表单则引用户的负面情绪,影响甚至阻碍用户易的完成,降低用户的品牌感度和信赖度。

那么在设计过程,需要怎样规避风险,提升表单页品体验呢?下我们将结合实案例,从七个介绍表单设计常见注意事项。然,这些规则都是在表单设计般准则,条准则都有例。

保持秩序

  1. 单列浏览

表单承载的主要功能是向用户清楚地传达信息,持有秩序的单列表单形式更用户浏览动,它能帮助用户识别并填写内容,而列的表单形式则破坏用户填写规律,影响效率。

超全面的移动端表单设计准则总结(附实战案例)

  2. 竖向排列

表单中多选项以供用户选择时,将每选项以竖向的排列方式于每选项下方时,利于用户阅读浏览的习惯。

超全面的移动端表单设计准则总结(附实战案例)

  3. 操作一致

表填写过程中应当避免在流程中出现按钮式、颜色的变化。需要用户确认的操作行为的一致能有效减少用户在行动的困惑和犹豫,确保用户在表填写过程中的流畅体验,从而实现最终商业上的交易成就。

超全面的移动端表单设计准则总结(附实战案例)

描述清晰

  1. 标题不可取代

虽然过使用占位符代替标题扩充了表单填写空,减少了视觉噪音,是这做法并不利于用户短期记忆。旦用户触发输入,占位符消失,用户可能会陷入这里该填写什么迷茫,必须删除所有输入内容后才能再显示标题,显然,这是违背性。

超全面的移动端表单设计准则总结(附实战案例)

  2. 输入域符合预期

输域的长度与预期输的内容成正比,确输字段长度符合用户心理预期,并能在表单中完整呈现。

超全面的移动端表单设计准则总结(附实战案例)

  3. 不隐藏基础帮助信息

作一购流程中的信息确认采集环节,需用户对于购买的产品明确的认知。因此设过程中对于用户填写表单基础帮的信息应该强调或显示设,避免出因隐藏帮信息导致的客户投诉。

超全面的移动端表单设计准则总结(附实战案例)

化繁为简

  1. 减少二次确认

基于 OTA行特性,行表单务对标电商购表单务需要填写的信息更为冗长,层级更为复杂,为了减户填写过程中的心负担,降低填写难,我们需要对必要的信息进行删减或合并,为户信息输入供利。

以注册环节为例,在 Web 计往往会有二次确认密码的环节,但在移动端这的操作会增加用户填写的负担,因此大部移动端界面上不建议对用户的密码息进行二次确认,转而通过使用文显示或者优化密码消失交互的方法来改善这一环节的体验。

超全面的移动端表单设计准则总结(附实战案例)

  2. *号的使用

通符号习惯,在表单设计中若是对务必填的信息,我们往往采 * 号的形式来帮助户区分信息优先级。但当表单中必填信息多于非必填信息时,大量 * 号的应反而会给户的认知增负担,使得无法快速识别哪些是必须填写的,哪些是必须填写的。因此在表单设计中,当必填项多于非必填项时,隐藏 * 号标记,转而通过暗示标记非必填项的形式来帮助户识别。

超全面的移动端表单设计准则总结(附实战案例)

帮助用户

  1. 暗提示的应用

暗提示为辅助用户填写表单的主要方式,在设计上,需要尽能地减少视噪音,确文案言简意赅,表现形式不干扰用户。因此,对比度深或浅,彩突出的不适合用暗提示的视表现。

在交互上,暗提示也并不是存在。标触发表单项时,暗提示保持显示,指导用户输入。而用户输入段后,暗提示内容隐藏,让用户专注于已填内容。

超全面的移动端表单设计准则总结(附实战案例)

  2. 设置默认选项

在复表单中,对证件类型、手机区号、国籍等为通用的选项,为用户提供默认选择的互以有效简化操步骤,减轻用户填写表单的负担,更快地帮助用户完成表单内容的填写。

超全面的移动端表单设计准则总结(附实战案例)

  3. 替代输入

对于表单填写过程中可以固化选择的信息,应让用户行选择操作以替手动输入,尽可能让用户减少输入本。

:出游人信息采集时,提供添加常用出游人选项以帮助减少重复填写的负担;证件类型采集时提供证件类型选项以减少用户困惑,在已有的选项中快速选择;邮箱采集时自动联想显示 Email 网址以辅助用户规范文式,快速完成表单填写。

超全面的移动端表单设计准则总结(附实战案例)

  4. 键盘匹配

根据表单填写类型的不同,自动匹配键盘类型。如「中文输入」呼出中文键盘,「姓(英文)」输入呼出锁写的英文键盘,「手机码」输入呼出数字键盘……免去用户切换键盘操作的骤。

同时根据填写步骤,合理的定义键盘右下角的功能键,帮助用户现换行/完成的操,省去用户收点开键盘的重复动和表单上下填写项的切换,让填写表单的程更为顺畅,用户思考不被打断。

超全面的移动端表单设计准则总结(附实战案例)

  5. 按钮层级

用户面对多按钮的场景选择时,我们应当帮用户预先区分出主行动次行动,通过视觉语言强调主按钮,弱化次按钮,引导用户行选择。

超全面的移动端表单设计准则总结(附实战案例)

  6. 二次确认

因移动端性,用户在填写景较为不稳定,如吃途中、行驶途中等,当用户花费力填写了部表息后,为了防止用户误操作而丢失已填息的景,需要在此进行二次操作确认,确认用户操作图。当然,如果用户没有对表进行任何编辑,这的退出操作是不需要二次确认的。

超全面的移动端表单设计准则总结(附实战案例)

信息分组

  1. 多行文本

在复杂表单,填写内容过长类表单,用户会在预览时生输入压力。运用号、颜色、距等视觉手段将相似层级信息进逻辑分组,帮助用户更好地区分多文本信息层级,便于输入。

超全面的移动端表单设计准则总结(附实战案例)

  2. 号码组合规律

对一常用的号码字段,以采用下通用的数字组合规律帮助用户阅读和忆,电号码的组合规律为 3 4 4 ,银行卡号的组合规律为 4 4 4 4 3。空在数字呈现处的应用虽细微,但是在长数字的阅读场中仍能给用户带来识别便。

超全面的移动端表单设计准则总结(附实战案例)

减少跳转

  1. 选项露出

在网页端表计中,用户在表填写中需要对选项进行选择,常用的交互形式是在选择器的下拉列表中进行选项的二次点击。而在移动端计中,触发选择器后的二次点击会增加用户的填写成本。所以在计,当选项少于8,在表中直显示所有可选项,当选项超出过多则在列表浮层中进行选择。

超全面的移动端表单设计准则总结(附实战案例)

  2. 减少页面跳转

在表单填写中我们期望户保持专注,尽量避免产生引导户离开当前页面的填写交互,这种交互跳转很容易打断户固有的行为轨迹。因此浮层、弹等交互来成辅助信息的采集是我们较为推崇的交互形式。

超全面的移动端表单设计准则总结(附实战案例)

及时反馈

  1. 关联标记

当用户提表单信息,已填写的内容有偏差,需要明确的标有问题的数据及错误原因,帮助用户找到问题并决问题。杜绝报错信息描述模糊,信息不关联的报错信息引用户困惑。

超全面的移动端表单设计准则总结(附实战案例)

  2. 实时校验

某些业务场景中,了帮用户提交信息校他所填写的内,避免面积报错场景的出。我们可以使用实时校验的方法,用户输入完后行判断及结果反馈,如登录注册流程的验证码校验就可以运用实时校验的报错方式。

当需要注意的是,运用时校验的表单需在用户明确离开此项输状态时进行结果反馈,而非在填写程中进行时校验,避免出现填写时持续报错的情况。

超全面的移动端表单设计准则总结(附实战案例)

  3. 密码保护

输入密码的表单中,部分平台会密码输入时显示暗文字段以此保护用户隐私,鉴于述第七条准则,移动端的密码已简化至只输入一次,暗文的显示会让用户无法确认所输密码信息。因此需隐私保护的场景下,我们需完善密码交互的呈形式,当输入时,输入短暂显示明文,保持1秒或者保持到下一密码输入后再变暗文,这样的交互改善可以确保用户输入中明确内,也满足了其隐私需求。

超全面的移动端表单设计准则总结(附实战案例)

  4. 提交反馈

在用户完成整个任环节,提供成功或失败的反馈能让用户在枯燥的表填写后有更烈的情反馈。所以在计,需要提供正向的激励夸赞用户表填写成功,在表没有完成鼓励用户修改内容,重新提交,不可以负面责怪用户。

超全面的移动端表单设计准则总结(附实战案例)

酒店表单业务重构

今年上半年,本着升途牛产调性,为容传达效的初衷,由途牛UED 组织并发起了一次针对现有键页面升级的项目,在架构升级全量推进初期,我们优先取了酒店表单务作为此次设计重构的首试验点。

表作为一个偏理性的产品,直响着用户决策产品转化的数据,在此环节,更需要降低用户成本,维持产品决策热情以实现商业价值上的成功。在表业改版过程中,除了应用上述方面的计准则帮助提升用户体验,也结了现有问题和产品性进行了更为细化的计重构。

  1. 整合信息框架

体制步

对户来说,途牛是一个整体的产,有表单的基础体验应该是一致的。往,基于企平台的发展,酒店细分的国酒店和国际酒店两个务相对独立,虽然同样隶属于单环节,但是务迭代进程及侧重方向的同导致表单前台呈现差异较大。

借助途牛整体关键页面升的项目,在此次业重构初期,协同个业的产品、计、研发共同整资源,解决历史遗留体验问题,为国内、国际表业进行整体体验的统一和提升助力。另一方面,UED 也通过业的点思路,将基础表框架进行模块细,逐步响并推广至全站表业升。

超全面的移动端表单设计准则总结(附实战案例)

框架构建

顾现有酒店表单务的问题,要体现在容层级模糊,类样式混乱上。这些随着每一次迭代需求增而增的表单项,只是基于务类进行了单模的设计,而对于户来说,差异的表单项样式无形中增了填写时信息获取的成本。

在获取文本息,并不会逐字阅读,往往采用「扫视」的方式识别段落轮廓从而获取息,规律性的排列方式也会帮助持续这种「扫视」的节奏,提升息转化效率。

因此设我们遵循相似信息一致性的原则,简化重复冗余的视觉噪音,将每单元表单项模型遵循「类型+下内」的形式帮用户速对所需填写的表单类型建立理预。相同的填写区域,统一左侧内标题对齐方式,并通过字色、字重形式确保未触发时内标题主,暗提示辅,填写后填写内主,内标题辅的视觉表达,从表单的不同阶段仍旧保证了用户对于主次信息的识别体验。

超全面的移动端表单设计准则总结(附实战案例)

品牌息传达

为了减弱表填写页冰冷,在框架息整的基础上,此次改版也将品牌解构,用色彩的形式融入表页面计,将品牌功能化,辅助产品以深化品牌用户心中形成立体知。

当然品牌功能化的融入也需所限制,此次我们主从氛围、控件、操作、提示这四方面展,不影响表单主信息呈的基础,遵循度、两原则。

超全面的移动端表单设计准则总结(附实战案例)

  2. 内容层级排序

户吸引

顾整个购流程,填写订单务承担着维系户在产详情产生的容吸引到容转的责任,而如何在枯燥的酒店表单中维稳甚至固户的容吸引?为此,我们参照了《Actionable Gamification》于人性八大核心驱中的「拥有感&占有欲」和「失&避免」这两条来帮助我们。

超全面的移动端表单设计准则总结(附实战案例)

结合对户使场景的需求分析,我们将信息在户心中的注进行了重序,首屏弱了户已经在详情页明确的酒店名称,转而对户需在此环节明确的房、入住时间、离店时间等容进行了强和整合,明确产归属。同时为了固户的容吸引,我们前置了酒店「超值」、「可免取消」等信息来解除户对于产格和沉没成本的疑虑,从而正向地激励户成后续的表单填写。

超全面的移动端表单设计准则总结(附实战案例)

细分模块

除了首屏信息排序,于需要用户填写个单元模块我们也做出了些调。

如取消险模,此前为避免客诉,将有需要户确认和查看的信息都进行了亮示和行引导。这些信息虽然是我们需要户知道的,但并一定是户在填写时想要详细了解的,过多的信息干扰反而影响了有信息识别,降低了户填写表单的效率。因此版表单重构时我们将协议信息整合至末尾统一确认,同时对字、icon进行视觉减负,统一弱辅助信息呈现,转而强调户需要确认的取消险金额和投保人模。

超全面的移动端表单设计准则总结(附实战案例)

从上图国际酒店改版前后的方案进行对可见,每个细分模都有着或多或细节的调整,当然还有没有展现的辅助信息交互浮层框架的统一。这些信息呈现的形态与交互的逻辑都遵循着前「保持秩序、描述清晰、繁为简、帮助户、信息分组、减跳转、及时反馈」这七大原则,每一个细节都可展开来细细剖析,这里就多赘述了。

结语

蚍蜉亦可撼树,在产升级的过程中,户体验的升往往需要依靠像表单这样一个个微小的务作为突破点,从而裂变反哺至全。此次酒店表单重构项目从产角来看,功上并没有改变,而通过代入户场景,户感知,户行为习惯等方面进行细节的体验升级。后续我们还将进行更深入地探索与迭代,将体验升级持续扩散至他务,为每一位途牛户带来更捷、更自然的行体验。

欢迎关注「途牛UED」公众号:

超全面的移动端表单设计准则总结(附实战案例)

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

通过对支付宝的研究与观察后,笔者看到了支付宝推出的一个「笔笔攒」功能,并对其中的用户体验细节进行了研究与分析。 支付...
产品细节
网易UEDC – 姜永超 :习惯了浅色界面的设计?本文将带你了解深色界面的设计,聊聊深色界面下的设计细节,使你设计的深色界面...
C黑暗模式
命名,是困扰很多 UI设计师的常见问题之一。从我们开始在软件中设计内容时,就要对图层、图层文件夹进行命名,到对接开发的时...
UI 设计
产品新人如何快速入门产品设计?产品经理如何体系化的思考一款社交产品该如何设计?带着这2个疑问,请听我为您慢慢分享。 作...
产品设计
今天中午和一个朋友吃饭,他说他们团队最近破格录取了一个产品经理,之前没有任何行业相关经验,但就是拿了一份竞品分析报告...
B端产品
编者按:无论是APP还是网页或者某项服务,在完成设计之后,投入市场之前,总需要通过专业的测试和评估来尽可能减少潜在的问题...
Adam Fard
流利说®少儿英语是流利说®为 3-8 岁儿童定制的一款英语启蒙类产品,本次邀请到 UI 设计师 kelly,从视觉设计与输出的角度,详...
产品设计
我们生活在一个竞争极为激烈的环境当中,公司总希望打造出新产品,或者进入新市场,保持位置,增加份额,赢得利润。不过这一...
Eugen Eşanu