B端表單設(shè)計(jì)沒(méi)有高級(jí)感？那是你沒(méi)用對(duì)發(fā)力點(diǎn)！

前言

大家是不是時(shí)常困惑于，B 端的表單設(shè)計(jì)體現(xiàn)不出高級(jí)感？設(shè)計(jì)發(fā)揮的空間特別的少？

那是你沒(méi)用對(duì)發(fā)力點(diǎn)~

B 端：設(shè)計(jì)表單頁(yè)面時(shí)，一方面須尊重用戶的習(xí)慣，不要在不必要的地方體現(xiàn)差別?？偨Y(jié)了 4 個(gè)思考問(wèn)題：

案例：以創(chuàng)建公眾號(hào)消息自動(dòng)推送為例

• 思考用戶用產(chǎn)品做什么事？用戶會(huì)用該產(chǎn)品創(chuàng)建公眾號(hào)消息推送，根據(jù)用戶觸發(fā)事件，推送相關(guān)信息
• 用戶用這類產(chǎn)品最關(guān)心的是什么？核對(duì)觸發(fā)事件，檢驗(yàn)消息發(fā)送狀態(tài)
• 用戶有哪些思維定勢(shì)？這里就不舉例了（條件不變時(shí)，能迅速地感知現(xiàn)實(shí)環(huán)境中的事物并作出正確的反應(yīng)）
• 用戶用過(guò)什么類似的產(chǎn)品等？……

另一方面要考慮信息層次。

搞定了基本要素后，我們開始考慮如何表現(xiàn)信息層次。

• 封裝度高、信息密度低
• 如何判斷采用哪種布局方式

什么是封裝度高且信息密度低？

在了解什么封裝度和信息密度前，我先跟大家討論一下。什么是表單之間的關(guān)系。

我所認(rèn)為表單之間的關(guān)系分為 3 種：

1. 常規(guī)結(jié)構(gòu)

優(yōu)點(diǎn)：

平鋪所有需要填寫的信息，適合內(nèi)容項(xiàng)較少、內(nèi)容項(xiàng)無(wú)法按照相關(guān)性分組的表單

缺點(diǎn)：

• 表單頁(yè)中需要填寫內(nèi)容眾多，容易造成信息密度過(guò)高
• 操作需要的視覺(jué)元素越多，用戶的認(rèn)知負(fù)擔(dān)越重

使用場(chǎng)景：

當(dāng)需要完成一個(gè)簡(jiǎn)單快速的任務(wù)，輸入少量信息即可完成創(chuàng)建

2. 樹狀結(jié)構(gòu)

優(yōu)點(diǎn)：

用于復(fù)雜任務(wù)時(shí)，拆解任務(wù)進(jìn)行編排，適當(dāng)?shù)娜蝿?wù)分割，可以降低用戶出錯(cuò)率

缺點(diǎn)：

• 無(wú)法在表單頁(yè)中根據(jù)內(nèi)容量進(jìn)行合理地布局
• 視覺(jué)噪點(diǎn)過(guò)多，無(wú)法兼顧頁(yè)面展示和用戶填寫效率

使用場(chǎng)景：

適用于大型、復(fù)雜任務(wù)

3. 顯/隱結(jié)構(gòu)

優(yōu)點(diǎn)：

減少不必要（非重要）的輸入項(xiàng)，能適當(dāng)?shù)臏p輕用戶認(rèn)知負(fù)擔(dān)

缺點(diǎn)：

• 雖然減輕用戶輸入負(fù)擔(dān)，但無(wú)法高效的判定任務(wù)分割的容錯(cuò)率
• 用戶確認(rèn)信息有一定難度，無(wú)法兼顧頁(yè)面展示

使用場(chǎng)景：

特殊場(chǎng)景下使用

那么用一條完整的鏈路來(lái)表達(dá)就是：

了解完表單的結(jié)構(gòu)關(guān)系知曉利弊后，那么應(yīng)用在我們實(shí)際的場(chǎng)景中表達(dá)就是如圖所示：

封裝密度高且信息密度低

△ 圖中案例，僅做示例說(shuō)明

將一個(gè)復(fù)雜的任務(wù)表單，進(jìn)行封裝后，看起來(lái)任務(wù)量是不是也變少了？操作起來(lái)也不是很復(fù)雜了？

小結(jié)：

分析了解表單的結(jié)構(gòu)關(guān)系，判斷表單，尋找共性的內(nèi)容，將他們封裝為一個(gè)卡片，也可以封裝成一個(gè)組。主要的目的就是減少用戶認(rèn)知負(fù)擔(dān)，提升操作/使用效率。

如何判斷采用哪種布局方式？

關(guān)于使用何種布局方式的判斷，應(yīng)從信息的復(fù)雜度和關(guān)聯(lián)性兩個(gè)維度去梳理。根據(jù)信息的復(fù)雜度和相關(guān)性模型，選用相應(yīng)的信息呈現(xiàn)方式，選用合理的布局方案來(lái)承載詳情頁(yè)的內(nèi)容。

1. 信息的復(fù)雜度和相關(guān)性模型

△ 來(lái)源：Ant Design；來(lái)源鏈接： https://ant.design/docs/spec/research-form-cn

2. 區(qū)隔方式

根據(jù)各個(gè)信息之間的相關(guān)性，判斷各個(gè)信息模塊之間的親密度，通常情況下，相關(guān)性強(qiáng)的內(nèi)容盡量靠近，相關(guān)性弱的的內(nèi)容盡量拉開層次。

• 不通欄分割線：將相關(guān)內(nèi)容分開；
• 通欄分割線：將內(nèi)容分成多個(gè)部分；
• 卡片：放置一個(gè)主題；
• 頁(yè)簽：對(duì)象描述信息最頂層組織方式，如按版本組織、按意圖組織、按階段組織；

△ 來(lái)源：Ant Design；來(lái)源鏈接： https://ant.design/docs/spec/detail-page-cn

3. 注意事項(xiàng)

• 表單內(nèi)容數(shù)量 <7 項(xiàng)，不建議分組；
• 表單內(nèi)容數(shù)量 7~ 15 個(gè)建議分組；
• 表單內(nèi)容數(shù)量 >15 個(gè)建議使用頁(yè)簽分組或采用分組標(biāo)題欄展開收起樣式。

歡迎關(guān)注作者微信公眾號(hào)：「交互思維鋪?zhàn)印?/p>