網(wǎng)上搜一下關(guān)鍵字「B端」、「表單設(shè)計(jì)」，會(huì)搜到很多相關(guān)設(shè)計(jì)經(jīng)驗(yàn)出來。不過大多數(shù)經(jīng)驗(yàn)試圖解決單個(gè)表單的布局和樣式問題（比如標(biāo)簽欄和輸入框是上下布局還是左右布局、左對(duì)齊還是右對(duì)齊），而非多個(gè)表單之間的邏輯架構(gòu)和銜接關(guān)系。然而一個(gè)頁面不會(huì)無緣無故的出現(xiàn)，它承載了特定任務(wù)，特定任務(wù)是用戶達(dá)成目標(biāo)的其中一環(huán)，和其他任務(wù)（頁面）環(huán)環(huán)相扣。需求不會(huì)脫離于場景單獨(dú)存在。場景中的需求，需要場景化的解決方案。
舉個(gè)例子，某商家要進(jìn)貨，需要提供訂貨單（表單1），包含商品列表（表單2），收貨信息（表單3），開票信息（表單4），付費(fèi)渠道和賬期方案等（表單5）。為了保障多方合法權(quán)益，還需要在驗(yàn)證簽署人意愿后（表單6），在線簽署訂單合同（表單7）。還有賣家發(fā)貨后買家的簽收單等一系列表單（表單8）。如下圖：
上面的例子可以說明，即使某個(gè)表單的數(shù)據(jù)量很大，依舊是單點(diǎn)問題。解決單個(gè)表單的布局和樣式問題很重要，但這類問題處于相對(duì)較為表層的位置，還得向深處繼續(xù)挖掘——如何處理多個(gè)表單之間的邏輯架構(gòu)和銜接方式。
△右圖來自《The Elements of User Experience》（中文版本《用戶體驗(yàn)要素》）
那么對(duì)于環(huán)環(huán)相扣的復(fù)雜表單，解決方案會(huì)不會(huì)很復(fù)雜呢？其實(shí)一句話就能說清楚：
表單之間的關(guān)系從架構(gòu)上看分成兩種——串行結(jié)構(gòu)或者樹狀結(jié)構(gòu)。（我暫時(shí)還沒發(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)，還需要搭配載體，也就是采用何種視圖——是頁面？還是彈窗？頁面可以是單頁，也可以是多個(gè)分頁；彈窗可以是模態(tài)的，也可以是非模態(tài)的。以下是一些常見視圖：
△非模態(tài)彈窗的表單和來源頁面關(guān)系緊密，但不要太復(fù)雜。
△常見的模態(tài)彈窗。
△模態(tài)窗也可以承載稍復(fù)雜的表單。
△一些UI組件提供了側(cè)滑抽屜的樣式，要防止用戶誤觸導(dǎo)致的數(shù)據(jù)丟失，對(duì)「關(guān)閉」操作進(jìn)行二次確認(rèn)。
△頁面是最常見的視圖形式。
△以表格形式聚合表單，形式高度結(jié)構(gòu)化，整齊清晰。
△表單內(nèi)輸入框之間可能存在聯(lián)動(dòng)關(guān)系，聯(lián)動(dòng)和層級(jí)關(guān)系需要表現(xiàn)清楚。
△如果表單頁面很長，盡量把內(nèi)容分組，減少用戶心理負(fù)擔(dān)？梢岳谜郫B面板允許用戶將內(nèi)容折疊，提升在不同模塊間的瀏覽效率。
△多步驟表單，將大任務(wù)拆解成小任務(wù)，配合成功反饋，可以提升用戶完成每小步的成就感，以及完成目標(biāo)的信心。
以上是一些常見視圖，設(shè)計(jì)時(shí)采用何種形式，要綜合考慮以下幾個(gè)方面因素：
- 內(nèi)容多少（內(nèi)容太多就不適合放入彈窗內(nèi)）
- 復(fù)雜程度（層級(jí)多少、是否存在聯(lián)動(dòng)關(guān)系等）
- 邏輯結(jié)構(gòu)（串行更適合分頁，樹狀結(jié)構(gòu)適合在一個(gè)頁面內(nèi)聚合）
- 設(shè)備限制（包括屏幕大小、設(shè)備使用方向）
- 和來源頁面關(guān)聯(lián)度（彈窗和新開頁面相比，彈窗和來源頁面的關(guān)聯(lián)度更強(qiáng)）
但這些因素本身沒有明顯邊界，所以也不存在絕對(duì)正確的選項(xiàng)。評(píng)估方案時(shí)，還需要把用戶使用場景中的干擾因素考慮進(jìn)去（例如是一口氣完成還是分幾次間斷完成？是獨(dú)立還是協(xié)作的形式？）。
結(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è)定分值。
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é)的情況很常見）。為了數(shù)據(jù)庫的統(tǒng)一和規(guī)范，減少數(shù)據(jù)多處重復(fù)錄入而造成對(duì)數(shù)據(jù)庫的污染，我把自然人的基礎(chǔ)信息由「編輯」轉(zhuǎn)換為「調(diào)取」，即「輸入」變成「選擇」。此人的基礎(chǔ)信息如果在數(shù)據(jù)庫中不存在，則需要在模態(tài)窗內(nèi)添加。這樣不管公司信息維度如何劃分，各類目下的自然人信息都會(huì)和基礎(chǔ)信息建立映射關(guān)系。在建立用戶畫像時(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)分卡中，如果沒有房產(chǎn)，在房產(chǎn)一欄也需要選擇「無房產(chǎn)」，得到0分或者其他分?jǐn)?shù)。所以調(diào)查報(bào)告相對(duì)「開放」，評(píng)分卡相對(duì)「封閉」。
另外因?yàn)橐ＷC各模塊下的評(píng)分項(xiàng)總和剛好100分，填寫過程中對(duì)整體進(jìn)行預(yù)覽的頻率更高。
△ 導(dǎo)航欄對(duì)每個(gè)模塊的總分進(jìn)行了計(jì)算，并提供預(yù)覽按鈕。
△ 評(píng)分項(xiàng)內(nèi)的選項(xiàng)和來源頁面關(guān)聯(lián)非常緊密，所以在模態(tài)窗內(nèi)添加和編輯。
△ 評(píng)分卡像試卷，內(nèi)容很多，更適合在頁面而非彈窗內(nèi)呈現(xiàn)。
提醒：上面兩個(gè)設(shè)計(jì)不是標(biāo)準(zhǔn)答案，僅是拋磚引玉，希望大家學(xué)以致用
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。