上傳人：文***

認證信息

認證類型：個人認證

認證主體：劉**（實名認證）

IP屬地：境外

IP屬地：境外 上傳時間：2023-04-21 格式：DOCX 頁數(shù)：30 大小：6.56MB 積分：20 舉報 版權申訴

字，詳解10個常見的表單設計疑問?。ㄉ希ヽlass="size-fullwp-image-913270aligncenter"src="/wp/2023/04/eOYoQ8TLuh9S1mDd2UAA.jpg"alt=""/>

有一些伴侶私信跟我說，已經很了解表單的基礎學問了，但是在設計的時候，還是總是存在糾結困擾的地方。

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

我總結出來，一些我在設計中常遇到的困擾及糾結的設計點，共享給大家。

一、標簽的設計疑問指南

1.哪種標簽對齊方式更好？

這個問題基本是在新建一個產品的時候才會消失，假如你做的產品已有明確的規(guī)范和使用場景，那么統(tǒng)一表單標簽對齊方式即可。

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

許多的前輩們通過科學試驗發(fā)覺，無論是在眼動儀的熱圖，還是在很多可用性測試的觀看結果中，用戶在填寫網頁表單時視線主要集中在輸入框的左側。他們的視線幾乎不會落到輸入框的右側，甚至都不會瞟上一眼。

以此為基礎，我們在網頁表單設計中有4種最常見的標簽對齊方式：頂對齊標簽、右對齊標簽、左對齊標簽、行內標簽。

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

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

1）頂對齊標簽（Topalignedlabels）

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

從2022年7月起馬泰奧·彭佐進行眼動討論，結果表明，從標簽移動到輸入框，頂對其最短需要50毫秒，左對齊需要500毫秒，是頂對齊的10倍，右對齊是240毫秒。

我們通過眼動數(shù)據(jù)可以看到，頂對齊是效率最高的表單填寫樣式，由于眼球只需要在標簽和輸入框之間進行上下單向運動。

優(yōu)點：

標簽和輸入框位置最為靠近，表單填寫時間最短；用戶視線固定，動線始終向下具有清楚的完成路徑；節(jié)約大量橫向空間，另外與輸入框對齊視覺更舒適。

缺點：

占用額外的垂直空間，假如可供應使用的垂直屏幕空間較小，應當謹慎使用頂對齊標簽，若表單選項較多的時候會增加表單長度并使頁面滾動。

適用于場景：

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

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

2）右對齊標簽（Alignlabelright）

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

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

優(yōu)點：

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

缺點：

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

適用場景：

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

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

3）左對齊標簽（Alignlabelright）

左對齊標簽也是最常用的一種標簽，采納文字左對齊的方式將標簽文本放置在輸入域的左邊，這種結構有利于用戶對標簽整體的查看，從整體上對表單所需要填寫的內容更加清楚。

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

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

優(yōu)點：

標簽開頭閱讀視線對齊，符合用戶的閱讀模式，比較便利用戶掃瞄表單，也比較節(jié)省垂直空間；

缺點：

由于標簽長短不一，有些標簽距離輸入框較遠，視覺跳動較大，使標簽與其輸入框親熱性降低導致用戶填寫費勁，用戶存留時間較長；

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

適用場景：

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

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

需要留意：

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

依據(jù)菲茨定律，既起始位置離目標位置距離越遠，我們到達目標位置所花費的時間就越長。反之，離目標位置越近，我們所花費的時間就越短。所以對于整個表單的掃瞄速度也會變得緩慢一些。

需要要留意的是，雖然速度是最慢的，但從辯證的角度來看，B端業(yè)務設計中，【緩慢完成率】并不總是一件壞事，假如表單數(shù)據(jù)簡單且平安性高，可以有意減緩用戶的填寫速度，來確保填寫的精確?????性。

這是一種較為嚴厲的方式使用戶的讀取速度變慢，讓用戶仔細的閱讀，保證信息采集的精確?????性。在一些注冊類、管理后臺類表單中較多使用。

當你的產品業(yè)務數(shù)據(jù)信息比較敏感或很重要需要用戶認真斟酌表單內容，謹慎填寫時，左對齊標簽是不錯的選擇。若表單內容簡潔易理解，那么可以使用右對齊標簽來提升效率。

如下圖小鵝通的組織架構填寫的部分：

4）內聯(lián)標簽（inlinetag）

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

優(yōu)點：

假如屏幕空間非常有限，行內標簽是最常使用的方法，同季節(jié)省了橫向和縱向的頁面空間；

缺點：

輸入的時候標簽會消逝，會讓用戶產生困惑，使用體驗較差，而且拓展性也較差；

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

適用場景：

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

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

留意：

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

行內標簽雖然可以大大節(jié)約橫向和縱向的空間，但當提示信息消逝的缺點也很明顯，所以關于內聯(lián)標簽升級出了兩種類型：

（1）浮動標簽

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

優(yōu)點：

除了具備內聯(lián)標簽的優(yōu)點節(jié)約水平和垂直的空間外，還無需用戶對輸入標簽進行記憶，保障了用戶錄入信息的精確?????性。

缺點：

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

適用場景：

除了適用與內聯(lián)標簽的應用場景外，還適用于一些具有肯定簡單度表單，輸入項較少的簡易表單；

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

（2）圖標標簽

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

優(yōu)點：

同時能夠節(jié)約水平和垂直的頁面空間，標簽設計成圖標，使表單更敏捷和簡潔。

缺點：

抽象的圖標標簽，增加認知負擔和記憶成本。

適用場景：

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

5）標簽對齊總結

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

依據(jù)馬泰奧·彭佐的對齊方式討論出的時間表總結：單從效率角度看，頂對齊右對齊左對齊，依據(jù)不同的業(yè)務場景，效率并不是唯一的考慮指標。

基于以上，我總結了一個對比表：

基于上表，得到以下幾點建議：

假如你盼望用戶放慢速度，認真思索表單中每個表單項，左對齊標簽是個好選擇，特殊是含有大量可選輸入框或高級設置的生疏數(shù)據(jù)時；

而頂對齊標簽在一些國際化產品的表單設計時，會有更好的延展性；

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

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

（1）pc端

在網頁端我們大多看到的都是左右結構（右對齊和左對齊），這是由于有空間占比的緣由。

在pc端，橫向空間很大，需要考慮到協(xié)調的關系，假如采納上下結構，在內容過多的狀況下，就會消失重心偏左的視覺效果。并且，視線距離屏幕較遠，視覺聚焦面積更大，因此視覺路徑較長的這一點就被中和掉了。

（2）移動端

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

2.必填與可選字段的標記如何選擇？

1）必填是否需要標記？

假如表單中的大多數(shù)字段或全部都是必填的，我們是否仍舊應當標記它們？

一般狀況下，設計師可能會覺得每個必填字段都有一個標記是重復、不好看，造成頁面視覺噪點的增多，甚至可能看起來很擾亂（有認知負擔），的確有些狀況下，紅色作為一種有特別含義的顏色，會引起用戶誤會。

那么我們來看看，標記與不標記的對比圖：

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

我們通常會實行以下一種或兩種策略：

在表單頂部顯示說明，說明中除非另有解釋，否則全部字段都是必填；只標記可選字段，由于它們通常較少；在某些特別狀況下，什么也不標記，信任用戶根據(jù)挨次填寫字段；假如不知道，那么只需要點擊提交報錯即可。這些方法都是使表單交互體驗不好的設計問題，為什么呢？

用戶一般不喜愛閱讀表單頂部說明，甚至會忽視掉表單頂部的大段文字說明。即使用戶閱讀了頂部的說明，也可能遺忘。特殊是當表單很長或填寫表單被打斷時（這種狀況在移動端很常見）。即使用戶記得，但這占用了工作記憶，增加了認知負荷，讓用戶完成任務更難了。用戶必需掃描表單以確定是否為必填字段。所以，無論是否在表單頂部包含說明，用戶都可能會忽視或遺忘。他們會掃視表單，找到一個標記為必填或可選的標識。假如作必填標記，用戶可能會做出假設?！斑@個沒有說必需要填，先空著吧”。即使用戶沒有留空，也不得不暫停來思索一個字段是否需要填寫，減慢交互速度并使過程看起來更長、更乏味。所以，想要解決以上問題很簡潔：標記全部必填字段！

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

2）一般是如何標記必填字段？

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

（1）星號（紅色）

星號在網頁上已經很常見，用戶熟識其含義。

優(yōu)點：

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

星號應當在字段標簽之前還是在字段標簽之后？

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

假如在標簽后面，由于輸入框形式、長度各不相同，標識和輸入框對齊會導致難以掃瞄和推斷。

所以最佳的答案是在標簽之前。

（2）“必填”提示

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

（3）為什么登錄表單沒有標記必填？

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

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

二、表單域的設計疑問指南

1.表單域有必要供應默認值嗎？

答案是有必要的供應默認值的！

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

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

當然有可能會存在懷疑：假如默認值不是用戶想要的，誤導用戶怎么辦？

在設計有默認值的表單域時，需要思索默認值是否是大多數(shù)用戶可以接受的答案，假如不確信可以先去做一下用戶調研，了解用戶的心聲。就算默認值真的不是用戶想要的，至少也為他供應了一個示例來告知用戶答案應當是什么樣子的。但是，并不代表全部的表單域都要給出默認值。只有當你有理由確信絕大部分用戶，在絕大多數(shù)狀況下，不會修改這個取值時才供應默認值——否則，這將會給用戶帶來額外的工作！2.輸入框的寬度如何設定

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

后來參考了AntDesign4.0系列文章《整齊劃一？不如錯落有致》，如下圖：錯落有致的排版表現(xiàn)好像比整齊劃一的左圖更舒適，由于在視覺上我們更簡單將右圖的空間和內容視為一個和諧的整體。

但左圖過度的對齊導致示意隱性的截斷，我們慣性視覺會產生表單字段右側空間缺了一大塊的錯覺。

AntDesign4.0系列文章總結到「表單寬度」的處理方式核心旨在解決兩個問題：

示意填寫內容長度；表單項布局排列效果；唐納德·諾曼的著作《設計心理學》中具體講解過心理示意方面的內容。而寬度的變化就是一種有效示意。

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

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

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

每一類型的表單的輸入域都會因其錄入數(shù)據(jù)的類型而存在對應的寬度，輸入域的寬度應當匹配和示意其填寫的內容；

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

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

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

表單設計中，對于單選框、復選框等控件，很明確必需跟隨內容自適應處理。但對于輸入框、選擇框等組件你是否也會產生困惑，是定寬處理還是跟隨內容更好。

實際業(yè)務中，大部分輸入框所需填寫內容都存在抱負長度，輸入框的寬度示意填寫內容的長度，合理的寬度關心削減用戶的焦慮，給用戶帶來平安感。在單項排布時也要盡量考慮用戶的觀感，通過設置合理的默認寬度尺寸，讓設計師快速搭建出觀感舒適又給用戶降低焦慮的頁面。

反之，假如輸入框不受限于示意，則應保持長度全都。

這里需要特殊留意：

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

2）模度值

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

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

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

梳理產品中常見的表單類型

依據(jù)你所設計產品的詳細業(yè)務狀況，梳理出常用的表單類型，依據(jù)這些表單類型的的長短來進行詳細輸入框尺寸的制定；

需要留意：

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

3）設定表單模度值

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

如：基準輸入寬度XS=104px，以其倍數(shù)(n