上篇在優(yōu)設(shè)網(wǎng)發(fā)表后，看到有讀者評(píng)論說(shuō)沒(méi)看到B端案例，也沒(méi)看到如何解決復(fù)雜性。害！都怪我想說(shuō)的內(nèi)容有千言萬(wàn)語(yǔ)，還沒(méi)寫(xiě)到B端案例和解決復(fù)雜性呢，就已經(jīng)幾千字了…好了，關(guān)于這倆問(wèn)題，今天的下篇全給說(shuō)明白！

上篇回顧：

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

我們今天的重點(diǎn)就是從整體上思考如何組織和呈現(xiàn)復(fù)雜程度各異的表單。具體方法的關(guān)鍵字就八個(gè)字：邏輯架構(gòu)、視圖載體。最后是兩個(gè)案例分析。

邏輯架構(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）。還有賣(mài)家發(fā)貨后買(mǎi)家的簽收單等一系列表單（表單8）。如下圖：

上面的例子可以說(shuō)明，即使某個(gè)表單的數(shù)據(jù)量很大，依舊是單點(diǎn)問(wèn)題。解決單個(gè)表單的布局和樣式問(wèn)題很重要，但這類(lèi)問(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)容的。

△剛才提到的賣(mà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è)方面因素：

• 內(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)）

但這些因素本身沒(méi)有明顯邊界，所以也不存在絕對(duì)正確的選項(xiàng)。評(píng)估方案時(shí)，還需要把用戶使用場(chǎng)景中的干擾因素考慮進(jìn)去（例如是一口氣完成還是分幾次間斷完成？是獨(dú)立還是協(xié)作的形式？）。

兩個(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)、車(chē)輛。

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

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é)——完成百分比和類(lèi)目下的添加按鈕。這兩個(gè)細(xì)節(jié)的目的都是為了提升用戶的控制感。

因?yàn)橥粋€(gè)自然人的信息，可以歸屬在不同類(lèi)目下（一個(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)添加。這樣不管公司信息維度如何劃分，各類(lè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)的字段類(lèi)型豐富多樣——信息維度不同，字段類(lèi)型很難重合（例如房產(chǎn)價(jià)值取決于面積和地理位置，車(chē)輛價(jià)值則跟品牌和車(chē)型密切相關(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ū)討論~

歡迎關(guān)注作者的微信公眾號(hào)：「能呆書(shū)房一整天」