輯導語：表單是最常用的信息錄入工具，日常生活中，我們每個人都在和各種表單打交道。本文作者結合案例對表單標簽的樣式及設計注意事項進行了詳細的說明，相信對表單標簽不熟悉的同學看完后肯定會有不少的收獲~

輸入設計和表單設計是產品經理與交互設計師的核心技能，你可以把它們用在各類軟件和各種平臺上。

一、首先什么是標簽？

我們先來復習一下文本輸入框的構成。

△文本輸入框的構成

1. 文本容器/Container—可交互的輸入區域
2. 輸入文本/Input text—所輸入的文本內容
3. 標簽文本/Label Text—告訴用戶這個表單字段中要輸入的內容屬性
4. 占位符文本/Placeholder text—輸入信息的范例，用戶后續需要用自己的內容替代它
5. 幫助和驗證（可選）/Helper or Validation text(optional)—提供上下文信息和驗證信息
6. 引導圖標（可選）/Leading icon(optional)—描述文本字段所需的輸入類型和特征
7. 后綴圖標（可選）/Trailing icon(optional)—對輸入內容進行控制，比如顯示和隱藏

我們今天要聊的就是第3點：標簽文本/Label Text。

標簽應該用人們能明白的語言提出簡潔問題，以便于回答。

但依舊依賴于表單元素的布局。

二、標簽對齊方式

輸入框標簽應當頂對齊、右對齊還是左對齊？

先來看看這幾種對齊方式的優缺點。

1. 頂對齊標簽/Top aligned labels

△頂對齊標簽

優點：

• 頂對齊時間最快，由于標簽和輸入框的位置非常靠近，處理起來毫不費力。清晰的完成路徑，只需要往下移動。
• 提供了大量的橫向空間，可以用來擴大或者收縮標簽文字，而不會對整個頁面布局產生負面影響。
• 比如說法語、德語或荷蘭語比英語長很多的語言，容易對表單布局產生破壞力。
• 橫向空間的富余，可以以多種方式組合相關輸入框。

缺點：

eg: Amazon 寄送地址表單的頂對齊標簽提供了充裕空間，可水平分組相關內容.

2. 左對齊標簽/Left-aligned labels

△左對齊標簽

優點：

• 容易瀏覽標簽，只要上下瀏覽表單問題，不會被輸入框打斷。
• 垂直空間占用少。

缺點：

• 標簽和相關輸入框相鄰間距過大，延長完成時間。
• 根據馬泰奧的研究，“典型掃視時間為500毫秒，很長，說明用戶經歷著沉重的認知壓力。”
• 雖然速度是最慢的，但從辯證的角度來看，完成時間較長并不一定是壞事。
• 有時候我們需要用戶謹慎的對待表單的填寫，特別是表單含有大量可選輸入框，類似“使用偏好”或者高級設置陌生數據時，就可以使用左對齊標簽。

3. 右對齊標簽/Right-aligned labels

△右對齊標簽

優點：

缺點：

• 右對齊布局造成左側不齊，可讀性降低；
• 不夠靈活，如果標簽需要兩行文字進行展示，會導致閱讀困難。
• 但如果既要減少表單占用的垂直空間，又要減少填表時間的話，右對齊標簽不失為一個較好的選擇。

eg: Jira 創建故事表單采用右對齊標簽布局

4. 輸入框內標簽/Label in the input box

優點：

對屏幕的占用空間非常小

缺點：

• 填寫輸入框時，輸入框的標簽會消失，因此用戶看不到提示；
• 填完后，也無法檢查對錯。
• 且輸入框內的標簽要明確的表明自己是標簽，而不是已填數據。
• 輸入框內標簽更適合用于只有一個問題（比如搜索框）或者幾個輸入框的表單或者問題非常熟悉的表單（比如通訊錄）。

eg：Dribbble 搜索頁面為輸入框內標簽

5. 浮動標簽/Float label

當用戶在Text field中輸入內容以后，內嵌Label會浮動到Text field上方，成為頂端對齊。

優點：兼具內嵌Label和頂端對齊的優點

缺點：輸入內容后，標簽顯示過小，對于小屏幕和視力不佳的用戶來說是個挑戰。

eg：Yahoo登錄頁面，輸入框為浮動標簽

三、總結

• 頂對齊標簽，能減少填寫時間，適用于本地化，標簽長度可以靈活多變。
• 右對齊標簽，與頂對齊標簽類似，但可以減少垂直空間的占用。
• 左對齊標簽，要求人們仔細填寫或者回答多個問題中的若干特定問題。
• 輸入框內標簽，表單問題少，屏幕空間非常有限。
• 浮動標簽，注意場景與使用者視力問題。
• 注意區分標簽與數據。

擴展閱讀：

能迅速填完頂對齊標簽表單的原因之一，是因為眼球只需要在標簽和輸入框之間進行單一運動。

事實上，馬泰奧·彭佐從2006年7月進行的眼動研究發現，頂對齊標簽方式從標簽移動到輸入框只要50毫秒，比左對齊標簽方式快了10倍，后者需要500毫秒；比右對齊標簽方式快2倍，后者高達240毫秒。

可能覺得幾百毫秒，覺得也沒有多少多長時間，但是一旦涉及到需要填寫幾百個錄入項，時間也是成倍的。

所以在標簽對齊上要根據場景選擇合適的方式。

作者：Neko，支付產品經理/UI/UX；公眾號：吱了一聲

本文由 @Neko 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自pexels，基于CC0協議

輯導語：B端表單若設計不好，則容易導致不佳的用戶體驗，無法給用戶有效的信息反饋。那么，應該如何優化B端表單設計、提高B端表單的操作效率呢？也許你需要在交互形式、表單頁面、輸入框等方面做好優化。本文作者總結了提高B端表單操作效率的7個技巧，不妨來看一下。

一些同學在設計B端表單時，不知道需要考慮哪些問題，直接使用Ant Design提供的表單模版，或者參考競品，上線后用戶反饋難用，產品反饋拓展性低。

那么該如何提高B端表單操作效率呢？這里有7個技巧分享給大家。

目錄

1. 不濫用表單的交互形式；
2. 將復雜表單進行合理的歸納簡化；
3. 復雜表單布局要考慮關聯性；
4. 表單視覺可以不平衡；
5. 標簽對齊方式要選對；
6. 表單頁面要考慮適配方式；
7. 輸入框不用整齊劃一，可以錯落有致。

一、不濫用表單的交互形式

表單的交互設計，有時候往往會被設計所忽略，或者所有交互都采用彈窗，本可以氣泡卡片一步解決，使用彈窗卻要兩步完成，本需要界面跳轉承載復雜表單，卻使用彈窗不停滾動。

在表單設計時，該如何選擇合適的交互形式呢？首先我們需要了解常用的交互形式有哪些。

常用的交互形式主要有：原位編輯、氣泡卡片、彈窗、抽屜、全屏彈窗、頁面跳轉等。

表單交互方式的選擇，我們可以參考 Ant Design 表單設計規范，從關聯性和復雜度進行判斷，在選擇時，我們優先考慮信息的復雜度，其次在考慮相關性。

1）當信息復雜度低，同時相關性高時，我們可以選擇原位編輯/氣泡卡片、彈窗的交互方式。

比如釘釘任務詳情頁面的數據編輯，相關度極高，同時信息不復雜，那么就可選擇原位編輯，在使用原位編輯時，需要根據業務進行判斷，是否有必要進行原位編輯。

而Ones的篩選，其數據量相對較多，但是相關性極高，那么就可以選擇氣泡的形式；有贊教育綁定銷售員，采用了彈窗的形式，這里也可采取氣泡的形式。

2）當信息復雜度高，但關聯性也較高時，我們可以使用抽屜、全屏彈窗的交互方式。

比如神策數據，信息量較為復雜，同時有一定相關性，數據創建后即可在列表中查看；但是當數據特別復雜，同時新增入口位置較多時，可采用全屏彈窗的方式，在CRM行業較常見，比如銷幫幫。

其優勢是，當從詳情頁進行新增或編輯時，編輯完成后，詳情頁數據即可展示當前新增的信息，如果是頁面表單，需要刷新數據才可以查看到，體驗感較低。

3）當信息復雜度高或信息獨立時，我們可以使用頁面的交互方式。

比如有贊的新增報名，其關聯性就不像CRM那么強，因此直接采用頁面的交互方式就可以；而阿里巴巴的創建網絡信息復雜度較高，同時相對獨立，因此也適合采用頁面進行交互。

二、將復雜表單進行合理的歸納簡化

對于復雜表單，在設計時需要對其進行合理的歸納簡化，降低表單填寫負荷。

一般來說，表單可分為基礎表單、分步表單、錨點定位、標簽頁這幾類。

1）當表單條目數在7個內，表單較為簡單，這時候我們一般直接采用基礎表單，比如有贊更換負責人頁面：

2）當表單條目數在7個以上，可歸類到復雜表單，這時候就需要根據表單的復雜度、邏輯性、關聯性進行判斷，選擇合適的分組方式，進行歸納簡化，降低表單填寫負荷。具體該如何選擇呢？

① 如果每個組之間有邏輯先后順序，那么推薦使用分步表單，比如阿里云的購買。

② 如果每個組之間關聯性較強，就不適合分開，推薦使用錨點定位，比如銷幫幫的編輯銷售機會、新建客戶等表單都是采用錨點定位。

③ 如果每個組既沒有邏輯先后順序，也沒有關聯性時，推薦使用標簽分組，比如飛書的發票管理，都是相對獨立的表單。

三、復雜表單布局要考慮關聯性

上面提到了為復雜表單進行合理的歸納簡化，但是歸納簡化后采用什么布局方式更合適呢？

表單頁面的布局方式，綜合起來可分為普通布局、弱分組、區域內分組、卡片分組這四種。

在選擇時，和表單的交互方式選擇一樣，可參考 Ant Design 表單設計規范，從關聯性和復雜度進行判斷，在選擇時，我們優先考慮信息的復雜度，其次再考慮相關性。

1）當條目數在7個內時，仍然使用基礎布局，比如網易互客的企業信息資料新增：

2）當表單條目數在7個以上，可歸類到復雜表單，這時候仍然根據表單的復雜度、邏輯性、關聯性進行判斷，選擇合適的布局方式，提高表單的瀏覽效率和屏效需求。

① 當表單空間有限，且相關性較強時，推薦使用弱分組，將多個組合在一行中，形成分組的暗示。

PS：弱分組也可和區域內分組和卡片分組組合使用，從而提高屏效。

② 當條目數在7-15個內時，相關性較強時，使用區域內分組較為適合，比如網易七魚的新建在線質檢模版：

③ 當條目數在15個以上，推薦使用卡片布局較為合適，比如阿里云服務購買表單：

四、表單視覺可以不平衡

在設計表單時，我們總覺得視覺重心偏左，因此在設計時我們總想讓視覺變得更平衡。

比如京東云，使用大屏電腦看，信息全集中在左邊，感覺視覺有點失衡。而類似飛書的居中設計，視覺會更平衡。

于是我在設計時也在考慮要不要用居中設計的方式呢？但是當我繼續查找資料時發現，其實在表單的設計中我們不用過度的追求視覺平衡，首先人的視覺動線遵循F模型，同時根據行業相關信息可讀性研究，眼動舒適角度為30度。

因此當表單信息較少，不考慮屏效時，采用從上往下的方式，據研究這是能夠最高效完成任務的布局方式。

為了印證這個結論，我收集了近50個B端后臺，共507個表單，竟然發現只有2個產品用了視覺重心居中的設計。

這個結果讓我挺詫異的，但又在情理之中。一個是飛書設置類表單、一個是百度云購買表單。

設置類表單，數據項較少，相對比較簡單，使用居中設計可以讓用戶更聚焦。

而百度云的表單，雖然也是視覺居中，但是將側邊欄進行收起，在設計上和我們普通網頁設計方式類似，從而承載更多的信息。

而其他的CRM、ERP、云產品、OA、項目研發、文檔產品、在線教育、HR、BI等系統產品的錄入類表單均采用的視覺偏左的設計方式，不管表單拓展多復雜的信息，都不會影響整體的一致性。

所以，在設計表單時不用過度追求視覺平衡，而是需要優先考慮信息操作效率，信息閱讀效率。

五、標簽對齊方式要選對

標簽分為左標簽、右標簽、頂標簽三種，不同的對齊方式，使用場景不同。

具體該如何選擇呢？我們需要從3個方面進行考慮：操作效率、標簽長度、屏效、視覺對齊。

1. 操作效率

根據Matteo Penzo的研究總結得到的瀏覽時間表發現，標簽移動到輸入框的時間，頂部對齊最快只要50ms，其次是右對齊240ms，左對齊耗費時間最長500ms。

因此當以操作效率為主時，推薦使用頂對齊的方式。

2. 標簽長度

當標簽長度超過8個字，或者需要考慮中英文雙版本時，推薦使用頂對齊的方式，其容納的標簽文字更多，拓展性更好，比如Ones的建任務的標簽，就采用標簽頂對齊的方式：

3. 屏效

如果只考慮屏效，那么標簽左對齊右對齊均可，但是如果還考慮表單錄入效率，那么推薦使用標簽右對齊的方式，比如蜂鳥匯報：

4. 視覺對齊

一般情況我們在設計表單，優先考慮效率和屏效，但在競品分析中發現，竟然有50%的表單采用了標簽左對齊的方式，因為這樣可以讓標簽和其他內容保持對齊，比如神策網：

因此，在進行標簽對齊方式的選擇時，我們首先要清楚以什么為主，什么是可以犧牲的，比如神策網選擇了視覺對齊，而犧牲的是操作效率。

六、表單頁面要考慮適配方式

設計時如果不考慮適配方式，那么前端可能不考慮，可能用他覺得合理的方式，在實際使用時就會導致體驗不好，后面想在調整就得重新等排期了，因此在設計時就需要把適配方式定好。

表單在設計時一般有2種適配方式，一種是固定適配，一種是間距適配。

1. 固定適配，設計需要注意

設計時，需要保證最小分辨率能夠正常顯示，表單中信息寬度固定，不隨分辨率變化而變化。該方式適合用于表單頁面的適配中。

當采用弱分組布局時，隨分辨率變小，數據項自動掉下來，其他保持不變。

這里最小分辨率大家根據自己公司情況而定，我在設計時設定1366X768為最小分辨率。

下圖是百度統計流量研究所，大家可以看看數據，具體以自身公司而定，因為一些單位可能還在使用1280X720的分辨率，那么就設定1280為最小兼容的分辨率。

2. 間距適配，和移動端類似，間距固定，組件自適應

該適應方式在彈窗、抽屜中較為使用，表單頁中不太推薦使用該方式，因為當分辨率變大，眼動的視覺變大，不利于信息瀏覽。

七、輸入框不用整齊劃一，可以錯落有致

表單頁在設計時，我們總是糾結到底整齊排列好，還是錯落排列好，錯落排列又該遵循什么規則呢，這里推薦大家閱讀Ant_Design的文章《整齊劃一？不如錯落有致》。

文章提到，如果表單跟隨空間自適應會造成不穩定的情況，線上效果會呈現以下效果。

同時輸入框的寬度不應該自適應，而需要根據填寫內容的長度來定，減輕判斷負擔。

最后，錯落有致更舒適，整齊劃一在視線上有隱性的截斷，會感覺缺了一塊內容。

如何錯落有致呢？有什么規則嗎？

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

通過對比，我們可以明顯地看到，錯落有致的排列方式更加舒適。

當然，你在設計時，最小原子的寬度不一定設置為104，也可根據業務情況將最小原子XS設置為可容納6個中文漢字，然后在通過如下規則進行換算。

八、畫重點

本文針對如何提高B端表單操作效率，整理了7個技巧：

1. 不濫用表單的交互形式；
2. 將復雜表單進行合理的歸納簡化；
3. 復雜表單布局要考慮關聯性；
4. 表單視覺可以不平衡；
5. 標簽對齊方式要選對；
6. 表單頁面要考慮適配方式；
7. 輸入框不用整齊劃一，可以錯落有致。

希望通過本文的分享，讓大家有一個更清晰的認知，從而提高表單操作效率。

參考引文：

《且曼B端產品設計之表單設計》

人眼的視角

http://t.hk.uy/Chp

Label Placement in Forms

http://t.hk.uy/Chr

淺談B端表單設計

https://mp.weixin.qq.com/s/L1bB3qlzstK6T4LkLEPtKQ

Ant Design 表單設計規范

https://ant.design/docs/spec/research-form-cn

Ant Design ProForm 高級表單

https://procomponents.ant.design/components/form

QueryFilter / LightFilter 篩選表單

https://procomponents.ant.design/components/query-filter

整齊劃一，不如錯落有致

https://www.zcool.com.cn/article/ZMTIxMzA2OA==.html

作者：風箏KK，公眾號：海鹽社

本文由 @風箏KK 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

簽制作軟件中在進行繪制文字的時候，其中文字的排版對齊方式有好幾種，今天就給大家分享一下都有哪些文字對齊方式。

首先打開標簽制作軟件，新建標簽，設置標簽尺寸，然后點擊“查看”—“對齊”就可以看到軟件的對齊方式有那幾種了。

左對齊：非常好理解就選中文字之后排版的樣式就是左對齊了。其余的右對齊、頂對齊、底對齊、都可以按照這種方式去進行理解排版樣式。比如說在軟件中繪制一個文字，選中右對齊之后點擊確認，效果如下：

看了上面的效果就理解了右對齊方式。就是在繪制的文字藍色區域的框框中文字排版樣式是右對齊。

除了上面的對齊方式之外，還有一種文字的對齊方式是普通文本中“兩端對齊”的方式，接下來我將繪制的普通文本設置對齊方式為兩端對齊，并設置一下“字符等寬” ，點擊確認之后就可以看到效果。

以上就是在標簽制作軟件中繪制繪制文字時候的幾種對齊方式了，有需要的可根據實際的需求去進行自定義設置。