不知你是否遇到過(guò)這種情況：分明對(duì)表單設(shè)計(jì)已經(jīng)有了一定了解與熟悉，但在實(shí)際操作中卻又不禁陷入困擾和糾結(jié)。基于此，本文作者總結(jié)了表格設(shè)計(jì)中遇到的常見(jiàn)困擾點(diǎn)，在本篇文章中講解了標(biāo)簽的疑問(wèn)設(shè)計(jì)指南與表單域的設(shè)計(jì)疑問(wèn)指南，希望能為你解決困惑。

有一些朋友私信跟我說(shuō)，已經(jīng)很了解表單的基礎(chǔ)知識(shí)了，但是在設(shè)計(jì)的時(shí)候，還是總是存在糾結(jié)困擾的地方。

我感同身受，做了幾年的表單設(shè)計(jì)以后，我對(duì)各類表單及設(shè)計(jì)點(diǎn)很清晰，但是當(dāng)我開(kāi)始設(shè)計(jì)新產(chǎn)品的表單的時(shí)候，還是經(jīng)常陷入困擾、糾結(jié)，經(jīng)常為了一兩個(gè)很小的設(shè)計(jì)點(diǎn)方案和產(chǎn)品經(jīng)理爭(zhēng)論半天；每次堅(jiān)持自己想法的時(shí)候，甚至不能很清晰且有理有據(jù)的說(shuō)明，這讓我一度感到很焦慮。為此我查閱大量資料，文章，就是為了解決這種說(shuō)不出為什么的尷尬無(wú)力感。

我總結(jié)出來(lái)，一些我在設(shè)計(jì)中常遇到的困擾及糾結(jié)的設(shè)計(jì)點(diǎn)，分享給大家。

一、標(biāo)簽的設(shè)計(jì)疑問(wèn)指南

1. 哪種標(biāo)簽對(duì)齊方式更好？

這個(gè)問(wèn)題基本是在新建一個(gè)產(chǎn)品的時(shí)候才會(huì)出現(xiàn)，如果你做的產(chǎn)品已有明確的規(guī)范和使用場(chǎng)景，那么統(tǒng)一表單標(biāo)簽對(duì)齊方式即可。

但是，如果你需要重新定義一個(gè)新的表單規(guī)范時(shí)，那么你就需要考慮哪種標(biāo)簽對(duì)齊方式更好，怎樣區(qū)分使用場(chǎng)景！

很多的前輩們通過(guò)科學(xué)實(shí)驗(yàn)發(fā)現(xiàn)，無(wú)論是在眼動(dòng)儀的熱圖，還是在許多可用性測(cè)試的觀察結(jié)果中，用戶在填寫(xiě)網(wǎng)頁(yè)表單時(shí)視線主要集中在輸入框的左側(cè)。他們的視線幾乎不會(huì)落到輸入框的右側(cè)，甚至都不會(huì)瞟上一眼。

以此為基礎(chǔ)，我們?cè)诰W(wǎng)頁(yè)表單設(shè)計(jì)中有4種最常見(jiàn)的標(biāo)簽對(duì)齊方式：頂對(duì)齊標(biāo)簽、右對(duì)齊標(biāo)簽、左對(duì)齊標(biāo)簽、行內(nèi)標(biāo)簽。

另外還有混合對(duì)齊標(biāo)簽、內(nèi)聯(lián)標(biāo)簽、圖標(biāo)標(biāo)簽等，它們基本是在這4種形式上變化，不脫離本質(zhì)。

每一種對(duì)齊方式都有一定的優(yōu)點(diǎn)和局限性；因此在合適的場(chǎng)景下選擇合適的標(biāo)簽對(duì)齊樣式，可以提升用戶的輸入效率，下面我們來(lái)展開(kāi)說(shuō)說(shuō)：

1）頂對(duì)齊標(biāo)簽（Top aligned labels）

頂部對(duì)齊是標(biāo)簽在輸入域的上方，與輸入域進(jìn)行左對(duì)齊，這樣可以節(jié)省橫向空間的使用，標(biāo)簽和輸入框位置最為靠近，用戶在填寫(xiě)時(shí)也比較方便，移動(dòng)端產(chǎn)品的設(shè)計(jì)中下拉的交互比左右滑動(dòng)的交互更為便捷所以采用頂部標(biāo)簽較為常見(jiàn)。

從2006年7月起馬泰奧·彭佐進(jìn)行眼動(dòng)研究，結(jié)果表明，從標(biāo)簽移動(dòng)到輸入框，頂對(duì)其最短需要50毫秒，左對(duì)齊需要500毫秒，是頂對(duì)齊的10倍，右對(duì)齊是240毫秒。

我們通過(guò)眼動(dòng)數(shù)據(jù)可以看到，頂對(duì)齊是效率最高的表單填寫(xiě)樣式，因?yàn)檠矍蛑恍枰跇?biāo)簽和輸入框之間進(jìn)行上下單向運(yùn)動(dòng)。

優(yōu)點(diǎn)：

標(biāo)簽和輸入框位置最為靠近，表單填寫(xiě)時(shí)間最短；用戶視線固定，動(dòng)線一直向下具有清晰的完成路徑；節(jié)省大量橫向空間，另外與輸入框?qū)R視覺(jué)更舒適。

缺點(diǎn)：

占用額外的垂直空間，如果可提供使用的垂直屏幕空間較小，應(yīng)當(dāng)謹(jǐn)慎使用頂對(duì)齊標(biāo)簽，若表單選項(xiàng)較多的時(shí)候會(huì)增加表單長(zhǎng)度并使頁(yè)面滾動(dòng)。

適用于場(chǎng)景：

可用于以多種方式組合的相關(guān)輸入框；希望用戶快速填寫(xiě)表單并完成任務(wù)的情況；頁(yè)面空間縱向空間充足，標(biāo)簽長(zhǎng)度難以限定簡(jiǎn)化、拓展性要求較高的表單；更適合有國(guó)際化的需求比如說(shuō)法語(yǔ)、德語(yǔ)或荷蘭語(yǔ)比英語(yǔ)長(zhǎng)很多的語(yǔ)言；

當(dāng)垂直屏幕空間大，表單有組合需求時(shí)，頂部標(biāo)簽是不錯(cuò)的選擇，比如飛書(shū)的基本信息頁(yè)面：

2）右對(duì)齊標(biāo)簽（Align label right）

最為常見(jiàn)的表單標(biāo)簽，該標(biāo)簽形式中文字標(biāo)簽與輸入域的距離是固定的，有明確的視覺(jué)關(guān)聯(lián)。

馬泰奧·彭佐的眼動(dòng)研究發(fā)現(xiàn)，專家用戶和新手用戶掃視（眼睛運(yùn)動(dòng)）右對(duì)齊標(biāo)簽表單的標(biāo)簽和輸入框的平均時(shí)間分別在170毫秒和240毫秒，而填寫(xiě)完成時(shí)間比左對(duì)齊快2倍。

優(yōu)點(diǎn)：

標(biāo)簽和輸入框之間距離固定，有明確的關(guān)聯(lián)，有利于用戶填寫(xiě)，同時(shí)節(jié)約垂直空間；

缺點(diǎn)：

左邊標(biāo)簽參差不齊，視覺(jué)上不夠美觀，瀏覽標(biāo)簽造成一定障礙，降低了表單的可讀性，橫向占用空間大，不利于狹長(zhǎng)頁(yè)面布局，標(biāo)簽長(zhǎng)度和輸入框彈性小。

適用場(chǎng)景：

標(biāo)簽和輸入域的彈性長(zhǎng)度較小，比較適用于既要減少垂直空間，又要加快填寫(xiě)速度的業(yè)務(wù)場(chǎng)景，比如賬號(hào)的基本信息。且適合數(shù)據(jù)內(nèi)容多、邏輯關(guān)系簡(jiǎn)單、標(biāo)題字?jǐn)?shù)少的情況（如篩選條件）。

右對(duì)齊標(biāo)簽有利于用戶的填寫(xiě)，但是不利于用戶對(duì)標(biāo)簽信息的查看，如下圖，當(dāng)標(biāo)簽長(zhǎng)短不一時(shí)，左邊的標(biāo)簽就很難對(duì)齊：

3）左對(duì)齊標(biāo)簽（Align label right）

左對(duì)齊標(biāo)簽也是最常用的一種標(biāo)簽，采用文字左對(duì)齊的方式將標(biāo)簽文本放置在輸入域的左邊，這種結(jié)構(gòu)有利于用戶對(duì)標(biāo)簽整體的查看，從整體上對(duì)表單所需要填寫(xiě)的內(nèi)容更加清晰。

根據(jù)馬泰奧的研究，左對(duì)齊標(biāo)簽“典型掃視時(shí)間為500毫秒，時(shí)間很長(zhǎng)，說(shuō)明用戶經(jīng)歷著沉重的認(rèn)知壓力?！弊髮?duì)齊表單解析問(wèn)題時(shí)眼球定位次數(shù)最多，用戶一般情況下都能將左對(duì)齊布局中的標(biāo)簽和輸入框聯(lián)系起來(lái)，只是花費(fèi)時(shí)間較長(zhǎng)。

在頂、右、左三種方案中，左對(duì)齊表單填寫(xiě)速度最慢。

優(yōu)點(diǎn)：

標(biāo)簽開(kāi)頭閱讀視線對(duì)齊，符合用戶的閱讀模式，比較方便用戶瀏覽表單，也比較節(jié)約垂直空間；

缺點(diǎn)：

由于標(biāo)簽長(zhǎng)短不一，有些標(biāo)簽距離輸入框較遠(yuǎn)，視覺(jué)跳動(dòng)較大，使標(biāo)簽與其輸入框親密性降低導(dǎo)致用戶填寫(xiě)費(fèi)力，用戶存留時(shí)間較長(zhǎng)；

標(biāo)簽和輸入域的彈性長(zhǎng)度小，橫向占用空間較大，所以不適用于橫向空間狹小的表單頁(yè)面。

適用場(chǎng)景：

適合表單中存在較多的復(fù)雜敏感數(shù)據(jù)，需要用戶謹(jǐn)慎的對(duì)待表單的填寫(xiě)，特別是表單含有大量可選輸入框，類似“使用偏好”或者高級(jí)設(shè)置陌生數(shù)據(jù)時(shí)，就可以使用左對(duì)齊標(biāo)簽。

上圖可以看出，右對(duì)齊標(biāo)簽填寫(xiě)速度要比左對(duì)齊標(biāo)簽快一倍。左對(duì)齊標(biāo)簽中用戶眼球定位時(shí)間長(zhǎng)，需要反復(fù)建立標(biāo)簽和輸入框的聯(lián)系，但同時(shí)文字左對(duì)齊也讓標(biāo)簽側(cè)的瀏覽變得容易。反之，右對(duì)齊則與之相反。

需要注意：

左對(duì)齊受限于標(biāo)簽字?jǐn)?shù)的長(zhǎng)短，造成右邊的視線不能夠統(tǒng)一。與輸入域視覺(jué)間距大小不一。標(biāo)簽越短，與輸入域的間距越大。

根據(jù)菲茨定律，既起始位置離目標(biāo)位置距離越遠(yuǎn)，我們到達(dá)目標(biāo)位置所花費(fèi)的時(shí)間就越長(zhǎng)。反之，離目標(biāo)位置越近，我們所花費(fèi)的時(shí)間就越短。所以對(duì)于整個(gè)表單的瀏覽速度也會(huì)變得緩慢一些。

需要要注意的是，雖然速度是最慢的，但從辯證的角度來(lái)看，B端業(yè)務(wù)設(shè)計(jì)中，【緩慢完成率】并不總是一件壞事，如果表單數(shù)據(jù)復(fù)雜且安全性高，可以故意減緩用戶的填寫(xiě)速度，來(lái)確保填寫(xiě)的準(zhǔn)確性。

這是一種較為柔和的方式使用戶的讀取速度變慢，讓用戶認(rèn)真的閱讀，保證信息采集的準(zhǔn)確性。在一些注冊(cè)類、管理后臺(tái)類表單中較多使用。

當(dāng)你的產(chǎn)品業(yè)務(wù)數(shù)據(jù)信息比較敏感或很重要需要用戶仔細(xì)斟酌表單內(nèi)容，謹(jǐn)慎填寫(xiě)時(shí)，左對(duì)齊標(biāo)簽是不錯(cuò)的選擇。若表單內(nèi)容簡(jiǎn)單易理解，那么可以使用右對(duì)齊標(biāo)簽來(lái)提升效率。

如下圖小鵝通的組織架構(gòu)填寫(xiě)的部分：

4）內(nèi)聯(lián)標(biāo)簽（inline tag）

內(nèi)聯(lián)標(biāo)簽是將文本標(biāo)簽內(nèi)置于輸入域內(nèi)部顯示，原本顯示輸入提示的位置用來(lái)顯示輸入標(biāo)簽，在輸入前告知用戶輸入域輸入的數(shù)據(jù)內(nèi)容，輸入的時(shí)候標(biāo)簽消失。最常見(jiàn)于登錄注冊(cè)的場(chǎng)景。

優(yōu)點(diǎn)：

如果屏幕空間十分有限，行內(nèi)標(biāo)簽是最常使用的方法，同時(shí)節(jié)省了橫向和縱向的頁(yè)面空間；

缺點(diǎn)：

輸入的時(shí)候標(biāo)簽會(huì)消失，會(huì)讓用戶產(chǎn)生困惑，使用體驗(yàn)較差，而且拓展性也較差；

一般用戶記憶標(biāo)簽等信息使用的是大腦的短時(shí)記憶，一般不會(huì)刻意去記憶輸入標(biāo)簽，所以極易導(dǎo)致用戶忘記剛剛記住的標(biāo)簽而不知所措感到困惑；

適用場(chǎng)景：

某種通用的固定場(chǎng)景，例如登錄注冊(cè)等，或者表單錄入項(xiàng)較少時(shí)可以考慮使用，建議不超過(guò)3個(gè)輸入項(xiàng)；

比如UI中國(guó)，站酷等登錄的頁(yè)面。

注意：

人在短時(shí)間內(nèi)只能記住5～9個(gè)單位，即“7加減2”法則，這是大部分用戶的極限，但設(shè)計(jì)一般不會(huì)去挑戰(zhàn)極限，而是要思考，還有一部分用戶是遠(yuǎn)遠(yuǎn)達(dá)不到“7加減2”這個(gè)范疇，因此，在設(shè)計(jì)的時(shí)候，就需要降低用戶的記憶門(mén)檻，采用更加適用的“2加減1”原則，當(dāng)用戶需要輸入的字段多余三個(gè)的時(shí)候，就必須給表單留下標(biāo)簽，用來(lái)提示用戶。

行內(nèi)標(biāo)簽雖然可以大大節(jié)省橫向和縱向的空間，但當(dāng)提示信息消失的缺點(diǎn)也很明顯，所以關(guān)于內(nèi)聯(lián)標(biāo)簽升級(jí)出了兩種類型：

（1）浮動(dòng)標(biāo)簽

浮動(dòng)標(biāo)簽也是內(nèi)聯(lián)標(biāo)簽的一種演化形式，標(biāo)簽在輸入前位于輸入?yún)^(qū)類似占位符，在用戶輸入數(shù)據(jù)時(shí)，內(nèi)部標(biāo)簽（輸入提示信息）會(huì)發(fā)生位移和大小的變換，浮動(dòng)到輸入域的上面。

優(yōu)點(diǎn)：

除了具備內(nèi)聯(lián)標(biāo)簽的優(yōu)點(diǎn)節(jié)省水平和垂直的空間外，還無(wú)需用戶對(duì)輸入標(biāo)簽進(jìn)行記憶，保障了用戶錄入信息的準(zhǔn)確性。

缺點(diǎn)：

需要一定的開(kāi)發(fā)成本。

適用場(chǎng)景：

除了適用與內(nèi)聯(lián)標(biāo)簽的應(yīng)用場(chǎng)景外，還適用于一些具有一定復(fù)雜度表單，輸入項(xiàng)較少的簡(jiǎn)易表單；

這種方式比較常見(jiàn)于登錄注冊(cè)的場(chǎng)景中，例如下圖花瓣網(wǎng)就是采用該形式。

（2）圖標(biāo)標(biāo)簽

圖標(biāo)標(biāo)簽也是內(nèi)聯(lián)標(biāo)簽的一種演化形式，采用圖形圖像的方法來(lái)替代內(nèi)聯(lián)標(biāo)簽中的文本標(biāo)簽，以此來(lái)提示輸入域中需要填寫(xiě)的內(nèi)容，如注冊(cè)登陸等表單。

優(yōu)點(diǎn)：

同時(shí)能夠節(jié)省水平和垂直的頁(yè)面空間，標(biāo)簽設(shè)計(jì)成圖標(biāo)，使表單更靈活和簡(jiǎn)潔。

缺點(diǎn)：

抽象的圖標(biāo)標(biāo)簽，增加認(rèn)知負(fù)擔(dān)和記憶成本。

適用場(chǎng)景：

錄入項(xiàng)信息區(qū)分較大，不易混淆，能用圖形輕松識(shí)別內(nèi)容，或某些固定的場(chǎng)景或業(yè)務(wù)模式以及不超過(guò)3個(gè)錄入項(xiàng)的簡(jiǎn)易表單。

5）標(biāo)簽對(duì)齊總結(jié)

關(guān)于表單對(duì)齊方式這個(gè)問(wèn)題是在設(shè)計(jì)師發(fā)問(wèn)頻率較高的一個(gè)問(wèn)題。其實(shí)，不論是哪種方式都有相對(duì)的利弊，需要根據(jù)實(shí)際業(yè)務(wù)場(chǎng)景提供不同的解決方案。當(dāng)然，為了保證設(shè)計(jì)語(yǔ)言的一致性，在同一個(gè)表單下選擇使用一種便好。

根據(jù)馬泰奧·彭佐的對(duì)齊方式研究出的時(shí)間表總結(jié)：?jiǎn)螐男式嵌瓤?，頂?duì)齊>右對(duì)齊>左對(duì)齊，根據(jù)不同的業(yè)務(wù)場(chǎng)景，效率并不是唯一的考慮指標(biāo)。

基于以上，我總結(jié)了一個(gè)對(duì)比表：

基于上表，得到以下幾點(diǎn)建議：

如果你希望用戶放慢速度，仔細(xì)思考表單中每個(gè)表單項(xiàng)，左對(duì)齊標(biāo)簽是個(gè)好選擇，特別是含有大量可選輸入框或高級(jí)設(shè)置的陌生數(shù)據(jù)時(shí)；

而頂對(duì)齊標(biāo)簽在一些國(guó)際化產(chǎn)品的表單設(shè)計(jì)時(shí)，會(huì)有更好的延展性；

至于，右對(duì)齊標(biāo)簽雖然與表單域聯(lián)系緊密，便于用戶填寫(xiě)，但是要考慮好標(biāo)簽的長(zhǎng)短不齊如何解決。能否精簡(jiǎn)標(biāo)簽內(nèi)容，以及確定好表單與界面的邊距。

6）pc端和移動(dòng)端，選擇表單方式

（1）pc端

在網(wǎng)頁(yè)端我們大多看到的都是左右結(jié)構(gòu)（右對(duì)齊和左對(duì)齊），這是因?yàn)橛锌臻g占比的原因。

在 pc 端，橫向空間很大，需要考慮到協(xié)調(diào)的關(guān)系，如果采用上下結(jié)構(gòu)，在內(nèi)容過(guò)多的情況下，就會(huì)出現(xiàn)重心偏左的視覺(jué)效果。并且，視線距離屏幕較遠(yuǎn)，視覺(jué)聚焦面積更大，因此視覺(jué)路徑較長(zhǎng)的這一點(diǎn)就被中和掉了。

（2）移動(dòng)端

移動(dòng)端的限制是屏幕太小，一個(gè)橫屏展示不開(kāi)，特別是在標(biāo)簽名字很長(zhǎng)的時(shí)候，弊端更加明顯，當(dāng)然缺點(diǎn)除了識(shí)別度會(huì)降低，視覺(jué)路徑增長(zhǎng)之外，縱向空間占比也會(huì)增加，本身一屏就能展示完，現(xiàn)在需要兩屏甚至更多。所以在移動(dòng)端更多的是使用上下結(jié)構(gòu)。

2. 必填與可選字段的標(biāo)記如何選擇？

1）必填是否需要標(biāo)記？

如果表單中的大多數(shù)字段或全部都是必填的，我們是否仍然應(yīng)該標(biāo)記它們？

一般情況下，設(shè)計(jì)師可能會(huì)覺(jué)得每個(gè)必填字段都有一個(gè)標(biāo)記是重復(fù)、不好看，造成頁(yè)面視覺(jué)噪點(diǎn)的增多，甚至可能看起來(lái)很擾亂（有認(rèn)知負(fù)擔(dān)），確實(shí)有些情況下，紅色作為一種有特殊含義的顏色，會(huì)引起用戶誤解。

那么我們來(lái)看看，標(biāo)記與不標(biāo)記的對(duì)比圖：

如圖所示，答案是需要標(biāo)記的，我們來(lái)聊聊，為什么：

我們通常會(huì)采取以下一種或兩種策略：

1. 在表單頂部顯示說(shuō)明，說(shuō)明中除非另有解釋，否則所有字段都是必填；
2. 只標(biāo)記可選字段，因?yàn)樗鼈兺ǔ］^少；
3. 在某些特殊情況下，什么也不標(biāo)記，相信用戶按照順序填寫(xiě)字段；如果不知道，那么只需要點(diǎn)擊提交報(bào)錯(cuò)即可。

這些方法都是使表單交互體驗(yàn)不好的設(shè)計(jì)問(wèn)題，為什么呢？

1. 用戶一般不喜歡閱讀表單頂部說(shuō)明，甚至?xí)雎缘舯韱雾敳康拇蠖挝淖终f(shuō)明。
2. 即使用戶閱讀了頂部的說(shuō)明，也可能忘記。特別是當(dāng)表單很長(zhǎng)或填寫(xiě)表單被打斷時(shí)（這種情況在移動(dòng)端很常見(jiàn)）。即使用戶記得，但這占用了工作記憶，增加了認(rèn)知負(fù)荷，讓用戶完成任務(wù)更難了。
3. 用戶必須掃描表單以確定是否為必填字段。所以，無(wú)論是否在表單頂部包含說(shuō)明，用戶都可能會(huì)忽略或忘記。他們會(huì)掃視表單，找到一個(gè)標(biāo)記為必填或可選的標(biāo)識(shí)。
4. 如果作必填標(biāo)記，用戶可能會(huì)做出假設(shè)。“這個(gè)沒(méi)有說(shuō)必須要填，先空著吧”。即使用戶沒(méi)有留空，也不得不暫停來(lái)思考一個(gè)字段是否需要填寫(xiě)，減慢交互速度并使過(guò)程看起來(lái)更長(zhǎng)、更乏味。

所以，想要解決以上問(wèn)題很簡(jiǎn)單：標(biāo)記所有必填字段！

盡量明確和清晰展示每個(gè)必填字段，并標(biāo)記它。當(dāng)然，就像有些設(shè)計(jì)師所說(shuō)：界面出現(xiàn)大量必填標(biāo)識(shí)（紅色星號(hào)）確實(shí)會(huì)增加視覺(jué)噪聲。甚至重復(fù)的星號(hào)會(huì)帶來(lái)一些認(rèn)知恐慌。但相比之下，兩害取其輕，這些負(fù)面因素是輕微的。

2）一般是如何標(biāo)記必填字段？

通常包含至少有兩種方式：

（1）星號(hào)（紅色）

星號(hào)在網(wǎng)頁(yè)上已經(jīng)很常見(jiàn)，用戶熟悉其含義。

優(yōu)點(diǎn)：

不占用太多空間，也看起來(lái)與標(biāo)簽文字足夠不同。當(dāng)然也可以使用其他視覺(jué)標(biāo)記形式！但是建議最好遵循市面上常見(jiàn)的形式（雅各布定律），這樣更符合用戶認(rèn)知。

星號(hào)應(yīng)該在字段標(biāo)簽之前還是在字段標(biāo)簽之后？

標(biāo)識(shí)在標(biāo)簽之前能指引用戶迅速瀏覽界面，用戶只需掃視標(biāo)簽的最左邊字符，就能輕松定位必填哪些字段，效率上會(huì)大大提高。

如果在標(biāo)簽后面，由于輸入框形式、長(zhǎng)度各不相同，標(biāo)識(shí)和輸入框?qū)R會(huì)導(dǎo)致難以瀏覽和判斷。

所以最佳的答案是在標(biāo)簽之前。

（2）“必填”提示

當(dāng)表單中的大多數(shù)字段或全部都是必填的，為避免過(guò)多“*”造成的的視覺(jué)噪點(diǎn)，我們可以利用標(biāo)簽或者占位符來(lái)提示用戶哪些內(nèi)容項(xiàng)是必填的，哪些是非必填的。這種處理方式可以減輕大量必填標(biāo)識(shí)（紅色星號(hào)）造成的視覺(jué)噪聲。

（3）為什么登錄表單沒(méi)有標(biāo)記必填？

一般情況登錄表單很短，主要由兩個(gè)字段組成：用戶名和密碼，如果使用星號(hào)“*”，標(biāo)記這些字段的成本很低，并不會(huì)出錯(cuò)。但是，絕大多數(shù)用戶都使用過(guò)很多登錄表單，用戶心智早已建立起來(lái)的這兩個(gè)字段總是必填的。所以，在登錄表單中，可以省略這種形式。

需要注意，在注冊(cè)表中不標(biāo)記必填字段是危險(xiǎn)的。注冊(cè)表單因產(chǎn)品而異，不僅僅包含用戶名和密碼不同公司在創(chuàng)建帳戶時(shí)需要不同類型的信息。所以需要標(biāo)記所有必填字段（包括用戶名和密碼）。

二、表單域的設(shè)計(jì)疑問(wèn)指南

1. 表單域有必要提供默認(rèn)值嗎？

答案是有必要的提供默認(rèn)值的！

我們可以通過(guò)提供合理的默認(rèn)值，有效節(jié)省用戶提填寫(xiě)表單的時(shí)間，進(jìn)而提升表單提交率。在 Web 表單中也可以利用智能默認(rèn)減少不必要的選擇次數(shù)或輸入，加速表單完成過(guò)程。

所以，在表單域中預(yù)先為用戶填寫(xiě)你認(rèn)為他們想要的合計(jì)輸入值是有必要的。

當(dāng)然有可能會(huì)存在疑惑：如果默認(rèn)值不是用戶想要的，誤導(dǎo)用戶怎么辦？

1. 在設(shè)計(jì)有默認(rèn)值的表單域時(shí)，需要思考默認(rèn)值是否是大多數(shù)用戶可以接受的答案，如果不確信可以先去做一下用戶調(diào)研，了解用戶的心聲。
2. 就算默認(rèn)值真的不是用戶想要的，至少也為他提供了一個(gè)示例來(lái)告訴用戶答案應(yīng)該是什么樣子的。
3. 但是，并不代表所有的表單域都要給出默認(rèn)值。只有當(dāng)你有理由確信絕大部分用戶，在絕大多數(shù)情況下，不會(huì)修改這個(gè)取值時(shí)才提供默認(rèn)值——否則，這將會(huì)給用戶帶來(lái)額外的工作！

2. 輸入框的寬度如何設(shè)定

這個(gè)問(wèn)題是很非常常見(jiàn)且最容易被忽視的但實(shí)則舉重若輕的問(wèn)題。我自己在早期的時(shí)候就犯過(guò)，比如：要求輸入框長(zhǎng)度一致，一個(gè)系統(tǒng)內(nèi)部輸入框的長(zhǎng)度沒(méi)有規(guī)則等等問(wèn)題，導(dǎo)致設(shè)計(jì)和前端都沒(méi)有規(guī)律可找，大大降低了工作效率。

后來(lái)參考了Ant 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é)。

Ant Design 4.0系列文章總結(jié)到「表單寬度」的處理方式核心旨在解決兩個(gè)問(wèn)題：

1. 暗示填寫(xiě)內(nèi)容長(zhǎng)度；
2. 表單項(xiàng)布局排列效果；

唐納德·諾曼的著作《設(shè)計(jì)心理學(xué)》中詳細(xì)講解過(guò)心理暗示方面的內(nèi)容。而寬度的變化就是一種有效暗示。

文章認(rèn)為我們通過(guò)設(shè)置合理的默認(rèn)寬度尺寸和描述關(guān)系，就可以讓設(shè)計(jì)師們跳過(guò)部分繁瑣磨人的細(xì)節(jié)思考，快速搭建表單寬度合理且舒適的頁(yè)面。下面我們來(lái)詳細(xì)的聊一聊：

1）錯(cuò)落有致優(yōu)于強(qiáng)制的整齊劃一

很多設(shè)計(jì)師在面對(duì)表單設(shè)計(jì)的時(shí)候，都會(huì)潛意識(shí)地將或要求追求所謂視覺(jué)上的整齊劃一，強(qiáng)行將表單的寬度定位統(tǒng)一的寬度，然而這卻犯了形式主義錯(cuò)誤，沒(méi)有深入思考表單應(yīng)用規(guī)范和用戶填寫(xiě)的感受，實(shí)際上有秩序的“不一致”也不一定比強(qiáng)制性的“整齊劃一”的視覺(jué)感差，甚至更好。

每一類型的表單的輸入域都會(huì)因其錄入數(shù)據(jù)的類型而存在對(duì)應(yīng)的寬度，輸入域的寬度應(yīng)該匹配和暗示其填寫(xiě)的內(nèi)容；

合理對(duì)應(yīng)的輸入寬度不僅能夠給用戶的輸入量帶來(lái)心理暗示和預(yù)判，也提升整個(gè)表單數(shù)據(jù)錄入過(guò)程中的掌控感和舒適度。

通過(guò)下圖的對(duì)比，我們可以明顯的看到，錯(cuò)落有致的排列方式更加舒適，并且有更強(qiáng)的暗示作用。

既然要錯(cuò)落有致，那么要如何做呢？

表單設(shè)計(jì)中，對(duì)于單選框、復(fù)選框等控件，很明確必須跟隨內(nèi)容自適應(yīng)處理。但對(duì)于輸入框、選擇框等組件你是否也會(huì)產(chǎn)生困惑，是定寬處理還是跟隨內(nèi)容更好。

實(shí)際業(yè)務(wù)中，大部分輸入框所需填寫(xiě)內(nèi)容都存在理想長(zhǎng)度，輸入框的寬度暗示填寫(xiě)內(nèi)容的長(zhǎng)度，合理的寬度幫助減少用戶的焦慮，給用戶帶來(lái)安全感。在單項(xiàng)排布時(shí)也要盡量考慮用戶的觀感，通過(guò)設(shè)置合理的默認(rèn)寬度尺寸，讓設(shè)計(jì)師快速搭建出觀感舒適又給用戶降低焦慮的頁(yè)面。

反之，如果輸入框不受限于暗示，則應(yīng)保持長(zhǎng)度一致。

這里需要特別注意：

保證暗示效果的同時(shí)，不要設(shè)定太多的寬度，反而會(huì)讓表單顯得凌亂；太少又會(huì)讓表單看起來(lái)都像四四方方的盒子。最佳方法是找到適合產(chǎn)品的最佳模度值和數(shù)量。

2）模度值

上文提到錯(cuò)落有致，那么如何錯(cuò)落有致呢？有什么規(guī)則嗎？

設(shè)定模度值的優(yōu)勢(shì)：

表單的外觀視覺(jué)雖呈現(xiàn)錯(cuò)落有致，但在內(nèi)在邏輯的約束下做到了“有秩序的不一致”。不僅解決了暗示用戶輸入量多少的問(wèn)題，更是避免了設(shè)計(jì)師在面對(duì)表單時(shí)不必要的主觀和感性，表單設(shè)計(jì)由規(guī)律可循，同時(shí)開(kāi)發(fā)人員也更容易地做到對(duì)設(shè)計(jì)稿的精準(zhǔn)還原，也可以提升工作效率。

梳理產(chǎn)品中常見(jiàn)的表單類型

根據(jù)你所設(shè)計(jì)產(chǎn)品的具體業(yè)務(wù)情況，梳理出常用的表單類型，根據(jù)這些表單類型的的長(zhǎng)短來(lái)進(jìn)行具體輸入框尺寸的制定；

需要注意：

B端項(xiàng)目中表單的應(yīng)用場(chǎng)景十分豐富且復(fù)雜，針對(duì)每一種場(chǎng)景去定制一個(gè)輸入框尺寸是不現(xiàn)實(shí)的，在頁(yè)面實(shí)際設(shè)計(jì)中就會(huì)顯得頁(yè)面很凌亂。所以，我們特別要解決的問(wèn)題就是如何讓輸入框在單個(gè)狀態(tài)與組合狀態(tài)下都盡量保持較好的對(duì)齊狀態(tài)，同時(shí)輸入框的尺寸還有規(guī)律可循。

3）設(shè)定表單模度值

結(jié)合Ant_Design的解決方案，Design設(shè)定104px 為原子級(jí)寬度尺碼 XS，通過(guò)倍數(shù)+間距疊加的方式（此處計(jì)算間距的原因是為了兼顧“組合輸入框”和“單個(gè)輸入框”對(duì)齊問(wèn)題）從小到大去依次推導(dǎo)出更大的四種寬度來(lái)擬合前面劃分的尺碼。最終得到如下5種寬度尺碼和對(duì)齊關(guān)系。

如：基準(zhǔn)輸入寬度XS = 104px，以其倍數(shù) (n) 加上 (n-1) 倍的間距 (8px) 為規(guī)則，分為5種不同尺寸 (XS、S、M、L、XL)。那么我們就得到了S: 104px*2+8px=216px; M: 104px*3+16px=328px……五種尺寸（如下圖）。

當(dāng)然，我們?cè)谠O(shè)計(jì)時(shí)，最小原子的寬度不一定設(shè)置為104，也可根據(jù)業(yè)務(wù)情況將最小原子X(jué)S設(shè)置為可容納6個(gè)中文漢字，然后在通過(guò)如下規(guī)則進(jìn)行換算。

Ant design表單設(shè)計(jì)研究結(jié)論建議的5種高頻的寬度需求區(qū)間，以尺碼類比分別是：XS – 80~160px、S – 160~280、M – 280~360px、L – 360px~480px、XL – 480~560px。

反向驗(yàn)證模度值

接下來(lái)可以通過(guò)反向驗(yàn)證第一步我們的羅列出的常用信息內(nèi)容，是不是都能找到對(duì)應(yīng)的尺寸適配，如果不行的話就調(diào)整我們最小輸入框的尺寸，使大部分的填寫(xiě)內(nèi)容都能有合適的尺寸。

需要注意，建議在制作設(shè)計(jì)規(guī)范的時(shí)候，把每一種尺寸的使用范圍情況做詳細(xì)的說(shuō)明，如下圖。

3. 輸入內(nèi)容需不需要快捷清除圖標(biāo)？

我在早期設(shè)計(jì)表單的時(shí)候經(jīng)常和產(chǎn)品經(jīng)理爭(zhēng)論這個(gè)問(wèn)題，產(chǎn)品經(jīng)理經(jīng)?？紤]不到這個(gè)問(wèn)題，當(dāng)設(shè)計(jì)師提出來(lái)時(shí)，產(chǎn)品又覺(jué)得沒(méi)有必要。

我們?cè)谛薷谋韱屋斎胗驎r(shí)，已填寫(xiě)內(nèi)容時(shí)是否需要快捷清除按鈕是一個(gè)關(guān)于效率的問(wèn)題，需要考慮的不僅僅是逐個(gè)清除和一次性快捷清除的對(duì)比，還要考慮清除后重新輸入數(shù)據(jù)的成本。

• 如果輸入成本低的情況，可以提供一鍵清空的快捷功能按鈕。比如：密碼等短數(shù)據(jù)在輸入錯(cuò)誤時(shí)一鍵清除后，再次輸入也會(huì)很快就能完成，此時(shí)重新輸入的成本不高，可以為提高效率提供一鍵清除錯(cuò)誤信息的快捷功能；
• 如果輸入成本高時(shí)則不建議一鍵清空。比如：文本框等長(zhǎng)文本輸入的時(shí)候，在精心編輯一段話，并且花費(fèi)不少時(shí)間加以潤(rùn)色后，清除后重新輸入的成本就會(huì)高很多。此時(shí)則不建議提供一鍵清除的快捷功能，放置誤操作。

以上便是個(gè)人對(duì)常見(jiàn)的表單糾結(jié)點(diǎn)的經(jīng)驗(yàn)總結(jié)上篇，下一篇我們將繼續(xù)聊后面的幾個(gè)部分，包含：3步設(shè)置表單的寬度、按鈕的最佳位置、4個(gè)策略優(yōu)化表單設(shè)計(jì)、提示的最佳位置等等。我們下一篇見(jiàn)！

參考文獻(xiàn)：

1、來(lái)源鏈接：https://ant.design/docs/spec/research-form-cn（來(lái)源：Ant Design）

2、表單設(shè)計(jì)需要注意：http://t.cn/EhMmZPf

3、《Web表單設(shè)計(jì)·創(chuàng)建高可用性的網(wǎng)頁(yè)表單》中，作者（卡羅琳·賈雷特）

4、B端表單設(shè)計(jì)優(yōu)化http://www.theventurebank.com/ucd/5327215.html

5、《Type & Layout：How Typography and Design Can Get Your Message Across or Getin the Way》