复杂表单如何进行设计优化

复杂表单如何进行设计优化

表单，作为我们日常工作重要的项目内容，我们每周都会对其进行设计。

而在我前几年的工作当中，接触到的更多是简单零星的字段.朴实无华

的组件。这对于在座〃高级设计师〃来说，做起来会比较简单。

而现在大多数B端产品，我们接触到的都是二三十个字段，并且每一

个字段都会包含有大量的逻辑信息，针对这种情况，我们作为设计师应

该如何应对？今天我们就来说说复杂表单的设计思路。

由于复杂表单本身比较难理解，我们会通过一个最近做的政府类的项目

来带领大家进行分析，讲讲设计优化前后的点。

CE青年Y

低收入人口动态监测平1

一、主要功能：低收入人口采集端；动态监测处置i

二、当前1.0版的问题：虽然通过手机PC端实现4

集信息的模块太复杂，对采集人员和机构组织要求*

通过“一键求助”的数据几孚不存在。而信息采集类

数据，对需求有描述，但是认定核对边界不清晰，*

积极作用。故平台面临较大问题，升级优化迫在眉］

三、2.0版急需解决的几个重点环节:

一、项目背景

这次的项目为一个政企项目，主要是为某一线城市政府部分提供一个人

群监控系统的设计优化，系统是为政府部门的重点人群，进行采集，核

对.巡防,以达到管理的作用。

整个流程当中会包含有社工采集、巡防任务分发.社工巡防、区县审

核,通过前期的资料收集，发现问题最多的便是社工采集流程。

痛点

这次迭代主要的问题源自系统的采集端，走访、现场观察了社工的采集

状况，大致可以整理为以下问题：

•填写信息资料过多，很多琐碎的资料需要反复填写；

•采集信息模块过于复杂，导致很多时候不是用户填写，而是社工

在进行录入；

•录入错误率极高，完成率很低；

­不同的人员类别填写的同一个表单，内容多而全；

•…

首先，在设计过程当中，我们依旧会做对应的基础设计，不过由于不是

咱们这次讨论的重点，就不展开详细描述。而对于这个页面大家可以先

思考，如果由你来进行接手，会如何进行优化。

@CE青年Y

»«AA

・・值・I■■■■

鲁尸情・H5

■，攵

•阶Wtn

次

♦相■■产6Ml

・我情・

MKWfl与尸叁美后

・■敢

*K*_____ran

I

TAR<ATA»»（・快0・）

K

■量谷"入wmax

无

住屑**•WG«0«

VU6**—

霓

I・殳“

・森**■♦■给

■或M

ISBMJL

・•明R■例・«・

劣CN5

二、信息预览

在上方的表单当中，我们会发现由于表单过长，导致用户会出现上下反

复滚动的行为。在对这个行为进行挖掘时，明确原因是用户信息过多需

要反复确认，因此需要上下滚动，进而影响其填写效率。

对于确认的场景，我首先考虑到在页面右上方增加一个预览按钮，点击

后会有预览页面。

但预览也需要反复点击目阵专页面，本身并不是一个好的选择，为此我们

考虑在原有的页面布局上进行优化。

在页面宽度上，很多同学会觉得越宽越好，比如一个页面，会尽可能压

榨其宽度，产出这样的一些页面。

@CE青年Y

一­MAfi

|I■・爆・

*值・118SRVI

R®ft

・人

Mtfift0洎一・户OU91

■K0K・

与户主美东户m

urnm

户口||

寄J

l

tAR<A个人"・•C

<

MSniftAtti

ftfieWAWHfiKS

充

实际上，我们的宽度，也会有一定的限制，才能够让用户更为聚焦，比

如常见的文档产品，他们在宽度的设定上，都会默认在700-900之间,

这样才能够保证用户聚焦于整个文档当中，如果过长，你会发现我们不

太愿意认真的去阅读里面的内容。

@CE青年Y

o

<cin*

•«4WMo-vUtrv-Mp*ttylec*-re^Ute-tat“UM;—•ewUi

Y，・cUtAfcpom0y”

•，»・；Nrvu^Wftl422.>■:・22.$X；MMuif-fifHt:tpi；■

IWRiMr>iA-Uftt.HMK-WT

"2ClxktOCYtW-Li〃1”

♦Y“elf•句t—・|ML»

♦句.FiRoc*7*vee*，kOZ^40nlsg“merciskewc*8O~OTMHOC-KH

i：be”e

•vu>

・■hrcUtkSv/KWwtttE・ce«t«t・xW3-251"eac-<7・ie-U

cU»»»*nr»t-lUw-«RKV*”「，U<«h«Ue・—“"I”

飞书文档—820px

无帽・Jt・ftG«・・，，・G

FTBUMSBr5UX•A・Q

Gan

1:B*

无事・文H

发・分享iR*B«i9Lt«a»a

■彩盘物-K«

f«rr«Jl4

♦oo-BR^a*aie«iftm

XQOS0ararnii-蹩一0

因此大多数情况下，我们的表单列数以两列为主，最多不要超过三列。

而在布局上，并不是说我们其他空间的位置就不能去排布信息，而是不

能去展示核心内容，因此，我们可以考虑将次要内容放在核心内容模块

两侧。

@CEll年Y

。、T

无标题

我・目・2

我及目果3

a*次■功也

同时在设计上，页面长度的增加会导致我们无法对页面整体的内容有完

整的了解，因为不同的组件都会占据页面的整体高度，当页面内容超过

一屏时，我们在确认信息的时候，就只能通过上下滚动页面的方式进行

确认，导致效率低。针对上述的所有情况下，我们会考虑采用左右结构

的版式，将右侧区域作为一个独立的预览模块。在左侧填写表单时，右

侧预览区域将有一个实时预览，从而对输入的内容进行快速判断和确

认。

通过点击预览区域的字段也可以快速定位到左侧该字段位置,从而帮助

我们在不同信息之间的来回嬲专。

•CE青年Y

•••

Qft*

Iauoia

vma

修酬

a■“内R。女

点击■■定住后位杀

(9MHW・最♦靖,酎・彳❷

138068823125K»21W820WI332n

8”・人■・

年H真牝■■

Q«RV9

28■mHn七修，

R««<(■

产H防密电户OHJB

awe**在♦尸口。•&址户口

“雄Ui■苦区内

V9O2

同■安IN

tt«xttVx▼

I9・状况

・■雄潭SHWAR

RHOBMv

MWtt劳动■力m例a

I家血情况

MA口

8«M临号・■

0”91。女092133211

年”个A月女人•SHff

282800

■曲

♦认・交

其次右侧预览也能够起到锚点定位的作用，能够帮助我们在不同信息之

间来回助阵专。

弊端

当然，任I可方案都会有两面性。使用左右布局的方式，也就意味着我们

在屏幕的最小宽度上需要由之前方案的1280px,变为现在方案的

1360pxo这也就意味着对于屏幕尺寸的兼容会更少。

但目前系统使用1280px的情况并不多,我们可以稍加牺牲。同时作

为方案的兜底，考虑让开发实现当页面尺寸小于1360px时,目前是

提醒用户通过浏览器自带的缩放功能解决，后续会采用响应式布局，将

右侧内容移至底部进行展示。

@CE胄年Youthcacom

Isttfse

⑥工作M

拄名性别

@倡息来■理岁月男O攵

Q■对・理*东电送■酎证彳物

138068823t25IOS2H882O92133211

GW9AHa

年出文化密・

9«KV9

28•透缗文化H星*

SItJRftl

尸■所在的PDtt«

Q情・记最式业户口OM农业户口

■否区内

V1OS

xB*xV

1At・状况

・■状况患何阿1禽

我好。SffV,1-V

MffVtf1HM・力IP修等爆曰估

VV

1款庭情况

VSAD

*

&SMlBBAft

展署修引赛■■■

郑，月舅。女092133211

年“个人以收人是否残演

282800*O£

在我们最后方案评审前，我们再进行走查会发现：〃很多用户并不会在

意右侧的所有信息〃。

为此，我们对最终方案的交互又一次进行调整，将之前的提交操作移至

右侧，并将右侧的展示信息进行优化。这样的页面信息布局，让用户在

提交表单之前，能够对表单内容快速的确认。也保证了用户会利用到调

整后的页面，同时也一定程度上降低了用户对负反馈的接收，使其更准

确的进行填写。（当然这是在下方的方案做完过后的决定，具体原因下

方也会讲到）

@CE青年Y

Q

IBttms

®ifftt

BBttM

QIt*月男。女

可“寮♦靖■华■一

1380888?312510621W092l33?t1

6MWAM

火化!1・

9・域”

M—文电

a

尸”座・户口《■

a91«i£«“切口O•ttitPQ

■■(8内

■。包

网・景别

fifl«avM*

I■■妆况

■・软沅♦傅”俄■

M。塞修

»由・力r号毋即信

I**情况

vaxa

三、错误提示

在上方反馈当中，明确提到错误率很高。在对这个问题跟进后发现，用

户经常会遇到〃错误提示不够明确〃、〃提示错误信息后不知道改啥〃。

关于错误提示，首先看到很多文章都会聊到，在表单中通过及时校验的

方式来呈现错误的数据，提高准确率。但及时校验也是有弊端的，如果

输入的内容出错概率比较高，频繁的给用户提示会降低用户体验；如果

采用后端来校验，频繁的调用接口，也将增加服务器的负担。

这里简单补充一下校验方式：

前端校验：在浏览器中进行的，通过JS脚本实现，当用户填写表单时,

可以对用户的输入做一些基础的规则判断，如果不符合可立即提示反

馈，增加用户体验的同时减少服务器的消耗。比如说邮箱格式判断，就

是一个典型的前端校验，而及时校验在项目中也更多指的是前端校验的

方式。但是前端的校验并不是绝对可靠的，因为用户可以通过修改浏览

器的控制台或者使用其他工具绕过前端的校验。实际上前端后端均要做

校验。

后端校验：在服务器中通过PHP、Java等语言实现,当表单提交到服

务器后，可以对表单中的数据做进一步的处理和判断，以确保数据的安

全性和完整性。比如说账号密码错误，就是一个后端校验。

传统表单的做法是使用全局提示，由于提示内容不够准确，导致用户在

修改信息时无法快速高效的进行调整。

I9tt««•聂学倡■口宽■,谪朴先后同n攵

V工作自

曾名性别

Q僮■累・0TAO女

81懵对■■a系电塔0仿”号码

138088823125W5211882092U3211

SHKABV*

年・文化再度

9SKV9

28

0m

户，M在堵户口住■

a农业户口o”木业户口

是香区内

时・美别

电保xa*x

I・■状况

密何村既卖别

AHO电•

》动・力

IK庭情况

MAD

而在目前的表单当中，本身数据较长，再加上第二期的需求提出还需要

增加字段，也就意味着整体的表单长度还会加大。因此使用传统的表单

错误提示，会使整个修改的过程需要反复滚动修改，不利于我们进行编

辑。

在方案设计上，我们想通过一个区域，将表单当中的所有的错误信息都

呈现于此，这样既能够让用户快速知道表单有错误内容，也知道错误具

体在哪。为此我们设计了三种不同方案。

方案一

保持之前现有的全局提示不变，将页面当中的错误信息呈现清楚。在页

面当中提示出具体存在哪些问题，同时用户就可以滚动查看，了解如何

细节调整。

@CE0I年Y

Q擅索

I•附信息o寰单信息未携写完整.谪补充下方信』

9工作台1.文化程度未选播

姓名

2.现居地址东堰写

S信息采集郑梦月

(9楼时・造联系电话身份t

13806882312510

S裨孱人群麻

年龄Xftf

9巡防管理

28

a需求处・

户皿所在地pat

0懵警记录

现居地址BSC

对靠类别

低保x政翳x

I健康状况

方案二

因为表单很长并且后续还要继续增加字段，为了保证用户能够快速了解

到错误信息，我们》竽笥吴的内容呈现到页面的下方，将其进行汇总，当

用户收到错误提示后，可以点击勘炼专查看,了解错误的位置。

同时之前的提交操作位于页面的底部，现在由于这个功能的加入，它需

要一直展示，因此将其固定在页面底部，方便用户进行反复查看与确认。

@CE青年Y

健康状况患何种疾病

B!好。患痛—

残痍等吸的动能力

I家a情况

E家庭人口

&滋加率H成员

姓名怪别

郑梦月舅O女

内日不完・

年，

文化村就”・为空.演遗对

28

e««・•［为空.♦遢打

发再英别心■力空,调遢材

方案三

由于我们目前本身有预览功能，因此可以在预览模块当中，提示错误信

息，并且同样可以点击后期瞧，这其实也是一个种不错的思路。

@CE青年Y

QIV*

IBttms

O・戋宛号.dlHXJBAHS

OIffft

BBttH

QIt*月男。女

(S“寮♦靖

13808887312510671W092133?”

6MWAM

义化收■

9■2-・

M•同1■文电■■

O・及Q・

尸”座・pcma

Q9V・记，我篁户口O♦我*PQ

取舄g■为(8内

内・咬取

I■■妆况

•好。e«

伪而・力rww«iv«

I**情况

9SAD

对方案最终细化时，我们考虑方案二与方案三进行结合，将提示信息在

预览处对应字段上进行展示并可点击演纸，这样的设计，更加能够解决

页面目前遇到的问题。同时，对于提示信息的集中展示的方案也可以保

留，当后续没有预览模块时，可以作为通用方案进行落地。

Qff*

I9tt««O聂学倡■*■与宽■,谒料先电MK攵

卬工作自

曾名依别

g）僮■累・宓罗月R。女

81懵对■■联系电喀0仿*〈科

138088823125106211882092133211

SHKABV*

年・文化物展

28

0m

户在电户口住■

a农业户口。非我业户口

现居地址是否区内

时・美加

低保xa*xv仲壳儡照

I・■状况

・AM况盟何怆模0HffXtt

anoe«*]—

Hawn劳动・力rnwffl^fa

I★庭情况

MAD

四.善用重复

对于复杂的表单，我们能够善用重复，提高表单使用效率。因为在后台

当中，会发现大量的表单都是较为重复的字段，在信息上可以将重复的

部分进行省略。

并且在实际业务当中，每一个业务员都会负责一个领域的信息录入，因

此重复的内容会更多。我们实现重复的方式，目前会有模版.复制两种

方式。

模版：模版是提供给企业、个人创建自己常用的重复信息，提供给到用

户进行使用。在B端产品当中模版的解决思路会分为模版市场、企业

模版、个人模版。

1.模版市场

针对产品本身模版需求比较多的情况，它需要大量的模版来降低产品的

难度，进而会有模版市场提供给所有用户使用。比如在明道云、简道云

都会有类似功能。

@CEII年Y

网H应用

2.企业模版

企业模版则是在B端产品当中，不同公司可以在管理后台对公司内的

创建模版进行配置，这样能够保证企业所有员工填写出来的内容基本一

致。

比如在审批当中，就是由企业配置好了信息过后只能提供给到用户进

行使用，本质上也是一种模版展示的形式。

•CE青年Youthcacom

口**・・□-

[]0・♦•Q口

金■•・

行■

]・■■■用11

Q3♦・0•••

A・

Q■■•・Q

Qd・■•口*"el

口m口。8・

nam

Q*w

3.个人模版

是给用户个人进行创建的模版，在这部分产品当中，因为不同的用户都

会存在对应的个性需求，每个人填写的表单也并不相同，因此可以提供

给到用户进行使用。

比如在协同的软件当中，我们就可以使用个人模版来优化用户的日常

体验。同时在垂直业务性的产品当中，也可以使用个人模版来进行优化。

青年Y

我的模板

与我其■

・■品王鼎•你的■悻

mw

Men

令口

OKR

ra与我共享

fit

QM户访博波照产■■

,MM

事，

m

MB*MM

HR

•Mt

・Z・