手机App为生活带来巨大便利,多种多样的移动表单设计形式进入我们的工作与生活。表单是移动应用中与用户产生最多交互的地方,包括:用户注册、订阅服务、用户反馈、问卷表单、买卖交易等等。

一个优秀的表单设计有助于提升产品用户体验,提高转化率,达到更好的营销效果。

每个表单都有特定的目的,或吸引注册,或达成交易。考虑不周或错误设计会导致用户流失或交易失败。

学习表单设设计,需要先了解表单设计的基本原则,避免做表单时进入雷区。


web前端开发表单设计(交互设计PC移动端表单设计)(1)

表单设计基本原则


1. 逻辑清晰

表单是产品与用户沟通的语言,和对话一样,表单应当符合逻辑,帮助双方完成交流。

2. 尽量使用单列设计

多列表单容易让用户漏填,无法集中精力完成填写。单列表单填写路径单一、直接、相比更为高效。

3. 减少输入

表单越长越复杂,用户完成表单的意愿越低(尤其在移动端产品中)。最大限度减少输入字段,使表单完成更快速,尤其向用户索取大量信息时,更要注意表单简洁。

4. 提供合适的输入方式

输入“账号、密码,邮箱,昵称”时应提供不同键盘,减少输入错误,帮助用户快速完成填写。

5. 避免把标签当占位符使用

有一种设计模式是让标签作为占位符置于输入框中,用户点击输入时自动消失。这种设计比较简约,但用户输入时容易忘记需要输入的字段是什么,从而产生问题。


web前端开发表单设计(交互设计PC移动端表单设计)(2)

优秀案例:移动端表单设计


↘Dropbox by Sam Atmore

web前端开发表单设计(交互设计PC移动端表单设计)(3)


交互设计分析 :

Sam的登陆/注册表单中,登陆、注册逻辑非常清晰。

1.使用单列二选一表单设计。用户使用App前,只需要二选一随标签提示进行下一步操作。就是误操作也可以用滑动回到另一选项。

2.登陆、注册页面的主按钮明确,有强引导作用。

↘Location Switching - by Nimasha Perera

web前端开发表单设计(交互设计PC移动端表单设计)(4)

交互设计分析:关键词“智能自动填充选项”

表单设计融入更多自动化元素。如:自动定位功能,根据当前位置智能填充信息。省去用户地理位置选择操作,货币转化操作,省时省力

↘Form Validation - by Emmanuel Torres

web前端开发表单设计(交互设计PC移动端表单设计)(5)

交互设计分析 :关键词“明显可见的提示信息”

用户登陆、注册过程,理想状态是完成信息填写并提交。

但实际操作中错误不可避免,表单设计要考虑有辨识度的信息提示,实时提醒用户填写错误。而不是全部完成后再告诉他。

拆解表单组件样式

表单的主要特点是引导用户填写信息,设计上应考虑主要信息内容如何引导用户浏览。表单中的信息内容包括:

1)输入字段:包括文本字段、密码字段、复选框、单选按钮、滑块和其他需要用户输入的字段;

2)字段标签:说明用户输入字段的含义,如文本框前的“你的姓名”;

3)外观和结构:包括字段顺序、表单在界面中的样式及不同字段间逻辑关系;

4)动作按钮:至少有一个操作按钮(如提交按钮);

5)反馈信息:将操作结果通知用户。如:“谢谢,表单提交成功!”、“你提供的数字不正确”。

l主流表单样式

↘上标题下提示内容的表单

优点:标题、提示内容可以很长,预览速度快,可以加功能按钮(如附件和照片添加)。

缺点:占据垂直空间较大。

web前端开发表单设计(交互设计PC移动端表单设计)(6)

web前端开发表单设计(交互设计PC移动端表单设计)(7)

多用于信息内容填写和维修工单信息填写,可以减少页面跳转。

↘左标题右内容(左右对齐)

优点:常用组件,前端可以直接套用,节省垂直空间,引导用户视觉左右移动,增加用户思考时间,对关键信息填写更加安全。

缺点:相比上下结构表单,用户视觉移动距离增加,行数量多,视觉会很乱。

web前端开发表单设计(交互设计PC移动端表单设计)(8)

web前端开发表单设计(交互设计PC移动端表单设计)(9)

适用于通用表单填写场景。

↘左标题右内容(全部居左对齐)

优点:强暗示可输入,视觉浏览速度快。

缺点:标题字段数量不能太过长短不一,会导致视觉不均衡。

web前端开发表单设计(交互设计PC移动端表单设计)(10)

web前端开发表单设计(交互设计PC移动端表单设计)(11)

主要适用场景:适合金额数字类和身份信息填写。

↘归类标题表单(内容归属一类)

将同类表单项合成小组内容,帮助用户分类理解填写内容。符合格式塔原理的相似性和封闭性原理。

web前端开发表单设计(交互设计PC移动端表单设计)(12)

web前端开发表单设计(交互设计PC移动端表单设计)(13)

多用于详情信息展示。

↘仅提示内容表单

优点:信息少,不需要思考。

缺点:当内容一多很容易出现用户“不知道产品要做什么”的困惑(表单无标题)。

web前端开发表单设计(交互设计PC移动端表单设计)(14)

web前端开发表单设计(交互设计PC移动端表单设计)(15)

用于登录页或内容较少,如修改手机号/修改姓名/填写备注等。

拆解表单组件交互

表单交互主要有两个目标:引导操作和反馈。

交互操作时,表单有3个交互阶段:输入前、输入中、输入后

↘输入前

引导用户输入内容,如:密码设置场景

输入框在默认状态提示文案引导用户输入相应的内容;或输入框外有提示,仅支持字母、数字、某某符号输入

web前端开发表单设计(交互设计PC移动端表单设计)(16)


↘输入中

点击输入框弹出键盘,光标闪烁,定位用户当前位置。

表单内容一般有字符数量限制,输入过程中超过字符限制实时报错提示。

如下图:聚焦请输入原密码时,线段颜色明显加重,做为输入中提示。

web前端开发表单设计(交互设计PC移动端表单设计)(17)


↘输入后

web端

输入框失焦即判断输入信息是否符合规则,不合规则报错提示。例如:

玩家用户名重复提醒,密码首字母没有大写,密码长度不符合要求;

输入成功则成功反馈,例如:

输入框右侧图标点亮

移动端

输入所有内容,不即刻做规则判断,先激活按钮。例如:

发布、完成、下一步按钮激活

用户点击操作按钮再进行输入信息合规判断。

web前端开发表单设计(交互设计PC移动端表单设计)(18)

web前端开发表单设计(交互设计PC移动端表单设计)(19)


web前端开发表单设计(交互设计PC移动端表单设计)(20)

案例:提升用户体验和客户转化的最佳表单设计


填写表单对于用户来说是一道槛,下面就来看一看提升用户体验和客户转化的注册、登录表单中最佳设计模式时应注意哪些设计、交互细节:

1.说明注册价值

用户最不想做的事就是注册。用明确的价值说明能激发注册行为。表达的价值主张:在这里,连接世界。

web前端开发表单设计(交互设计PC移动端表单设计)(21)

2.设置醒目登陆输入框

直接显示输入框,而不是设置“登录”链接给用户增加一次点击。

web前端开发表单设计(交互设计PC移动端表单设计)(22)

3.允许使用第三方账号注册、登录

允许用户使用现有的第三方帐户登录产品能给用户带来便利,记很多密码是令人头痛的问题。

web前端开发表单设计(交互设计PC移动端表单设计)(23)

4.用户名采用邮箱或手机号码

使用电子邮件、手机号码作为用户名比起一个新名字让用户轻松很多,因为新起的用户名往往已被占用。

web前端开发表单设计(交互设计PC移动端表单设计)(24)

5.登录、注册功能区分明显

登录(Sign in/Login)、注册(Register/Sign up)链接放在一起,很容易使用户混淆,尽可能将两者区别表达

web前端开发表单设计(交互设计PC移动端表单设计)(25)

web前端开发表单设计(交互设计PC移动端表单设计)(26)

6.高亮显示输入框,允许记住用户登录信息

用户在输入框输入内容时,文本框高亮显示提示正在该框内工作。允许该表单记住本人登录信息。

web前端开发表单设计(交互设计PC移动端表单设计)(27)

7.允许用户查看密码

密码总是以圆点显示,不能确认输入的密码是否正确,允许密码明文显示是充满人性的设计。

web前端开发表单设计(交互设计PC移动端表单设计)(28)

8.必要的信息提示

输入错误的信息提示,还包括一些重要的注意事项提示,例如以下三个表单:

web前端开发表单设计(交互设计PC移动端表单设计)(29)

web前端开发表单设计(交互设计PC移动端表单设计)(30)

web前端开发表单设计(交互设计PC移动端表单设计)(31)

9.显示密码强壮程度

web前端开发表单设计(交互设计PC移动端表单设计)(32)

10.少使用下拉选项

表单中某项目里只有3-4个参数要选择,不要使用下拉框更有利于用户体验。不要要求用户重复填写Email地址。

web前端开发表单设计(交互设计PC移动端表单设计)(33)



,