對(duì)齊是一種常見的設(shè)計(jì)方式，它符合用戶的觀看習(xí)慣。作為B端設(shè)計(jì)，對(duì)齊有多少種方式？設(shè)計(jì)的時(shí)候有什么講究呢？本文作者對(duì)此進(jìn)行了分析，與你分享。

關(guān)于對(duì)齊，大部分設(shè)計(jì)師可能會(huì)覺(jué)得非常簡(jiǎn)單，不就是那幾種對(duì)齊方式嘛，難道還有很復(fù)雜的操作？深入研究才發(fā)現(xiàn)，B端對(duì)齊還真沒(méi)你想象的那么簡(jiǎn)單。如果不信，請(qǐng)接著往下看。

01 對(duì)齊的含義

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

02 通用場(chǎng)景對(duì)齊方式

2.1 左對(duì)齊簡(jiǎn)述

左對(duì)齊是最為常見的場(chǎng)景，因?yàn)樗先藗兊拈喿x動(dòng)線——從左到右進(jìn)行閱讀。在大部分的設(shè)計(jì)場(chǎng)景中都可以運(yùn)用左對(duì)齊。比如我們常見的工作臺(tái)卡片、導(dǎo)航欄等都可以使用左對(duì)齊。

在使用左對(duì)齊時(shí)，不僅需要考慮物理對(duì)齊，在特定場(chǎng)景下需要考慮視覺(jué)對(duì)齊：比如在對(duì)于圖標(biāo)和文字混排時(shí)，記得文字跟文字對(duì)齊，視覺(jué)效果會(huì)更加整齊（因?yàn)楦袷剿?，人們?duì)于類似的東西會(huì)將其看做同一類，而同一類對(duì)齊視覺(jué)上會(huì)舒適）。

2.2 右對(duì)齊簡(jiǎn)述

右對(duì)齊可能在很多時(shí)候運(yùn)用得比較少，在普通設(shè)計(jì)場(chǎng)景的右對(duì)齊用來(lái)填補(bǔ)設(shè)計(jì)中右側(cè)的視覺(jué)空缺，比如以下兩種應(yīng)用場(chǎng)景：

1.內(nèi)容或者輔助信心使用右對(duì)齊。

2.操作類的右對(duì)齊，比如移動(dòng)端表單或者web端操作。

2.3 居中對(duì)齊簡(jiǎn)述

居中對(duì)齊則一般是根據(jù)設(shè)計(jì)場(chǎng)景而選擇使用的，一般在兩種場(chǎng)景中：

1.特定狀態(tài)，比如空狀態(tài)中插畫與文字相結(jié)合，地圖標(biāo)志等都是使用居中對(duì)齊的形式

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

03 表格場(chǎng)景對(duì)齊方式

表單在B端設(shè)計(jì)中是非常常見的一種設(shè)計(jì)方式，表單中三種對(duì)齊方式都存在，目前有以下區(qū)分：

3.1 常規(guī)字段左對(duì)齊

在默認(rèn)情況下基本都按照左對(duì)齊來(lái)進(jìn)行排列，因?yàn)榇蟛糠直砀褡侄味际欠枪潭ǖ?，左?duì)齊能夠讓整體有一個(gè)比較良好的展示效果。

3.2 固定短字段居中對(duì)齊

2.居中對(duì)齊一般針對(duì)固定長(zhǎng)度類型的數(shù)據(jù)，比如我們常見的性別、狀態(tài)和樓層等。采用居中對(duì)齊能夠很好的和表頭進(jìn)行對(duì)齊，視覺(jué)上更舒適。

3.3 金融數(shù)字右對(duì)齊

而右對(duì)齊則一般針對(duì)金融類，比如價(jià)格等數(shù)字，因?yàn)閿?shù)字采用右對(duì)齊能夠更好地進(jìn)行價(jià)格的比較。

在這里要注意，使用數(shù)字時(shí)最好使用等寬的數(shù)字，第一是為了避免因?yàn)閿?shù)字不同的寬度而不太整齊，第二則是為了更好地進(jìn)行金額等的對(duì)比。

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

04 表單場(chǎng)景對(duì)齊方式

在錄入場(chǎng)景中，一般分為標(biāo)題和內(nèi)容兩個(gè)字段進(jìn)行展示，因此這兩種字段可以組合成以下幾種對(duì)齊方式：標(biāo)題左對(duì)齊、標(biāo)題右對(duì)齊、整體左對(duì)齊、頂對(duì)齊。

那么這幾種到底有什么區(qū)別呢？我們接著往下看。

4.1 標(biāo)題左對(duì)齊

這是一種目前在很多B端產(chǎn)品中比較常見的對(duì)齊方式。

• 優(yōu)勢(shì)：視覺(jué)上看著非常整齊，縱向?yàn)g覽標(biāo)題也會(huì)更容易，美觀度相對(duì)會(huì)更高；
• 劣勢(shì)：左側(cè)區(qū)域會(huì)固定寬度，對(duì)于較短標(biāo)題字段會(huì)與標(biāo)題隔得較開，對(duì)于整體信息獲取效率降低。但因此也可以讓用戶在錄入時(shí)更加謹(jǐn)慎。

比如在神策或者coding等很多產(chǎn)品的配置場(chǎng)景中，基本采用左對(duì)齊的方式進(jìn)行配置。

coding的：

4.2 標(biāo)題右對(duì)齊

這種對(duì)齊方式犧牲了視覺(jué)對(duì)齊，換來(lái)了標(biāo)簽和內(nèi)容的間距一致，讓其親密性更強(qiáng)，從操作效率上來(lái)講會(huì)得到一定的提高。比如在釘釘?shù)男掳婧笈_(tái)中，基本采用了此種對(duì)齊方式。

• 優(yōu)勢(shì)：標(biāo)簽和內(nèi)容距離更近，信息獲取和操作效率更高；
• 劣勢(shì)：犧牲了一定的視覺(jué)美觀度，并且如果出現(xiàn)過(guò)長(zhǎng)的字段，左對(duì)齊的折行的體驗(yàn)會(huì)非常不好；

我們?cè)谑褂么祟悓?duì)齊方式時(shí)對(duì)于標(biāo)題的字?jǐn)?shù)有一個(gè)合理的限制。

4.3 整體左對(duì)齊

這種方式就是標(biāo)題與內(nèi)容進(jìn)行貼合設(shè)計(jì)，整體左對(duì)齊。

• 優(yōu)勢(shì)：標(biāo)簽和內(nèi)容距離更近，且整體會(huì)呈現(xiàn)左對(duì)齊，視覺(jué)效果也相對(duì)較好。
• 劣勢(shì)：內(nèi)容區(qū)域縱向看不會(huì)對(duì)齊，對(duì)于內(nèi)容區(qū)域的整體識(shí)別會(huì)相對(duì)較弱。

運(yùn)用此方式的場(chǎng)景大部分在多列字段的設(shè)計(jì)場(chǎng)景中，因?yàn)橄噍^于前兩種方式來(lái)講，多列字段（2列及以上）同步呈現(xiàn)時(shí)，該類方式會(huì)讓整體表單顯得更緊湊與合理。

但從目前市場(chǎng)上的競(jìng)品來(lái)看，運(yùn)用此類排列方式的場(chǎng)景比較少，僅有少部分在展示字段時(shí)運(yùn)用了此種方式。

猜測(cè)有2點(diǎn)原因：

1. 大部分情況下表單類都采用單列排列，因此使用場(chǎng)景較少。
2. 該種排列方式不太適用于編輯狀態(tài)，會(huì)造成呈現(xiàn)狀態(tài)與編輯狀態(tài)切換上呈現(xiàn)上有差異。

所以某些配置場(chǎng)景為了讓編輯也保持一致性，會(huì)放棄上述的對(duì)齊方式改為標(biāo)題右對(duì)齊,比如acro design的設(shè)計(jì)案例：

雖然目前應(yīng)用得不多，但我們?cè)谄饺盏倪\(yùn)用中，也需要留意此種應(yīng)用場(chǎng)景。

4.4 頂對(duì)齊

這種相對(duì)于是另外一種方式，這種方式降低了對(duì)頁(yè)面寬度的要求，提供了更多的橫向空間。從用并且目前很多產(chǎn)品已經(jīng)在各個(gè)功能模塊運(yùn)用頂對(duì)齊來(lái)記性錄入：

• 優(yōu)勢(shì)：不僅提升了用戶獲取信息的效率，據(jù)研究發(fā)現(xiàn)只要50ms。同時(shí)標(biāo)題的拓展性更強(qiáng)了，能夠容納更長(zhǎng)的標(biāo)題
• 劣勢(shì)：從布局上來(lái)看是犧牲了一定的縱向利用空間的，對(duì)于在設(shè)計(jì)場(chǎng)景中縱向空間較少的需要考慮使用。

目前國(guó)外產(chǎn)品和國(guó)內(nèi)錄入場(chǎng)景頂對(duì)齊用的也比較多。

4.5 如何選擇

那么我們?cè)谶M(jìn)行表單設(shè)計(jì)時(shí)如何選擇呢，這就需要根據(jù)我們的實(shí)際情況了。

• 從信息獲取效率來(lái)講，頂對(duì)齊最快（50ms)，標(biāo)題右對(duì)齊其次(240ms)，左對(duì)齊最慢（500ms）；
• 從視覺(jué)和閱讀觀感上來(lái)講，標(biāo)題左對(duì)齊和整體左對(duì)齊的視覺(jué)表達(dá)會(huì)更好；

因此我們需要考慮當(dāng)前頁(yè)面的使用場(chǎng)景：

1.更偏向于錄入場(chǎng)景的話，且橫向空間充足，選擇標(biāo)題右對(duì)齊，否則頂對(duì)齊。

2.更偏向于閱讀或?yàn)g覽的話，選擇標(biāo)題左對(duì)齊或整體左對(duì)齊。而這兩者的細(xì)致場(chǎng)景區(qū)分，需要考慮當(dāng)前場(chǎng)景標(biāo)題字段的差異性：

A.如果標(biāo)題字段都比較接近，選擇標(biāo)題左對(duì)齊；

B.如果標(biāo)題字段相差比較大，尤其是字段需要配置的場(chǎng)景，那么可以選擇整體左對(duì)齊。比如我舉一個(gè)例子你就明白了：

當(dāng)標(biāo)題差異過(guò)大的時(shí)候，標(biāo)題左對(duì)齊會(huì)讓某些標(biāo)題與內(nèi)容間隔特別長(zhǎng)，閱讀體驗(yàn)就會(huì)降低很多。

通過(guò)這樣的場(chǎng)景和使用分析，我們就能夠更加清晰地使用各類對(duì)齊方式，來(lái)讓我們整體的使用體驗(yàn)更好。那么看到這里，你有掌握關(guān)于B端對(duì)齊的全部細(xì)節(jié)嗎？