起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識 15000字，詳解10個常見的表單設計疑問?。ㄉ希?/h2>
不知你是否遇到過這種情況：分明對表單設計已經(jīng)有了一定了解與熟悉，但在實際操作中卻又不禁陷入困擾和糾結(jié)?；诖耍疚淖髡呖偨Y(jié)了表格設計中遇到的常見困擾點，在本篇文章中講解了標簽的疑問設計指南與表單域的設計疑問指南，希望能為你解決困惑。
有一些朋友私信跟我說，已經(jīng)很了解表單的基礎知識了，但是在設計的時候，還是總是存在糾結(jié)困擾的地方。
我感同身受，做了幾年的表單設計以后，我對各類表單及設計點很清晰，但是當我開始設計新產(chǎn)品的表單的時候，還是經(jīng)常陷入困擾、糾結(jié)，經(jīng)常為了一兩個很小的設計點方案和產(chǎn)品經(jīng)理爭論半天；每次堅持自己想法的時候，甚至不能很清晰且有理有據(jù)的說明，這讓我一度感到很焦慮。為此我查閱大量資料，文章，就是為了解決這種說不出為什么的尷尬無力感。
我總結(jié)出來，一些我在設計中常遇到的困擾及糾結(jié)的設計點，分享給大家。
一、標簽的設計疑問指南
1. 哪種標簽對齊方式更好？
這個問題基本是在新建一個產(chǎn)品的時候才會出現(xiàn)，如果你做的產(chǎn)品已有明確的規(guī)范和使用場景，那么統(tǒng)一表單標簽對齊方式即可。
但是，如果你需要重新定義一個新的表單規(guī)范時，那么你就需要考慮哪種標簽對齊方式更好，怎樣區(qū)分使用場景！
很多的前輩們通過科學實驗發(fā)現(xiàn)，無論是在眼動儀的熱圖，還是在許多可用性測試的觀察結(jié)果中，用戶在填寫網(wǎng)頁表單時視線主要集中在輸入框的左側(cè)。他們的視線幾乎不會落到輸入框的右側(cè)，甚至都不會瞟上一眼。
以此為基礎，我們在網(wǎng)頁表單設計中有4種最常見的標簽對齊方式：頂對齊標簽、右對齊標簽、左對齊標簽、行內(nèi)標簽。
另外還有混合對齊標簽、內(nèi)聯(lián)標簽、圖標標簽等，它們基本是在這4種形式上變化，不脫離本質(zhì)。
每一種對齊方式都有一定的優(yōu)點和局限性；因此在合適的場景下選擇合適的標簽對齊樣式，可以提升用戶的輸入效率，下面我們來展開說說：
1）頂對齊標簽（Top aligned labels）
頂部對齊是標簽在輸入域的上方，與輸入域進行左對齊，這樣可以節(jié)省橫向空間的使用，標簽和輸入框位置最為靠近，用戶在填寫時也比較方便，移動端產(chǎn)品的設計中下拉的交互比左右滑動的交互更為便捷所以采用頂部標簽較為常見。
從2006年7月起馬泰奧·彭佐進行眼動研究，結(jié)果表明，從標簽移動到輸入框，頂對其最短需要50毫秒，左對齊需要500毫秒，是頂對齊的10倍，右對齊是240毫秒。
我們通過眼動數(shù)據(jù)可以看到，頂對齊是效率最高的表單填寫樣式，因為眼球只需要在標簽和輸入框之間進行上下單向運動。
優(yōu)點：
標簽和輸入框位置最為靠近，表單填寫時間最短；用戶視線固定，動線一直向下具有清晰的完成路徑；節(jié)省大量橫向空間，另外與輸入框?qū)R視覺更舒適。
缺點：
占用額外的垂直空間，如果可提供使用的垂直屏幕空間較小，應當謹慎使用頂對齊標簽，若表單選項較多的時候會增加表單長度并使頁面滾動。
適用于場景：
可用于以多種方式組合的相關輸入框；希望用戶快速填寫表單并完成任務的情況；頁面空間縱向空間充足，標簽長度難以限定簡化、拓展性要求較高的表單；更適合有國際化的需求比如說法語、德語或荷蘭語比英語長很多的語言；
當垂直屏幕空間大，表單有組合需求時，頂部標簽是不錯的選擇，比如飛書的基本信息頁面：
2）右對齊標簽（Align label right）
最為常見的表單標簽，該標簽形式中文字標簽與輸入域的距離是固定的，有明確的視覺關聯(lián)。
馬泰奧·彭佐的眼動研究發(fā)現(xiàn)，專家用戶和新手用戶掃視（眼睛運動）右對齊標簽表單的標簽和輸入框的平均時間分別在170毫秒和240毫秒，而填寫完成時間比左對齊快2倍。
優(yōu)點：
標簽和輸入框之間距離固定，有明確的關聯(lián)，有利于用戶填寫，同時節(jié)約垂直空間；
缺點：
左邊標簽參差不齊，視覺上不夠美觀，瀏覽標簽造成一定障礙，降低了表單的可讀性，橫向占用空間大，不利于狹長頁面布局，標簽長度和輸入框彈性小。
適用場景：
標簽和輸入域的彈性長度較小，比較適用于既要減少垂直空間，又要加快填寫速度的業(yè)務場景，比如賬號的基本信息。且適合數(shù)據(jù)內(nèi)容多、邏輯關系簡單、標題字數(shù)少的情況（如篩選條件）。
右對齊標簽有利于用戶的填寫，但是不利于用戶對標簽信息的查看，如下圖，當標簽長短不一時，左邊的標簽就很難對齊：
3）左對齊標簽（Align label right）
左對齊標簽也是最常用的一種標簽，采用文字左對齊的方式將標簽文本放置在輸入域的左邊，這種結(jié)構(gòu)有利于用戶對標簽整體的查看，從整體上對表單所需要填寫的內(nèi)容更加清晰。
根據(jù)馬泰奧的研究，左對齊標簽“典型掃視時間為500毫秒，時間很長，說明用戶經(jīng)歷著沉重的認知壓力。”左對齊表單解析問題時眼球定位次數(shù)最多，用戶一般情況下都能將左對齊布局中的標簽和輸入框聯(lián)系起來，只是花費時間較長。
在頂、右、左三種方案中，左對齊表單填寫速度最慢。
優(yōu)點：
標簽開頭閱讀視線對齊，符合用戶的閱讀模式，比較方便用戶瀏覽表單，也比較節(jié)約垂直空間；
缺點：
由于標簽長短不一，有些標簽距離輸入框較遠，視覺跳動較大，使標簽與其輸入框親密性降低導致用戶填寫費力，用戶存留時間較長；
標簽和輸入域的彈性長度小，橫向占用空間較大，所以不適用于橫向空間狹小的表單頁面。
適用場景：
適合表單中存在較多的復雜敏感數(shù)據(jù)，需要用戶謹慎的對待表單的填寫，特別是表單含有大量可選輸入框，類似“使用偏好”或者高級設置陌生數(shù)據(jù)時，就可以使用左對齊標簽。
上圖可以看出，右對齊標簽填寫速度要比左對齊標簽快一倍。左對齊標簽中用戶眼球定位時間長，需要反復建立標簽和輸入框的聯(lián)系，但同時文字左對齊也讓標簽側(cè)的瀏覽變得容易。反之，右對齊則與之相反。
需要注意：
左對齊受限于標簽字數(shù)的長短，造成右邊的視線不能夠統(tǒng)一。與輸入域視覺間距大小不一。標簽越短，與輸入域的間距越大。
根據(jù)菲茨定律，既起始位置離目標位置距離越遠，我們到達目標位置所花費的時間就越長。反之，離目標位置越近，我們所花費的時間就越短。所以對于整個表單的瀏覽速度也會變得緩慢一些。
需要要注意的是，雖然速度是最慢的，但從辯證的角度來看，B端業(yè)務設計中，【緩慢完成率】并不總是一件壞事，如果表單數(shù)據(jù)復雜且安全性高，可以故意減緩用戶的填寫速度，來確保填寫的準確性。
這是一種較為柔和的方式使用戶的讀取速度變慢，讓用戶認真的閱讀，保證信息采集的準確性。在一些注冊類、管理后臺類表單中較多使用。
當你的產(chǎn)品業(yè)務數(shù)據(jù)信息比較敏感或很重要需要用戶仔細斟酌表單內(nèi)容，謹慎填寫時，左對齊標簽是不錯的選擇。若表單內(nèi)容簡單易理解，那么可以使用右對齊標簽來提升效率。
如下圖小鵝通的組織架構(gòu)填寫的部分：
4）內(nèi)聯(lián)標簽（inline tag）
內(nèi)聯(lián)標簽是將文本標簽內(nèi)置于輸入域內(nèi)部顯示，原本顯示輸入提示的位置用來顯示輸入標簽，在輸入前告知用戶輸入域輸入的數(shù)據(jù)內(nèi)容，輸入的時候標簽消失。最常見于登錄注冊的場景。
優(yōu)點：
如果屏幕空間十分有限，行內(nèi)標簽是最常使用的方法，同時節(jié)省了橫向和縱向的頁面空間；
缺點：
輸入的時候標簽會消失，會讓用戶產(chǎn)生困惑，使用體驗較差，而且拓展性也較差；
一般用戶記憶標簽等信息使用的是大腦的短時記憶，一般不會刻意去記憶輸入標簽，所以極易導致用戶忘記剛剛記住的標簽而不知所措感到困惑；
適用場景：
某種通用的固定場景，例如登錄注冊等，或者表單錄入項較少時可以考慮使用，建議不超過3個輸入項；
比如UI中國，站酷等登錄的頁面。
注意：
人在短時間內(nèi)只能記住5～9個單位，即“7加減2”法則，這是大部分用戶的極限，但設計一般不會去挑戰(zhàn)極限，而是要思考，還有一部分用戶是遠遠達不到“7加減2”這個范疇，因此，在設計的時候，就需要降低用戶的記憶門檻，采用更加適用的“2加減1”原則，當用戶需要輸入的字段多余三個的時候，就必須給表單留下標簽，用來提示用戶。
行內(nèi)標簽雖然可以大大節(jié)省橫向和縱向的空間，但當提示信息消失的缺點也很明顯，所以關于內(nèi)聯(lián)標簽升級出了兩種類型：
（1）浮動標簽
浮動標簽也是內(nèi)聯(lián)標簽的一種演化形式，標簽在輸入前位于輸入?yún)^(qū)類似占位符，在用戶輸入數(shù)據(jù)時，內(nèi)部標簽（輸入提示信息）會發(fā)生位移和大小的變換，浮動到輸入域的上面。
優(yōu)點：
除了具備內(nèi)聯(lián)標簽的優(yōu)點節(jié)省水平和垂直的空間外，還無需用戶對輸入標簽進行記憶，保障了用戶錄入信息的準確性。
缺點：
需要一定的開發(fā)成本。
適用場景：
除了適用與內(nèi)聯(lián)標簽的應用場景外，還適用于一些具有一定復雜度表單，輸入項較少的簡易表單；
這種方式比較常見于登錄注冊的場景中，例如下圖花瓣網(wǎng)就是采用該形式。
（2）圖標標簽
圖標標簽也是內(nèi)聯(lián)標簽的一種演化形式，采用圖形圖像的方法來替代內(nèi)聯(lián)標簽中的文本標簽，以此來提示輸入域中需要填寫的內(nèi)容，如注冊登陸等表單。
優(yōu)點：
同時能夠節(jié)省水平和垂直的頁面空間，標簽設計成圖標，使表單更靈活和簡潔。
缺點：
抽象的圖標標簽，增加認知負擔和記憶成本。
適用場景：
錄入項信息區(qū)分較大，不易混淆，能用圖形輕松識別內(nèi)容，或某些固定的場景或業(yè)務模式以及不超過3個錄入項的簡易表單。
5）標簽對齊總結(jié)
關于表單對齊方式這個問題是在設計師發(fā)問頻率較高的一個問題。其實，不論是哪種方式都有相對的利弊，需要根據(jù)實際業(yè)務場景提供不同的解決方案。當然，為了保證設計語言的一致性，在同一個表單下選擇使用一種便好。
根據(jù)馬泰奧·彭佐的對齊方式研究出的時間表總結(jié)：單從效率角度看，頂對齊>右對齊>左對齊，根據(jù)不同的業(yè)務場景，效率并不是唯一的考慮指標。
基于以上，我總結(jié)了一個對比表：
基于上表，得到以下幾點建議：
如果你希望用戶放慢速度，仔細思考表單中每個表單項，左對齊標簽是個好選擇，特別是含有大量可選輸入框或高級設置的陌生數(shù)據(jù)時；
而頂對齊標簽在一些國際化產(chǎn)品的表單設計時，會有更好的延展性；
至于，右對齊標簽雖然與表單域聯(lián)系緊密，便于用戶填寫，但是要考慮好標簽的長短不齊如何解決。能否精簡標簽內(nèi)容，以及確定好表單與界面的邊距。
6）pc端和移動端，選擇表單方式
（1）pc端
在網(wǎng)頁端我們大多看到的都是左右結(jié)構(gòu)（右對齊和左對齊），這是因為有空間占比的原因。
在 pc 端，橫向空間很大，需要考慮到協(xié)調(diào)的關系，如果采用上下結(jié)構(gòu)，在內(nèi)容過多的情況下，就會出現(xiàn)重心偏左的視覺效果。并且，視線距離屏幕較遠，視覺聚焦面積更大，因此視覺路徑較長的這一點就被中和掉了。
（2）移動端
移動端的限制是屏幕太小，一個橫屏展示不開，特別是在標簽名字很長的時候，弊端更加明顯，當然缺點除了識別度會降低，視覺路徑增長之外，縱向空間占比也會增加，本身一屏就能展示完，現(xiàn)在需要兩屏甚至更多。所以在移動端更多的是使用上下結(jié)構(gòu)。
2. 必填與可選字段的標記如何選擇？
1）必填是否需要標記？
如果表單中的大多數(shù)字段或全部都是必填的，我們是否仍然應該標記它們？
一般情況下，設計師可能會覺得每個必填字段都有一個標記是重復、不好看，造成頁面視覺噪點的增多，甚至可能看起來很擾亂（有認知負擔），確實有些情況下，紅色作為一種有特殊含義的顏色，會引起用戶誤解。
那么我們來看看，標記與不標記的對比圖：
如圖所示，答案是需要標記的，我們來聊聊，為什么：
我們通常會采取以下一種或兩種策略：
- 在表單頂部顯示說明，說明中除非另有解釋，否則所有字段都是必填；
- 只標記可選字段，因為它們通常較少；
- 在某些特殊情況下，什么也不標記，相信用戶按照順序填寫字段；如果不知道，那么只需要點擊提交報錯即可。
這些方法都是使表單交互體驗不好的設計問題，為什么呢？
- 用戶一般不喜歡閱讀表單頂部說明，甚至會忽略掉表單頂部的大段文字說明。
- 即使用戶閱讀了頂部的說明，也可能忘記。特別是當表單很長或填寫表單被打斷時（這種情況在移動端很常見）。即使用戶記得，但這占用了工作記憶，增加了認知負荷，讓用戶完成任務更難了。
- 用戶必須掃描表單以確定是否為必填字段。所以，無論是否在表單頂部包含說明，用戶都可能會忽略或忘記。他們會掃視表單，找到一個標記為必填或可選的標識。
- 如果作必填標記，用戶可能會做出假設?！斑@個沒有說必須要填，先空著吧”。即使用戶沒有留空，也不得不暫停來思考一個字段是否需要填寫，減慢交互速度并使過程看起來更長、更乏味。
所以，想要解決以上問題很簡單：標記所有必填字段！
盡量明確和清晰展示每個必填字段，并標記它。當然，就像有些設計師所說：界面出現(xiàn)大量必填標識（紅色星號）確實會增加視覺噪聲。甚至重復的星號會帶來一些認知恐慌。但相比之下，兩害取其輕，這些負面因素是輕微的。
2）一般是如何標記必填字段？
通常包含至少有兩種方式：
（1）星號（紅色）
星號在網(wǎng)頁上已經(jīng)很常見，用戶熟悉其含義。
優(yōu)點：
不占用太多空間，也看起來與標簽文字足夠不同。當然也可以使用其他視覺標記形式！但是建議最好遵循市面上常見的形式（雅各布定律），這樣更符合用戶認知。
星號應該在字段標簽之前還是在字段標簽之后？
標識在標簽之前能指引用戶迅速瀏覽界面，用戶只需掃視標簽的最左邊字符，就能輕松定位必填哪些字段，效率上會大大提高。
如果在標簽后面，由于輸入框形式、長度各不相同，標識和輸入框?qū)R會導致難以瀏覽和判斷。
所以最佳的答案是在標簽之前。
（2）“必填”提示
當表單中的大多數(shù)字段或全部都是必填的，為避免過多“*”造成的的視覺噪點，我們可以利用標簽或者占位符來提示用戶哪些內(nèi)容項是必填的，哪些是非必填的。這種處理方式可以減輕大量必填標識（紅色星號）造成的視覺噪聲。
（3）為什么登錄表單沒有標記必填？
一般情況登錄表單很短，主要由兩個字段組成：用戶名和密碼，如果使用星號“*”，標記這些字段的成本很低，并不會出錯。但是，絕大多數(shù)用戶都使用過很多登錄表單，用戶心智早已建立起來的這兩個字段總是必填的。所以，在登錄表單中，可以省略這種形式。
需要注意，在注冊表中不標記必填字段是危險的。注冊表單因產(chǎn)品而異，不僅僅包含用戶名和密碼不同公司在創(chuàng)建帳戶時需要不同類型的信息。所以需要標記所有必填字段（包括用戶名和密碼）。
二、表單域的設計疑問指南
1. 表單域有必要提供默認值嗎？
答案是有必要的提供默認值的！
我們可以通過提供合理的默認值，有效節(jié)省用戶提填寫表單的時間，進而提升表單提交率。在 Web 表單中也可以利用智能默認減少不必要的選擇次數(shù)或輸入，加速表單完成過程。
所以，在表單域中預先為用戶填寫你認為他們想要的合計輸入值是有必要的。
當然有可能會存在疑惑：如果默認值不是用戶想要的，誤導用戶怎么辦？
- 在設計有默認值的表單域時，需要思考默認值是否是大多數(shù)用戶可以接受的答案，如果不確信可以先去做一下用戶調(diào)研，了解用戶的心聲。
- 就算默認值真的不是用戶想要的，至少也為他提供了一個示例來告訴用戶答案應該是什么樣子的。
- 但是，并不代表所有的表單域都要給出默認值。只有當你有理由確信絕大部分用戶，在絕大多數(shù)情況下，不會修改這個取值時才提供默認值——否則，這將會給用戶帶來額外的工作！
2. 輸入框的寬度如何設定
這個問題是很非常常見且最容易被忽視的但實則舉重若輕的問題。我自己在早期的時候就犯過，比如：要求輸入框長度一致，一個系統(tǒng)內(nèi)部輸入框的長度沒有規(guī)則等等問題，導致設計和前端都沒有規(guī)律可找，大大降低了工作效率。
后來參考了Ant Design 4.0 系列文章《整齊劃一？不如錯落有致》，如下圖：錯落有致的排版表現(xiàn)似乎比整齊劃一的左圖更舒適，因為在視覺上我們更容易將右圖的空間和內(nèi)容視為一個和諧的整體。
但左圖過度的對齊導致暗示隱性的截斷，我們慣性視覺會產(chǎn)生表單字段右側(cè)空間缺了一大塊的錯覺。
Ant Design 4.0系列文章總結(jié)到「表單寬度」的處理方式核心旨在解決兩個問題：
- 暗示填寫內(nèi)容長度；
- 表單項布局排列效果；
唐納德·諾曼的著作《設計心理學》中詳細講解過心理暗示方面的內(nèi)容。而寬度的變化就是一種有效暗示。
文章認為我們通過設置合理的默認寬度尺寸和描述關系，就可以讓設計師們跳過部分繁瑣磨人的細節(jié)思考，快速搭建表單寬度合理且舒適的頁面。下面我們來詳細的聊一聊：
1）錯落有致優(yōu)于強制的整齊劃一
很多設計師在面對表單設計的時候，都會潛意識地將或要求追求所謂視覺上的整齊劃一，強行將表單的寬度定位統(tǒng)一的寬度，然而這卻犯了形式主義錯誤，沒有深入思考表單應用規(guī)范和用戶填寫的感受，實際上有秩序的“不一致”也不一定比強制性的“整齊劃一”的視覺感差，甚至更好。
每一類型的表單的輸入域都會因其錄入數(shù)據(jù)的類型而存在對應的寬度，輸入域的寬度應該匹配和暗示其填寫的內(nèi)容；
合理對應的輸入寬度不僅能夠給用戶的輸入量帶來心理暗示和預判，也提升整個表單數(shù)據(jù)錄入過程中的掌控感和舒適度。
通過下圖的對比，我們可以明顯的看到，錯落有致的排列方式更加舒適，并且有更強的暗示作用。
既然要錯落有致，那么要如何做呢？
表單設計中，對于單選框、復選框等控件，很明確必須跟隨內(nèi)容自適應處理。但對于輸入框、選擇框等組件你是否也會產(chǎn)生困惑，是定寬處理還是跟隨內(nèi)容更好。
實際業(yè)務中，大部分輸入框所需填寫內(nèi)容都存在理想長度，輸入框的寬度暗示填寫內(nèi)容的長度，合理的寬度幫助減少用戶的焦慮，給用戶帶來安全感。在單項排布時也要盡量考慮用戶的觀感，通過設置合理的默認寬度尺寸，讓設計師快速搭建出觀感舒適又給用戶降低焦慮的頁面。
反之，如果輸入框不受限于暗示，則應保持長度一致。
這里需要特別注意：
保證暗示效果的同時，不要設定太多的寬度，反而會讓表單顯得凌亂；太少又會讓表單看起來都像四四方方的盒子。最佳方法是找到適合產(chǎn)品的最佳模度值和數(shù)量。
2）模度值
上文提到錯落有致，那么如何錯落有致呢？有什么規(guī)則嗎？
設定模度值的優(yōu)勢：
表單的外觀視覺雖呈現(xiàn)錯落有致，但在內(nèi)在邏輯的約束下做到了“有秩序的不一致”。不僅解決了暗示用戶輸入量多少的問題，更是避免了設計師在面對表單時不必要的主觀和感性，表單設計由規(guī)律可循，同時開發(fā)人員也更容易地做到對設計稿的精準還原，也可以提升工作效率。
梳理產(chǎn)品中常見的表單類型
根據(jù)你所設計產(chǎn)品的具體業(yè)務情況，梳理出常用的表單類型，根據(jù)這些表單類型的的長短來進行具體輸入框尺寸的制定；
需要注意：
B端項目中表單的應用場景十分豐富且復雜，針對每一種場景去定制一個輸入框尺寸是不現(xiàn)實的，在頁面實際設計中就會顯得頁面很凌亂。所以，我們特別要解決的問題就是如何讓輸入框在單個狀態(tài)與組合狀態(tài)下都盡量保持較好的對齊狀態(tài)，同時輸入框的尺寸還有規(guī)律可循。
3）設定表單模度值
結(jié)合Ant_Design的解決方案，Design設定104px 為原子級寬度尺碼 XS，通過倍數(shù)+間距疊加的方式（此處計算間距的原因是為了兼顧“組合輸入框”和“單個輸入框”對齊問題）從小到大去依次推導出更大的四種寬度來擬合前面劃分的尺碼。最終得到如下5種寬度尺碼和對齊關系。
如：基準輸入寬度XS = 104px，以其倍數(shù) (n) 加上 (n-1) 倍的間距 (8px) 為規(guī)則，分為5種不同尺寸 (XS、S、M、L、XL)。那么我們就得到了S: 104px*2+8px=216px; M: 104px*3+16px=328px……五種尺寸（如下圖）。
當然，我們在設計時，最小原子的寬度不一定設置為104，也可根據(jù)業(yè)務情況將最小原子XS設置為可容納6個中文漢字，然后在通過如下規(guī)則進行換算。
Ant design表單設計研究結(jié)論建議的5種高頻的寬度需求區(qū)間，以尺碼類比分別是：XS – 80~160px、S – 160~280、M – 280~360px、L – 360px~480px、XL – 480~560px。
反向驗證模度值
接下來可以通過反向驗證第一步我們的羅列出的常用信息內(nèi)容，是不是都能找到對應的尺寸適配，如果不行的話就調(diào)整我們最小輸入框的尺寸，使大部分的填寫內(nèi)容都能有合適的尺寸。
需要注意，建議在制作設計規(guī)范的時候，把每一種尺寸的使用范圍情況做詳細的說明，如下圖。
3. 輸入內(nèi)容需不需要快捷清除圖標？
我在早期設計表單的時候經(jīng)常和產(chǎn)品經(jīng)理爭論這個問題，產(chǎn)品經(jīng)理經(jīng)?？紤]不到這個問題，當設計師提出來時，產(chǎn)品又覺得沒有必要。
我們在修改表單輸入域時，已填寫內(nèi)容時是否需要快捷清除按鈕是一個關于效率的問題，需要考慮的不僅僅是逐個清除和一次性快捷清除的對比，還要考慮清除后重新輸入數(shù)據(jù)的成本。
- 如果輸入成本低的情況，可以提供一鍵清空的快捷功能按鈕。比如：密碼等短數(shù)據(jù)在輸入錯誤時一鍵清除后，再次輸入也會很快就能完成，此時重新輸入的成本不高，可以為提高效率提供一鍵清除錯誤信息的快捷功能；
- 如果輸入成本高時則不建議一鍵清空。比如：文本框等長文本輸入的時候，在精心編輯一段話，并且花費不少時間加以潤色后，清除后重新輸入的成本就會高很多。此時則不建議提供一鍵清除的快捷功能，放置誤操作。
以上便是個人對常見的表單糾結(jié)點的經(jīng)驗總結(jié)上篇，下一篇我們將繼續(xù)聊后面的幾個部分，包含：3步設置表單的寬度、按鈕的最佳位置、4個策略優(yōu)化表單設計、提示的最佳位置等等。我們下一篇見！
參考文獻：
1、來源鏈接：https://ant.design/docs/spec/research-form-cn（來源：Ant Design）
2、表單設計需要注意：http://t.cn/EhMmZPf
3、《Web表單設計·創(chuàng)建高可用性的網(wǎng)頁表單》中，作者（卡羅琳·賈雷特）
4、B端表單設計優(yōu)化http://www.codemsi.com/ucd/5327215.html
5、《Type & Layout：How Typography and Design Can Get Your Message Across or Getin the Way》
本文由 @三原設計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash ，基于 CC0 協(xié)議
該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
更多精彩內(nèi)容，請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
不知你是否遇到過這種情況：分明對表單設計已經(jīng)有了一定了解與熟悉，但在實際操作中卻又不禁陷入困擾和糾結(jié)?；诖耍疚淖髡呖偨Y(jié)了表格設計中遇到的常見困擾點，在本篇文章中講解了標簽的疑問設計指南與表單域的設計疑問指南，希望能為你解決困惑。
有一些朋友私信跟我說，已經(jīng)很了解表單的基礎知識了，但是在設計的時候，還是總是存在糾結(jié)困擾的地方。
我感同身受，做了幾年的表單設計以后，我對各類表單及設計點很清晰，但是當我開始設計新產(chǎn)品的表單的時候，還是經(jīng)常陷入困擾、糾結(jié)，經(jīng)常為了一兩個很小的設計點方案和產(chǎn)品經(jīng)理爭論半天；每次堅持自己想法的時候，甚至不能很清晰且有理有據(jù)的說明，這讓我一度感到很焦慮。為此我查閱大量資料，文章，就是為了解決這種說不出為什么的尷尬無力感。
我總結(jié)出來，一些我在設計中常遇到的困擾及糾結(jié)的設計點，分享給大家。
一、標簽的設計疑問指南
1. 哪種標簽對齊方式更好？
這個問題基本是在新建一個產(chǎn)品的時候才會出現(xiàn)，如果你做的產(chǎn)品已有明確的規(guī)范和使用場景，那么統(tǒng)一表單標簽對齊方式即可。
但是，如果你需要重新定義一個新的表單規(guī)范時，那么你就需要考慮哪種標簽對齊方式更好，怎樣區(qū)分使用場景！
很多的前輩們通過科學實驗發(fā)現(xiàn)，無論是在眼動儀的熱圖，還是在許多可用性測試的觀察結(jié)果中，用戶在填寫網(wǎng)頁表單時視線主要集中在輸入框的左側(cè)。他們的視線幾乎不會落到輸入框的右側(cè)，甚至都不會瞟上一眼。
以此為基礎，我們在網(wǎng)頁表單設計中有4種最常見的標簽對齊方式：頂對齊標簽、右對齊標簽、左對齊標簽、行內(nèi)標簽。
另外還有混合對齊標簽、內(nèi)聯(lián)標簽、圖標標簽等，它們基本是在這4種形式上變化，不脫離本質(zhì)。
每一種對齊方式都有一定的優(yōu)點和局限性；因此在合適的場景下選擇合適的標簽對齊樣式，可以提升用戶的輸入效率，下面我們來展開說說：
1）頂對齊標簽（Top aligned labels）
頂部對齊是標簽在輸入域的上方，與輸入域進行左對齊，這樣可以節(jié)省橫向空間的使用，標簽和輸入框位置最為靠近，用戶在填寫時也比較方便，移動端產(chǎn)品的設計中下拉的交互比左右滑動的交互更為便捷所以采用頂部標簽較為常見。
從2006年7月起馬泰奧·彭佐進行眼動研究，結(jié)果表明，從標簽移動到輸入框，頂對其最短需要50毫秒，左對齊需要500毫秒，是頂對齊的10倍，右對齊是240毫秒。
我們通過眼動數(shù)據(jù)可以看到，頂對齊是效率最高的表單填寫樣式，因為眼球只需要在標簽和輸入框之間進行上下單向運動。
優(yōu)點：
標簽和輸入框位置最為靠近，表單填寫時間最短；用戶視線固定，動線一直向下具有清晰的完成路徑；節(jié)省大量橫向空間，另外與輸入框?qū)R視覺更舒適。
缺點：
占用額外的垂直空間，如果可提供使用的垂直屏幕空間較小，應當謹慎使用頂對齊標簽，若表單選項較多的時候會增加表單長度并使頁面滾動。
適用于場景：
可用于以多種方式組合的相關輸入框；希望用戶快速填寫表單并完成任務的情況；頁面空間縱向空間充足，標簽長度難以限定簡化、拓展性要求較高的表單；更適合有國際化的需求比如說法語、德語或荷蘭語比英語長很多的語言；
當垂直屏幕空間大，表單有組合需求時，頂部標簽是不錯的選擇，比如飛書的基本信息頁面：
2）右對齊標簽（Align label right）
最為常見的表單標簽，該標簽形式中文字標簽與輸入域的距離是固定的，有明確的視覺關聯(lián)。
馬泰奧·彭佐的眼動研究發(fā)現(xiàn)，專家用戶和新手用戶掃視（眼睛運動）右對齊標簽表單的標簽和輸入框的平均時間分別在170毫秒和240毫秒，而填寫完成時間比左對齊快2倍。
優(yōu)點：
標簽和輸入框之間距離固定，有明確的關聯(lián)，有利于用戶填寫，同時節(jié)約垂直空間；
缺點：
左邊標簽參差不齊，視覺上不夠美觀，瀏覽標簽造成一定障礙，降低了表單的可讀性，橫向占用空間大，不利于狹長頁面布局，標簽長度和輸入框彈性小。
適用場景：
標簽和輸入域的彈性長度較小，比較適用于既要減少垂直空間，又要加快填寫速度的業(yè)務場景，比如賬號的基本信息。且適合數(shù)據(jù)內(nèi)容多、邏輯關系簡單、標題字數(shù)少的情況（如篩選條件）。
右對齊標簽有利于用戶的填寫，但是不利于用戶對標簽信息的查看，如下圖，當標簽長短不一時，左邊的標簽就很難對齊：
3）左對齊標簽（Align label right）
左對齊標簽也是最常用的一種標簽，采用文字左對齊的方式將標簽文本放置在輸入域的左邊，這種結(jié)構(gòu)有利于用戶對標簽整體的查看，從整體上對表單所需要填寫的內(nèi)容更加清晰。
根據(jù)馬泰奧的研究，左對齊標簽“典型掃視時間為500毫秒，時間很長，說明用戶經(jīng)歷著沉重的認知壓力。”左對齊表單解析問題時眼球定位次數(shù)最多，用戶一般情況下都能將左對齊布局中的標簽和輸入框聯(lián)系起來，只是花費時間較長。
在頂、右、左三種方案中，左對齊表單填寫速度最慢。
優(yōu)點：
標簽開頭閱讀視線對齊，符合用戶的閱讀模式，比較方便用戶瀏覽表單，也比較節(jié)約垂直空間；
缺點：
由于標簽長短不一，有些標簽距離輸入框較遠，視覺跳動較大，使標簽與其輸入框親密性降低導致用戶填寫費力，用戶存留時間較長；
標簽和輸入域的彈性長度小，橫向占用空間較大，所以不適用于橫向空間狹小的表單頁面。
適用場景：
適合表單中存在較多的復雜敏感數(shù)據(jù)，需要用戶謹慎的對待表單的填寫，特別是表單含有大量可選輸入框，類似“使用偏好”或者高級設置陌生數(shù)據(jù)時，就可以使用左對齊標簽。
上圖可以看出，右對齊標簽填寫速度要比左對齊標簽快一倍。左對齊標簽中用戶眼球定位時間長，需要反復建立標簽和輸入框的聯(lián)系，但同時文字左對齊也讓標簽側(cè)的瀏覽變得容易。反之，右對齊則與之相反。
需要注意：
左對齊受限于標簽字數(shù)的長短，造成右邊的視線不能夠統(tǒng)一。與輸入域視覺間距大小不一。標簽越短，與輸入域的間距越大。
根據(jù)菲茨定律，既起始位置離目標位置距離越遠，我們到達目標位置所花費的時間就越長。反之，離目標位置越近，我們所花費的時間就越短。所以對于整個表單的瀏覽速度也會變得緩慢一些。
需要要注意的是，雖然速度是最慢的，但從辯證的角度來看，B端業(yè)務設計中，【緩慢完成率】并不總是一件壞事，如果表單數(shù)據(jù)復雜且安全性高，可以故意減緩用戶的填寫速度，來確保填寫的準確性。
這是一種較為柔和的方式使用戶的讀取速度變慢，讓用戶認真的閱讀，保證信息采集的準確性。在一些注冊類、管理后臺類表單中較多使用。
當你的產(chǎn)品業(yè)務數(shù)據(jù)信息比較敏感或很重要需要用戶仔細斟酌表單內(nèi)容，謹慎填寫時，左對齊標簽是不錯的選擇。若表單內(nèi)容簡單易理解，那么可以使用右對齊標簽來提升效率。
如下圖小鵝通的組織架構(gòu)填寫的部分：
4）內(nèi)聯(lián)標簽（inline tag）
內(nèi)聯(lián)標簽是將文本標簽內(nèi)置于輸入域內(nèi)部顯示，原本顯示輸入提示的位置用來顯示輸入標簽，在輸入前告知用戶輸入域輸入的數(shù)據(jù)內(nèi)容，輸入的時候標簽消失。最常見于登錄注冊的場景。
優(yōu)點：
如果屏幕空間十分有限，行內(nèi)標簽是最常使用的方法，同時節(jié)省了橫向和縱向的頁面空間；
缺點：
輸入的時候標簽會消失，會讓用戶產(chǎn)生困惑，使用體驗較差，而且拓展性也較差；
一般用戶記憶標簽等信息使用的是大腦的短時記憶，一般不會刻意去記憶輸入標簽，所以極易導致用戶忘記剛剛記住的標簽而不知所措感到困惑；
適用場景：
某種通用的固定場景，例如登錄注冊等，或者表單錄入項較少時可以考慮使用，建議不超過3個輸入項；
比如UI中國，站酷等登錄的頁面。
注意：
人在短時間內(nèi)只能記住5～9個單位，即“7加減2”法則，這是大部分用戶的極限，但設計一般不會去挑戰(zhàn)極限，而是要思考，還有一部分用戶是遠遠達不到“7加減2”這個范疇，因此，在設計的時候，就需要降低用戶的記憶門檻，采用更加適用的“2加減1”原則，當用戶需要輸入的字段多余三個的時候，就必須給表單留下標簽，用來提示用戶。
行內(nèi)標簽雖然可以大大節(jié)省橫向和縱向的空間，但當提示信息消失的缺點也很明顯，所以關于內(nèi)聯(lián)標簽升級出了兩種類型：
（1）浮動標簽
浮動標簽也是內(nèi)聯(lián)標簽的一種演化形式，標簽在輸入前位于輸入?yún)^(qū)類似占位符，在用戶輸入數(shù)據(jù)時，內(nèi)部標簽（輸入提示信息）會發(fā)生位移和大小的變換，浮動到輸入域的上面。
優(yōu)點：
除了具備內(nèi)聯(lián)標簽的優(yōu)點節(jié)省水平和垂直的空間外，還無需用戶對輸入標簽進行記憶，保障了用戶錄入信息的準確性。
缺點：
需要一定的開發(fā)成本。
適用場景：
除了適用與內(nèi)聯(lián)標簽的應用場景外，還適用于一些具有一定復雜度表單，輸入項較少的簡易表單；
這種方式比較常見于登錄注冊的場景中，例如下圖花瓣網(wǎng)就是采用該形式。
（2）圖標標簽
圖標標簽也是內(nèi)聯(lián)標簽的一種演化形式，采用圖形圖像的方法來替代內(nèi)聯(lián)標簽中的文本標簽，以此來提示輸入域中需要填寫的內(nèi)容，如注冊登陸等表單。
優(yōu)點：
同時能夠節(jié)省水平和垂直的頁面空間，標簽設計成圖標，使表單更靈活和簡潔。
缺點：
抽象的圖標標簽，增加認知負擔和記憶成本。
適用場景：
錄入項信息區(qū)分較大，不易混淆，能用圖形輕松識別內(nèi)容，或某些固定的場景或業(yè)務模式以及不超過3個錄入項的簡易表單。
5）標簽對齊總結(jié)
關于表單對齊方式這個問題是在設計師發(fā)問頻率較高的一個問題。其實，不論是哪種方式都有相對的利弊，需要根據(jù)實際業(yè)務場景提供不同的解決方案。當然，為了保證設計語言的一致性，在同一個表單下選擇使用一種便好。
根據(jù)馬泰奧·彭佐的對齊方式研究出的時間表總結(jié)：單從效率角度看，頂對齊>右對齊>左對齊，根據(jù)不同的業(yè)務場景，效率并不是唯一的考慮指標。
基于以上，我總結(jié)了一個對比表：
基于上表，得到以下幾點建議：
如果你希望用戶放慢速度，仔細思考表單中每個表單項，左對齊標簽是個好選擇，特別是含有大量可選輸入框或高級設置的陌生數(shù)據(jù)時；
而頂對齊標簽在一些國際化產(chǎn)品的表單設計時，會有更好的延展性；
至于，右對齊標簽雖然與表單域聯(lián)系緊密，便于用戶填寫，但是要考慮好標簽的長短不齊如何解決。能否精簡標簽內(nèi)容，以及確定好表單與界面的邊距。
6）pc端和移動端，選擇表單方式
（1）pc端
在網(wǎng)頁端我們大多看到的都是左右結(jié)構(gòu)（右對齊和左對齊），這是因為有空間占比的原因。
在 pc 端，橫向空間很大，需要考慮到協(xié)調(diào)的關系，如果采用上下結(jié)構(gòu)，在內(nèi)容過多的情況下，就會出現(xiàn)重心偏左的視覺效果。并且，視線距離屏幕較遠，視覺聚焦面積更大，因此視覺路徑較長的這一點就被中和掉了。
（2）移動端
移動端的限制是屏幕太小，一個橫屏展示不開，特別是在標簽名字很長的時候，弊端更加明顯，當然缺點除了識別度會降低，視覺路徑增長之外，縱向空間占比也會增加，本身一屏就能展示完，現(xiàn)在需要兩屏甚至更多。所以在移動端更多的是使用上下結(jié)構(gòu)。
2. 必填與可選字段的標記如何選擇？
1）必填是否需要標記？
如果表單中的大多數(shù)字段或全部都是必填的，我們是否仍然應該標記它們？
一般情況下，設計師可能會覺得每個必填字段都有一個標記是重復、不好看，造成頁面視覺噪點的增多，甚至可能看起來很擾亂（有認知負擔），確實有些情況下，紅色作為一種有特殊含義的顏色，會引起用戶誤解。
那么我們來看看，標記與不標記的對比圖：
如圖所示，答案是需要標記的，我們來聊聊，為什么：
我們通常會采取以下一種或兩種策略：
- 在表單頂部顯示說明，說明中除非另有解釋，否則所有字段都是必填；
- 只標記可選字段，因為它們通常較少；
- 在某些特殊情況下，什么也不標記，相信用戶按照順序填寫字段；如果不知道，那么只需要點擊提交報錯即可。
這些方法都是使表單交互體驗不好的設計問題，為什么呢？
- 用戶一般不喜歡閱讀表單頂部說明，甚至會忽略掉表單頂部的大段文字說明。
- 即使用戶閱讀了頂部的說明，也可能忘記。特別是當表單很長或填寫表單被打斷時（這種情況在移動端很常見）。即使用戶記得，但這占用了工作記憶，增加了認知負荷，讓用戶完成任務更難了。
- 用戶必須掃描表單以確定是否為必填字段。所以，無論是否在表單頂部包含說明，用戶都可能會忽略或忘記。他們會掃視表單，找到一個標記為必填或可選的標識。
- 如果作必填標記，用戶可能會做出假設?！斑@個沒有說必須要填，先空著吧”。即使用戶沒有留空，也不得不暫停來思考一個字段是否需要填寫，減慢交互速度并使過程看起來更長、更乏味。
所以，想要解決以上問題很簡單：標記所有必填字段！
盡量明確和清晰展示每個必填字段，并標記它。當然，就像有些設計師所說：界面出現(xiàn)大量必填標識（紅色星號）確實會增加視覺噪聲。甚至重復的星號會帶來一些認知恐慌。但相比之下，兩害取其輕，這些負面因素是輕微的。
2）一般是如何標記必填字段？
通常包含至少有兩種方式：
（1）星號（紅色）
星號在網(wǎng)頁上已經(jīng)很常見，用戶熟悉其含義。
優(yōu)點：
不占用太多空間，也看起來與標簽文字足夠不同。當然也可以使用其他視覺標記形式！但是建議最好遵循市面上常見的形式（雅各布定律），這樣更符合用戶認知。
星號應該在字段標簽之前還是在字段標簽之后？
標識在標簽之前能指引用戶迅速瀏覽界面，用戶只需掃視標簽的最左邊字符，就能輕松定位必填哪些字段，效率上會大大提高。
如果在標簽后面，由于輸入框形式、長度各不相同，標識和輸入框?qū)R會導致難以瀏覽和判斷。
所以最佳的答案是在標簽之前。
（2）“必填”提示
當表單中的大多數(shù)字段或全部都是必填的，為避免過多“*”造成的的視覺噪點，我們可以利用標簽或者占位符來提示用戶哪些內(nèi)容項是必填的，哪些是非必填的。這種處理方式可以減輕大量必填標識（紅色星號）造成的視覺噪聲。
（3）為什么登錄表單沒有標記必填？
一般情況登錄表單很短，主要由兩個字段組成：用戶名和密碼，如果使用星號“*”，標記這些字段的成本很低，并不會出錯。但是，絕大多數(shù)用戶都使用過很多登錄表單，用戶心智早已建立起來的這兩個字段總是必填的。所以，在登錄表單中，可以省略這種形式。
需要注意，在注冊表中不標記必填字段是危險的。注冊表單因產(chǎn)品而異，不僅僅包含用戶名和密碼不同公司在創(chuàng)建帳戶時需要不同類型的信息。所以需要標記所有必填字段（包括用戶名和密碼）。
二、表單域的設計疑問指南
1. 表單域有必要提供默認值嗎？
答案是有必要的提供默認值的！
我們可以通過提供合理的默認值，有效節(jié)省用戶提填寫表單的時間，進而提升表單提交率。在 Web 表單中也可以利用智能默認減少不必要的選擇次數(shù)或輸入，加速表單完成過程。
所以，在表單域中預先為用戶填寫你認為他們想要的合計輸入值是有必要的。
當然有可能會存在疑惑：如果默認值不是用戶想要的，誤導用戶怎么辦？
- 在設計有默認值的表單域時，需要思考默認值是否是大多數(shù)用戶可以接受的答案，如果不確信可以先去做一下用戶調(diào)研，了解用戶的心聲。
- 就算默認值真的不是用戶想要的，至少也為他提供了一個示例來告訴用戶答案應該是什么樣子的。
- 但是，并不代表所有的表單域都要給出默認值。只有當你有理由確信絕大部分用戶，在絕大多數(shù)情況下，不會修改這個取值時才提供默認值——否則，這將會給用戶帶來額外的工作！
2. 輸入框的寬度如何設定
這個問題是很非常常見且最容易被忽視的但實則舉重若輕的問題。我自己在早期的時候就犯過，比如：要求輸入框長度一致，一個系統(tǒng)內(nèi)部輸入框的長度沒有規(guī)則等等問題，導致設計和前端都沒有規(guī)律可找，大大降低了工作效率。
后來參考了Ant Design 4.0 系列文章《整齊劃一？不如錯落有致》，如下圖：錯落有致的排版表現(xiàn)似乎比整齊劃一的左圖更舒適，因為在視覺上我們更容易將右圖的空間和內(nèi)容視為一個和諧的整體。
但左圖過度的對齊導致暗示隱性的截斷，我們慣性視覺會產(chǎn)生表單字段右側(cè)空間缺了一大塊的錯覺。
Ant Design 4.0系列文章總結(jié)到「表單寬度」的處理方式核心旨在解決兩個問題：
- 暗示填寫內(nèi)容長度；
- 表單項布局排列效果；
唐納德·諾曼的著作《設計心理學》中詳細講解過心理暗示方面的內(nèi)容。而寬度的變化就是一種有效暗示。
文章認為我們通過設置合理的默認寬度尺寸和描述關系，就可以讓設計師們跳過部分繁瑣磨人的細節(jié)思考，快速搭建表單寬度合理且舒適的頁面。下面我們來詳細的聊一聊：
1）錯落有致優(yōu)于強制的整齊劃一
很多設計師在面對表單設計的時候，都會潛意識地將或要求追求所謂視覺上的整齊劃一，強行將表單的寬度定位統(tǒng)一的寬度，然而這卻犯了形式主義錯誤，沒有深入思考表單應用規(guī)范和用戶填寫的感受，實際上有秩序的“不一致”也不一定比強制性的“整齊劃一”的視覺感差，甚至更好。
每一類型的表單的輸入域都會因其錄入數(shù)據(jù)的類型而存在對應的寬度，輸入域的寬度應該匹配和暗示其填寫的內(nèi)容；
合理對應的輸入寬度不僅能夠給用戶的輸入量帶來心理暗示和預判，也提升整個表單數(shù)據(jù)錄入過程中的掌控感和舒適度。
通過下圖的對比，我們可以明顯的看到，錯落有致的排列方式更加舒適，并且有更強的暗示作用。
既然要錯落有致，那么要如何做呢？
表單設計中，對于單選框、復選框等控件，很明確必須跟隨內(nèi)容自適應處理。但對于輸入框、選擇框等組件你是否也會產(chǎn)生困惑，是定寬處理還是跟隨內(nèi)容更好。
實際業(yè)務中，大部分輸入框所需填寫內(nèi)容都存在理想長度，輸入框的寬度暗示填寫內(nèi)容的長度，合理的寬度幫助減少用戶的焦慮，給用戶帶來安全感。在單項排布時也要盡量考慮用戶的觀感，通過設置合理的默認寬度尺寸，讓設計師快速搭建出觀感舒適又給用戶降低焦慮的頁面。
反之，如果輸入框不受限于暗示，則應保持長度一致。
這里需要特別注意：
保證暗示效果的同時，不要設定太多的寬度，反而會讓表單顯得凌亂；太少又會讓表單看起來都像四四方方的盒子。最佳方法是找到適合產(chǎn)品的最佳模度值和數(shù)量。
2）模度值
上文提到錯落有致，那么如何錯落有致呢？有什么規(guī)則嗎？
設定模度值的優(yōu)勢：
表單的外觀視覺雖呈現(xiàn)錯落有致，但在內(nèi)在邏輯的約束下做到了“有秩序的不一致”。不僅解決了暗示用戶輸入量多少的問題，更是避免了設計師在面對表單時不必要的主觀和感性，表單設計由規(guī)律可循，同時開發(fā)人員也更容易地做到對設計稿的精準還原，也可以提升工作效率。
梳理產(chǎn)品中常見的表單類型
根據(jù)你所設計產(chǎn)品的具體業(yè)務情況，梳理出常用的表單類型，根據(jù)這些表單類型的的長短來進行具體輸入框尺寸的制定；
需要注意：
B端項目中表單的應用場景十分豐富且復雜，針對每一種場景去定制一個輸入框尺寸是不現(xiàn)實的，在頁面實際設計中就會顯得頁面很凌亂。所以，我們特別要解決的問題就是如何讓輸入框在單個狀態(tài)與組合狀態(tài)下都盡量保持較好的對齊狀態(tài)，同時輸入框的尺寸還有規(guī)律可循。
3）設定表單模度值
結(jié)合Ant_Design的解決方案，Design設定104px 為原子級寬度尺碼 XS，通過倍數(shù)+間距疊加的方式（此處計算間距的原因是為了兼顧“組合輸入框”和“單個輸入框”對齊問題）從小到大去依次推導出更大的四種寬度來擬合前面劃分的尺碼。最終得到如下5種寬度尺碼和對齊關系。
如：基準輸入寬度XS = 104px，以其倍數(shù) (n) 加上 (n-1) 倍的間距 (8px) 為規(guī)則，分為5種不同尺寸 (XS、S、M、L、XL)。那么我們就得到了S: 104px*2+8px=216px; M: 104px*3+16px=328px……五種尺寸（如下圖）。
當然，我們在設計時，最小原子的寬度不一定設置為104，也可根據(jù)業(yè)務情況將最小原子XS設置為可容納6個中文漢字，然后在通過如下規(guī)則進行換算。
Ant design表單設計研究結(jié)論建議的5種高頻的寬度需求區(qū)間，以尺碼類比分別是：XS – 80~160px、S – 160~280、M – 280~360px、L – 360px~480px、XL – 480~560px。
反向驗證模度值
接下來可以通過反向驗證第一步我們的羅列出的常用信息內(nèi)容，是不是都能找到對應的尺寸適配，如果不行的話就調(diào)整我們最小輸入框的尺寸，使大部分的填寫內(nèi)容都能有合適的尺寸。
需要注意，建議在制作設計規(guī)范的時候，把每一種尺寸的使用范圍情況做詳細的說明，如下圖。
3. 輸入內(nèi)容需不需要快捷清除圖標？
我在早期設計表單的時候經(jīng)常和產(chǎn)品經(jīng)理爭論這個問題，產(chǎn)品經(jīng)理經(jīng)?？紤]不到這個問題，當設計師提出來時，產(chǎn)品又覺得沒有必要。
我們在修改表單輸入域時，已填寫內(nèi)容時是否需要快捷清除按鈕是一個關于效率的問題，需要考慮的不僅僅是逐個清除和一次性快捷清除的對比，還要考慮清除后重新輸入數(shù)據(jù)的成本。
- 如果輸入成本低的情況，可以提供一鍵清空的快捷功能按鈕。比如：密碼等短數(shù)據(jù)在輸入錯誤時一鍵清除后，再次輸入也會很快就能完成，此時重新輸入的成本不高，可以為提高效率提供一鍵清除錯誤信息的快捷功能；
- 如果輸入成本高時則不建議一鍵清空。比如：文本框等長文本輸入的時候，在精心編輯一段話，并且花費不少時間加以潤色后，清除后重新輸入的成本就會高很多。此時則不建議提供一鍵清除的快捷功能，放置誤操作。
以上便是個人對常見的表單糾結(jié)點的經(jīng)驗總結(jié)上篇，下一篇我們將繼續(xù)聊后面的幾個部分，包含：3步設置表單的寬度、按鈕的最佳位置、4個策略優(yōu)化表單設計、提示的最佳位置等等。我們下一篇見！
參考文獻：
1、來源鏈接：https://ant.design/docs/spec/research-form-cn（來源：Ant Design）
2、表單設計需要注意：http://t.cn/EhMmZPf
3、《Web表單設計·創(chuàng)建高可用性的網(wǎng)頁表單》中，作者（卡羅琳·賈雷特）
4、B端表單設計優(yōu)化http://www.codemsi.com/ucd/5327215.html
5、《Type & Layout：How Typography and Design Can Get Your Message Across or Getin the Way》
本文由 @三原設計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash ，基于 CC0 協(xié)議
該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
純干貨，贊個。關于星號標示必填這個，不知道國外市場通不通用誒