中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

缺點(diǎn)：

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

適用于場景：

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

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

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

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

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

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

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

缺點(diǎn)：

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

適用場景：

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

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

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

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

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

在頂、右、左三種方案中，左對齊表單填寫速度最慢。

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

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

缺點(diǎn)：

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

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

適用場景：

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

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

需要注意：

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

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

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

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

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

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

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

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

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

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

缺點(diǎn)：

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

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

適用場景：

某種通用的固定場景，例如登錄注冊等，或者表單錄入項較少時可以考慮使用，建議不超過3個輸入項；

比如UI中國，站酷等登錄的頁面。

注意：

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

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

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

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

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

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

缺點(diǎn)：

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

適用場景：

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

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

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

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

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

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

缺點(diǎn)：

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

適用場景：

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

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

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

根據(jù)馬泰奧·彭佐的對齊方式研究出的時間表總結(jié)：單從效率角度看，頂對齊>右對齊>左對齊，根據(jù)不同的業(yè)務(wù)場景，效率并不是唯一的考慮指標(biāo)。

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

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

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

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

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

6）pc端和移動端，選擇表單方式

（1）pc端

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

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

（2）移動端

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（1）星號（紅色）

星號在網(wǎng)頁上已經(jīng)很常見，用戶熟悉其含義。

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

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

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

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

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

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

（2）“必填”提示

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

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

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

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

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

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

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

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

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

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

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

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

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

后來參考了Ant Design 4.0 系列文章《整齊劃一？不如錯落有致》，如下圖：錯落有致的排版表現(xiàn)似乎比整齊劃一的左圖更舒適，因?yàn)樵谝曈X上我們更容易將右圖的空間和內(nèi)容視為一個和諧的整體。

但左圖過度的對齊導(dǎo)致暗示隱性的截斷，我們慣性視覺會產(chǎn)生表單字段右側(cè)空間缺了一大塊的錯覺。

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

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

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

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

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

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

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

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

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

既然要錯落有致，那么要如何做呢？

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

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

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

這里需要特別注意：

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

2）模度值

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

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

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

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

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

需要注意：

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

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

結(jié)合Ant_Design的解決方案，Design設(shè)定104px 為原子級寬度尺碼 XS，通過倍數(shù)+間距疊加的方式（此處計算間距的原因是為了兼顧“組合輸入框”和“單個輸入框”對齊問題）從小到大去依次推導(dǎo)出更大的四種寬度來擬合前面劃分的尺碼。最終得到如下5種寬度尺碼和對齊關(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)然，我們在設(shè)計時，最小原子的寬度不一定設(shè)置為104，也可根據(jù)業(yè)務(wù)情況將最小原子XS設(shè)置為可容納6個中文漢字，然后在通過如下規(guī)則進(jìn)行換算。

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

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

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

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

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

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

我們在修改表單輸入域時，已填寫內(nèi)容時是否需要快捷清除按鈕是一個關(guān)于效率的問題，需要考慮的不僅僅是逐個清除和一次性快捷清除的對比，還要考慮清除后重新輸入數(shù)據(jù)的成本。

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

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

參考文獻(xiàn)：

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

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

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

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

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