B端對齊細節，這次是真的細關于對齊，大部分設計師可能會覺得特別簡潔，不就是那幾種對齊方式嘛，莫非還有很簡單的操作？深化討論才發覺，B端對齊還真沒你想象的那么簡潔。假如不信，請接著往下看。

01對齊的含義

對齊，顧名思義就是將文字或圖片等信息以某種對齊規章進行排列。我們常用的對齊規章分為三類，即：左對齊、右對齊、居中對齊。

02通用場景對齊方式

2.1左對齊簡述

左對齊是最為常見的場景，由于它符合人們的閱讀動線——從左到右進行閱讀。在大部分的設計場景中都可以運用左對齊。比如我們常見的工作臺卡片、導航欄等都可以使用左對齊。

在使用左對齊時，不僅需要考慮物理對齊，在特定場景下需要考慮視覺對齊：比如在對于圖標和文字混排時，記得文字跟文字對齊，視覺效果會更加整齊（由于格式塔原理，人們對于類似的東西會將其看做同一類，而同一類對齊視覺上會舒適）。

2.2右對齊簡述

右對齊可能在許多時候運用得比較少，在一般設計場景的右對齊用來填補設計中右側的視覺空缺，比如以下兩種應用場景：

1.內容或者幫助信念使用右對齊。

2.操作類的右對齊，比如移動端表單或者web端操作。

2.3居中對齊簡述

居中對齊則一般是依據設計場景而選擇使用的，一般在兩種場景中：

1.特定狀態，比如空狀態中插畫與文字相結合，地圖標志等都是使用居中對齊的形式

2.特定組件，對于步驟條或者加載等特別組件，一般也使用居中對齊

03表格場景對齊方式

表單在B端設計中是特別常見的一種設計方式，表單中三種對齊方式都存在，目前有以下區分：

3.1常規字段左對齊

在默認狀況下基本都根據左對齊來進行排列，由于大部分表格字段都是非固定的，左對齊能夠讓整體有一個比較良好的展現效果。

3.2固定短字段居中對齊

2.居中對齊一般針對固定長度類型的數據，比如我們常見的性別、狀態和樓層等。采納居中對齊能夠很好的和表頭進行對齊，視覺上更舒適。

3.3金融數字右對齊

而右對齊則一般針對金融類，比如價格等數字，由于數字采納右對齊能夠更好地進行價格的比較。

在這里要留意，使用數字時最好使用等寬的數字，第一是為了避開由于數字不同的寬度而不太整齊，其次則是為了更好地進行金額等的對比。

比如DIN字體、微軟雅黑、思源黑體都屬于等寬字體，而我們常見的蘋方字體則為非等寬。

04表單場景對齊方式

在錄入場景中，一般分為標題和內容兩個字段進行展現，因此這兩種字段可以組合成以下幾種對齊方式：標題左對齊、標題右對齊、整體左對齊、頂對齊。

那么這幾種究竟有什么區分呢？我們接著往下看。

4.1標題左對齊

這是一種目前在許多B端產品中比較常見的對齊方式。

優勢：視覺上看著特別整齊，縱向掃瞄標題也會更簡單，美觀度相對會更高；劣勢：左側區域會固定寬度，對于較短標題字段會與標題隔得較開，對于整體信息獵取效率降低。但因此也可以讓用戶在錄入時更加謹慎。比如在神策或者coding等許多產品的配置場景中，基本采納左對齊的方式進行配置。

coding的：

4.2標題右對齊

這種對齊方式犧牲了視覺對齊，換來了標簽和內容的間距全都，讓其親熱性更強，從操作效率上來講會得到肯定的提高。比如在釘釘的新版后臺中，基本采納了此種對齊方式。

優勢：標簽和內容距離更近，信息獵取和操作效率更高；劣勢：犧牲了肯定的視覺美觀度，并且假如消失過長的字段，左對齊的折行的體驗會特別不好；我們在使用此類對齊方式時對于標題的字數有一個合理的限制。

4.3整體左對齊

這種方式就是標題與內容進行貼合設計，整體左對齊。

優勢：標簽和內容距離更近，且整體會呈現左對齊，視覺效果也相對較好。劣勢：內容區域縱向看不會對齊，對于內容區域的整體識別會相對較弱。運用此方式的場景大部分在多列字段的設計場景中，由于相較于前兩種方式來講，多列字段（2列及以上）同步呈現時，該類方式會讓整體表單顯得更緊湊與合理。

但從目前市場上的競品來看，運用此類排列方式的場景比較少，僅有少部分在展現字段時運用了此種方式。

猜想有2點緣由：

大部分狀況下表單類都采納單列排列，因此使用場景較少。該種排列方式不太適用于編輯狀態，會造成呈現狀態與編輯狀態切換上呈現上有差異。所以某些配置場景為了讓編輯也保持全都性，會放棄上述的對齊方式改為標題右對齊,比如acrodesign的設計案例：

雖然目前應用得不多，但我們在平日的運用中，也需要留意此種應用場景。

4.4頂對齊

這種相對于是另外一種方式，這種方式降低了對頁面寬度的要求，供應了更多的橫向空間。從用并且目前許多產品已經在各個功能模塊運用頂對齊來記性錄入：

優勢：不僅提升了用戶獵取信息的效率，據討論發覺只要50ms。同時標題的拓展性更強了，能夠容納更長的標題劣勢：從布局上來看是犧牲了肯定的縱向利用空間的，對于在設計場景中縱向空間較少的需要考慮使用。目前國外產品和國內錄入場景頂對齊用的也比較多。

4.5如何選擇

那么我們在進行表單設計時如何選擇呢，這就需要依據我們的實際狀況了。

從信息獵取效率來講，頂對齊最快（50ms)，標題右對齊其次(240ms)，左對齊最慢（500ms）；從視覺和閱讀觀感上來講，標題左對齊和整體左對齊的視覺表達會更好；因此我們需要考慮當前頁面的使用場景：

1.更偏向于錄入場景的話，且橫向空間充分，選擇標題右對齊，否則頂對齊。

2.更偏向于閱讀或掃瞄的話，選擇標題左對齊或整體左對齊。而這兩者的細致場景區分，需要考慮當前場景標題字段的差異性：

A.假如標題字段都比較接近，選擇標題左對齊；

B.假如標題字段相差比較大，尤其是字段需要配置的場景，那么可以選擇整體左對齊。比如我舉一個例子你