在日常工作中，產(chǎn)品經(jīng)理或者設(shè)計(jì)師經(jīng)常會接觸到表單這一組件，那么，當(dāng)遇到包含大量字段和信息的復(fù)雜表單時(shí)，我們該如何做好設(shè)計(jì)呢？這篇文章里，作者結(jié)合具體案例，聊了聊復(fù)雜表單的設(shè)計(jì)思路，一起來看一下吧。

表單，作為我們?nèi)粘９ぷ髦匾捻?xiàng)目內(nèi)容，我們每周都會對其進(jìn)行設(shè)計(jì)。而在我前幾年的工作當(dāng)中，接觸到的更多是簡單零星的字段、樸實(shí)無華的組件。這對于在座“高級設(shè)計(jì)師”來說，做起來會比較簡單。

而現(xiàn)在大多數(shù) B 端產(chǎn)品，我們接觸到的都是二三十個(gè)字段，并且每一個(gè)字段都會包含有大量的邏輯信息，針對這種情況，我們作為設(shè)計(jì)師應(yīng)該如何應(yīng)對？今天我們就來說說復(fù)雜表單的設(shè)計(jì)思路。

由于復(fù)雜表單本身比較難理解，我們會通過一個(gè)最近做的政府類的項(xiàng)目來帶領(lǐng)大家進(jìn)行分析，講講設(shè)計(jì)優(yōu)化前后的點(diǎn)。

一、項(xiàng)目背景

這次的項(xiàng)目為一個(gè)政企項(xiàng)目，主要是為某一線城市政府部分提供一個(gè)人群監(jiān)控系統(tǒng)的設(shè)計(jì)優(yōu)化，系統(tǒng)是為政府部門的重點(diǎn)人群，進(jìn)行采集、核對、巡防，以達(dá)到管理的作用。

整個(gè)流程當(dāng)中會包含有 社工采集、巡防任務(wù)分發(fā)、社工巡防、區(qū)縣審核，通過前期的資料收集，發(fā)現(xiàn)問題最多的便是社工采集流程。

痛點(diǎn)

這次迭代主要的問題源自系統(tǒng)的采集端，走訪、現(xiàn)場觀察了社工的采集狀況，大致可以整理為以下問題：

• 填寫信息資料過多，很多瑣碎的資料需要反復(fù)填寫；
• 采集信息模塊過于復(fù)雜，導(dǎo)致很多時(shí)候不是用戶填寫，而是社工在進(jìn)行錄入；
• 錄入錯(cuò)誤率極高，完成率很低；
• 不同的人員類別填寫的同一個(gè)表單，內(nèi)容多而全；
• …

首先，在設(shè)計(jì)過程當(dāng)中，我們依舊會做對應(yīng)的基礎(chǔ)設(shè)計(jì)，不過由于不是咱們這次討論的重點(diǎn)，就不展開詳細(xì)描述。而對于這個(gè)頁面大家可以先思考，如果由你來進(jìn)行接手，會如何進(jìn)行優(yōu)化。

二、信息預(yù)覽

在上方的表單當(dāng)中，我們會發(fā)現(xiàn)由于表單過長，導(dǎo)致用戶會出現(xiàn)上下反復(fù)滾動(dòng)的行為。在對這個(gè)行為進(jìn)行挖掘時(shí)，明確原因是用戶信息過多需要反復(fù)確認(rèn)，因此需要上下滾動(dòng)，進(jìn)而影響其填寫效率。

對于確認(rèn)的場景，我首先考慮到在頁面右上方增加一個(gè)預(yù)覽按鈕，點(diǎn)擊后會有預(yù)覽頁面。

但預(yù)覽也需要反復(fù)點(diǎn)擊跳轉(zhuǎn)頁面，本身并不是一個(gè)好的選擇，為此我們考慮在原有的頁面布局上進(jìn)行優(yōu)化。

在頁面寬度上，很多同學(xué)會覺得越寬越好，比如一個(gè)頁面，會盡可能壓榨其寬度，產(chǎn)出這樣的一些頁面。

實(shí)際上，我們的寬度，也會有一定的限制，才能夠讓用戶更為聚焦，比如常見的文檔產(chǎn)品，他們在寬度的設(shè)定上，都會默認(rèn)在 700-900 之間，這樣才能夠保證用戶聚焦于整個(gè)文檔當(dāng)中，如果過長，你會發(fā)現(xiàn)我們不太愿意認(rèn)真的去閱讀里面的內(nèi)容。

因此大多數(shù)情況下，我們的表單列數(shù)以兩列為主，最多不要超過三列。而在布局上，并不是說我們其他空間的位置就不能去排布信息，而是不能去展示核心內(nèi)容，因此，我們可以考慮將次要內(nèi)容放在核心內(nèi)容模塊兩側(cè)。

同時(shí)在設(shè)計(jì)上，頁面長度的增加會導(dǎo)致我們無法對頁面整體的內(nèi)容有完整的了解，因?yàn)椴煌慕M件都會占據(jù)頁面的整體高度，當(dāng)頁面內(nèi)容超過一屏?xí)r，我們在確認(rèn)信息的時(shí)候，就只能通過上下滾動(dòng)頁面的方式進(jìn)行確認(rèn)，導(dǎo)致效率低。針對上述的所有情況下，我們會考慮采用左右結(jié)構(gòu)的版式，將右側(cè)區(qū)域作為一個(gè)獨(dú)立的預(yù)覽模塊。在左側(cè)填寫表單時(shí)，右側(cè)預(yù)覽區(qū)域?qū)⒂幸粋€(gè)實(shí)時(shí)預(yù)覽，從而對輸入的內(nèi)容進(jìn)行快速判斷和確認(rèn)。

通過點(diǎn)擊預(yù)覽區(qū)域的字段也可以快速定位到左側(cè)該字段位置，從而幫助我們在不同信息之間的來回跳轉(zhuǎn)。

其次右側(cè)預(yù)覽也能夠起到錨點(diǎn)定位的作用，能夠幫助我們在不同信息之間來回跳轉(zhuǎn)。

弊端

當(dāng)然，任何方案都會有兩面性。使用左右布局的方式，也就意味著我們在屏幕的最小寬度上需要由之前方案的 1280px，變?yōu)楝F(xiàn)在方案的 1360px。這也就意味著對于屏幕尺寸的兼容會更少。

但目前系統(tǒng)使用 1280px 的情況并不多，我們可以稍加犧牲。同時(shí)作為方案的兜底，考慮讓開發(fā)實(shí)現(xiàn)當(dāng)頁面尺寸小于 1360px 時(shí)，目前是提醒用戶通過瀏覽器自帶的縮放功能解決，后續(xù)會采用響應(yīng)式布局，將右側(cè)內(nèi)容移至底部進(jìn)行展示。

在我們最后方案評審前，我們再進(jìn)行走查會發(fā)現(xiàn)：“很多用戶并不會在意右側(cè)的所有信息”。

為此，我們對最終方案的交互又一次進(jìn)行調(diào)整，將之前的提交操作移至右側(cè)，并將右側(cè)的展示信息進(jìn)行優(yōu)化。這樣的頁面信息布局，讓用戶在提交表單之前，能夠?qū)Ρ韱蝺?nèi)容快速的確認(rèn)。也保證了用戶會利用到調(diào)整后的頁面，同時(shí)也一定程度上降低了用戶對負(fù)反饋的接收，使其更準(zhǔn)確的進(jìn)行填寫。（當(dāng)然這是在下方的方案做完過后的決定，具體原因下方也會講到）

三、錯(cuò)誤提示

在上方反饋當(dāng)中，明確提到錯(cuò)誤率很高。在對這個(gè)問題跟進(jìn)后發(fā)現(xiàn)，用戶經(jīng)常會遇到 “錯(cuò)誤提示不夠明確”、“提示錯(cuò)誤信息后不知道改啥” 。

關(guān)于錯(cuò)誤提示，首先看到很多文章都會聊到，在表單中通過及時(shí)校驗(yàn)的方式來呈現(xiàn)錯(cuò)誤的數(shù)據(jù)，提高準(zhǔn)確率。但及時(shí)校驗(yàn)也是有弊端的，如果輸入的內(nèi)容出錯(cuò)概率比較高，頻繁的給用戶提示會降低用戶體驗(yàn)；如果采用后端來校驗(yàn)，頻繁的調(diào)用接口，也將增加服務(wù)器的負(fù)擔(dān)。

這里簡單補(bǔ)充一下校驗(yàn)方式：

前端校驗(yàn)：在瀏覽器中進(jìn)行的，通過JS腳本實(shí)現(xiàn)，當(dāng)用戶填寫表單時(shí)，可以對用戶的輸入做一些基礎(chǔ)的規(guī)則判斷，如果不符合可立即提示反饋，增加用戶體驗(yàn)的同時(shí)減少服務(wù)器的消耗。比如說郵箱格式判斷，就是一個(gè)典型的前端校驗(yàn)，而及時(shí)校驗(yàn)在項(xiàng)目中也更多指的是前端校驗(yàn)的方式。但是前端的校驗(yàn)并不是絕對可靠的，因?yàn)橛脩艨梢酝ㄟ^修改瀏覽器的控制臺或者使用其他工具繞過前端的校驗(yàn)。實(shí)際上前端后端均要做校驗(yàn)。

后端校驗(yàn)：在服務(wù)器中通過PHP、Java等語言實(shí)現(xiàn)，當(dāng)表單提交到服務(wù)器后，可以對表單中的數(shù)據(jù)做進(jìn)一步的處理和判斷，以確保數(shù)據(jù)的安全性和完整性。比如說 賬號密碼錯(cuò)誤，就是一個(gè)后端校驗(yàn)。

傳統(tǒng)表單的做法是使用全局提示，由于提示內(nèi)容不夠準(zhǔn)確，導(dǎo)致用戶在修改信息時(shí)無法快速高效的進(jìn)行調(diào)整。

而在目前的表單當(dāng)中，本身數(shù)據(jù)較長，再加上第二期的需求提出還需要增加字段，也就意味著整體的表單長度還會加大。因此使用傳統(tǒng)的表單錯(cuò)誤提示，會使整個(gè)修改的過程需要反復(fù)滾動(dòng)修改，不利于我們進(jìn)行編輯。

在方案設(shè)計(jì)上，我們想通過一個(gè)區(qū)域，將表單當(dāng)中的所有的錯(cuò)誤信息都呈現(xiàn)于此，這樣既能夠讓用戶快速知道表單有錯(cuò)誤內(nèi)容，也知道錯(cuò)誤具體在哪。為此我們設(shè)計(jì)了三種不同方案。

方案一

保持之前現(xiàn)有的全局提示不變，將頁面當(dāng)中的錯(cuò)誤信息呈現(xiàn)清楚。在頁面當(dāng)中提示出具體存在哪些問題，同時(shí)用戶就可以滾動(dòng)查看，了解如何細(xì)節(jié)調(diào)整。

方案二

因?yàn)楸韱魏荛L并且后續(xù)還要繼續(xù)增加字段，為了保證用戶能夠快速了解到錯(cuò)誤信息，我們將錯(cuò)誤的內(nèi)容呈現(xiàn)到頁面的下方，將其進(jìn)行匯總，當(dāng)用戶收到錯(cuò)誤提示后，可以點(diǎn)擊跳轉(zhuǎn)查看，了解錯(cuò)誤的位置。

同時(shí)之前的提交操作位于頁面的底部，現(xiàn)在由于這個(gè)功能的加入，它需要一直展示，因此將其固定在頁面底部，方便用戶進(jìn)行反復(fù)查看與確認(rèn)。

方案三

由于我們目前本身有預(yù)覽功能，因此可以在預(yù)覽模塊當(dāng)中，提示錯(cuò)誤信息，并且同樣可以點(diǎn)擊后跳轉(zhuǎn)，這其實(shí)也是一個(gè)種不錯(cuò)的思路。

對方案最終細(xì)化時(shí)，我們考慮方案二與方案三進(jìn)行結(jié)合，將提示信息在預(yù)覽處對應(yīng)字段上進(jìn)行展示并可點(diǎn)擊跳轉(zhuǎn)，這樣的設(shè)計(jì)，更加能夠解決頁面目前遇到的問題。同時(shí)，對于提示信息的集中展示的方案也可以保留，當(dāng)后續(xù)沒有預(yù)覽模塊時(shí)，可以作為通用方案進(jìn)行落地。

四、善用重復(fù)

對于復(fù)雜的表單，我們能夠善用重復(fù)，提高表單使用效率。因?yàn)樵诤笈_當(dāng)中，會發(fā)現(xiàn)大量的表單都是較為重復(fù)的字段，在信息上可以將重復(fù)的部分進(jìn)行省略。

并且在實(shí)際業(yè)務(wù)當(dāng)中，每一個(gè)業(yè)務(wù)員都會負(fù)責(zé)一個(gè)領(lǐng)域的信息錄入，因此重復(fù)的內(nèi)容會更多。我們實(shí)現(xiàn)重復(fù)的方式，目前會有模版、復(fù)制兩種方式。

模版：模版是提供給企業(yè)、個(gè)人創(chuàng)建自己常用的重復(fù)信息，提供給到用戶進(jìn)行使用。在 B 端產(chǎn)品當(dāng)中模版的解決思路會分為模版市場、企業(yè)模版、個(gè)人模版。

1. 模版市場

針對產(chǎn)品本身模版需求比較多的情況，它需要大量的模版來降低產(chǎn)品的難度，進(jìn)而會有模版市場提供給所有用戶使用。比如在明道云、簡道云都會有類似功能。

2. 企業(yè)模版

企業(yè)模版則是在 B 端產(chǎn)品當(dāng)中，不同公司可以在管理后臺對公司內(nèi)的創(chuàng)建模版進(jìn)行配置，這樣能夠保證企業(yè)所有員工填寫出來的內(nèi)容基本一致。

比如在 審批 當(dāng)中，就是由企業(yè)配置好了信息過后只能提供給到用戶進(jìn)行使用，本質(zhì)上也是一種模版展示的形式。

3. 個(gè)人模版

是給用戶個(gè)人進(jìn)行創(chuàng)建的模版，在這部分產(chǎn)品當(dāng)中，因?yàn)椴煌挠脩舳紩嬖趯?yīng)的個(gè)性需求，每個(gè)人填寫的表單也并不相同，因此可以提供給到用戶進(jìn)行使用。

比如在 協(xié)同的軟件當(dāng)中，我們就可以使用個(gè)人模版來優(yōu)化用戶的日常體驗(yàn)。同時(shí)在垂直業(yè)務(wù)性的產(chǎn)品當(dāng)中，也可以使用個(gè)人模版來進(jìn)行優(yōu)化。

我們剛才講到不同業(yè)務(wù)員會負(fù)責(zé)不同領(lǐng)域的信息錄入，因此在模版維度上會選擇以個(gè)人為單位，同時(shí)以企業(yè)模版為輔助進(jìn)行搭建。

在點(diǎn)擊創(chuàng)建時(shí)，我們會優(yōu)先選擇不同類型的模版，進(jìn)而提高效率。

4. 復(fù)制

復(fù)制則是在表單過于復(fù)雜時(shí)的常見策略，我們能夠通過再次創(chuàng)建一個(gè)同樣的表單數(shù)據(jù)，進(jìn)而來實(shí)現(xiàn)快速新建。

這種方式在 B 端系統(tǒng)當(dāng)中也非常常見，在系統(tǒng)當(dāng)中我們會將復(fù)制分為兩類：復(fù)制表單、復(fù)制數(shù)據(jù)。

復(fù)制表單就是將當(dāng)前的數(shù)據(jù)提交到表單當(dāng)中，然后讓用戶進(jìn)行編輯修改，這時(shí)候其實(shí)是沒有這一條數(shù)據(jù)，需要等數(shù)據(jù)提交后才能執(zhí)行。

復(fù)制數(shù)據(jù)則是將數(shù)據(jù)先進(jìn)行創(chuàng)建，創(chuàng)建后再進(jìn)行編輯修改。

兩者在數(shù)據(jù)上會有先后之分，這里在設(shè)計(jì)上也可以稍加注意。

我們會在項(xiàng)目的表格頁當(dāng)中，增加復(fù)制功能。整體是復(fù)制表單，點(diǎn)擊過后我們可以修改表單內(nèi)的信息，通過這樣方式優(yōu)化之前難以快速創(chuàng)建的問題。

在設(shè)計(jì)的最后，我們還為業(yè)務(wù)人員準(zhǔn)備了一個(gè)小的優(yōu)化，就是通過他們的職責(zé)要求，能夠快速提示當(dāng)前成員信息滿足哪一個(gè)條件。通過具體的字段信息，來進(jìn)行智能的提示，這樣能夠提高業(yè)務(wù)人員的效率。

表單的設(shè)計(jì)，我們往往不能孤立去看待，它與多種元素相互關(guān)聯(lián)，作為數(shù)據(jù)的入口，承載著非常大的難度。同時(shí)在設(shè)計(jì)表單時(shí)，我們也需要考慮數(shù)量的“多”，所帶來的各種問題。

當(dāng)然這次所討論的便是應(yīng)對多字段的場景下的處理方式，但在實(shí)際的工作當(dāng)中，還會有很多其他的場景，后續(xù)有時(shí)間可以繼續(xù)給大家分享~