2020-9-30 周周
本篇文章將分享Web端表單體驗優(yōu)化等相關(guān)內(nèi)容，分析設(shè)計師在設(shè)計B端類產(chǎn)品時如何讓用戶愉悅并的填寫表單。
表單作為基礎(chǔ)通用組件，也是在各個企業(yè)級中臺中出現(xiàn)頻率最高的元素之一。在用戶界面中表單無處不在，比如：用戶注冊登陸頁、支付頁、用戶反饋、共享信息數(shù)據(jù)錄入等不同類型的表單。當(dāng)我們使用/設(shè)計表單頁面時看似是按鈕、輸入框等表單組件進(jìn)行組合搭配使用，看似簡單，但是在實際業(yè)務(wù)使用中卻有著無數(shù)可推敲的細(xì)節(jié)冒出來，常常給設(shè)計師造成較多的困擾。
那么在實際工作中哪些內(nèi)容會給設(shè)計造成困擾呢？舉幾個例子：在實際的業(yè)務(wù)中很多產(chǎn)品因為業(yè)務(wù)導(dǎo)向需要入海（非中國區(qū)方向），所以就存在表單標(biāo)簽對齊方式問題，如果右對齊可能在中文的情況下表單標(biāo)簽預(yù)設(shè)寬度正好合適，但是當(dāng)用戶切換到多語言時因為語言差異會導(dǎo)致折行嚴(yán)重等一些列問題，相當(dāng)影響體驗；設(shè)計師常常疑惑表單標(biāo)簽是頂部對齊、右對齊還是左對齊，他們的差異點在哪呢？必填與非必填項以什么形式告訴用戶會更加合理呢？表單按鈕放在頁面哪個位置體驗會更佳呢？
所以我們不能忽視這些設(shè)計細(xì)節(jié)，往往一些好的設(shè)計細(xì)節(jié)提升總會給用戶帶來不一樣的用戶體驗。針對以上這些舉重若輕的問題我們一一明確、拋出并與大家一起來進(jìn)行由淺至深的探討「如何提升表單體驗」。
重點概覽
一、表單分析
二、體驗與優(yōu)化
三、排列與布局
四、寫在最后
表單分析
1.1 表單的重要性
在上面的前言中也提到了表單作為基礎(chǔ)通用組件，也是在各個企業(yè)級中臺中出現(xiàn)頻率最高的元素之一。并且在《Web Form Design》一書中 Luke Wroblewsk 也提到了“表單決定了最關(guān)鍵的界面中交互的成敗”，當(dāng)用戶使用網(wǎng)站時會有一個特定目標(biāo)，如果設(shè)計得好，網(wǎng)站將實現(xiàn)有效性。效率、用戶主觀滿意度以及特定用戶在特定使用環(huán)境下所達(dá)到的特定目標(biāo)，也是設(shè)計師想要達(dá)成的最終目標(biāo)。表單往往是目標(biāo)用戶和整個產(chǎn)品的一所橋梁。因為，盡管人機(jī)交互的發(fā)展進(jìn)步，表單仍然是用戶在網(wǎng)絡(luò)中進(jìn)行交互的主要方式。所以表單是被認(rèn)為完成目標(biāo)的最終，也是最重要的階段。
我們以淘寶來舉個典型的例子，淘寶屬于國民電商平臺也是亞洲較大的網(wǎng)上交易平臺，提供各類優(yōu)質(zhì)商品。從平臺的特性來講，它以用戶下單并成交作為最終目標(biāo)。其中支付表單起著一個關(guān)鍵的作用，用戶從購買到支付完成以分步形式進(jìn)行，第一步填寫基本信息并提交訂單，第二步選擇商品并選擇支付貨款至第三方，第三步買方確認(rèn)收貨并自動打款給商家，第四步完成訂單并評價。在填寫表單時中間沒任何阻斷，用戶能很順利的按步驟完成訂單。淘寶支付表單屬于比較典型的分步表單。
1.2 拆分表單
我們簡單提一下表單組成（網(wǎng)上有很多詳細(xì)的相關(guān)文章），一個完整較復(fù)雜的表單是由7個基本組成部分，表單類別、表單標(biāo)簽、表單基本組件、占位提示、幫助信息、按鈕、校驗。表單可以包含以上組成部分，但不是一定都要有，比如：移動端填寫驗證碼時為了減少用戶操作，當(dāng)用戶填寫完成之后直接提交表單驗證。
表單類別：第一時間告訴用戶此段落的表單大致內(nèi)容，減少用戶理解并承擔(dān)著概括內(nèi)容的作用；
表單組件：包含了輸入框、下拉框、日期選擇器、時間選擇器、開關(guān)、上傳等十幾種類型，是形成表單的核心內(nèi)容；
表單標(biāo)簽：表單標(biāo)簽承擔(dān)著對輸入項或設(shè)置項的解釋作用，所以表單標(biāo)簽需要合理設(shè)置，核心點是幫助用戶快速理解每一項字段的作用；
占位提示：使用通用的認(rèn)知提示并且以較弱的方式呈現(xiàn)給用戶，用戶填完信息即消失。注意：占位提示不能替代標(biāo)簽，因為消失的占位提示會拉長用戶的短期記憶，如果沒有表單標(biāo)簽用戶將無法在提交表單前檢查他們填寫的所有信息。文章下面會詳細(xì)分析。
幫助信息：當(dāng)表單標(biāo)簽不足以對輸入項準(zhǔn)確說明時，這時候需要使用文本提示用戶。它不僅能讓用戶提前感知輸入后的樣式，還能夠有效的告訴用戶該如何輸入以及表單提交后達(dá)到的目的。
按鈕：當(dāng)用戶完成信息錄入時，按鈕能夠?qū)Ρ韱蝺?nèi)容進(jìn)行校驗或提交。
校驗：對用戶信息錄入內(nèi)容進(jìn)行校驗并給出對應(yīng)的錯誤提示。如：內(nèi)容是否為空、類型格式是否正確、是否符合業(yè)務(wù)邏輯等等。校驗時有兩種規(guī)則，分別是使用即時校驗（失焦即校驗）和點擊提交按鈕以后的最終校驗。狀態(tài)分別為錯誤、警示、成功。
1.3 表單類型
基礎(chǔ)表單
較為簡單的一類表單，把所有表單字段平鋪在頁面中，字段內(nèi)容較少。當(dāng)用戶輸入少量信息即可完成一個簡單快速的任務(wù)。例如：此類型表單常常用在簡單的登錄注冊中。
分步表單
較為復(fù)雜的一類表單，把一個相對復(fù)雜的表單字段拆解為多個步驟進(jìn)行。根據(jù)業(yè)務(wù)屬性進(jìn)行步驟分組利用步驟條告訴用戶所完成的流程和進(jìn)度，當(dāng)用戶每次填寫都意味著一次節(jié)點完成，整個流程結(jié)束給予明確的結(jié)果反饋，并以提交成功為最終。分布表單有利于減輕用戶由于表單大而復(fù)雜的造成的填寫負(fù)擔(dān)，并且能減少用戶表單填寫出錯率。
分組表單
將一個復(fù)雜表單拆解歸類分組。分組表單與分布表單特點較為相似，都可以減輕用戶因為表單大而復(fù)雜的造成填寫的負(fù)擔(dān)，并且能減少用戶表單填寫出錯率
體驗與優(yōu)化
1.1 必填項or可選項
在設(shè)計表單時大多數(shù)設(shè)計師都習(xí)慣性的使用星號表示必填字段。但那么問題來了，針對必填項和可選項用那種形式才是最科學(xué)的呢？我們簡單分析一下。
當(dāng)表單中的必填信息多于非必填信息時，如果使用紅色星號表示必填項，那么大量紅色星號導(dǎo)致增加用戶的認(rèn)知負(fù)擔(dān)，使得用戶無法快速識別哪些是必須填寫的，哪些是不必須填寫。并且使用紅色星號會帶給用戶一些恐懼感，它增加了出錯的風(fēng)險并降低了表單填寫率。因此在表單設(shè)計中，當(dāng)必填項多于非必填項時，隱藏紅色星號標(biāo)記，通過暗提示標(biāo)記可選項的形式來幫助用戶識別。
紅色星號對于不同用戶也會存在不同的認(rèn)知差異。對比較有經(jīng)驗的用戶可能表意較為明顯，但不代表所有用戶都能理解，比如一些非中國區(qū)用戶使用國際化產(chǎn)品時存在不同認(rèn)知，因為每個國家本地化差異較大導(dǎo)致認(rèn)知差異。
還有一點是表單中視覺噪聲越少可讀性越強(qiáng)，因此當(dāng)必填項多于非必填用非必填字段提示用戶會更好。
1.2 單列布局or多列布局
多列表單字段會導(dǎo)致用戶視覺路徑變長，因為如果表單中有水平相鄰的字段，則用戶必須以Z樣式進(jìn)行視線掃描，整體的效率和工作量都更大，使清晰的路徑變得模糊并加長用戶閱讀時間。多列表單可能會存在用戶跳過他們實際要輸入的必填字段，將數(shù)據(jù)輸入到錯誤字段中。而最終校驗信息時用戶得反復(fù)檢查錯誤項導(dǎo)致用戶放棄填寫。
如果表單使用單列，則完成的路徑是頁面垂直向下的一條直線，單列布局能夠給用戶呈現(xiàn)一條清晰的視覺路。因此，表單較為簡單時盡量避免將表單分成多列，在業(yè)務(wù)場景允許的情況盡量使用單列（部分業(yè)務(wù)訴求和一些特定場景要求，多列布局會更節(jié)省垂直空間，但是多列布局需要考慮字段之間的關(guān)聯(lián)性，這里不強(qiáng)求一定只能使用單列布局）。
1.3 將復(fù)雜的表單分為幾個簡單的步驟
在設(shè)計師設(shè)計表單時可能業(yè)務(wù)場景復(fù)雜、字段較多，即使設(shè)計師把很多不必要的字段都刪除也解決不了根本問題。所以，這時候設(shè)計師需要將大型任務(wù)分解為一系列較小的任務(wù)，使得表單更加的簡潔。這種方式的好處是能將步驟以視覺的方式傳達(dá)給用戶數(shù)量、名稱、說明等信息，更加提高用戶滿意度并且能激勵繼續(xù)填寫。
但是設(shè)計師需要注意的是不要太過于細(xì)化步驟以及在小型彈出窗出現(xiàn)過多的步驟，過多的步驟不利與用戶填寫和記憶，反而增加用戶負(fù)擔(dān)。
1.4 按鈕的位置
按鈕放在頁面左下角比較好還是放右下角比較好？這是設(shè)計師在設(shè)計表單時常常糾結(jié)的一個問題。其實在14世紀(jì)西方活字印刷術(shù)的發(fā)明人約翰·古騰堡提出一個概念古騰堡法則（Gutenberg Diagram），又稱對角線平衡法則。它指出用戶在瀏覽頁面或一些布局時，視線往往趨向于從左上角到右下角進(jìn)行掃描。左上角是第一視覺落點區(qū)（主視區(qū)），而右下角是最終視覺落點區(qū)（終點區(qū)）。與之相對，右上角和左下角則是視覺盲點。用戶的視覺移動端規(guī)則是從上到下，從左到右。
所以，界面中的左上和右下是用戶視覺最為重點關(guān)注的位置。遵循古騰堡法則，設(shè)計師應(yīng)該把界面的關(guān)鍵元素放在主視區(qū)，終點區(qū)可以放按鈕、強(qiáng)提示，盲點區(qū)可以用來放一些相對次要的內(nèi)容，如輔助圖形、文字信息。
同理，表單中會出現(xiàn)組合按鈕，比如：取消與確認(rèn)、提現(xiàn)與充值。根據(jù)古騰堡法則，用戶使用界面時從第一視覺落點區(qū)是主視覺區(qū)(Primary Optical Area)，最終停留在結(jié)尾的終點區(qū)(Terminal Area)。
如下圖是一個彈窗類型的表單，如果根據(jù)業(yè)務(wù)訴求確認(rèn)操作重要程度強(qiáng)于取消操作，那么確認(rèn)按鈕應(yīng)該放在取消按鈕的右邊。因為確認(rèn)按鈕放在右側(cè)(終點區(qū)) 用戶關(guān)注度會更強(qiáng)。
1.5 占位提示避免代替表單標(biāo)簽
常規(guī)的占位提示作用是使用通用的認(rèn)知提示并且以較弱的方式呈現(xiàn)給用戶，當(dāng)在字段中填入內(nèi)容這些提示通常會消失。
設(shè)計師常常遇到表單字段較多并且頁面空間有限的情況，為了減少橫向節(jié)省空間設(shè)計師常常的做法是將表單標(biāo)簽刪除，使用占位提示文本作為信息提示。但是設(shè)計師必須有意識知道到這種方式適合使用在較為簡單的表單中，比如：表格中點擊修改名稱操作，彈出氣泡并且氣泡中只存在一個字段?；蛘呤窃谟脩舴浅Ｊ熘牡卿涀缘容^為簡單的表單填寫時使用。但是當(dāng)用戶需要填寫大量字段信息時不建議使用占位提示代替表單標(biāo)簽的方式。原因有兩點：1. 當(dāng)用戶選中文本框填寫時，占位內(nèi)容即消失，這時候用戶無法檢查并確認(rèn)其所寫的內(nèi)容是否符合預(yù)期。2. 當(dāng)用戶看到文本框中已經(jīng)回填內(nèi)容了，誤認(rèn)為占位提示是默認(rèn)回顯內(nèi)容，造成內(nèi)容已經(jīng)填完不需要再操作的錯覺。
針對上面問題也不是沒有解決方案，在Material Design中有提供針對上面的問題的解決方案，我們這邊暫時稱其為“浮動標(biāo)簽”，默認(rèn)情況下輸入框內(nèi)顯示占位文本，當(dāng)用戶輸入內(nèi)容以后占位文本浮動到內(nèi)容上方與內(nèi)容左對齊。
1.6 校驗反饋及時并準(zhǔn)確
設(shè)計師通常認(rèn)為用戶在填寫表單時能夠很順利的完成表單錄入，但事實相反。在實際的使用場景中，特別是在一些業(yè)務(wù)較為復(fù)雜的表單中用戶極易發(fā)生錯誤，這時候需要需要明確的校驗信息、準(zhǔn)確的校驗時機(jī)、輸入的限制提示。
錯誤提示校驗
錯誤校驗提示一般存在于錯誤率較高情況下出現(xiàn)，如：在登錄注冊時，要求用戶填寫手機(jī)號，如果用戶輸入的手機(jī)號碼不符合特定的輸入格式，那么這時候需要明確標(biāo)記錯誤原因，準(zhǔn)確的幫助用戶找到問題并解決，避免錯誤提示描述模糊不清誤導(dǎo)用戶。錯誤提示一般會采用“雙重視覺強(qiáng)調(diào)”來顯示錯誤，除了輸入框突出顯示外，同時需要在輸入框下方加入紅色指導(dǎo)文字。如下圖所示為西瓜視頻登錄注冊場景下的截圖：
限制與格式提示
在表單中如果出現(xiàn)特定格式時務(wù)必要提前告知用戶?？梢栽谳斎肟蛑酗@示概括回答的方式引導(dǎo)用戶，如：請輸入日期，eg：mm/dd/yy。這樣便于幫助用戶提前感知，減少表單填寫錯誤率。
校驗時機(jī)
為了避免用戶在提交時表單時出現(xiàn)大面積的報錯問題，設(shè)計師可以使用實時校驗的交互形式。如：在用戶輸入完成之后鼠標(biāo)失焦后進(jìn)行信息校驗，但是需要注意的是在實時校驗時避免用戶還沒有輸入完成即出現(xiàn)校驗誤導(dǎo)用戶，所以需要準(zhǔn)確判斷鼠標(biāo)是否失焦。如下圖所示為西瓜視頻登錄注冊場景下的截圖：
1.7 字段長度與輸入預(yù)期成正比
在實際業(yè)務(wù)中，設(shè)計師常常習(xí)慣把每個表單字段都設(shè)置成相同的寬度，在視覺效果上看感覺會比較統(tǒng)一，但是這種做法實際上體驗欠佳。字段的寬度應(yīng)該向用戶暗示所需輸入內(nèi)容的長度從而減輕判斷負(fù)擔(dān)。在Ant Design 4.0 系列分享的文章《整齊劃一？不如錯落有致》中分析到錯落有致的排版表現(xiàn)似乎比整齊劃一的左圖更舒適，因為在視覺上我們更容易將右圖的空間和內(nèi)容視為一個和諧的整體。但左圖過度的對齊導(dǎo)致暗示隱性的截斷，我們慣性視覺會產(chǎn)生表單字段右側(cè)空間缺了一大塊的錯覺。
文章總結(jié)到“表單寬度的處理方式核心旨在解決兩個問題：1. 暗示填寫內(nèi)容長度；2. 表單項布局排列效果，我們通過設(shè)置合理的默認(rèn)寬度尺寸和描述關(guān)系，就可以讓設(shè)計師們跳過部分繁瑣磨人的細(xì)節(jié)思考，快速搭建表單寬度合理且舒適的頁面。”如下圖所示：
排列與布局
1.1 定寬or自適應(yīng)？
表單做定寬還是做自適應(yīng)？哪個“更好”的這個問題時常困惱著我們。其中Button、Radio、CheckBox等本身是定寬組件還好，它根據(jù)內(nèi)容自適應(yīng)即可，但是當(dāng)遇到Select、DataPicker、Cascader等類型時就會開始糾結(jié)這個問題。在實際的業(yè)務(wù)中不論是做理想中的定寬還是自適應(yīng)，很多情況下瀏覽器窗口大小不一可能導(dǎo)致在一些極限情況下都會產(chǎn)生不盡人意的情況。腦補(bǔ)一下，比如：在筆記本的小屏幕下左對齊并定寬效果還不錯，但是當(dāng)你把頁面呈現(xiàn)在較大顯示器下，這時候頁面右側(cè)又會呈現(xiàn)出大面積的空白。參考AntDesign提供的典型頁面以下三種樣式是都會造成不同的反面效果。
所以在實際業(yè)務(wù)場景中如果沒有明確自適應(yīng)和特定自定義寬度的需求時可以通過以下幾種方式處理。
將關(guān)聯(lián)性強(qiáng)的字段分組
如果頁面橫向?qū)挾茸銐虼髸r，可以將一個區(qū)域中字段較多、并具有關(guān)聯(lián)性字段進(jìn)行分組，這樣不僅有利于空間布局上的利用，還可以通過字段之間關(guān)聯(lián)性暗提示幫助用戶更好理解。格式塔心理學(xué)中有多種分組原則，可以使字段之間具有相關(guān)性：接近度，相似度，連續(xù)性，閉合性和連通性。將非結(jié)構(gòu)化字段分組為幾個機(jī)構(gòu)化的集合提高表單的可用性。
設(shè)置字段寬度梯度
可以給字段設(shè)置幾檔寬度梯度的尺寸，我們可以站在AntDesign這個巨人的肩膀汲取一些相關(guān)經(jīng)驗，其中4.0系列分享的文章中總結(jié)到其經(jīng)過對十幾個業(yè)務(wù)線梳理，將組件寬度定義了5中高頻的空間尺寸，分別是： XS（80~160px）、S （160~280）、M（280~360px）、L （360px~480px）、XL （480~560px）。根據(jù)原理，我們可以假設(shè)原子寬度XS為100，那么通過尺寸的倍數(shù)+間距的方式來計算其他的四種尺寸（間距暫定8px情況下得到：S=208px、M=316px、L=424px、XL=532px），通過此計算方式也是用來解決視覺對齊規(guī)則，如下圖所示：
1.2 表單標(biāo)簽頂部對齊or右對齊or左對齊
在設(shè)計表單時到底是左對齊、右對齊還是頂部對齊呢？這個問題也是在實際業(yè)務(wù)中設(shè)計師發(fā)問頻率較高的一個棘手問題。其實，不論是哪種方式都有相對的利弊，需要根據(jù)實際業(yè)務(wù)場景提供不同的解決方案。在Matteo Penzo《Label Placement in Forms》文章中有分享過關(guān)于表單標(biāo)簽放置的研究，下圖是Matteo Penzo研究總結(jié)得到的瀏覽時間表：
表單字段頂部對齊
將表單標(biāo)簽放置在其對應(yīng)輸入字段的正上方，并垂直左對齊排列，用戶只需依次向下瀏覽即可看到標(biāo)簽與輸入字段兩個元素。其優(yōu)勢是橫向屏幕空間足夠，能夠比較友好的適配多語言適合非中國區(qū)業(yè)務(wù)表單使用。并且根據(jù)上面Matteo Penzo的時間表上看，頂部對齊的瀏覽和填寫的效率也是3種常規(guī)的對齊方式中較高的一種。不足點是會占用較多的縱向垂直屏幕空間，此外應(yīng)當(dāng)注意每組表單標(biāo)簽和輸入字段與其他字段組的間距，以免層級區(qū)分度不夠的問題。
表單字段右對齊
將表單標(biāo)簽放置在其對應(yīng)的輸入字段的左邊，標(biāo)簽右對齊。其優(yōu)點減少了占用屏幕的高度，并且表單標(biāo)簽與輸入字段關(guān)系較近，所以用戶在填寫表單時效率較高。不足點是由于表單標(biāo)簽的字?jǐn)?shù)不可控（特別是針對非中國區(qū)業(yè)務(wù)時，多語言切換可能會出現(xiàn)超長的文案，甚至出現(xiàn)折行的情況），可能會造成左側(cè)參差不齊的問題，導(dǎo)致可讀性不高用戶在查看表單時比較費(fèi)勁，并且不太適合非中國區(qū)業(yè)務(wù)。
表單字段左對齊
將表單標(biāo)簽放置在其對應(yīng)的輸入字段的左邊，標(biāo)簽左對齊。表單標(biāo)簽和輸入字段距離較遠(yuǎn)，用戶從左至右瀏覽時間變長，并且根據(jù)上面Matteo Penzo的時間表上看，左對齊的瀏覽和填寫的效率是3種常規(guī)的對齊方式中最慢的一種。但是，如果業(yè)務(wù)需要用戶對表單放慢速度并謹(jǐn)慎填寫（復(fù)雜表單或者表單中含有大量高級設(shè)置的陌生數(shù)據(jù)時），左對齊的方式會減少部分用戶的出錯率。但不太適合非中國區(qū)業(yè)務(wù)。
1.3 表單布局類型
常規(guī)布局（簡單）
在實際業(yè)務(wù)中當(dāng)表單字段較為簡單時可使用，表單字段至上而下單列排列布局，用戶只需縱向閱讀填寫，填寫完成率較高。
多列布局（較復(fù)雜）
垂直空間有限并且表單含有較多填寫字段的復(fù)雜表單時，可將具有相關(guān)聯(lián)字段放在一個卡片區(qū)域中進(jìn)行歸類，將多個字段組合在一行，形成多列排布的暗提示幫助用戶更好理解。
區(qū)域分組布局（復(fù)雜）
表單含有較多填寫字段的復(fù)雜表單，可將具有相關(guān)聯(lián)字段進(jìn)行分類并以標(biāo)題區(qū)分的形式進(jìn)行字段分組，并且表單字段都在一個卡片區(qū)域內(nèi)。
卡片分組布局（高復(fù)雜）
卡片分組布局一般用來處理高復(fù)雜類型表單。當(dāng)業(yè)務(wù)中希望頁面承載眾多表單字段時，可將信息相關(guān)性弱的字段拆分為多個部分，并通過多個卡片分組承載不同類型字段，每個卡片都需有個卡片類別標(biāo)題。
寫在最后
本篇文章從分析表單在產(chǎn)品中為何如此的重要，總結(jié)了在日常工作中設(shè)計師常常遇到的表單類型和布局，設(shè)計師可通過文章中的建議和案例進(jìn)而合理的選擇并靈活應(yīng)用。以及在實際的業(yè)務(wù)應(yīng)用場景中設(shè)計師如何規(guī)避和注意一些設(shè)計細(xì)節(jié)進(jìn)而提升表單的體驗。文章通過一些案例進(jìn)行分析，希望大家能夠通過此篇文章更多的是受到啟發(fā)（而不是限制），能夠在日常工作中靈活應(yīng)用并舉一反三。這里需要強(qiáng)調(diào)的是作為產(chǎn)品設(shè)計師不論是表單設(shè)計還是全局的頁面設(shè)計，都需要有理解業(yè)務(wù)本質(zhì)的能力和全局的業(yè)務(wù)思考能力，不然常常會被稱之為“喂，那個畫圖的設(shè)計”。
文章來源：tob.design