編輯導(dǎo)語：表單是我們比較常見的一個信息錄入工具，糟糕的表單設(shè)計會帶來令用戶抓狂的交互體驗。本文作者結(jié)合案例對表單的構(gòu)成及注意事項進(jìn)行了詳細(xì)的說明，相信對表單設(shè)計不熟悉的同學(xué)看完后肯定會有不少的收獲~

說到表單其實在生活中可以接觸到各種各樣的表單，主要目的就是讓用戶填寫來【收集用戶信息】

如：

初看這些表單，你可能覺得很簡單，就是一些標(biāo)簽、基礎(chǔ)的小組件，但是在實際業(yè)務(wù)中，想要將這些小組件組合拼裝成合適的表單卻需要推敲非常多的細(xì)節(jié)，常常會讓設(shè)計師陷入無限的糾結(jié)中，比如：

• 文字標(biāo)簽是左對齊還是右對齊？
• 確定按鈕是放左邊還是右邊？
• 控件顆粒長度是整齊劃一還是與輸入預(yù)期一樣錯落有致？
• 反饋內(nèi)容怎么顯示
• ……

所以針對這些問題，我從【框架】>【細(xì)節(jié)】的邏輯與大家一起探討「如何設(shè)計一份體驗好的表單」。

01 表單拆分

在UX Collective中有個作者名為“Taras Bakusevych” 進(jìn)行了詳細(xì)的闡述，對表單的組成部分進(jìn)行了詳細(xì)的拆解與說明 ↓ ↓ ↓

（1）標(biāo)簽：標(biāo)簽文本主要是解釋輸入項的含義，一般不宜太長，需要簡明扼要，快速讓用戶理解；還有一部分是告知用戶哪些是必填項。

（2）占位提示：直接展示在輸入項中，采用弱提示文本對所需信息描述、示意，當(dāng)用戶輸入信息時即消失。

（3）校驗：對輸入項進(jìn)行驗證，并給出反饋提示，如：用戶未填寫，格式錯誤、內(nèi)容錯誤等

常見的校驗類型

（4）基礎(chǔ)組件：可交互輸入的區(qū)域，是構(gòu)成表單的核心內(nèi)容，主要有：輸入框、單（復(fù)）選框、上傳、時間選擇器、開關(guān)……

（5）提示：描述該輸入項需要的輸入類型，如：上傳的文件類型

（6）按鈕：用戶完成輸入后，點擊按鈕進(jìn)行提交、進(jìn)入下一步等，按鈕一般是跟隨的最后一個輸入項后面，若輸入項超出一屏顯示，則按鈕懸浮固定在底部；按鈕“確定”放左、右統(tǒng)一即可，沒必要過分糾結(jié)。

02 表單類型

看了很多文章，對表單類型的劃分主要是：基礎(chǔ)表單、分步表單、高級表單（分組表單）^[1]

（1）基礎(chǔ)表單：常見于輸入項較少的表單場景，如：登錄、注冊。

如：登錄

（2）分步表單：常用于輸入項較多，業(yè)務(wù)本身具有流程化特性（如：轉(zhuǎn)賬）

為了提高用戶填寫效率，減少用戶心理負(fù)擔(dān)，將一個冗長或用戶不熟悉的表單任務(wù)拆分成多個步驟，一步步指導(dǎo)用戶完成。

分步表單可以緩解用戶需要填寫較多內(nèi)容時候的抵觸情緒，并且通過拆分步驟，聚焦于每次填寫的內(nèi)容，提升用戶在不同模塊間的瀏覽效率。

來源：Ant Design Pro

（3）高級表單（分組表單）：主要用于需要一次性輸入、提交 大批量數(shù)據(jù)的場景。高級表單與分步表單有點類似，都是為了減輕用戶填寫壓力，將填寫內(nèi)容進(jìn)行分塊。不同的點在于，分步表單的流程化明顯，后一步填寫的內(nèi)容都是基于前一步來填寫、是前一步反饋。

如：站酷上傳作品

但是以上說的基礎(chǔ)表單、分步表單、高級表單都是基于業(yè)務(wù)需要而進(jìn)行選擇，但是實際在設(shè)計時，往往還需要考慮的是：這些表單應(yīng)該是以什么承載結(jié)構(gòu)展示？

是整頁展示、彈窗展示、側(cè)邊欄展示？表單內(nèi)部布局方式，一定是平鋪的一欄么，是否可以增加側(cè)邊目錄？

這些都是設(shè)計師需要進(jìn)行全盤考慮的問題，所以在設(shè)計表單的時候需要先確定這些框架，由外>內(nèi)，層層深入，再對細(xì)節(jié)進(jìn)行處理。所以接下來我會針對如何由外>內(nèi)設(shè)計表單進(jìn)行詳細(xì)的陳述。

03 表單頁設(shè)計步驟

在詳細(xì)闡述如何設(shè)計表單頁前，先明確下我對于表單頁的劃分：

我將表單頁大體劃分成【頁面框架】和【表單內(nèi)容區(qū)】

這樣劃分是出于我對 AJAX之父Jesse James Garrett在2007年出版了一本名為《用戶體驗要素》的書，提出了從5個要素自下而上的建設(shè)用戶體驗，即：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層，這種逐層的思考邏輯對于設(shè)計表單是十分必要的，因為在設(shè)計表單的時候，常常需要考慮這個表單頁所需承載的業(yè)務(wù)訴求（戰(zhàn)略上）基礎(chǔ)上去做后面的優(yōu)化體驗。

所以在設(shè)計表單的時候應(yīng)：

• 明確該表單的業(yè)務(wù)類型，因為不同的業(yè)務(wù)訴求的表單在設(shè)計中的展現(xiàn)形式會有不同，即“頁面框架”會有不同（這也是我上面為何將表單頁分成頁面框架和表單內(nèi)容區(qū)的原因）
• 在確定頁面框架后，就需要對表單需展示的內(nèi)容進(jìn)行明確的劃分，如：表單的內(nèi)容是否要展示流程進(jìn)度？表單內(nèi)容是否有不同層級的導(dǎo)航？確定了這些后，我們表單內(nèi)容的大致布局框架就可以確定下來，我們才能進(jìn)入下一步（內(nèi)容區(qū)具體的陳列方式）的設(shè)計；
• 表單內(nèi)容區(qū)主要是對輸入項的陳列方式，對齊方式，進(jìn)行體驗優(yōu)化；
• 最后對所有輸入項進(jìn)行統(tǒng)一整理，檢查是否與用戶預(yù)期一致？與其他輸入項的關(guān)系是否清晰等。

整體而言可以分為以下四步：

1. 確定【頁面框架】

這里得頁面框架指的是承載著整個表單頁的頁面框架，即：整頁式（新頁面）、彈窗式、側(cè)邊欄式。因為其頁面面積大小不一樣，所以使用情境有所不同。^[2]

• 整頁式：最常用方式，適用于絕大部分的表單，可以支持構(gòu)建復(fù)雜的表單。
• 彈窗式：通過小面積的彈窗進(jìn)行輕量化的編輯，方便快速進(jìn)行增、刪、改、查；輸入項較少，一般不會有滾動條。
• 側(cè)邊欄式：與彈窗式相似，通過小面積的側(cè)邊欄進(jìn)行編輯；可承載比彈窗更復(fù)雜一些的表單內(nèi)容，可以有滾動條。

以上這些就是常見的表單頁面框架，我們在考慮采用何種樣式時需要綜合以下幾個因素考慮：

• 內(nèi)容多少 —— 內(nèi)容較多不適合使用彈窗式
• 與原頁面關(guān)系強(qiáng)度 —— 需與原頁面保留強(qiáng)關(guān)聯(lián)建議使用彈窗式、側(cè)邊欄式
• 表單內(nèi)容區(qū)復(fù)雜程度 —— 一般高級表單、分組表單、分步驟表單、有表格聚合的表單、聯(lián)動表單等都建議采用整頁式的框架來展現(xiàn)。

2. 確定【表單內(nèi)容區(qū)布局】

如上圖所示，一個正常的表單內(nèi)容區(qū)主要有：標(biāo)題區(qū)、二級導(dǎo)航區(qū)、主內(nèi)容區(qū)

1）其中標(biāo)題區(qū)是必須要有的，標(biāo)題區(qū)可以讓用戶快速明白該表單是需要收集什么內(nèi)容

2）二級導(dǎo)航可以根據(jù)業(yè)務(wù)需要進(jìn)行配置

3）主內(nèi)容區(qū)則是表單填寫的主區(qū)域，通常我們直接將這個區(qū)域稱之為“表單內(nèi)容區(qū)”，該區(qū)域布局樣式可以分為三種：

1. 通欄式，即：在頁面中居中顯示，從上到下直接平鋪控件顆粒。
2. 左右式，即：在表單域內(nèi)容區(qū)左邊放置導(dǎo)航欄、或在右側(cè)放置輔助信息欄（如：流程節(jié)點展示）。
3. 左中右式，即：分別在表單域內(nèi)容區(qū)左側(cè)放置導(dǎo)航欄，右側(cè)放置輔助信息欄。

以上三種樣式就是常見的表單內(nèi)容區(qū)的布局，采用哪種布局，可以綜合以下幾個因素考慮：

• 內(nèi)容多少——如果內(nèi)容很多導(dǎo)致頁面很長，則可以考慮將內(nèi)容分類，作為左側(cè)導(dǎo)航欄，采用左右式布局。
• 內(nèi)容類型——導(dǎo)航作用內(nèi)容必須放置左側(cè)（有些分步驟的表單也會將步驟條放置左側(cè)），而輔助信息的內(nèi)容建議放在右側(cè)（因為人眼瀏覽習(xí)慣都是從 左 > 右，所以信息重要度建議按照該視線路徑放置）

3. 確定【表單內(nèi)容排列方式】

在該步驟中，主要確定表單內(nèi)容區(qū)控件顆粒的排列方式：單列布局 or 多列布局

• 在輸入項不多的情況下，建議采用單列布局，因為單列布局，用戶填寫的路徑就是從上>下的一條直線，十分符合用戶的視覺動線，能夠提高用戶瀏覽與填寫的效率。
• 多列布局的表單會導(dǎo)致用戶的視覺路徑變長，用戶需以 Z 字形的視覺動線掃描表單，會提高瀏覽與填寫的效率，并且多列表單容易造成用戶填寫時的混亂，易填錯，體驗差。
• 但是有時部分業(yè)務(wù)訴求和某些特性的場景要求，會需要在有限的空間上放入更多的控件顆粒來收集用戶的信息，這時就不得不使用多列布局的樣式，因為多列能夠省縱向空間。

so 根據(jù)單列布局、多列布局的優(yōu)劣勢，結(jié)合實際業(yè)務(wù)需要來選擇：

【單列布局】

• 優(yōu)：視覺路徑清晰，填寫效率高，體驗好；
• 劣：占用縱向空間。

【多列布局】

• 優(yōu)：省空間，能夠放置更多的控件顆粒；
• 劣：視覺路徑模糊，填寫成本高，填寫易出錯。

在這個環(huán)節(jié)中，除了需要考慮單列式布局還是多列式布局，還有一個也是需要全盤考慮的——【標(biāo)簽的對齊方式】

在設(shè)計時，到底是采用左對齊、右對齊還是頂部對齊呢？

Matteo Penzo《Label Placement in Forms》文章中，有對標(biāo)簽不同的方式方式優(yōu)劣勢進(jìn)行了說明。^[3][4]

后續(xù)在這塊糾結(jié)的時候，則可以對照上面表格進(jìn)行評估了，其中詳細(xì)原理你也可以點擊下方鏈接進(jìn)行查看：UX Collectiveuxdesign.cc

4. 確定【表單內(nèi)容顆粒】

最后一步只需要按照收集信息類型的需要，選擇正確的控件顆粒，如：如果是要收集用戶購買數(shù)量，則可以直接使用“數(shù)字步進(jìn)器”、“輸入框”。

在選用控件顆粒時，需要注意的是：

• 選用的控件顆粒應(yīng)是用戶可以最快輸入的，能點擊完成就別輸入完成
• 表單中同個信息類型的控件顆粒應(yīng)統(tǒng)一
• 指意不明確的表單應(yīng)搭配占位提示，占位提示應(yīng)是完整的陳述句

• 重要信息的輸入項應(yīng)該有錯誤提示校驗，這種一般用于錯誤率較高的情況，避免用戶反復(fù)填寫。如：在登錄注冊時，我們填寫手機(jī)號如果不滿11位數(shù)，就會報錯。
• 特定的輸入型顆?？丶枰鶕?jù)輸入信息的特殊性給與格式的提示與限制，如：郵箱 @http://qq.com，這樣有助于幫助用戶提前感知，減少表單填寫錯誤。

• 表單顆粒的寬度應(yīng)該 暗示填寫內(nèi)容的長度，與輸入預(yù)期成正比，在Ant Design 4.0 系列分享的文章^[5]分析結(jié)論是：錯落有致的排版比整齊劃一更舒適，因為在視覺上我們更容易將下方有圖的空間和內(nèi)容視為一個和諧的整體，但左圖過度的對齊導(dǎo)致暗示隱性的截斷，我們會感覺表單列右側(cè)空間缺了一大塊。

04 寫在最后

本篇文章從表單所在的頁面形式 > 表單框架 > 表單內(nèi)容區(qū) 逐層對表單進(jìn)行剝離拆解，幫助大家更加全面的認(rèn)知表單，并總結(jié)了日常工作中設(shè)計師常常會遇到的表單類型和布局，設(shè)計師可結(jié)合文章中給出的建議參考并靈活應(yīng)用。

希望能夠通過這邊文章給到大家更多的啟發(fā)。文章中如果有不嚴(yán)謹(jǐn)、錯誤的地方希望大家給與指正。最后，作為一名剛剛將自己工作內(nèi)容進(jìn)行沉淀并分享給大家的設(shè)計師，希望大家可以多多點贊評論鼓勵下（狗頭保命）

參考：

1. 表單類型：?https://preview.pro.ant.design/form/advanced-form
2. 頁面框架：?https://www.uisdc.com/structured-approach-2
3. 標(biāo)簽對齊選擇依據(jù)：?https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
4. 標(biāo)簽對齊優(yōu)劣勢：?https://www.uisdc.com/middle-form#
5. 整齊劃一？不如錯落有致。Ant Design 4.0 系列分享：?https://zhuanlan.zhihu.com/p/110096160

本文由 @小發(fā)鴿 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。