玩家故事

B端页面——详细表单设计流程

时间:2010-12-5 17:23:32  作者:热门游戏   来源:下载中心  查看:  评论:0
内容摘要:一、页面什么是详细表单?表单设计是B端产品设计的基础页面,想要做好表单设计首先要搞清楚表单的表单应用场景。表单是设计用户采集数据信息的核心场景,同时又通过表单向用户展示数据信息,流程简而言之表单是页面

一、页面什么是详细表单?

表单设计是B端产品设计的基础页面,想要做好表单设计首先要搞清楚表单的表单应用场景。

表单是设计用户采集数据信息的核心场景,同时又通过表单向用户展示数据信息,流程简而言之表单是页面用户与数据库之间的桥梁;它可以确保用户按要求填写信息并提交给后台使用或引导用户进行各种设置,好的详细表单可以帮助用户提升效率增加用户满意度。

表单错误是表单啥意思_表单错误信息提示_表单错误提示信息错误

表单价值

二、为什么需要表单?

原始的设计系统或软件是没有用户信息的,用户通过表单来进行数据信息的流程录入,录入的页面信息越多,数据库管理的详细信息就会越多,才能凸显出该系统或软件的表单数据管理优势才能实现其价值;因此表单是实现产品管理价值的第一步。

例如我们常用的设计“飞书”、“teambition”、流程“语雀”等产品本身是没有数据信息的,想要实现其产品价值就要通过用户录入表单信息到数据库,录入的数据信息越丰富越能体现产品读取/管理数据信息的便捷,所以表单设计的质量高低也影响了整个产品的满意度评价。

表单错误提示信息错误_表单错误是啥意思_表单错误信息提示

飞书初始页面

B端产品的本质是对数据信息的“增删改查”在表单的应用场景里对应了“增”和“改”一般表现为表格中的“新增”与“编辑”(如下图);针对不同的用户数据要进行不同的表单设计,以便适用各个场景功能。

表单错误提示信息错误_表单错误是啥意思_表单错误信息提示

表单入口

三、表单设计原则与目标1. 表单设计目标

帮助用户高效、准确、一致、安全的完成数据录入与数据编辑。

表单错误是啥意思_表单错误信息提示_表单错误提示信息错误

表单设计目标

2. 表单设计原则

1)高效性

通过合理的信息输入组件与页面布局和交互方式可以使用户快速完成表单页的信息填写任务。

例如,必填选项与非必填选项标示问题:

表单错误提示信息错误_表单错误信息提示_表单错误是啥意思

高效性

2)准确性

表单的准确性表现有很多,主要指不要让你传达的信息产生歧义,让所有的用户看到这个信息后的用户行为保持一致,规避用户犯错。

案例1:快速定位表单重要信息和当前填写选项,例如,飞书文档左侧快速定位。

表单错误信息提示_表单错误提示信息错误_表单错误是啥意思

准确性1

案例2:输入框的长度根据用户输入信息的多少进行设置,不要让输入框为了整齐保持一致,太长的输入框会给用户带来压力。

表单错误是啥意思_表单错误提示信息错误_表单错误信息提示

准确性2

3)一致性

针对同一产品下的页面风格/字号/组件使用都要保持一致,避免给用户造成混淆增加理解成本。

表单错误是啥意思_表单错误信息提示_表单错误提示信息错误

一致性

4)安全感

要有一定的危险操作保护措施,例如,返回不保存表单的危险提示或即时保存表单的安全操作防止数据丢失;同时针对不同的使用场景增加返回上一步、重置填写、撤销填写等帮助用户修改错误的后悔药功能。

表单错误信息提示_表单错误提示信息错误_表单错误是啥意思

安全感

四、表单构成

表单通常由标签、输入域、填写提示、操作按钮等几部分构成。

表单错误提示信息错误_表单错误信息提示_表单错误是啥意思

表单构成

1. 标签

标签是为了告诉用户此项表单的输入内容是什么,通常放在输入内容之前,有时候是正前方,有时候是正上方根据具体的布局调整,特殊情况放在输入内容里(后面会详细讲解哪种页面适合哪种标签形式这里就不展开说了)。

填写内容过多容易引起用户的恐慌,填写内容较少又不足以支撑后续的管理维护,为了平衡用户感受和后续管理维护,这里提出不影响后续操作的前提下最少填写原则,就可以把表单标签按需求分为必填/选填/不填三项。

表单错误是啥意思_表单错误信息提示_表单错误提示信息错误

标签分类

注意:为了保证页面整体高效,表单填写的内容尽量少的使用选填项,省略不填项。

2. 输入域

输入域是用来采集用户数据信息的核心内容,每个输入域字段包含一个类型的数据信息。

对于用户来说,表单的填写体验再好也是负担,所以我们要尽可能的减少用户思考、理解,降低用户的焦躁情绪,同时提高表单的输入效率,输入域的选择尤为重要。

1)输入域分类

输入域主要有以下四个类型:

表单错误信息提示_表单错误是啥意思_表单错误提示信息错误

输入域分类

输入,输入框:

表单错误信息提示_表单错误提示信息错误_表单错误是啥意思

输入框

选择内容:选择器、级联选择器、树选择、单选框、多选框、穿梭框、开关。

表单错误是啥意思_表单错误信息提示_表单错误提示信息错误

选择内容

选择时间:时间选择、日期选择、日期时间选择。

表单错误是啥意思_表单错误提示信息错误_表单错误信息提示

选择时间

选择数值范围:步进器、滑动输入条。

表单错误是啥意思_表单错误提示信息错误_表单错误信息提示

选择数值范围

上传:文件上传。

表单错误是啥意思_表单错误信息提示_表单错误提示信息错误

上传

2)注意

① 输入框长度确定

表单输入框的宽度要怎样确定呢?实际业务中,大部分输入框所需填写内容都存在理想长度,输入框的宽度暗示填写内容的长度,合理的宽度帮助减少用户的焦虑,给用户带来安全感。

在单项排布时也要尽量考虑用户的观感,通过设置合理的默认宽度尺寸,让设计师快速搭建出观感舒适又给用户降低焦虑的页面。

我们可以根据产品的具体业务,罗列出常用的输入内容,根据这些输入内容的长短来进行具体输入框尺寸的制定;如果输入内容很多,那么要定的尺寸很碎,针对每一个常用内容制定一个输入框尺寸是不现实的,在页面实际设计中就会显得页面很凌乱,如下图。

那么我们要解决的问题就是如何让输入框在单个状态与组合状态下都尽量保持较好的对齐状态,同时输入框的尺寸还有规律可循。

表单错误是啥意思_表单错误信息提示_表单错误提示信息错误

输入框长度确定1

输入框尺寸的确定,参考Ant design表单设计研究结论得到的5种高频的宽度需求区间,以尺码类比分别是:XS – 80~160px、S – 160~280、M – 280~360px、L – 360px~480px、XL – 480~560px。

表单错误是啥意思_表单错误提示信息错误_表单错误信息提示

输入框长度确定2

我们可以参考这个XS尺码的尺寸范围(80-160px)来定制自己的输入框尺寸x,对这个尺寸进行x*2+8px(1个输入框间距为8px)、x*3+16px(2个输入框间距为16px)、*4+24(3个输入框间距为24px)、*5+32(4个输入框间距为32px)得到相应的其他尺寸输入框,这里把输入框的长度计算加上了输入框间距是为了更好的使输入框在不同的场景中对齐。

例如我们产品业务中经常要填写日期,我们就根据常用的日期“2020-12-30”最大字段来定制我们的最小输入框尺寸为118px,那么我们就得到了118px*2+8px=244px、118px*3+16px=370px….五种尺寸(如下图)。

表单错误提示信息错误_表单错误是啥意思_表单错误信息提示

输入框长度确定3

然后可以再反向验证我们的常用信息内容,是不是都能找到对应的尺寸适配,如果不行的话就调整我们最小输入框的尺寸,使大部分的填写内容都能有合适的尺寸。

经过我们设计稿适配,在各复杂度的组合输入框和单输入框组合排列,发现在场景中实际的应用效果都远好于从前。

表单错误是啥意思_表单错误信息提示_表单错误提示信息错误

输入框长度确定4

② 选择框优于输入框

输入域的选择要为用户着想,因为用户更愿意操作鼠标而不是键盘,任何密集的操作都会给用户带来压力降低效率,所以能让用户进行选择就不要让用户输入。

选择的操作难度低于输入,效率高于输入,用户的填写可以停留在一定的范围之内进行选择,不用在茫茫大海里进行捞针行动,也有可能捞错针就是错别字等输入错误的风险,默认的几个选项就可以解决这个问题。

表单错误提示信息错误_表单错误是啥意思_表单错误信息提示

选择框由于输入框

③ 平铺单选优于下拉选择框

平铺单选也并非所有场景都优于下拉选择,但页面中需要快速响应优先建议选用平铺单选,用户直观的看到展示选项,直接单机选中目标,提升操作效率。

平铺单选适用场景:5个选项以内、选项较长、选项带说明文案。

下拉选择框适用场景:超过5个选项,有默认高频选项、选项文案不长。

在下拉选择框中如果选项过多的情况,可以把高频选项置顶或采用模糊搜索匹配选项,帮助用户快捷选择选项。

下拉选项的选择后最好不要引起后续表单页面的变化,后续表单变化建议采用平铺单选,用户感知变化产生不安可以随时取消选择或选择其他选项返回原来页面查看变化内容。

表单错误信息提示_表单错误是啥意思_表单错误提示信息错误

平铺单选优于下拉选择框

④ 智能联想

智能联想输入域可以增加用户对表单页面的满意度不至于用户在复杂的表单页面抓狂。

用户通过标签传达的信息给予关键词,根据提供的关键词输入框可以实现模糊搜索、智能联想、自动匹配等选项;用户就可以根据联想出的选项进行单机选择,让数据库跑在用户的前面给用户节省更多的时间,提高工作效率,常见的场景在谷歌浏览器里输入网址,你输入几个字母后它总是能猜对你要找的网址,这里是记录了用户之前访问过的网址根据高低频呈现给用户进行选择。

还有邮箱后缀的联想、注册唯一用户名联想(网站注册用户要求每个人的用户名都不重复时,在你输入别人使用过的用户名时,系统会为你推荐几个类似用户名供用户选择)都是从用户出发的操作。

表单错误是啥意思_表单错误提示信息错误_表单错误信息提示

智能联想

3. 提示信息

提示信息是为了帮助用户更准确的理解输入域的具体操作,根据输入流程将用户输入过程分为输入前、输入中、输入后三个阶段,提示信息在输入前发生的称为引导提示,提示信息在输入中/后发生的叫反馈提示。

表单错误提示信息错误_表单错误信息提示_表单错误是啥意思

提示信息

4. 操作选项

操作选项指表单填写完成后,要进入的操作动作例如提交、返回、保存草稿等结束当前页面的操作流程,这里要注意虽然可能页面的操作按钮有很多但主按钮只有一个。

主按钮依据:常用按钮或更想让用户点击的按钮。

表单错误是啥意思_表单错误提示信息错误_表单错误信息提示

操作选项

五、表单形式1. 标签

前面讲了不同的使用场景选择不同的标签布局,让我们先来了解一下标签布局,主要分成4种:左对齐标签、右对齐标签、顶标签、行内标签。每一种对齐方式都有一定的优点与局现性;因此在合适的场景下选择合适的标签样式,可以提升用户的输入效率。

表单错误信息提示_表单错误提示信息错误_表单错误是啥意思

标签

1)左对齐标签

左对齐标签是最常用的一种标签,但它由于它横向占用空间较大所以不适用于横向空间狭小的表单页面,左对齐有利于用户对标签的整体查看,能够清楚的看到表单也整体都要填写那些信息;但有由于标签长短不一,有些标签距离输入框较远,使标签与其输入框亲密性降低导致用户填写费力,用户存留时间较长,所以左对齐标签一般用于表单查看页面或称为详情页。

另一方面来讲左标签虽然让用户存留的时间更长同时也让用户浏览和思考的时间变长,这种场景下保证标签与输入域亲密的前提下,在需要用户谨慎填写的表单页面可以采用这种对齐方式;例如阿里云购买页面让用户仔细看、谨慎选择。

表单错误是啥意思_表单错误提示信息错误_表单错误信息提示

左对齐标签

2)右对齐标签

右对齐标签与左对齐标签一样横向占用空间较大,不利于狭长页面的布局,右对齐由于标签字段长短不一导致用户的视觉动线不在同一垂直线所以右对齐标签有利于用户的填写,但是不利于用户对标签信息的查看。

3)顶部标签

顶部标签是标签在输入域的上方,与输入域进行左对齐,这样可以节省横向空间的使用、用户在填写时也比较方便,在移动端产品的设计中下拉的交互比左右滑动的交互更为便捷所以采用顶部标签较为常见。

顶部对齐可以让用户快速填写表单,完成任务的场景一般采用顶部标签,Prowork创建任务时就用的顶对齐,让用户快速创建任务。

表单错误信息提示_表单错误是啥意思_表单错误提示信息错误

顶部标签

4)行内标签

行内标签相当于提示信息,在行内显示,虽然可以大大节省横向和纵向的空间,但当提示信息消失时会使用户感到迷茫,使用体验较差,而且拓展性也较差;因为输入域不止包括输入框如果是平铺单选或开关则无法沿用此种标签。UI中国登陆页表单用的就是这种行内对齐标签,输入内容少,用户动线清晰。

表单错误信息提示_表单错误是啥意思_表单错误提示信息错误

行内标签

2. 输入域

1)输入域交互

表单页面的交互方式分为以下4种:就地编辑、气泡卡片、弹窗、抽屉、页面跳转,根据具体的使用场景选择合适的页面交互。

表单错误提示信息错误_表单错误信息提示_表单错误是啥意思

输入域交互

① 原位编辑

原位编辑是比较轻量化的表单形式,适用于表单内容较少,使用频率较低的场景,操作编辑,虽取随用,随用随变;表单操作后页面随即发生反馈改变,所见即所得,保证用户对主要功能的高效操作。

原位编辑一般在列表、卡片、详情中单击或双击激活编辑态进行原位编辑,用户操作更加流畅,不会打断还可单击空白处随时退出。

表单错误是啥意思_表单错误信息提示_表单错误提示信息错误

原位编辑

② 气泡卡片

气泡卡片交互方式也是比较轻量化的,适用信息数据容量小于5个的场景,所产生的表单页与当前的页面亲密性紧密相关,也可随取随用,随时退出。

表单错误是啥意思_表单错误提示信息错误_表单错误信息提示

气泡卡片

③ 弹窗/抽屉

弹窗/抽屉交互的表单样式是比较常见的交互样式,它的拓展性更强,承载的信息更多,当前页面的分支操作,体现两页面之间的层级关系;在原位编辑与气泡卡片无法满足交互时选择弹窗/抽屉交互,用户在不离开当前页面的情况下进行插入性操作,用户也可随时退出操作。

弹窗/抽屉页面也不会打断当前页面的流程,流畅性次于原位编辑与气泡卡片交互但但优于页面跳转。

抽屉的承载能力大于弹窗,根据数据信息选择弹窗或抽屉。

表单错误是啥意思_表单错误信息提示_表单错误提示信息错误

弹窗

表单错误是啥意思_表单错误信息提示_表单错误提示信息错误

抽屉

④ 页面跳转

页面跳转也分为两种:跳转新页面和跳转当前页面,新页面为当前页面的分支流程,不会干涉用户对主页面的操作,页面功能是独立的;跳转页面为当前页面流程的关键步骤,提示用户已经进入下一步的操作,更少的建立新页面就会让用户对业务流程更加清晰,减少用户对新页面的注意力,让用户专注于当前表单的数据信息中。

页面跳转承载的表单的数据信息最多,但对数据的反馈不及时,体量较大,页面更加稳定,当所需表单特别重要时采用页面跳转的交互。

表单错误信息提示_表单错误是啥意思_表单错误提示信息错误

页面跳转

2)选择输入域交互

如何选用合适的交互方式,应从数据信息的容量和亲密度两方面梳理,亲密性越高选择就地编辑与气泡卡片交互,容量越大选用页面跳转进行交互。

表单错误是啥意思_表单错误信息提示_表单错误提示信息错误

选择输入域交互

3)输入域布局

在表单页设计中根据数据信息容量来选择合理的布局方式,保证页面展示屏效与用户操作效率,表单页面布局可分为4种分别为基础布局、分组布局、标签页布局。

表单错误提示信息错误_表单错误是啥意思_表单错误信息提示

输入域布局

① 基础布局

单例与多列布局:

单列布局:为了用户的高效填写一般会采用单列布局,视觉动线垂直向下延伸,避免用户遗漏填写现象发生,但这样布局容易造成页面出现大量空白,多数是不被老板喜欢的;但在表单内从上到下单列布局,引导用户纵向阅读,这是能够最高效完成任务的布局方式。

表单错误提示信息错误_表单错误信息提示_表单错误是啥意思

单列布局

多列布局:多列布局在一定程度上可以提高空间利用率,却牺牲了用户的使用感受,还有可能造成用户漏填信息;多列布局的分组分为两种横向分组和纵向分组,在实际页面设计中一定要选择多列布局时请选择横向分组而不是纵向分组。

横向分组:页面利用率高,视觉动线也尽量减少了用户遗漏。

表单错误是啥意思_表单错误信息提示_表单错误提示信息错误

多列布局

纵向分组:页面整洁,但与用户常规阅读顺序相悖十分容易遗漏填写信息,不建议使用。

表单错误信息提示_表单错误是啥意思_表单错误提示信息错误

纵向分组

提示:对表单信息的分类可以有效的降低视觉噪音,帮助用户关注重要的填写内容,根据表单数据信息的优先级进行分类,将优先级高的放在表单前面,优先级低的放在表单后面,或进行折叠收起;在pro work中就很好的运用了这一点,在创建项目时用户填写成本极低,在密集的工作环境中可以快速完成项目的创建,但在空闲的时间里用户就可以点击更多选项来进行详细填写。

表单错误信息提示_表单错误提示信息错误_表单错误是啥意思

copyright © 2024 powered by 窑炉游戏网   sitemap