編輯導(dǎo)語(yǔ)：你有沒(méi)有設(shè)計(jì)過(guò)結(jié)構(gòu)復(fù)雜、內(nèi)容繁多的表單？在設(shè)計(jì)時(shí)有沒(méi)有什么技巧可以化繁為簡(jiǎn)、提升填寫者的體驗(yàn)感呢？本文作者為我們羅列出了表單設(shè)計(jì)中可能遇到的一些問(wèn)題，并且提供了解決方案，讓我們一起來(lái)學(xué)習(xí)吧。

距離上次發(fā)文已經(jīng)快半年多了，實(shí)在是慚愧，好久沒(méi)有輸出內(nèi)容了，看著每周增加的零星關(guān)注人數(shù)，內(nèi)心更加焦灼難安。

這半年來(lái)我換了工作，也適應(yīng)了新的環(huán)境，同時(shí)也在思考新的方向，估計(jì)和大多數(shù)的設(shè)計(jì)師一樣，迷茫時(shí)常伴隨著我。前段時(shí)間寫了幾周的產(chǎn)品體驗(yàn)日記，但覺(jué)得缺乏深度就沒(méi)發(fā)上來(lái)，后續(xù)我將會(huì)繼續(xù)寫產(chǎn)品體驗(yàn)日記，完善后分享給大家。

2020所剩無(wú)多了，我也會(huì)將積攢下的一些內(nèi)容陸陸續(xù)續(xù)發(fā)上來(lái)與大家分享，感謝關(guān)注，感謝閱讀。哈哈哈哈

一、導(dǎo)語(yǔ)

你平時(shí)填寫過(guò)的最復(fù)雜的表單是什么？調(diào)查問(wèn)卷還是文檔信息錄入？如果一個(gè)表單字段內(nèi)容巨多、結(jié)構(gòu)多變、填寫耗時(shí)耗力，那你將如何設(shè)計(jì)你的表單使之體驗(yàn)更佳？

面臨的問(wèn)題:

1. 業(yè)務(wù)復(fù)雜，功能較多

不知道大家是否看過(guò)法律合同之類的文件，多則好幾籮筐，少也有厚厚一疊；類似的文檔如果進(jìn)行線上結(jié)構(gòu)化，勢(shì)必要同樣要花費(fèi)巨大的人力去填寫表單，完成基礎(chǔ)信息的錄入工作。

同時(shí)，由于錄入的時(shí)間不確定，流程不明確等問(wèn)題，也制約著表單的填寫。

2. 流程較長(zhǎng)，操作繁瑣

多個(gè)不同表單之間的互有關(guān)聯(lián)又相互區(qū)別，填寫的時(shí)候需要來(lái)回查看以確認(rèn)信息，查閱和填寫相互并行，操作繁瑣。

3. 字段較多，關(guān)聯(lián)項(xiàng)較多

幾乎每一個(gè)字段都有對(duì)應(yīng)的關(guān)聯(lián)項(xiàng)，每個(gè)單選字段的不同項(xiàng)決定不同的內(nèi)容。同時(shí)，由于字段數(shù)量，層級(jí)劃分不明確，會(huì)使填寫的人失去定位，產(chǎn)生迷惑。

二、解決方案

1. 內(nèi)容分組，分步填寫

根據(jù)業(yè)務(wù)內(nèi)容分級(jí)，合理運(yùn)用顏色、間距、字體大小、卡片層級(jí)等進(jìn)行信息分級(jí)。

2. 實(shí)時(shí)保存，避免數(shù)據(jù)丟失，提供草稿功能，避免任務(wù)中斷

3.字段分組，示意結(jié)構(gòu)，聯(lián)動(dòng)項(xiàng)隱喻

4. 信息自動(dòng)帶入，節(jié)省時(shí)間

一般表單是與某項(xiàng)功能掛鉤的，信息會(huì)在多個(gè)入口錄入。因此在填寫長(zhǎng)表單的時(shí)候，如果能從系統(tǒng)中自動(dòng)獲取到數(shù)據(jù)，就可以自動(dòng)為其填充，可根據(jù)業(yè)務(wù)場(chǎng)景，判斷是否讓其修改和更新。

5. 提供二次編輯功能，防止信息輸入有誤

一般的長(zhǎng)表單在涉及非審批流的時(shí)候，可以讓其無(wú)限二次編輯；如果是處于審批流，則需要根據(jù)業(yè)務(wù)場(chǎng)景限制其編輯次數(shù)或者限定其編輯規(guī)則（草稿可編輯，一旦提交則不可編輯）。

6.提供多人協(xié)作編輯功能

如果一個(gè)長(zhǎng)表單，需要多個(gè)不同的業(yè)務(wù)域的人來(lái)填寫，那么需要協(xié)同編輯，并實(shí)時(shí)顯示編輯的人員信息。

同時(shí)，為了避免信息丟失和編輯錯(cuò)亂，在同一個(gè)表單下，同一時(shí)間應(yīng)該限制只允許一個(gè)人進(jìn)行編輯，等其提交完后，可允許其他人進(jìn)行編輯。

7. 實(shí)時(shí)檢驗(yàn)

前端實(shí)時(shí)校驗(yàn)字段輸入規(guī)則，后端統(tǒng)一校驗(yàn)信息交換規(guī)則。

比如對(duì)于數(shù)字輸入框的校驗(yàn)、電話號(hào)碼的校驗(yàn)、身份證號(hào)的校驗(yàn)，應(yīng)該在前端實(shí)時(shí)完成。

在鼠標(biāo)離開焦點(diǎn)區(qū)域或定位到下一個(gè)字段的時(shí)候，提示其填寫有誤；這樣做的目的是減少后續(xù)修改的次數(shù)，在長(zhǎng)表單下，統(tǒng)一提示其填寫錯(cuò)誤會(huì)是一場(chǎng)災(zāi)難。

在點(diǎn)擊保存并填寫下一步或點(diǎn)擊提交信息的時(shí)候，就需要跟后端交換數(shù)據(jù)，驗(yàn)證錄入的信息；如果不匹配，則提示錯(cuò)誤，并從上至下定位至相應(yīng)的錯(cuò)誤字段。

8.做好填寫引導(dǎo)功能

要通過(guò)多種方式，引導(dǎo)表單的填寫。

1）在開始填寫之前，簡(jiǎn)要說(shuō)明該表單的業(yè)務(wù)目標(biāo)，大概需要花費(fèi)的時(shí)間等；

2）開始填寫后，關(guān)于每個(gè)字段的特殊說(shuō)明，都需要標(biāo)注出來(lái)。重要的要顯示在頁(yè)面上，不重要的就收起在注釋符號(hào)中；

3）填寫的過(guò)程中，切記不要到最后才告訴用戶哪里出錯(cuò)了，重要的信息一定要提示到位，否則一旦出錯(cuò)，前功盡棄；

4）填寫完成后，引導(dǎo)其下一步的操作，或者返回至列表。

9. 詳情頁(yè)也需要注意信息分級(jí)

表單填寫完畢后的產(chǎn)出物就是詳情頁(yè)，詳情頁(yè)是需要瀏覽的。因此在設(shè)計(jì)詳情頁(yè)的時(shí)候，應(yīng)該本著讓用戶瀏覽方便的原則去設(shè)計(jì)，需要注意以下幾個(gè)點(diǎn)：

1）結(jié)構(gòu)清晰

結(jié)構(gòu)清晰是指不要講內(nèi)容一股腦的全堆在頁(yè)面上，要做好信息的分類；同時(shí)，注意規(guī)劃頁(yè)面的層級(jí)。

2）設(shè)置快捷導(dǎo)航

如果一個(gè)表單是長(zhǎng)且復(fù)雜的，那么其對(duì)應(yīng)的詳情頁(yè)也會(huì)變得復(fù)雜和冗長(zhǎng)，因此在頁(yè)面的右側(cè)或者頂部設(shè)置合理的快捷導(dǎo)航是很有必要的。

三、小細(xì)節(jié)，大體驗(yàn)

1. 提供快速返回頂部的按鈕

快速返回頂部按鈕的使用要注意場(chǎng)景，如果你的頁(yè)面比較長(zhǎng)，且沒(méi)有分組瀏覽的導(dǎo)航，那就需要設(shè)置快速返回頂部的按鈕。

但是在存在分組瀏覽導(dǎo)航和頂部懸浮標(biāo)簽的情況下，不建議使用快速返回頂部的按鈕，因?yàn)樵谔顚懕韱蔚臅r(shí)候，使用快速置頂?shù)膱?chǎng)景比較少。

2. 提供分組模塊收起展開功能

當(dāng)一個(gè)模塊混雜著各種信息的時(shí)候，單純的模塊分組已經(jīng)無(wú)法處理它的復(fù)雜度了，因此需要收起高頻且信息量大的模塊，可以合理的減少頁(yè)面的復(fù)雜度。

3. 步驟提供信息填寫完成度提示

步驟條可以單純的作為步驟指示器使用，也可以作為一個(gè)表單完成度的提示區(qū)域。

4. 重要說(shuō)明性文字盡量顯示而非收起

在填寫大量字段的表單時(shí)，閱讀表單內(nèi)容和填寫表單同樣耗時(shí)耗力。

如果我們將所有的提示信息隱藏在提示符中，一般情況下用戶不會(huì)去查看；但是如果去挨個(gè)查看提示信息，則會(huì)多花費(fèi)一個(gè)步驟去點(diǎn)擊或者懸停來(lái)查看提示信息，浪費(fèi)了大量的時(shí)間。

因此如果涉及到重要的提示信息，請(qǐng)直接展示在字段的后面，不要隱藏起來(lái)。

5. 產(chǎn)品內(nèi)組件應(yīng)該規(guī)范統(tǒng)一

在后臺(tái)產(chǎn)品上，關(guān)于組件的規(guī)范統(tǒng)一，想必是人盡皆知的設(shè)計(jì)原則。

無(wú)論是各類平臺(tái)型設(shè)計(jì)組件，還是各個(gè)公司自造的設(shè)計(jì)組件，保持統(tǒng)一和規(guī)范對(duì)產(chǎn)品設(shè)計(jì)有著重要的作用，在這里不贅述組件應(yīng)該怎樣規(guī)范統(tǒng)一。

因?yàn)闊o(wú)論是Ant Design還是其他設(shè)計(jì)語(yǔ)言，都有詳盡的關(guān)于組件的定義方法，我在這里講述一個(gè)產(chǎn)品設(shè)計(jì)更高層面或者更深層面的原因：

組件的規(guī)范統(tǒng)一并不僅僅是為了省時(shí)省力，而是為了使用戶在使用的過(guò)程中達(dá)到認(rèn)知上的統(tǒng)一和行為上的統(tǒng)一，在進(jìn)行高頻次的操作后，界面的流程或者組件樣式已大致在用戶腦海中形成固定印象。

因此在操作相同類的流程時(shí)，用戶會(huì)有更多的掌控感，試想一下：如果你在操作人事相關(guān)的流程后，去填寫績(jī)效部分的內(nèi)容時(shí)，發(fā)現(xiàn)一個(gè)迥異的界面或者彈窗，你肯定覺(jué)得這是不是哪里出錯(cuò)了，甚至?xí)岩蛇@是否是同一個(gè)系統(tǒng)。

目前大多數(shù)公司的管理系統(tǒng)經(jīng)過(guò)多次縫縫補(bǔ)補(bǔ)，內(nèi)部的跳轉(zhuǎn)邏輯已經(jīng)異常感人，界面風(fēng)格也大放異彩，但是使用起來(lái)卻無(wú)從下手，深感迷茫。

因此大到界面樣式，小到間距大小，產(chǎn)品設(shè)計(jì)的規(guī)范和統(tǒng)一應(yīng)該是最基礎(chǔ)又不可缺少的原則。

6.龐大的信息錄入，表單內(nèi)部要分步填寫，外部可拆分成不同的表單分別填寫

對(duì)付復(fù)雜的表單，你需要解決的主要問(wèn)題并不是填寫方式或者頁(yè)面設(shè)計(jì)，而是信息分級(jí)和結(jié)構(gòu)拆分。解決了這個(gè)問(wèn)題，基本上就解決了業(yè)務(wù)問(wèn)題，其余部分就跟我們常用的表單一致。

將復(fù)雜度降低并不意味著減少頁(yè)面的信息，而是通過(guò)設(shè)計(jì)師合理的信息劃分，降低視覺(jué)上的復(fù)雜度和流程上的復(fù)雜度，這樣才會(huì)達(dá)到當(dāng)前場(chǎng)景下的“最佳解決方案”。

四、結(jié)語(yǔ)

隨著互聯(lián)網(wǎng)信息化的深入發(fā)展，復(fù)雜是避免不了的。

我知道大家都推崇簡(jiǎn)潔的設(shè)計(jì)，但那只是對(duì)視覺(jué)和樣式的定義，而非對(duì)信息的定義。

我們所處的世界是復(fù)雜的，行業(yè)更是復(fù)雜的。信息的復(fù)雜度與日俱增，想要處理復(fù)雜的信息，就需要從復(fù)雜中尋求規(guī)律，這規(guī)律與業(yè)務(wù)息息相關(guān)。

B端360行，行行深如海，小伙伴們，我們一起慢慢修煉吧~

 

文章來(lái)源：人人都是產(chǎn)品經(jīng)理           作者：米蘭小鐵匠

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)