復(fù)雜表單如何進行設(shè)計優(yōu)化

表單，作為我們?nèi)粘９ぷ髦匾捻椖績?nèi)容，我們每周都會對其進行設(shè)計。

而在我前幾年的工作當(dāng)中，接觸到的更多是簡單零星的字段.樸實無華

的組件。這對于在座〃高級設(shè)計師〃來說，做起來會比較簡單。

而現(xiàn)在大多數(shù)B端產(chǎn)品，我們接觸到的都是二三十個字段，并且每一

個字段都會包含有大量的邏輯信息，針對這種情況，我們作為設(shè)計師應(yīng)

該如何應(yīng)對？今天我們就來說說復(fù)雜表單的設(shè)計思路。

由于復(fù)雜表單本身比較難理解，我們會通過一個最近做的政府類的項目

來帶領(lǐng)大家進行分析，講講設(shè)計優(yōu)化前后的點。

CE青年Y

低收入人口動態(tài)監(jiān)測平1

一、主要功能：低收入人口采集端；動態(tài)監(jiān)測處置i

二、當(dāng)前1.0版的問題：雖然通過手機PC端實現(xiàn)4

集信息的模塊太復(fù)雜，對采集人員和機構(gòu)組織要求*

通過“一鍵求助”的數(shù)據(jù)幾孚不存在。而信息采集類

數(shù)據(jù)，對需求有描述，但是認定核對邊界不清晰，*

積極作用。故平臺面臨較大問題，升級優(yōu)化迫在眉］

三、2.0版急需解決的幾個重點環(huán)節(jié):

一、項目背景

這次的項目為一個政企項目，主要是為某一線城市政府部分提供一個人

群監(jiān)控系統(tǒng)的設(shè)計優(yōu)化，系統(tǒng)是為政府部門的重點人群，進行采集，核

對.巡防,以達到管理的作用。

整個流程當(dāng)中會包含有社工采集、巡防任務(wù)分發(fā).社工巡防、區(qū)縣審

核,通過前期的資料收集，發(fā)現(xiàn)問題最多的便是社工采集流程。

痛點

這次迭代主要的問題源自系統(tǒng)的采集端，走訪、現(xiàn)場觀察了社工的采集

狀況，大致可以整理為以下問題：

?填寫信息資料過多，很多瑣碎的資料需要反復(fù)填寫；

?采集信息模塊過于復(fù)雜，導(dǎo)致很多時候不是用戶填寫，而是社工

在進行錄入；

?錄入錯誤率極高，完成率很低；

-不同的人員類別填寫的同一個表單，內(nèi)容多而全；

?…

首先，在設(shè)計過程當(dāng)中，我們依舊會做對應(yīng)的基礎(chǔ)設(shè)計，不過由于不是

咱們這次討論的重點，就不展開詳細描述。而對于這個頁面大家可以先

思考，如果由你來進行接手，會如何進行優(yōu)化。

@CE青年Y

??AA

??值?I■■■■

魯尸情?H5

■，攵

?階Wtn

次

?相■■產(chǎn)6Ml

?我情?

MKWfl與尸叁美后

?■敢

*K*_____ran

I

TAR<ATA??（?快0?）

K

■量谷"入wmax

無

住屑**?WG?0?

VU6**—

霓

I?殳“

?森**■?■給

■或M

ISBMJL

??明R■例???

劣CN5

二、信息預(yù)覽

在上方的表單當(dāng)中，我們會發(fā)現(xiàn)由于表單過長，導(dǎo)致用戶會出現(xiàn)上下反

復(fù)滾動的行為。在對這個行為進行挖掘時，明確原因是用戶信息過多需

要反復(fù)確認，因此需要上下滾動，進而影響其填寫效率。

對于確認的場景，我首先考慮到在頁面右上方增加一個預(yù)覽按鈕，點擊

后會有預(yù)覽頁面。

但預(yù)覽也需要反復(fù)點擊目陣專頁面，本身并不是一個好的選擇，為此我們

考慮在原有的頁面布局上進行優(yōu)化。

在頁面寬度上，很多同學(xué)會覺得越寬越好，比如一個頁面，會盡可能壓

榨其寬度，產(chǎn)出這樣的一些頁面。

@CE青年Y

一-MAfi

|I■?爆?

*值?118SRVI

R?ft

?人

Mtfift0洎一?戶OU91

■K0K?

與戶主美東戶m

urnm

戶口||

寄J

l

tAR<A個人"??C

<

MSniftAtti

ftfieWAWHfiKS

充

實際上，我們的寬度，也會有一定的限制，才能夠讓用戶更為聚焦，比

如常見的文檔產(chǎn)品，他們在寬度的設(shè)定上，都會默認在700-900之間,

這樣才能夠保證用戶聚焦于整個文檔當(dāng)中，如果過長，你會發(fā)現(xiàn)我們不

太愿意認真的去閱讀里面的內(nèi)容。

@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

發(fā)?分享iR*B?i9Lt?a?a

■彩盤物-K?

f?rr?Jl4

?oo-BR^a*aie?iftm

XQOS0ararnii-蹩一0

因此大多數(shù)情況下，我們的表單列數(shù)以兩列為主，最多不要超過三列。

而在布局上，并不是說我們其他空間的位置就不能去排布信息，而是不

能去展示核心內(nèi)容，因此，我們可以考慮將次要內(nèi)容放在核心內(nèi)容模塊

兩側(cè)。

@CEll年Y

。、T

無標題

我?目?2

我及目果3

a*次■功也

同時在設(shè)計上，頁面長度的增加會導(dǎo)致我們無法對頁面整體的內(nèi)容有完

整的了解，因為不同的組件都會占據(jù)頁面的整體高度，當(dāng)頁面內(nèi)容超過

一屏?xí)r，我們在確認信息的時候，就只能通過上下滾動頁面的方式進行

確認，導(dǎo)致效率低。針對上述的所有情況下，我們會考慮采用左右結(jié)構(gòu)

的版式，將右側(cè)區(qū)域作為一個獨立的預(yù)覽模塊。在左側(cè)填寫表單時，右

側(cè)預(yù)覽區(qū)域?qū)⒂幸粋€實時預(yù)覽，從而對輸入的內(nèi)容進行快速判斷和確

認。

通過點擊預(yù)覽區(qū)域的字段也可以快速定位到左側(cè)該字段位置,從而幫助

我們在不同信息之間的來回嬲專。

?CE青年Y

???

Qft*

Iauoia

vma

修酬

a■“內(nèi)R。女

點擊■■定住后位殺

(9MHW?最?靖,酎?彳?

138068823125K?21W820WI332n

8”?人■?

年H真牝■■

Q?RV9

28■mHn七修，

R??<(■

產(chǎn)H防密電戶OHJB

awe**在?尸口。?&址戶口

“雄Ui■苦區(qū)內(nèi)

V9O2

同■安IN

tt?xttVx▼

I9?狀況

?■雄潭SHWAR

RHOBMv

MWtt勞動■力m例a

I家血情況

MA口

8?M臨號?■

0”91。女092133211

年”個A月女人?SHff

282800

■曲

?認?交

其次右側(cè)預(yù)覽也能夠起到錨點定位的作用，能夠幫助我們在不同信息之

間來回助陣專。

弊端

當(dāng)然，任I可方案都會有兩面性。使用左右布局的方式，也就意味著我們

在屏幕的最小寬度上需要由之前方案的1280px,變?yōu)楝F(xiàn)在方案的

1360pxo這也就意味著對于屏幕尺寸的兼容會更少。

但目前系統(tǒng)使用1280px的情況并不多,我們可以稍加犧牲。同時作

為方案的兜底，考慮讓開發(fā)實現(xiàn)當(dāng)頁面尺寸小于1360px時,目前是

提醒用戶通過瀏覽器自帶的縮放功能解決，后續(xù)會采用響應(yīng)式布局，將

右側(cè)內(nèi)容移至底部進行展示。

@CE胄年Youthcacom

Isttfse

⑥工作M

拄名性別

@倡息來■理歲月男O攵

Q■對?理*東電送■酎證彳物

138068823t25IOS2H882O92133211

GW9AHa

年出文化密?

9?KV9

28?透緡文化H星*

SItJRftl

尸■所在的PDtt?

Q情?記最式業(yè)戶口OM農(nóng)業(yè)戶口

■否區(qū)內(nèi)

V1OS

xB*xV

1At?狀況

?■狀況患何阿1禽

我好。SffV,1-V

MffVtf1HM?力IP修等爆曰估

VV

1款庭情況

VSAD

*

&SMlBBAft

展署修引賽■■■

鄭，月舅。女092133211

年“個人以收人是否殘演

282800*O￡

在我們最后方案評審前，我們再進行走查會發(fā)現(xiàn)：〃很多用戶并不會在

意右側(cè)的所有信息〃。

為此，我們對最終方案的交互又一次進行調(diào)整，將之前的提交操作移至

右側(cè)，并將右側(cè)的展示信息進行優(yōu)化。這樣的頁面信息布局，讓用戶在

提交表單之前，能夠?qū)Ρ韱蝺?nèi)容快速的確認。也保證了用戶會利用到調(diào)

整后的頁面，同時也一定程度上降低了用戶對負反饋的接收，使其更準

確的進行填寫。（當(dāng)然這是在下方的方案做完過后的決定，具體原因下

方也會講到）

@CE青年Y

Q

IBttms

?ifftt

BBttM

QIt*月男。女

可“寮?靖■華■一

1380888?312510621W092l33?t1

6MWAM

火化!1?

9?域”

M—文電

a

尸”座?戶口《■

a91?i￡?“切口O?ttitPQ

■■(8內(nèi)

■。包

網(wǎng)?景別

fifl?avM*

I■■妝況

■?軟沅?傅”俄■

M。塞修

?由?力r號毋即信

I**情況

vaxa

三、錯誤提示

在上方反饋當(dāng)中，明確提到錯誤率很高。在對這個問題跟進后發(fā)現(xiàn)，用

戶經(jīng)常會遇到〃錯誤提示不夠明確〃、〃提示錯誤信息后不知道改啥〃。

關(guān)于錯誤提示，首先看到很多文章都會聊到，在表單中通過及時校驗的

方式來呈現(xiàn)錯誤的數(shù)據(jù)，提高準確率。但及時校驗也是有弊端的，如果

輸入的內(nèi)容出錯概率比較高，頻繁的給用戶提示會降低用戶體驗；如果

采用后端來校驗，頻繁的調(diào)用接口，也將增加服務(wù)器的負擔(dān)。

這里簡單補充一下校驗方式：

前端校驗：在瀏覽器中進行的，通過JS腳本實現(xiàn)，當(dāng)用戶填寫表單時,

可以對用戶的輸入做一些基礎(chǔ)的規(guī)則判斷，如果不符合可立即提示反

饋，增加用戶體驗的同時減少服務(wù)器的消耗。比如說郵箱格式判斷，就

是一個典型的前端校驗，而及時校驗在項目中也更多指的是前端校驗的

方式。但是前端的校驗并不是絕對可靠的，因為用戶可以通過修改瀏覽

器的控制臺或者使用其他工具繞過前端的校驗。實際上前端后端均要做

校驗。

后端校驗：在服務(wù)器中通過PHP、Java等語言實現(xiàn),當(dāng)表單提交到服

務(wù)器后，可以對表單中的數(shù)據(jù)做進一步的處理和判斷，以確保數(shù)據(jù)的安

全性和完整性。比如說賬號密碼錯誤，就是一個后端校驗。

傳統(tǒng)表單的做法是使用全局提示，由于提示內(nèi)容不夠準確，導(dǎo)致用戶在

修改信息時無法快速高效的進行調(diào)整。

I9tt???聶學(xué)倡■口寬■,謫樸先后同n攵

V工作自

曾名性別

Q僮■累?0TAO女

81懵對■■a系電塔0仿”號碼

138088823125W5211882092U3211

SHKABV*

年?文化再度

9SKV9

28

0m

戶，M在堵戶口住■

a農(nóng)業(yè)戶口o”木業(yè)戶口

是香區(qū)內(nèi)

時?美別

電保xa*x

I?■狀況

密何村既賣別

AHO電?

》動?力

IK庭情況

MAD

而在目前的表單當(dāng)中，本身數(shù)據(jù)較長，再加上第二期的需求提出還需要

增加字段，也就意味著整體的表單長度還會加大。因此使用傳統(tǒng)的表單

錯誤提示，會使整個修改的過程需要反復(fù)滾動修改，不利于我們進行編

輯。

在方案設(shè)計上，我們想通過一個區(qū)域，將表單當(dāng)中的所有的錯誤信息都

呈現(xiàn)于此，這樣既能夠讓用戶快速知道表單有錯誤內(nèi)容，也知道錯誤具

體在哪。為此我們設(shè)計了三種不同方案。

方案一

保持之前現(xiàn)有的全局提示不變，將頁面當(dāng)中的錯誤信息呈現(xiàn)清楚。在頁

面當(dāng)中提示出具體存在哪些問題，同時用戶就可以滾動查看，了解如何

細節(jié)調(diào)整。

@CE0I年Y

Q擅索

I?附信息o寰單信息未攜寫完整.謫補充下方信』

9工作臺1.文化程度未選播

姓名

2.現(xiàn)居地址東堰寫

S信息采集鄭夢月

(9樓時?造聯(lián)系電話身份t

13806882312510

S裨孱人群麻

年齡Xftf

9巡防管理

28

a需求處?

戶皿所在地pat

0懵警記錄

現(xiàn)居地址BSC

對靠類別

低保x政翳x

I健康狀況

方案二

因為表單很長并且后續(xù)還要繼續(xù)增加字段，為了保證用戶能夠快速了解

到錯誤信息，我們》竽笥吳的內(nèi)容呈現(xiàn)到頁面的下方，將其進行匯總，當(dāng)

用戶收到錯誤提示后，可以點擊勘煉專查看,了解錯誤的位置。

同時之前的提交操作位于頁面的底部，現(xiàn)在由于這個功能的加入，它需

要一直展示，因此將其固定在頁面底部，方便用戶進行反復(fù)查看與確認。

@CE青年Y

健康狀況患何種疾病

B!好?；纪础?/p>

殘痍等吸的動能力

I家a情況

E家庭人口

&滋加率H成員

姓名怪別

鄭夢月舅O女

內(nèi)日不完?

年，

文化村就”?為空.演遺對

28

e????［為空.?遢打

發(fā)再英別心■力空,調(diào)遢材

方案三

由于我們目前本身有預(yù)覽功能，因此可以在預(yù)覽模塊當(dāng)中，提示錯誤信

息，并且同樣可以點擊后期瞧，這其實也是一個種不錯的思路。

@CE青年Y

QIV*

IBttms

O?戔宛號.dlHXJBAHS

OIffft

BBttH

QIt*月男。女

(S“寮?靖

13808887312510671W092133?”

6MWAM

義化收■

9■2-?

M?同1■文電■■

O?及Q?

尸”座?pcma

Q9V?記，我篁戶口O?我*PQ

取舄g■為(8內(nèi)

內(nèi)?咬取

I■■妝況

?好。e?

偽而?力rww?iv?

I**情況

9SAD

對方案最終細化時，我們考慮方案二與方案三進行結(jié)合，將提示信息在

預(yù)覽處對應(yīng)字段上進行展示并可點擊演紙，這樣的設(shè)計，更加能夠解決

頁面目前遇到的問題。同時，對于提示信息的集中展示的方案也可以保

留，當(dāng)后續(xù)沒有預(yù)覽模塊時，可以作為通用方案進行落地。

Qff*

I9tt??O聶學(xué)倡■*■與寬■,謁料先電MK攵

卬工作自

曾名依別

g）僮■累?宓羅月R。女

81懵對■■聯(lián)系電喀0仿*〈科

138088823125106211882092133211

SHKABV*

年?文化物展

28

0m

戶在電戶口住■

a農(nóng)業(yè)戶口。非我業(yè)戶口

現(xiàn)居地址是否區(qū)內(nèi)

時?美加

低保xa*xv仲殼儡照

I?■狀況

?AM況盟何愴模0HffXtt

anoe?*]—

Hawn勞動?力rnwffl^fa

I★庭情況

MAD

四.善用重復(fù)

對于復(fù)雜的表單，我們能夠善用重復(fù)，提高表單使用效率。因為在后臺

當(dāng)中，會發(fā)現(xiàn)大量的表單都是較為重復(fù)的字段，在信息上可以將重復(fù)的

部分進行省略。

并且在實際業(yè)務(wù)當(dāng)中，每一個業(yè)務(wù)員都會負責(zé)一個領(lǐng)域的信息錄入，因

此重復(fù)的內(nèi)容會更多。我們實現(xiàn)重復(fù)的方式，目前會有模版.復(fù)制兩種

方式。

模版：模版是提供給企業(yè)、個人創(chuàng)建自己常用的重復(fù)信息，提供給到用

戶進行使用。在B端產(chǎn)品當(dāng)中模版的解決思路會分為模版市場、企業(yè)

模版、個人模版。

1.模版市場

針對產(chǎn)品本身模版需求比較多的情況，它需要大量的模版來降低產(chǎn)品的

難度，進而會有模版市場提供給所有用戶使用。比如在明道云、簡道云

都會有類似功能。

@CEII年Y

網(wǎng)H應(yīng)用

2.企業(yè)模版

企業(yè)模版則是在B端產(chǎn)品當(dāng)中，不同公司可以在管理后臺對公司內(nèi)的

創(chuàng)建模版進行配置，這樣能夠保證企業(yè)所有員工填寫出來的內(nèi)容基本一

致。

比如在審批當(dāng)中，就是由企業(yè)配置好了信息過后只能提供給到用戶進

行使用，本質(zhì)上也是一種模版展示的形式。

?CE青年Youthcacom

口**??□-

[]0???Q口

金■??

行■

]?■■■用11

Q3??0???

A?

Q■■??Q

Qd?■?口*"el

口m口。8?

nam

Q*w

3.個人模版

是給用戶個人進行創(chuàng)建的模版，在這部分產(chǎn)品當(dāng)中，因為不同的用戶都

會存在對應(yīng)的個性需求，每個人填寫的表單也并不相同，因此可以提供

給到用戶進行使用。

比如在協(xié)同的軟件當(dāng)中，我們就可以使用個人模版來優(yōu)化用戶的日常

體驗。同時在垂直業(yè)務(wù)性的產(chǎn)品當(dāng)中，也可以使用個人模版來進行優(yōu)化。

青年Y

我的模板

與我其■

?■品王鼎?你的■悻

mw

Men

令口

OKR

ra與我共享

fit

QM戶訪博波照產(chǎn)■■

,MM

事，

m

MB*MM

HR

?Mt

?Z?