2021-1-4 資深UI設(shè)計(jì)者
表單日常設(shè)計(jì)規(guī)范大致思路，增加對(duì)表單的認(rèn)識(shí)~
全篇閱讀大概需要15min，對(duì)表單設(shè)計(jì)不熟悉的同學(xué)看完后肯定會(huì)有不少的收獲~~~
說(shuō)到表單其實(shí)在生活中可以接觸到各種各樣的表單，主要目的就是讓用戶填寫(xiě)來(lái)「收集用戶信息」。
初看這些表單，你可能覺(jué)得很簡(jiǎn)單，就是一些標(biāo)簽、非常基礎(chǔ)的小組件，但是在實(shí)際業(yè)務(wù)中，想要將這些小組件組合拼裝成合適的表單卻需要推敲非常多的細(xì)節(jié)，常常會(huì)讓設(shè)計(jì)師陷入無(wú)限的糾結(jié)中，比如：
所以針對(duì)這些問(wèn)題，我從「框架」>「細(xì)節(jié)」的邏輯與大家一起探討「如何設(shè)計(jì)一份體驗(yàn)好的表單」。
在UX Collective，作者Taras Bakusevych 進(jìn)行了詳細(xì)的闡述，對(duì)表單的組成部分進(jìn)行了詳細(xì)的拆解與說(shuō)明 ↓ ↓ ↓
1. 標(biāo)簽：
標(biāo)簽文本主要是解釋輸入項(xiàng)的含義，一般不宜太長(zhǎng)，需要簡(jiǎn)明扼要，快速讓用戶理解；還有一部分是告知用戶哪些是必填項(xiàng)。
2. 占位提示：
直接展示在輸入項(xiàng)中，采用弱提示文本對(duì)所需信息描述、示意，當(dāng)用戶輸入信息時(shí)即消失。
3. 校驗(yàn)：
對(duì)輸入項(xiàng)進(jìn)行驗(yàn)證，并給出反饋提示，如：用戶未填寫(xiě)，格式錯(cuò)誤、內(nèi)容錯(cuò)誤等
△ 常見(jiàn)的校驗(yàn)類型
4. 基礎(chǔ)組件：
可交互輸入的區(qū)域，是構(gòu)成表單的核心內(nèi)容，主要有：輸入框、單（復(fù)）選框、上傳、時(shí)間選擇器、開(kāi)關(guān)……
5. 提示：
描述該輸入項(xiàng)需要的輸入類型，如：上傳的文件類型
6. 按鈕：
用戶完成輸入后，點(diǎn)擊按鈕進(jìn)行提交、進(jìn)入下一步等，按鈕一般是跟隨的最后一個(gè)輸入項(xiàng)后面，若輸入項(xiàng)超出一屏顯示，則按鈕懸浮固定在底部；按鈕“確定”放左、右統(tǒng)一即可，沒(méi)必要過(guò)分糾結(jié)。
看了很多文章，對(duì)表單類型的劃分主要是：基礎(chǔ)表單、分步表單、高級(jí)表單（分組表單）[1]
基礎(chǔ)表單：常見(jiàn)于輸入項(xiàng)較少的表單場(chǎng)景，如：登錄、注冊(cè)。
分步表單：常用于輸入項(xiàng)較多，業(yè)務(wù)本身具有流程化特性（如：轉(zhuǎn)賬）
為了提高用戶填寫(xiě)效率，減少用戶心理負(fù)擔(dān)，將一個(gè)冗長(zhǎng)或用戶不熟悉的表單任務(wù)拆分成多個(gè)步驟，一步步指導(dǎo)用戶完成。
分步表單可以緩解用戶需要填寫(xiě)較多內(nèi)容時(shí)候的抵觸情緒，并且通過(guò)拆分步驟，聚焦于每次填寫(xiě)的內(nèi)容，提升用戶在不同模塊間的瀏覽效率。
△ 來(lái)源：Ant Design Pro
高級(jí)表單（分組表單）：主要用于需要一次性輸入、提交大批量數(shù)據(jù)的場(chǎng)景。高級(jí)表單與分步表單有點(diǎn)類似，都是為了減輕用戶填寫(xiě)壓力，將填寫(xiě)內(nèi)容進(jìn)行分塊。不同的點(diǎn)在于，分步表單的流程化明顯，后一步填寫(xiě)的內(nèi)容都是基于前一步來(lái)填寫(xiě)、是前一步反饋。
△ 站酷上傳作品
但是以上說(shuō)的基礎(chǔ)表單、分步表單、高級(jí)表單都是基于業(yè)務(wù)需要而進(jìn)行選擇，但是實(shí)際在設(shè)計(jì)時(shí)，往往還需要考慮的是：這些表單應(yīng)該是以什么承載結(jié)構(gòu)展示？
這些都是設(shè)計(jì)師需要進(jìn)行全盤(pán)考慮的問(wèn)題，所以在設(shè)計(jì)表單的時(shí)候需要先確定這些框架，由外>內(nèi)，層層深入，再對(duì)細(xì)節(jié)進(jìn)行處理。所以接下來(lái)我會(huì)針對(duì)如何由外>內(nèi)設(shè)計(jì)表單進(jìn)行詳細(xì)的陳述。
在詳細(xì)闡述如何設(shè)計(jì)表單頁(yè)前，先明確下我對(duì)于表單頁(yè)的劃分 ↓ ↓ ↓
我將表單頁(yè)大體劃分成「頁(yè)面框架」和「表單內(nèi)容區(qū)」
這樣劃分是出于我對(duì) AJAX之父Jesse James Garrett在2007年出版了一本名為《用戶體驗(yàn)要素》的書(shū)，提出了從5個(gè)要素自下而上的建設(shè)用戶體驗(yàn)，即：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層，這種逐層的思考邏輯對(duì)于設(shè)計(jì)表單是十分必要的，因?yàn)樵谠O(shè)計(jì)表單的時(shí)候，常常需要考慮這個(gè)表單頁(yè)所需承載的業(yè)務(wù)訴求（戰(zhàn)略上）基礎(chǔ)上去做后面的優(yōu)化體驗(yàn)，所以在設(shè)計(jì)表單的時(shí)候應(yīng)：明確該表單的業(yè)務(wù)類型，因?yàn)椴煌臉I(yè)務(wù)訴求的表單在設(shè)計(jì)中的展現(xiàn)形式會(huì)有不同，即“頁(yè)面框架”會(huì)有不同（這也是我上面為何將表單頁(yè)分成頁(yè)面框架和表單內(nèi)容區(qū)的原因）
在確定頁(yè)面框架后，就要對(duì)表單需展示的內(nèi)容進(jìn)行明確的劃分，如：表單的內(nèi)容是否要展示流程進(jìn)度？表單內(nèi)容是否有不同層級(jí)的導(dǎo)航？確定了這些后，我們表單內(nèi)容的大致布局框架就可以確定下來(lái)，我們才能進(jìn)入下一步（內(nèi)容區(qū)具體的陳列方式）的設(shè)計(jì)；
表單內(nèi)容區(qū)主要是對(duì)輸入項(xiàng)的陳列方式，對(duì)齊方式，進(jìn)行體驗(yàn)優(yōu)化；
最后對(duì)所有輸入項(xiàng)進(jìn)行統(tǒng)一整理，檢查是否與用戶預(yù)期一致？與其他輸入項(xiàng)的關(guān)系是否清晰等。
整體而言可以分為以下四步：
STEP1：確定「頁(yè)面框架」
這里的頁(yè)面框架指的是承載著整個(gè)表單頁(yè)的頁(yè)面框架，即：整頁(yè)式（新頁(yè)面）、彈窗式、側(cè)邊欄式。因?yàn)槠漤?yè)面面積大小不一樣，所以使用情境有所不同。[2]
整頁(yè)式：最常用方式，適用于絕大部分的表單，可以支持構(gòu)建復(fù)雜的表單。
彈窗式：通過(guò)小面積的彈窗進(jìn)行輕量化的編輯，方便快速進(jìn)行增、刪、改、查；輸入項(xiàng)較少，一般不會(huì)有滾動(dòng)條。
側(cè)邊欄式：與彈窗式相似，通過(guò)小面積的側(cè)邊欄進(jìn)行編輯；可承載比彈窗更復(fù)雜一些的表單內(nèi)容，可以有滾動(dòng)條。
以上這些就是常見(jiàn)的表單頁(yè)面框架，我們?cè)诳紤]采用何種樣式時(shí)需要綜合以下幾個(gè)因素考慮：
內(nèi)容多少 —— 內(nèi)容較多不適合使用彈窗式
與原頁(yè)面關(guān)系強(qiáng)度 —— 需與原頁(yè)面保留強(qiáng)關(guān)聯(lián)建議使用彈窗式、側(cè)邊欄式
表單內(nèi)容區(qū)復(fù)雜程度 —— 一般高級(jí)表單、分組表單、分步驟表單、有表格聚合的表單、聯(lián)動(dòng)表單等都建議采用整頁(yè)式的框架來(lái)展現(xiàn)。
STEP2：確定「表單內(nèi)容區(qū)布局」
如上圖所示，一個(gè)正常的表單內(nèi)容區(qū)主要有：標(biāo)題區(qū)、二級(jí)導(dǎo)航區(qū)、主內(nèi)容區(qū)
其中標(biāo)題區(qū)是必須要有的，標(biāo)題區(qū)可以讓用戶快速明白該表單是需要收集什么內(nèi)容
二級(jí)導(dǎo)航可以根據(jù)業(yè)務(wù)需要進(jìn)行配置
主內(nèi)容區(qū)則是表單填寫(xiě)的主區(qū)域，通常我們直接將這個(gè)區(qū)域稱之為“表單內(nèi)容區(qū)”，該區(qū)域布局樣式可以分為三種：
以上三種樣式就是常見(jiàn)的表單內(nèi)容區(qū)的布局，采用哪種布局，可以綜合以下幾個(gè)因素考慮：
內(nèi)容多少——如果內(nèi)容很多導(dǎo)致頁(yè)面很長(zhǎng)，則可以考慮將內(nèi)容分類，作為左側(cè)導(dǎo)航欄，采用左右式布局。
內(nèi)容類型——導(dǎo)航作用內(nèi)容必須放置左側(cè)（有些分步驟的表單也會(huì)將步驟條放置左側(cè)），而輔助信息的內(nèi)容建議放在右側(cè)（因?yàn)槿搜蹫g覽習(xí)慣都是從 左 > 右，所以信息重要度建議按照該視線路徑放置）
STEP3：確定「表單內(nèi)容排列方式」
在該步驟中，主要確定表單內(nèi)容區(qū)控件顆粒的排列方式，單列布局 or 多列布局。
在輸入項(xiàng)不多的情況下，建議采用單列布局，因?yàn)閱瘟胁季?，用戶填?xiě)的路徑就是從上>下的一條直線，十分符合用戶的視覺(jué)動(dòng)線，能夠提高用戶瀏覽與填寫(xiě)的效率。
多列布局的表單會(huì)導(dǎo)致用戶的視覺(jué)路徑變長(zhǎng)，用戶需以 Z 字形的視覺(jué)動(dòng)線掃描表單，會(huì)提高瀏覽與填寫(xiě)的效率，并且多列表單容易造成用戶填寫(xiě)時(shí)的混亂，易填錯(cuò)，體驗(yàn)差。
但是有時(shí)部分業(yè)務(wù)訴求和某些特性的場(chǎng)景要求，會(huì)需要在有限的空間上放入更多的控件顆粒來(lái)收集用戶的信息，這時(shí)就不得不使用多列布局的樣式，因?yàn)槎嗔心軌蚴】v向空間。
so 根據(jù)單列布局、多列布局的優(yōu)劣勢(shì)，結(jié)合實(shí)際業(yè)務(wù)需要來(lái)選擇：
單列布局
多列布局
在這個(gè)環(huán)節(jié)中，除了需要考慮單列式布局還是多列式布局，還有一個(gè)也是需要全盤(pán)考慮的——標(biāo)簽的對(duì)齊方式
在設(shè)計(jì)時(shí)，到底是采用左對(duì)齊、右對(duì)齊還是頂部對(duì)齊呢？
這篇文章有對(duì)標(biāo)簽不同的方式優(yōu)劣勢(shì)進(jìn)行了說(shuō)明。[3][4]
后續(xù)在這塊糾結(jié)的時(shí)候，則可以對(duì)照上面表格進(jìn)行評(píng)估了，其中詳細(xì)原理你也可以點(diǎn)擊下方鏈接進(jìn)行查看：UX Collective
STEP4：確定「表單內(nèi)容顆?！?/strong>
最后一步只需要按照收集信息類型的需要，選擇正確的控件顆粒，如：如果是要收集用戶購(gòu)買數(shù)量，則可以直接使用“數(shù)字步進(jìn)器”、“輸入框”。
在選用控件顆粒時(shí)，需要注意的是：
重要信息的輸入項(xiàng)應(yīng)該有錯(cuò)誤提示校驗(yàn)，這種一般用于錯(cuò)誤率較高的情況，避免用戶反復(fù)填寫(xiě)。如：在登錄注冊(cè)時(shí)，我們填寫(xiě)手機(jī)號(hào)如果不滿11位數(shù)，就會(huì)報(bào)錯(cuò)。
特定的輸入型顆粒控件，需要根據(jù)輸入信息的特殊性給與格式的提示與限制，如：郵箱 @http://qq.com，這樣有助于幫助用戶提前感知，減少表單填寫(xiě)錯(cuò)誤。
表單顆粒的寬度應(yīng)該暗示填寫(xiě)內(nèi)容的長(zhǎng)度，與輸入預(yù)期成正比，在Ant Design 4.0 系列分享的文章[5]分析結(jié)論是：
錯(cuò)落有致的排版比整齊劃一更舒適，因?yàn)樵谝曈X(jué)上我們更容易將下方有圖的空間和內(nèi)容視為一個(gè)和諧的整體，但左圖過(guò)度的對(duì)齊導(dǎo)致暗示隱性的截?cái)?，我們?huì)感覺(jué)表單列右側(cè)空間缺了一大塊。
本篇文章從表單所在的頁(yè)面形式 > 表單框架 > 表單內(nèi)容區(qū)逐層對(duì)表單進(jìn)行剝離拆解，幫助大家更加全面的認(rèn)知表單，并總結(jié)了日常工作中設(shè)計(jì)師常常會(huì)遇到的表單類型和布局，設(shè)計(jì)師可結(jié)合文章中給出的建議參考并靈活應(yīng)用。
藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.cqzjtgb.com