編輯導(dǎo)語(yǔ)：在工作中我們會(huì)遇到很多B端表單，對(duì)于特別復(fù)雜的表單，我們可以使用簡(jiǎn)化的方法，但簡(jiǎn)化也只是方法之一；當(dāng)我們遇到一些數(shù)據(jù)量大，層級(jí)深，關(guān)系復(fù)雜的表單時(shí)，我們還需要考慮該如何分析拆解、組織呈現(xiàn)這些數(shù)據(jù)；本文作者分享了關(guān)于如何應(yīng)對(duì)復(fù)雜B端表單設(shè)計(jì)。

本以為遇到表單設(shè)計(jì)沒(méi)什么好怕的了，但沒(méi)多久就遇到了特別復(fù)雜的表單，有大幾百個(gè)錄入項(xiàng)；當(dāng)然，比設(shè)計(jì)表單更崩潰的是用戶要填寫(xiě)這些表單；現(xiàn)實(shí)情況是——很多企業(yè)中大量員工的日常工作就埋沒(méi)在這些冗長(zhǎng)復(fù)雜的表單之中。

不得不承認(rèn)，對(duì)于特別復(fù)雜的B端表單，“簡(jiǎn)化”只是提升其易用性的方法之一；遇到數(shù)據(jù)量大，層級(jí)深，數(shù)據(jù)之間有交叉或嵌套關(guān)系的表單時(shí)，還需要考慮該如何分析拆解、組織呈現(xiàn)這些數(shù)據(jù)。

針對(duì)具體數(shù)據(jù)錄入項(xiàng)的優(yōu)化策略和從整體上思考如何組織和呈現(xiàn)復(fù)雜程度各異的表單：

1. 將用戶操作成本降至最低
2. 設(shè)計(jì)聰明貼心的輸入框
3. 邏輯架構(gòu)
4. 視圖載體
5. 兩個(gè)案例分析

一、將用戶操作成本降至最低

《Web表單設(shè)計(jì)——點(diǎn)石成金》提到一對(duì)概念：「Inside Out 由內(nèi)而外」和「Outside In 由外而內(nèi)」。

簡(jiǎn)單理解，這是兩個(gè)看待事物的視角：

• 「Inside Out」是從系統(tǒng)或軟件角度出發(fā)，向用戶要求“請(qǐng)?zhí)峁┪倚枰男畔ⅰ保?/li>
• 「Outside In」則是從用戶視角看待系統(tǒng)，用戶如何理解這些內(nèi)容？他們會(huì)獲得什么？能做什么？

這兩種視角之間的矛盾就是：用戶進(jìn)行更少操作 VS 系統(tǒng)獲取更多信息；要幫用戶解決這個(gè)矛盾，需要向系統(tǒng)投入更多技術(shù)資源，從而能讓系統(tǒng)代替用戶承擔(dān)更多工作負(fù)擔(dān)。

解決方法的技術(shù)成本有高有低，但從優(yōu)化效果來(lái)看可大致分成三個(gè)等級(jí)：

1. 第一級(jí)：用戶無(wú)感的數(shù)據(jù)獲取方式

例如：

• 平臺(tái)間的對(duì)接：通過(guò)平臺(tái)對(duì)接獲得完整、規(guī)范的數(shù)據(jù)。
• 系統(tǒng)自動(dòng)獲取數(shù)據(jù)：獲取來(lái)源包括用戶已經(jīng)輸入過(guò)的數(shù)據(jù)，或者根據(jù)用戶已輸入數(shù)據(jù)計(jì)算出來(lái)的其他數(shù)據(jù)，也包括設(shè)備數(shù)據(jù)；注意某些數(shù)據(jù)獲取需要獲得用戶允許。

2. 第二級(jí)：允許用戶提供其他類型的信息

例如：

• OCR技術(shù)：利用圖像識(shí)別技術(shù)，用戶上傳圖片代替表單輸入，系統(tǒng)將圖像內(nèi)容轉(zhuǎn)換為文本后填入對(duì)應(yīng)輸入框。
• 批量導(dǎo)入：用戶上傳文件，系統(tǒng)讀取后將數(shù)據(jù)填入對(duì)應(yīng)輸入框。
• 語(yǔ)音輸入：在對(duì)文本格式要求不嚴(yán)格的場(chǎng)景下支持語(yǔ)音輸入。

3. 第三級(jí)：從量上降低操作成本

例如：

• 選擇代替輸入：維護(hù)一套數(shù)據(jù)，讓用戶從輸入變?yōu)檫x擇。此方式除了減少鍵盤(pán)敲擊次數(shù)，還可保證填入的內(nèi)容符合格式規(guī)范。
• 設(shè)置合理默認(rèn)值：默認(rèn)值可能取自統(tǒng)計(jì)數(shù)據(jù)，也可能基于用戶個(gè)性化數(shù)據(jù)。默認(rèn)值不僅可免去輸入過(guò)程，還可以作為建議值給用戶提供指導(dǎo)。
• 訪問(wèn)剪貼板：例如在MacOS Sierra和iOS10以上的蘋(píng)果設(shè)備之間，可以無(wú)縫復(fù)制粘貼文本和圖片。

二、設(shè)計(jì)聰明貼心的表單

在跟客戶經(jīng)理聊天的時(shí)候會(huì)發(fā)現(xiàn)，那些我們自以為簡(jiǎn)單明白的設(shè)計(jì)，對(duì)用戶來(lái)說(shuō)竟然如同天書(shū)。

神馬？我們不是竭盡所能降低了用戶操作成本嗎？為什么能順利完成表單的用戶屈指可數(shù)？

究其原因，我們還是單純的從系統(tǒng)視角「Inside Out」看待問(wèn)題。

如果能切換成用戶視角「Outside In」，在預(yù)判用戶可能會(huì)遇到的問(wèn)題時(shí)就清晰了很多——用戶在填寫(xiě)每個(gè)輸入框都經(jīng)歷了「填寫(xiě)前」、「填寫(xiě)中」、「填寫(xiě)后」這三個(gè)階段。

• 在「填寫(xiě)前」用戶可能會(huì)疑惑：這個(gè)是什么意思？為什么要填這個(gè)？怎么填？
• 在「填寫(xiě)中」用戶需要知道：我填對(duì)了嗎？我完成了嗎？
• 在「填寫(xiě)后」用戶會(huì)想要反饋：我成功了嗎？怎么失敗了？是我自己的問(wèn)題嗎？我該怎么修正錯(cuò)誤？

所以從用戶視角看，用戶需要的是一個(gè)聰明貼心的輸入框，即在「填寫(xiě)前」、「填寫(xiě)中」、「填寫(xiě)后」這三個(gè)階段中即時(shí)給予用戶幫助和回應(yīng)。

1. 填寫(xiě)前

在填寫(xiě)具體的表單項(xiàng)之前，用戶需要理解和清楚要做什么？做這個(gè)的目的是什么？他能獲得什么？該如何做？

常見(jiàn)的方法是利用標(biāo)簽和占位符對(duì)這些問(wèn)題進(jìn)行解釋，但標(biāo)簽和占位符字?jǐn)?shù)有限，必要時(shí)可以借助提示文字輔助說(shuō)明。

△ 菜鳥(niǎo)裹裹首頁(yè)頂部搜索框，在點(diǎn)擊之前，占位符描述操作目的；點(diǎn)擊之后，占位符解釋操作方法

2. 填寫(xiě)中

• 從系統(tǒng)角度看，我們希望用戶按照系統(tǒng)要求的規(guī)則輸入信息，即「系統(tǒng)的實(shí)現(xiàn)模型」。
• 從用戶角度看，用戶可能不知道、不理解規(guī)則，即「用戶的心理模型」。

如果「實(shí)現(xiàn)模型」和「心理模型」兩者出現(xiàn)分歧，用戶操作心流就會(huì)遇到阻塞，甚至出錯(cuò)。

為了掃除障礙，需要設(shè)計(jì)師利用同理心或者調(diào)研的方式來(lái)理解用戶心理模型（B端產(chǎn)品基本很難單純利用同理心），利用設(shè)計(jì)手段，將「實(shí)現(xiàn)模型」包裝成用戶可以接受和理解的「心理模型」。

△ 系統(tǒng)報(bào)錯(cuò)提示

大部分用戶根本無(wú)法理解用戶出錯(cuò)的另一個(gè)原因是：情境中存在干擾因素，例如時(shí)間緊迫或注意力不集中（開(kāi)車時(shí)使用導(dǎo)航軟件），環(huán)境吵鬧，在戶外可能有惡劣天氣干擾。

因此在設(shè)計(jì)時(shí)需要考慮到用戶操作可能處于怎樣的情境之下，用戶會(huì)遇到哪些障礙和問(wèn)題，然后幫助用戶過(guò)濾情境中的各種干擾因素，盡快完成任務(wù)。

這個(gè)階段的設(shè)計(jì)要點(diǎn)，就是要防錯(cuò)容錯(cuò)——比起用戶反復(fù)出錯(cuò)和修改，如果系統(tǒng)能容錯(cuò)并自動(dòng)轉(zhuǎn)化成規(guī)范的格式，是再好不過(guò)了（雖然現(xiàn)實(shí)中要評(píng)估開(kāi)發(fā)成本）。

△ 轉(zhuǎn)賬頁(yè)面的防錯(cuò)設(shè)計(jì)

△ 批量操作的防錯(cuò)設(shè)計(jì)

△ 系統(tǒng)應(yīng)當(dāng)允許用戶輸入多種格式的數(shù)據(jù)，并將其轉(zhuǎn)化為格式化的數(shù)據(jù)

3. 填寫(xiě)后

填寫(xiě)后，要讓用戶知道自己完成的怎么樣：成功了要給予鼓勵(lì)，并引導(dǎo)前往下一個(gè)任務(wù)，如果失敗了，要幫助用戶找到原因和解決方案。

及時(shí)清晰的反饋，可以讓用戶明確當(dāng)前狀況，消除不確定性，縮短在每個(gè)節(jié)點(diǎn)的逗留時(shí)間，快速完成任務(wù)最終達(dá)到目標(biāo)。

△ 驗(yàn)證到用戶輸入的手機(jī)號(hào)碼已注冊(cè)，推測(cè)用戶可能忘記密碼

△ 用戶在完成某任務(wù)后，在等待結(jié)果過(guò)程中，引導(dǎo)用戶處理其他并行任務(wù)

三、邏輯架構(gòu)

網(wǎng)上搜一下關(guān)鍵字“B端”、“表單設(shè)計(jì)”，會(huì)搜到很多相關(guān)設(shè)計(jì)經(jīng)驗(yàn)出來(lái)；不過(guò)大多數(shù)經(jīng)驗(yàn)試圖解決單個(gè)表單的布局和樣式問(wèn)題（比如標(biāo)簽欄和輸入框是上下布局還是左右布局、左對(duì)齊還是右對(duì)齊），而非多個(gè)表單之間的邏輯架構(gòu)和銜接關(guān)系。

然而一個(gè)頁(yè)面不會(huì)無(wú)緣無(wú)故的出現(xiàn)，它承載了特定任務(wù)，特定任務(wù)是用戶達(dá)成目標(biāo)的其中一環(huán)，和其他任務(wù)（頁(yè)面）環(huán)環(huán)相扣。

需求不會(huì)脫離于場(chǎng)景單獨(dú)存在。場(chǎng)景中的需求，需要場(chǎng)景化的解決方案。

舉個(gè)例子：某商家要進(jìn)貨，需要提供訂貨單（表單1），包含商品列表（表單2），收貨信息（表單3），開(kāi)票信息（表單4），付費(fèi)渠道和賬期方案等（表單5）；為了保障多方合法權(quán)益，還需要在驗(yàn)證簽署人意愿后（表單6），在線簽署訂單合同（表單7）；還有賣家發(fā)貨后買(mǎi)家的簽收單等一系列表單（表單8）。

如下圖：

上面的例子可以說(shuō)明，即使某個(gè)表單的數(shù)據(jù)量很大，依舊是單點(diǎn)問(wèn)題。

解決單個(gè)表單的布局和樣式問(wèn)題很重要，但這類問(wèn)題處于相對(duì)較為表層的位置，還得向深處繼續(xù)挖掘——如何處理多個(gè)表單之間的邏輯架構(gòu)和銜接方式。

△ 上圖來(lái)自《The Elements of User Experience》（中文版本《用戶體驗(yàn)要素》）

那么對(duì)于環(huán)環(huán)相扣的復(fù)雜表單，解決方案會(huì)不會(huì)很復(fù)雜呢？

其實(shí)一句話就能說(shuō)清楚：表單之間的關(guān)系從架構(gòu)上看分成兩種——串行結(jié)構(gòu)或者樹(shù)狀結(jié)構(gòu)。（我暫時(shí)還沒(méi)發(fā)現(xiàn)第三種）

是不是有點(diǎn)像電路里的串聯(lián)和并聯(lián)？

遇到復(fù)雜的，就理解成混聯(lián)，也就是兩種情況的互相嵌套，要拆解到最小顆粒度再分析。

知道了這個(gè)，在調(diào)研其他產(chǎn)品的表單設(shè)計(jì)時(shí)，也可以把這兩種架構(gòu)套進(jìn)去學(xué)習(xí)別人如何組織內(nèi)容的。

△ 剛才提到的賣家進(jìn)貨案例

四、視圖載體

了解了架構(gòu)，還需要搭配載體，也就是采用何種視圖——是頁(yè)面？還是彈窗？頁(yè)面可以是單頁(yè)，也可以是多個(gè)分頁(yè)；彈窗可以是模態(tài)的，也可以是非模態(tài)的。

以下是一些常見(jiàn)視圖：

△ 非模態(tài)彈窗的表單和來(lái)源頁(yè)面關(guān)系緊密，但不要太復(fù)雜

△ 常見(jiàn)的模態(tài)彈窗

△ 模態(tài)窗也可以承載稍復(fù)雜的表單

△ 一些UI組件提供了側(cè)滑抽屜的樣式，要防止用戶誤觸導(dǎo)致的數(shù)據(jù)丟失，對(duì)「關(guān)閉」操作進(jìn)行二次確認(rèn)

△ 頁(yè)面是最常見(jiàn)的視圖形式

△ 以表格形式聚合表單，形式高度結(jié)構(gòu)化，整齊清晰

△ 表單內(nèi)輸入框之間可能存在聯(lián)動(dòng)關(guān)系，聯(lián)動(dòng)和層級(jí)關(guān)系需要表現(xiàn)清楚

△ 如果表單頁(yè)面很長(zhǎng)，盡量把內(nèi)容分組，減少用戶心理負(fù)擔(dān)；可以利用折疊面板允許用戶將內(nèi)容折疊，提升在不同模塊間的瀏覽效率

△ 多步驟表單，將大任務(wù)拆解成小任務(wù)，配合成功反饋，可以提升用戶完成每小步的成就感，以及完成目標(biāo)的信心

以上是一些常見(jiàn)視圖，設(shè)計(jì)時(shí)采用何種形式，要綜合考慮以下幾個(gè)方面因素；但這些因素本身沒(méi)有明顯邊界，所以也不存在絕對(duì)正確的選項(xiàng)。

評(píng)估方案時(shí)，還需要把用戶使用場(chǎng)景中的干擾因素考慮進(jìn)去（例如是一口氣完成還是分幾次間斷完成？是獨(dú)立還是協(xié)作的形式？）：

• 內(nèi)容多少（內(nèi)容太多就不適合放入彈窗內(nèi)）；
• 復(fù)雜程度（層級(jí)多少、是否存在聯(lián)動(dòng)關(guān)系等）；
• 邏輯結(jié)構(gòu)（串行更適合分頁(yè)，樹(shù)狀結(jié)構(gòu)適合在一個(gè)頁(yè)面內(nèi)聚合）；
• 設(shè)備限制（包括屏幕大小、設(shè)備使用方向）；
• 和來(lái)源頁(yè)面關(guān)聯(lián)度（彈窗和新開(kāi)頁(yè)面相比，彈窗和來(lái)源頁(yè)面的關(guān)聯(lián)度更強(qiáng)）。

五、兩個(gè)案例分析

結(jié)合上面的內(nèi)容，大家看看這兩個(gè)案例中的表單如何設(shè)計(jì)呢？

1. 某公司的調(diào)查報(bào)告

公司信息分成多個(gè)維度，例如：擔(dān)保信息、資產(chǎn)信息等。

• 擔(dān)保信息：包含多個(gè)擔(dān)保人或擔(dān)保企業(yè)，信息分為基本信息和信用狀況。
• 資產(chǎn)信息：包含房產(chǎn)、車輛。

涉及到自然人的信息，可以歸屬在不同類目下。

2. 評(píng)分卡配置

評(píng)分卡將多個(gè)模塊分?jǐn)?shù)累加。

模塊由一個(gè)或多個(gè)評(píng)分項(xiàng)組成。

評(píng)分項(xiàng)由一組評(píng)分規(guī)則，規(guī)則需要設(shè)定分值。

六、談?wù)勎业脑O(shè)計(jì)思路

1. 某公司的調(diào)查報(bào)告

調(diào)查報(bào)告的信息層級(jí)較深，最底層模塊的字段數(shù)量也不少；為了快速縱覽全局，我在表單旁放置了導(dǎo)航欄。

導(dǎo)航欄有三個(gè)層級(jí)，可以直穿最底層，另外還添加了兩個(gè)細(xì)節(jié)——完成百分比和類目下的添加按鈕（這兩個(gè)細(xì)節(jié)的目的都是為了提升用戶的控制感）。

因?yàn)橥粋€(gè)自然人的信息，可以歸屬在不同類目下（一個(gè)自然人擁有多家企業(yè)，并在各企業(yè)中擔(dān)任多個(gè)重要職責(zé)的情況很常見(jiàn)）。

為了數(shù)據(jù)庫(kù)的統(tǒng)一和規(guī)范，減少數(shù)據(jù)多處重復(fù)錄入而造成對(duì)數(shù)據(jù)庫(kù)的污染，我把自然人的基礎(chǔ)信息由「編輯」轉(zhuǎn)換為「調(diào)取」，即「輸入」變成「選擇」。

此人的基礎(chǔ)信息如果在數(shù)據(jù)庫(kù)中不存在，則需要在模態(tài)窗內(nèi)添加；這樣不管公司信息維度如何劃分，各類目下的自然人信息都會(huì)和基礎(chǔ)信息建立映射關(guān)系；在建立用戶畫(huà)像時(shí)，此關(guān)聯(lián)數(shù)據(jù)還可以發(fā)揮重要價(jià)值。

△ 導(dǎo)航欄中添加了「完成百分比」和「添加按鈕」，目的都是為了提升用戶的控制感

△ 系統(tǒng)內(nèi)涉及到自然人的基礎(chǔ)信息，統(tǒng)一由「編輯」轉(zhuǎn)換為「調(diào)取」

△ 自然人基礎(chǔ)信息如果不存在，則需要在模態(tài)窗內(nèi)添加

2. 評(píng)分卡配置

調(diào)查報(bào)告內(nèi)的字段類型豐富多樣——信息維度不同，字段類型很難重合（例如房產(chǎn)價(jià)值取決于面積和地理位置，車輛價(jià)值則跟品牌和車型密切相關(guān)），然而評(píng)分卡卻呈現(xiàn)高度一致的規(guī)律性——不管評(píng)分項(xiàng)歸屬于哪個(gè)模塊，都由一系列選項(xiàng)（條件）和對(duì)應(yīng)的分值（數(shù)字）組成。

還一個(gè)較大的差異點(diǎn)是，調(diào)查報(bào)告里面有相當(dāng)多內(nèi)容是非必填的（例如不一定有房產(chǎn)）。

但出現(xiàn)在評(píng)分卡中，如果沒(méi)有房產(chǎn)，在房產(chǎn)一欄也需要選擇「無(wú)房產(chǎn)」，得到0分或者其他分?jǐn)?shù)。

所以調(diào)查報(bào)告相對(duì)“開(kāi)放”，評(píng)分卡相對(duì)“封閉”；另外因?yàn)橐ＷC各模塊下的評(píng)分項(xiàng)總和剛好100分，填寫(xiě)過(guò)程中對(duì)整體進(jìn)行預(yù)覽的頻率更高。

△ 導(dǎo)航欄對(duì)每個(gè)模塊的總分進(jìn)行了計(jì)算，并提供預(yù)覽按鈕

△ 評(píng)分項(xiàng)內(nèi)的選項(xiàng)和來(lái)源頁(yè)面關(guān)聯(lián)非常緊密，所以在模態(tài)窗內(nèi)添加和編輯

△ 評(píng)分卡像試卷，內(nèi)容很多，更適合在頁(yè)面而非彈窗內(nèi)呈現(xiàn)

提醒：上面兩個(gè)設(shè)計(jì)不是標(biāo)準(zhǔn)答案，僅是拋磚引玉，大家可以思考一下有沒(méi)有更好的解決方案，歡迎在留言區(qū)討論~

本文由 @杜小杜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自?Unsplash，基于 CC0 協(xié)議