上期回顧：

精心設計的表單，能讓用戶感到心情舒暢，愉快的注冊、付款和進行內容創建和管理，這是促成網上商業成功的秘密武器。表單在 B 端和 C 端都有舉足輕重的作用，特別是 B 端產品，表單和表格幾乎占據了整個產品的 70%。

表單設計相關文章：

那我們在設計表單的時候有沒有需要注意的地方？如果產品或業務方問你為什么這樣設計，你應該用什么方式去回答？

為什么學習底層邏輯：

互聯網經過了這么多年的發展，現在要說在一些基礎的元素上去創新其實很難。首先公司不會給你時間去研究，大環境也不允許，這可能是為什么底層技術都是用的國外的。google 可以用 3 個月時間研究基礎組件文本框，這里面除了設計還需要進行大量的測試，來驗證設計是合理的、好用的，但是國內很少有公司會給你 3 個月研究一個文本框。

有人會說我只要會用就行了，管它為啥這么設計。如果是這樣，在評審的時候就會經常被質疑，為什么要用這個組件，能不能換一個？我覺得可以用開關組件，我覺得可以用單選，那我們到底聽誰的，我們還是設計師嗎？我們雖然沒有這么多時間去研究創新，但在使用的時候還是要知道這些組件的底層原理，這樣你才能根據業務場景靈活運用，而不是聽別人的，看別人的。

首先看一下表單有哪些設計原則：

設計原則是任何一種解決方案的指路燈。他們體現解決方案應包含的基本目標。

原則 1：盡量減少痛苦，填寫過程應該盡量簡潔、容易

原則 2：說明填寫完成路徑，清晰告訴用戶如何完成這個目標

原則 3：考慮情境，受眾群體、應用、業務

原則 4：確保一致溝通，保證客戶與公司只用一種聲音說話

帶著原則來了解一個問題：

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

導致不同對齊的原因：有時候你希望能降低人們速度，使他們有時間進行深思熟慮。也可能受到屏幕顯示的限制，要求表單縱向或者橫向空間最小化。也可能由于本地化需要，表單要適應不同長度的多種語言。所以標簽頂對齊、左對齊或者右對齊的正確答案取決于這些及其他更多因素。

1. 頂對齊

三種標簽對齊方式中，頂對齊標簽對減少表單填寫時間所做的貢獻最大。

由于標簽和輸入框的位置非常靠近，處理起來毫不費力。填寫整個表單很快很容易，因為人們一般只需要在一個方向移動：向下。這也為填完表單提供了清晰地完成路徑。

頂對齊標簽還提供了大量橫向空間，可用來擴大或者收縮標簽文字，而不會對整個頁面布局產生負面影響。這對比長標簽或者跨文化的本地化標簽特別有用。相同情況下，法語，德語或者荷蘭語等語言比英語長，因此很容易破壞表單布局。大量橫向空間可用于以多種方式組合相關輸入框，這是頂對齊標簽的另一優點，由于橫向空間減少，左對齊和右對齊標簽對這種布局靈活性不足。

但頂對齊標簽會占用額外的垂直空間。因此，如果可供使用的垂直屏幕空間較小，應當謹慎使用頂對齊標簽。 頂對齊標簽布局還應當采用合適的垂直間距。 表單輸入框之間的垂直空間太少或者太多都會阻礙移動。一般而言，最好使用輸入框 50%至 75%的高度作為相鄰輸入框的間距。

能迅速填完頂對齊標簽表單的原因之一，可能是因為眼球只需要在標簽和輸入框之間進行單一運動。事實上，馬泰奧·彭佐從 2006 年 7 月進行的眼動研究發現，從標簽移動到輸入框只要 50 毫秒，比右對齊標簽方式快兩倍，后者高達 240 毫秒。

因為完成時間短、完成率高，有些設計師總是推薦使用頂對齊標簽，畢竟，花費最少氣力填完表單是首要目標，頂對齊標簽的速度自然會起作用。 但眼動追蹤及現場網站測試采用的都是人們熟悉數據的表單，也就是說，人們普遍了解或者隨時可以找到這些信息，比如姓名、地址、信用卡號碼或者電子郵件地址，測試結果是否適用于陌生數據，仍有待觀察。

2. 右對齊

右對齊標簽同樣具有輸入框與標簽相鄰的優點，因此也能快速填完。

但右對齊布局造成左側補齊，會降低快速瀏覽表單問題的效率。西方人習慣從左往右閱讀，他們的眼睛喜歡沿左側移動。如果標簽文字寬度變化，右對齊標簽還會產生靈活性的問題。如果標簽需要兩行文字，流量表單會更加困難，而這種現象相當普遍。

也就是說，如果要盡量減少表單占用的垂直屏幕空間，右對齊標簽能提供快讀完成時間。 馬泰奧·彭佐的眼動研究發現，專家用戶和新手掃視（眼睛運動）右對齊標簽表單的標簽和輸入框的平均時間分別為 170 毫秒和 240 毫秒，而填完時間比左對齊標簽快兩倍。

3. 左對齊

如果人們不熟悉表單要收集的數據，或者問題無法分成易處理的內容組（比如地址各部分），左對齊標簽瀏覽表單問題會更容易，人們只要上上下下閱讀標簽左欄，不會被輸入框打斷。

但有些長標簽經常會增加標簽和輸入框之間的距離，因而延長完成時間。人們不得不在欄之間“跳越”，發現輸入框和標簽之間的正確聯系，然后才能輸入答案。 與頂對齊標簽相比，左對齊標簽還有占用較少垂直屏幕空間的優點。不過和右對齊標簽一樣，標簽長度和輸入框組合彈性小是其缺點之一。

三種方案中，左對齊表單填寫速度最慢，可能因為左對齊表單解析問題時眼球定位次數較多。人們一般都能將左對齊布局中的標簽與相應輸入框聯系起來，只是花費時間較長。根據馬泰奧·彭佐的研究，“典型掃視時間為 500 毫秒”，很長，說明用戶經歷著沉重的認知壓力。

另外 2 種較少使用的標簽：

1. 輸入框標簽

如果屏幕空間寶貴，可以使用輸入框內標簽，這種做法減少了一半表單需要的屏幕空間。目前常用場景主要是在一些登錄、注冊、申請試用等簡單的表單中使用，在主要內容中比較少見。

2. 混合對齊

雖然目前沒有數據表明采用混合標簽會有問題，而經驗又告訴我們情境常常比一致性更重要。 但同一產品采用不同表單布局時一定要謹慎，除非有合適理由。否則采用單一布局是最安全的，也能兼顧一致性問題。

總結

1. 表單標簽應當使用自然的簡潔語言，大小寫一致，所提問題應當盡量直觀，容易理解
2. 如果要減少填寫時間，或者出于本地化原因，標簽長度需要靈活多變，可采用定對齊標簽
3. 如果與上述目標類似，但垂直屏幕空間有限，可采用右對齊標簽
4. 如要求用戶瀏覽表單標簽，知道必填問題或者回答多個問題中的若干特定問題，可采用左對齊標簽
5. 如果表單非常短，屏幕空間極度有限，可采用輸入框內標簽，同時應當確保合適的交互和情境
6. 確保清晰區分標簽和數據，特別是對于輸入框內標簽
7. 如果考慮在同一應用工具的不同表單采用不同標簽對齊方式，應當平衡情境和一致性
8. 單一表格中采用不同標簽對齊方式會破壞明確完成路徑，人們會覺得迷惑

最后再給大家講一個故事：

有一天，齊桓公正在讀書，被一個叫扁的工匠看到了．扁問：“大王，您讀的是什么書？”桓公說：“這是圣人的書?！北庹f：“如此說來，大王您讀的只不過是圣人的糟粕而已?！饼R桓公一聽，氣壞了，說：“你一個工匠，從來不讀書，你知道什么？”扁不慌不忙地回答：“我是在做輪子的過程中感受到的．如果做輪子時輪軸做得太松，輪子就太過光滑不夠堅固；如果太緊就會導致輪子轉動困難；只有不松不緊的時候，才剛好合適．但不松不緊的感覺我卻無法通過語言描述，只能在反復練習中去領悟。照此看來，您所讀的書，不也就是圣人的糟粕嗎？” 未完待續...