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

語言: CN / TW / HK

關於對齊,大部分設計師可能會覺得非常簡單,不就是那幾種對齊方式嘛,難道還有很複雜的操作?深入研究才發現,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