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