一張圖教你如何設計表單

表單設計老生常談，但又是使用頻繁且經常遇到各種問題的一種組件，尤其在 B 端業務中，涉及到大量的雲資源開通、配置升級等表單填寫與校驗，因此設計師經常要面對複雜程度不等、信息多樣的表單場景，那設計師該遵循怎樣的原則、如何組織內容、在佈局與頁面空間問題上如何取捨，以及如何確保不同屏幕尺寸下都能保證表單信息的功能清晰度與設計美觀度？本文就結合這些問題做重點介紹與比對。

構成

表單通過多種輸入組件組合完成信息編輯，用來確保用戶按照系統要求錄入信息或進行應用設置。表單的構成主要有以下元素，根據操作的內容項和提示重要程度進行組合使用：

佈局

表單的佈局形式一共有六種：頂對齊、左對齊、右對齊、內聯標籤、圖標標籤、浮動標籤；在 B 端混合雲業務中經常使用到的有其中 3 種：頂對齊、左對齊、右對齊。

相信在很多設計研究中，大家都瞭解過關於頂對齊、右對齊、左對齊的體驗實驗數據，其中「左對齊」瀏覽速度慢，眼動耗時最長，那耗時長就一定體驗不好嗎？是不是跟我們所倡導的高效原則衝突？在複雜表單中哪種佈局方式更優？下面我們就結合三種表單佈局所適用的場景和優缺點進行簡要對比：

（圖片源自網絡）

1 頂對齊

適用場景：不同長短標籤且 60 & 以上標籤字數很長，有國際化需求。

優點：瀏覽和處理效率較高，標籤長度彈性大，多欄下不影響信息的清晰度。

缺點：佔縱向空間。

2 左對齊

適用場景：50% 左右標籤字數 8 字以下；適用於平臺中即有複雜數據場景也有小容器的簡單數據場景的統一體驗。

優點：文字按閱讀視線對齊，符合閱讀習慣，節約縱向空間。

缺點：填寫速度慢，標籤長度和輸入框長短彈性相對較小。

“這裏要注意的是，B 端業務設計中，【緩慢完成率】並不總是一件壞事如果表單數據複雜且安全性高，可以故意減緩用戶的填寫速度，來確保填寫的準確性。”

3 右對齊

適用場景：僅適用於【標籤簡短】且內容較少的情況，如數據過濾區。

優點：標籤和輸入框之間距離固定，有明確的關聯，節約縱向空間。

缺點：左邊緣參差不齊，整體可讀性低，標籤長度和輸入框彈性小。

佈局的響應式

針對 B 端控制檯類表單佈局的類型，爲了保證在不同屏幕大小下用戶操作的體驗，我們對錶單響應式規則同樣進行規範設定，以混合雲設計中 1200 的視窗寬度爲例，減去導航 248px，再減去頁面兩側邊距 24px，則段點寬度爲 904px。

影響要素

我們進一步來看影響表單佈局與構成元素選擇的幾個要素：

**1、內容數量：**內容的多少會影響設計所選擇的容器、內容佈局；如果內容較多，除了佈局還要考慮採用分組、分步等形式去有序組織信息。

**2、複雜程度：**表單邏輯也是伴隨內容的多少而同比增加的，內容少則關係相對簡單，內容多則關係複雜。

**3、邏輯結構：**常見的有串行結構（各表單內容之間是線性關係）、並列結構（有多組表單，各組是並列關係）、更復雜的甚至有串行與並行嵌套結合的結構。

**4、所處容器：**表單內容所處的容器有頁面、抽屜、彈窗、氣泡，容器所能承載內容的多少也在逐步減少。在設計中我們根據打斷感、與上一級關聯程度、內容複雜度進行容器選擇。

**5、來源頁面關聯：**如果與來源頁面關聯強，則建議使用彈窗、抽屜等容器，可以停留在之前操作頁面上，缺點則是用戶操作的沉浸感偏弱；如果與來源頁面關聯弱且信息量較大，則建議使用頁面，同時在頁面中填寫表單的沉浸感也會更強。

設計指南

爲了更直觀的讓設計師明確面對不同複雜程度的表單如何設計，我們將影響要素、設計思路、設計示例、適用場景進行梳理，並以一張設計指南的形式歸納出來，方便設計師根據場景進行分析。

基於控制檯類 B 端複雜表單設計我們總結以下結論，有類似場景的業務設計可以參考：

1、推薦複雜業務中使用左對齊的通用方式，信息流清晰且相對比上下佈局節省空間。

2、單列布局用戶的完成效率更高，開發效率更高，對複雜業務來說更適合擴展。

3、當標籤字數的長度顯示影響到體驗與設計美觀時或局部功能標籤下同時存在子標籤時，推薦使用上下佈局。

4、多列適合於較單一的場景，字段之間有明顯的級聯關係，如數據過濾，除此之外，不建議使用多列。

需要注意的是：多列下標籤可採用右對齊，確保標籤與輸入框內容的緊密性。

5、內容很多時，除了有序組織，可以配合其他組件使用，提升用戶完成效率。

表單中的引導設計

最後，我們來簡單說下表單輸入中，可以通過哪些方式引導用戶正確輸入。荀子說 **“防爲上、救次之、戒爲下”，**古代思想中未雨綢繆、防微杜漸的【預防思想】同樣適用於雲計算時代下的體驗設計，那就是先預防、後糾錯，尤其是像表單區塊，涉及到大量的信息輸入、關係到雲上操作的安全。

表單輸入的過程可分爲：輸入前、輸入中、輸入後，下面就結合這三個結果分別介紹。

【輸入前】用戶可能會疑惑：這個表單項是什麼意思？怎麼填？格式如何？

此時設計主要是輔助用戶更好的進行操作，在輸入之前將提示信息明確的顯示出來，預先提示，減少出錯。但需要注意的是，不要堆疊多個提示信息，同時我們可以用輸入框的長度、格式暗示內容的長短及類型，如 IP 格式的輸入框，手機號、日期等長度較固定的輸入框。

【輸入中】用戶需要知道：填對了嗎？完成了嗎？

此時設計主要是對造成當前狀態的原因進行說明，爲預防錯誤而在表單提交之前提早干預，常見的組件功能和設計手段如下示例。在輸入中，我們要切記，儘量不直接打斷用戶，不中斷用戶的輸入操作，而是對需要注意信息，及時標記出來，確保過程中一直溝通。

【輸入後】用戶想要明確：成功了嗎？如果失敗是什麼原因？失敗後還能修正嗎？

此時設計關注在對輸入後的結果進行告知，必要時可限制下一步行動。如有異常表單項，提交按鈕不可點擊等，一些重要的選擇、刪除操作，可以通過局部二次確認的方式對用戶操作進行反饋。

以上，就是 B 端業務中表單設計的思考和引導方式，總結幾點設計原則：

1、預先提示，減少出錯；

2、不要堆疊多個提示；

3、通過長度、格式暗示輸入內容；

4、如果提示信息能夠更有效的幫助用戶輸入，最好直接展示出來；

5、儘量不中斷用戶的任務，在輸入過程中不要宣佈他做錯了；

6、對需要即時呈現和立即注意信息，過程中實時反饋，確保一直溝通；

7、最好提供默認值或默認填入固定格式，降低用戶重複性工作。

最後，時刻謹記：防爲上、救次之、戒爲下，能夠有效提升用戶體驗與操作效率。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/sl1ZTOiMx2XxB-RBxlyyAw

猜你喜歡