B端對齊細節，這次是真的細

關於對齊，大部分設計師可能會覺得非常簡單，不就是那幾種對齊方式嘛，難道還有很複雜的操作？深入研究才發現，B端對齊還真沒你想象的那麼簡單。如果不信，請接著往下看。

01.對齊的含義

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

02.通用場景對齊方式

2.1左對齊簡述

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

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

2.2右對齊簡述

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

1.內容或者輔助信心使用右對齊

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

2.3居中對齊簡述

居中對齊則一般是根據設計場景而選擇使用的，一般在兩種場景中：1.特定狀態，比如空狀態中插畫與文字相結合，地圖標誌等都是使用居中對齊的形式

2.特定元件，對於步驟條或者載入等特殊元件，一般也使用居中對齊

03.表格場景對齊方式

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

3.1常規欄位左對齊

在預設情況下基本都按照左對齊來進行排列，因為大部分表格欄位都是非固定的，左對齊能夠讓整體有一個比較良好的展示效果。

3.2 固定短欄位居中對齊

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

3.3 金融數字右對齊

而右對齊則一般針對金融類，比如價格等數字，因為數字採用右對齊能夠更好地進行價格的比較。

在這裡要注意，使用數字時最好使用等寬的數字，第一是為了避免因為數字不同的寬度而不太整齊，第二則是為了更好地進行金額等的對比。比如DIN字型、微軟雅黑、思源黑體都屬於等寬字型，而我們常見的蘋方字型則為非等寬。

04.表單場景對齊方式

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

那麼這幾種到底有什麼區別呢,我們接著往下看

4.1 標題左對齊

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

優勢：視覺上看著非常整齊，縱向瀏覽標題也會更容易，美觀度相對會更高；

劣勢：左側區域會固定寬度，對於較短標題欄位會與標題隔得較開，對於整體資訊獲取效率降低。但因此也可以讓使用者在錄入時更加謹慎。

比如在神策或者coding等很多產品的配置場景中，基本採用左對齊的方式進行配置。

4.2 標題右對齊

這種對齊方式犧牲了視覺對齊，換來了標籤和內容的間距一致，讓其親密性更強，從操作效率上來講會得到一定的提高。比如在釘釘的新版後臺中，基本採用了此種對齊方式。

優勢：標籤和內容距離更近，資訊獲取和操作效率更高；

劣勢：犧牲了一定的視覺美觀度，並且如果出現過長的欄位，左對齊的折行的體驗會非常不好；

我們在使用此類對齊方式時對於標題的字數有一個合理的限制。

4.3 整體左對齊

這種方式就是標題與內容進行貼合設計，整體左對齊。優勢：標籤和內容距離更近，且整體會呈現左對齊，視覺效果也相對較好劣勢：內容區域縱向看不會對齊，對於內容區域的整體識別會相對較弱。

運用此方式的場景大部分在多列欄位的設計場景中，因為相較於前兩種方式來講，多列欄位（2列及以上）同步呈現時，該類方式會讓整體表單顯得更緊湊與合理。

但從目前市場上的競品來看，運用此類排列方式的場景比較少，僅有少部分在展示欄位時運用了此種方式。猜測有2點原因：

1.大部分情況下表單類都採用單列排列，因此使用場景較少

2.該種排列方式不太適用於編輯狀態，會造成呈現狀態與編輯狀態切換上呈現上有差異。所以某些配置場景為了讓編輯也保持一致性，會放棄上述的對齊方式改為標題右對齊,比如acro design的設計案例：

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

4.4 頂對齊

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

優勢：不僅提升了使用者獲取資訊的效率，據研究發現只要50ms。同時標題的拓展性更強了，能夠容納更長的標題

劣勢：從佈局上來看是犧牲了一定的縱向利用空間的，對於在設計場景中縱向空間較少的需要考慮使用。

目前國外產品和國內錄入場景頂對齊用的也比較多。

4.5 如何選擇

那麼我們在進行表單設計時如何選擇呢，這就需要根據我們的實際情況了。1.從資訊獲取效率來講，頂對齊最快（50ms)，標題右對齊其次(240ms)，左對齊最慢（500ms）。2.從視覺和閱讀觀感上來講，標題左對齊和整體左對齊的視覺表達會更好；

因此我們需要考慮當前頁面的使用場景：1.更偏向於錄入場景的話，且橫向空間充足，選擇標題右對齊，否則頂對齊。2.更偏向於閱讀或瀏覽的話，選擇標題左對齊或整體左對齊。而這兩者的細緻場景區分，需要考慮當前場景標題欄位的差異性：A.如果標題欄位都比較接近，選擇標題左對齊；B.如果標題欄位相差比較大，尤其是欄位需要配置的場景，那麼可以選擇整體左對齊。比如我舉一個例子你就明白了：

當標題差異過大的時候，標題左對齊會讓某些標題與內容間隔特別長，閱讀體驗就會降低很多。通過這樣的場景和使用分析，我們就能夠更加清晰地使用各類對齊方式，來讓我們整體的使用體驗更好。

那麼看到這裡，你有掌握關於B端對齊的全部細節嗎？

Powered by Froala Editor