B端對齊細節,這次是真的細
對齊是一種常見的設計方式,它符合用戶的觀看習慣。作為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點原因:
- 大部分情況下表單類都采用單列排列,因此使用場景較少。
- 該種排列方式不太適用于編輯狀態,會造成呈現狀態與編輯狀態切換上呈現上有差異。
所以某些配置場景為了讓編輯也保持一致性,會放棄上述的對齊方式改為標題右對齊,比如acro design的設計案例:
雖然目前應用得不多,但我們在平日的運用中,也需要留意此種應用場景。
4.4 頂對齊
這種相對于是另外一種方式,這種方式降低了對頁面寬度的要求,提供了更多的橫向空間。從用并且目前很多產品已經在各個功能模塊運用頂對齊來記性錄入:
- 優勢:不僅提升了用戶獲取信息的效率,據研究發現只要50ms。同時標題的拓展性更強了,能夠容納更長的標題
- 劣勢:從布局上來看是犧牲了一定的縱向利用空間的,對于在設計場景中縱向空間較少的需要考慮使用。
目前國外產品和國內錄入場景頂對齊用的也比較多。
4.5 如何選擇
那么我們在進行表單設計時如何選擇呢,這就需要根據我們的實際情況了。
- 從信息獲取效率來講,頂對齊最快(50ms),標題右對齊其次(240ms),左對齊最慢(500ms);
- 從視覺和閱讀觀感上來講,標題左對齊和整體左對齊的視覺表達會更好;
因此我們需要考慮當前頁面的使用場景:
1.更偏向于錄入場景的話,且橫向空間充足,選擇標題右對齊,否則頂對齊。
2.更偏向于閱讀或瀏覽的話,選擇標題左對齊或整體左對齊。而這兩者的細致場景區分,需要考慮當前場景標題字段的差異性:
A.如果標題字段都比較接近,選擇標題左對齊;
B.如果標題字段相差比較大,尤其是字段需要配置的場景,那么可以選擇整體左對齊。比如我舉一個例子你就明白了:
當標題差異過大的時候,標題左對齊會讓某些標題與內容間隔特別長,閱讀體驗就會降低很多。
通過這樣的場景和使用分析,我們就能夠更加清晰地使用各類對齊方式,來讓我們整體的使用體驗更好。那么看到這里,你有掌握關于B端對齊的全部細節嗎?
本文由 @蒙東東 原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
??