玩家故事

表单设计3步走-提升表单操作效率和体验

时间:2010-12-5 17:23:32  作者:下载中心   来源:热门游戏  查看:  评论:0
内容摘要:本文3671字,表单步走表单阅读时间约15分钟~中国每年有50万的设计设计毕业生,相比之下,提升能够进入大厂的操作寥若晨星。但所有投身于设计的效率设计师,都有一颗渴望成长的和体心。《体验设计师入门实战

本文3671字,表单步走表单阅读时间约15分钟~

中国每年有50万的设计设计毕业生,相比之下,提升能够进入大厂的操作寥若晨星。但所有投身于设计的效率设计师,都有一颗渴望成长的和体心。《体验设计师入门实战课程》是表单步走表单vivo VMIC UED 为新入职设计师量身打造的专业成长课程,是设计UED全体讲师的结晶。现在,提升我们将这套课程整理成文章发表出来,操作希望给选择并从事设计行业的效率你一点成长的力量。感兴趣的和体小伙伴记得关注我们VMIC UED的公众号,和我们一起共成长~

对于表单设计,表单步走表单我们常常会陷入无限的设计纠结之中,比如:

文字标签是提升左对齐还是右对齐?

确定按钮是放左边还是右边?

控件长度是整齐划一还是错落有致?

......

类似的问题在表单设计过程中会经常遇到,本文将从以下三个方面和大家一起探讨「如何设计一份体验良好的表单」。

一、为什么要学习表单设计

1、表单在我们的生活中无处不在

当我们入职时,会填写入职登记表;当办理信用卡时,会填写信用卡申请表;当购物下单时,会填写订单、地址等信息表单。无处不在的表单充斥着我们的生活。

2、表单在人机交互过程中发挥着重要的作用

表单在网页或App中主要发挥数据采集和数据呈现的作用。对用户而言,表单是数据录入和提交的媒介;对产品而言,表单是获取用户信息的重要途径。

二、怎么学习表单设计

1、认识表单类型

表单按照按任务类型可以分为以下三类:

1)输入型表单:要求用户输入完整信息

2)匹配型表单:要求用户输入部分信息

3)阅读型表单:仅要求用户阅读表单上信息

表单错误信息提示_表单错误提示信息怎么处理_表单错误是啥意思

▲ 图1 · 表单类型

2、表单组成要素

一个表单由标签、录入域、校验、必填标识、帮助提示、操作按钮组成。

表单错误信息提示_表单错误是啥意思_表单错误提示信息怎么处理

▲ 图2 · 表单组成要素

1)标签

在工作场景中,会有四种标签对齐方式:左对齐、右对齐、顶对齐与文字内对齐。

表单错误信息提示_表单错误提示信息怎么处理_表单错误是啥意思

▲ 图3 · 标签对齐方式

左对齐标签

优点:方便用户快速浏览标签;降低占用的垂直空间。

缺点:标签和输入框相邻间距过大,视觉上不够和谐;根据马泰奥的研究表明左对齐标签“典型的扫视时间为500毫秒”,相较右对齐标签用户整体花费时间更长。

表单错误信息提示_表单错误是啥意思_表单错误提示信息怎么处理

▲ 图4 · 左对齐标签

右对齐标签

优点:标签和输入框相邻,用户能快速填写;根据马泰奥的研究表明右对齐标签“典型的扫视时间为240毫秒”,比左对齐标签整体花费时间少一半。

缺点:右对齐会造成左侧不齐,用户无法快速浏览标签;若标签过长,需要两行文字展示,会导致一定的阅读困难。

表单错误提示信息怎么处理_表单错误是啥意思_表单错误信息提示

▲ 图5· 右对齐标签

顶对齐标签

优点:浏览路径更加清晰,用户只需上下移动视线;根据马泰奥的研究表明顶对齐标签“典型的扫视时间为50毫秒”,用户阅读效率更高;提供了大量的横向空间,能够展示更多信息。

缺点:占用纵向空间,会拉长界面高度。

表单错误提示信息怎么处理_表单错误信息提示_表单错误是啥意思

▲ 图6 · 顶对齐标签

文字内对齐标签

优点:对屏幕的占用空间非常小,极大节省了页面空间。

缺点:输入内容时输入框中的标签占位符会消失,用户得不到有效提示;表单项过多时,填写完成后不利于用户检查内容的对错。

表单错误提示信息怎么处理_表单错误是啥意思_表单错误信息提示

▲ 图7 · 文字内对齐标签

标签对比小结

总的来说,右对齐标签比左对齐标签用户阅读的速度要快一倍;顶对齐标签是最快的,常用于移动端;文字内标签常用于用户熟悉的表单填写;如果想让用户谨慎填写可以使用左对齐标签。具体的标签优缺点与应用场景如下图所示:

表单错误信息提示_表单错误提示信息怎么处理_表单错误是啥意思

▲ 图8 · 标签对比

3 录入域

录入域是表单的核心构成部分,为了方便不同信息的录入我们一般会采用不同的交互控件。在B端产品设计中,我们常见的录入域主要分为两大类:输入型表单与选择型表单。

1)输入型表单主要包括单行文本框、多行文本框

单行文本框

单行文本框内含有占位符,是对当前项信息的补充描述,能够帮助用户准确清晰的填写内容。单行文本框一般包含三种尺寸(大、默认、小),高度分别为 40px、32px 和 24px,并且一般默认提供15~20个字符宽度。在设计过程中还需要注意单行文本框一般包含初始状态、输入状态、只读状态、hover状态、输入完成状态与禁用状态。

表单错误是啥意思_表单错误信息提示_表单错误提示信息怎么处理

▲ 图9 · 单行文本框样式

表单错误是啥意思_表单错误信息提示_表单错误提示信息怎么处理

▲ 图10· 单行文本框状态

多行文本框

多行文本框多用于长大段落文字的输入,可以根据需要展示最大字数或者自适应文本框高度。

表单错误提示信息怎么处理_表单错误是啥意思_表单错误信息提示

▲ 图11· 多行文本框

2)选择型表单包括下拉选择框、时间选择框、单选框、多选框

表单错误提示信息怎么处理_表单错误是啥意思_表单错误信息提示

▲ 图12· 下拉选择框

表单错误提示信息怎么处理_表单错误信息提示_表单错误是啥意思

▲ 图13· 时间选择框

4 校验

当用户输入信息后,必不可少的需要对用户的信息进行校验,保证用户信息输入的正确性与完整性。校验一般可以分为:及时校验、输入完成后校验、提交校验。

1)及时校验

在用户输入的过程中进行实时验证,主要用于注册页面中密码信息的验证。

优点:提升输入的效率和准确度。

缺点:如果输入的内容出错概率较高,频繁的给用户错误提示会降低用户体验。

表单错误是啥意思_表单错误信息提示_表单错误提示信息怎么处理

▲ 图14· Adobe网站的实时验证

2)输入完成后校验

一般用户输入完成后,鼠标失去焦点时进行校验。校验状态分为:成功、错误和警示三种状态,常用于输入验证码、注册等环节。

优点:输完一项即校验,避免一下子出现很多错误需要修改,缓解用户压力。

缺点:会延长用户完成表单填写的时间。

表单错误信息提示_表单错误提示信息怎么处理_表单错误是啥意思

▲ 图15· 输入完成后校验状态提示

3)提交校验

当完成表单信息填写后,用户通过button进行操作,系统给出成功、失败或者错误提示,常用于登录、数据提交等场景。

优点:让用户感知填写后提交的状态。

缺点:报错过多会增加用户再次修改填写的压力。

表单错误提示信息怎么处理_表单错误信息提示_表单错误是啥意思

▲ 图16· 提交校验案例

5 必填项

必填项经常习惯用红色的“*”来标记,此外还可以用文字进行说明。如果必填项多于选填项,将选填项单独标记;如果选填项多于必填项,将必填项单独标记;如果全是必填项,就不需要标记,避免满屏都是小星星,增加用户的认知负担。

表单错误提示信息怎么处理_表单错误信息提示_表单错误是啥意思

▲ 图17· 必填项

6 帮助提示

帮助提示有三种提示方式:占位符提示、常驻提示、图标气泡提示。

1)占位符提示:一般出现在输入框中,是对标签的补充说明,输入内容后就消失。

2)常驻提示:一般出现在录入控件旁,是对录入信息的补充说明,不会随着输入而消失。

3)图标气泡提示:通过鼠标的悬停展示,常用于对一些业务的专有名词解释或者提供说明。

表单错误提示信息怎么处理_表单错误信息提示_表单错误是啥意思

▲ 图18· 帮助提示

7 操作按钮

操作按钮是表单信息录入完成后,提交、继续或取消任务的触发器。一个场景中通常只有一个主按钮。如果表单内容较少且在一屏以内时,按钮应该紧跟随内容;如果表单内容较多且多余一屏时,为了方便用户快速找到按钮应该将按钮固定在页面底部。

表单错误信息提示_表单错误是啥意思_表单错误提示信息怎么处理

▲ 图19· 按钮展示位置

三、如何提升表单的效率与体验

1、长表单分步设计

很多时候表单项较多,业务本身又具有流程化特性(例如注册、发布等),此时可以用分步表单设计的策略,使用步骤条、进度条进行导航显示。

优点:流程清晰,降低用户对表单的理解成本,减少用户负担。

缺点:用户无法感知所有的填写项,必须完成当前这一步操作才能看到下一步操作。

表单错误信息提示_表单错误提示信息怎么处理_表单错误是啥意思

▲ 图20· 分步设计

2、 提供选择,减少用户的输入操作

人都是有惰性的,表单录入过程中能用选择的就不要用输入操作,研究表明自动填充能使表单的录入速度提高30%。

表单错误是啥意思_表单错误信息提示_表单错误提示信息怎么处理

▲ 图21· 提供选择给用户

3、先易后难,先必填后选填

先易后难的设计逻辑容易引起用户的填写欲望,增加用户的填写信心。先必填后选填可以保证用户任务的完成度,即使用户中途放弃,必填的填写项完成度也相对会更高。

表单错误信息提示_表单错误是啥意思_表单错误提示信息怎么处理

▲ 图22 · 先易后难 先必填后选填

4、简明扼要的展示标签文字

标签文本不宜太长,需要简明扼要,保证用户能够快速理解。

表单错误信息提示_表单错误提示信息怎么处理_表单错误是啥意思

▲ 图23 · 简明扼要的展示标签文字

5、输入框可以错落有致

输入框⻓度应该根据内容的⻓度来定,通过⻓度来暗示它填写内容的⻓度。

表单错误信息提示_表单错误提示信息怎么处理_表单错误是啥意思

▲ 图24 · 输入框可以错落有致

6、保证清晰的视觉流

清晰的视觉流能够让用户感觉表单整洁,简单。当标签右对⻬时,建议按钮和输入域对⻬。

表单错误提示信息怎么处理_表单错误是啥意思_表单错误信息提示

▲ 图25 · 保证清晰的视觉流

7、更具操作性的按钮

提交按钮应让用户明确了解意图和功能,尽量避免使用“提交”、“下一步”、“继续”之类的通用型文本。尝试使用更具有操作性的文本,例如:“创建账户”、“加入团队”、“创建新账号”等文本。

表单错误信息提示_表单错误提示信息怎么处理_表单错误是啥意思

▲ 图26 · 更具操作性的按钮

copyright © 2024 powered by 窑炉游戏网   sitemap