表單系列文章：

B端表單系列開(kāi)啟｜從表單的基本認(rèn)識(shí)開(kāi)始剖析

B端表單｜表單的主要分類和相關(guān)控件認(rèn)識(shí)

B端表單｜實(shí)戰(zhàn)篇: 表單的具體設(shè)計(jì)方法解析

前面幾篇分享了表單頁(yè)面和控件的設(shè)計(jì)思路，這一次，就使用淘寶的千牛發(fā)布商品頁(yè)面來(lái)做改版對(duì)象，把前面講解過(guò)的內(nèi)容再?gòu)?fù)習(xí)一遍。

下面改版步驟包含：

1. 問(wèn)題分析
   

2. 字段整理

3. 規(guī)范制定

4. 頁(yè)面設(shè)計(jì)
   

提前聲明：改版演示會(huì)精簡(jiǎn)一部分業(yè)務(wù)背景和需求，避免改版過(guò)于冗長(zhǎng)。主要選擇的改版對(duì)象是數(shù)碼類產(chǎn)品的發(fā)布頁(yè)面，如果和自己創(chuàng)建的頁(yè)面內(nèi)容不一致是正常的，關(guān)注核心要點(diǎn)即可。

當(dāng)前頁(yè)面的預(yù)覽：

問(wèn)題根據(jù)從上到下的順序進(jìn)行羅列：

問(wèn)題1：頂部導(dǎo)航的使用不合理，和左側(cè)的導(dǎo)航功能上完全重復(fù)，沒(méi)有存在的價(jià)值。

問(wèn)題2：模塊的設(shè)計(jì)不統(tǒng)一，圓角應(yīng)用不一致。

問(wèn)題3：存儲(chǔ)模版的按鈕位置不合理，影響前后信息的預(yù)覽和操作。

問(wèn)題4：單個(gè)數(shù)據(jù)項(xiàng)的信息展示混亂，說(shuō)明和提示位置不統(tǒng)一簡(jiǎn)單分析原來(lái)的邏輯，設(shè)計(jì)過(guò)程希望表單控件能和標(biāo)題對(duì)齊，這樣描述內(nèi)容多似乎不影響輸入。但是有些表單項(xiàng)的說(shuō)明要求又高，必須先進(jìn)行提示再讓你輸入，同時(shí)部分長(zhǎng)模塊提示放底下又看不見(jiàn)，最后導(dǎo)致每個(gè)數(shù)據(jù)項(xiàng)覺(jué)得怎么放合理怎么放。

問(wèn)題5：三級(jí)標(biāo)題和模塊的展示不合理

問(wèn)題6：各類控件樣式不統(tǒng)一等。

基于以上的缺點(diǎn)分析，那么接下來(lái)的改動(dòng)就遵循以下幾個(gè)原則：

秩序：內(nèi)容層級(jí)劃分更合理，前后級(jí)關(guān)系準(zhǔn)確

統(tǒng)一：視覺(jué)、交互要素一致，綜合體驗(yàn)統(tǒng)一

清晰：信息、字段展示清晰，闡述內(nèi)容明確

然后，進(jìn)行信息字段的整理，通過(guò)文檔工具或者思維導(dǎo)圖，羅列對(duì)應(yīng)的結(jié)構(gòu)和字段、輸入類型。篇幅關(guān)系，我就只選擇性羅列省略另一部分細(xì)節(jié)，理解過(guò)程即可。

結(jié)構(gòu)整理：

表單部分字段信息主要包含四級(jí)，再下級(jí)的字段內(nèi)容在說(shuō)明中描述，下面是整理：

字段信息的整理，是為了讓我們充分理解內(nèi)容的層級(jí)結(jié)構(gòu)，方便我們做進(jìn)一步的設(shè)計(jì)。

如果對(duì)信息設(shè)計(jì)沒(méi)有概念的同學(xué)可以看之前這篇分享：B端改版｜通過(guò)一個(gè)表單和詳情頁(yè)入門B端信息設(shè)計(jì)

設(shè)計(jì)的第一步是先完成頁(yè)面框架的布局，這次我采用表單在左目錄在由的常規(guī)布局形式，并對(duì)通知模塊做一定的優(yōu)化。

然后制定輸入框的尺寸作為錨點(diǎn)，按目前的內(nèi)容，只需要制定常規(guī)和小兩個(gè)高度，然后常規(guī)高度下，設(shè)置5個(gè)長(zhǎng)度。同時(shí)拓展兩個(gè)同高度的按鈕。

然后對(duì)單個(gè)數(shù)據(jù)項(xiàng)（三級(jí)字段）的信息布局進(jìn)行標(biāo)準(zhǔn)化，確定標(biāo)題、控件、注釋、提示、二級(jí)模塊的布局，然后確認(rèn)數(shù)據(jù)項(xiàng)的視圖內(nèi)間距。

包含文本框輪廓控件的布局：

包含注釋和提示的布局，注釋統(tǒng)一在頂部（應(yīng)對(duì)超長(zhǎng)二級(jí)內(nèi)容問(wèn)題），提示在最右側(cè)：

多選和單選類布局，針對(duì)單一選項(xiàng)的注釋跟進(jìn)在注釋后方：

包含下級(jí)區(qū)域的布局模式，如果在正式項(xiàng)目，這個(gè)區(qū)域內(nèi)的布局還會(huì)再做規(guī)范，這里節(jié)省時(shí)間略過(guò)：

這個(gè)步驟的主要工作，就是標(biāo)準(zhǔn)化常見(jiàn)數(shù)據(jù)項(xiàng)的布局和細(xì)節(jié)，除了直接延用外，也讓后續(xù)的拓展中可以有據(jù)可循，保證整體設(shè)計(jì)觀感的統(tǒng)一。

完成所有步驟以后，就可以展開(kāi)具體的設(shè)計(jì)了，為了節(jié)省時(shí)間和觀看體驗(yàn)，我會(huì)減少掉部分重復(fù)的字段內(nèi)容和視覺(jué)要素，保證看懂設(shè)計(jì)的思路即可，下面簡(jiǎn)單介紹其中兩個(gè)模塊的設(shè)計(jì)細(xì)節(jié)。

模塊1：基礎(chǔ)信息設(shè)計(jì)在這個(gè)模塊中，除了應(yīng)用基礎(chǔ)的表單規(guī)范外，重點(diǎn)調(diào)整了類目屬性的布局形式。這些屬性參數(shù)在前端頁(yè)面的樣式呈現(xiàn)效果如下：

所需填寫條目多，所以希望它的優(yōu)化是能夠更快速進(jìn)行填寫的，原有設(shè)計(jì)中應(yīng)用的不同控件樣式也都可以使用輸入框形式的控件進(jìn)行轉(zhuǎn)換。并且這些數(shù)據(jù)項(xiàng)沒(méi)有內(nèi)含順序邏輯，所以現(xiàn)有設(shè)計(jì)暗示的先上下再左右的設(shè)計(jì)和實(shí)際順序嚴(yán)重沖突。

所以替換成了三列的設(shè)計(jì)，并使用了上下的布局，防止標(biāo)題長(zhǎng)度落差嚴(yán)重干擾判斷，優(yōu)化對(duì)齊線，且直接采取從左到右的 Z 字型設(shè)計(jì)模式。

模塊2：圖文描述設(shè)計(jì)原設(shè)計(jì)中對(duì)于上傳內(nèi)容是什么的標(biāo)識(shí)并不清晰，而且因?yàn)樗枭蟼鲀?nèi)容數(shù)量較多，排列很混亂，導(dǎo)致觀感極差。而且基礎(chǔ)素材和導(dǎo)購(gòu)素材標(biāo)題的設(shè)計(jì)和輸入框用色一樣，非常干擾視線。

重點(diǎn)優(yōu)化了圖片和視頻的布局方式，每個(gè)需要上傳的圖片、視頻需要有明確的標(biāo)題來(lái)說(shuō)明上傳的內(nèi)容是什么。

其它還優(yōu)化了若干的細(xì)節(jié)，可以直接觀看下面最終的版本（由于微信壓縮圖片導(dǎo)致模糊，可以超人的電話亭公眾號(hào)后臺(tái)回復(fù)“千牛表單”獲取原圖）：

結(jié)尾

作為表單設(shè)計(jì)的總結(jié)，主要是說(shuō)明表單依據(jù)前面分享中提到的方法，有效的輸出表單頁(yè)面，你們可以通過(guò)對(duì)比設(shè)計(jì)前后的兩個(gè)版本來(lái)思考這些知識(shí)點(diǎn)的作用。

因?yàn)闀r(shí)間的關(guān)系，當(dāng)然還有一些深層次的操作解決方案沒(méi)有完全表現(xiàn)出來(lái)，有疑問(wèn)可以留言進(jìn)行討論。