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