明明對齊了，為什么界面還是不好看？

版式設計關注的是設計中文字和圖像的位置關系。 這些元素應該如何擺放，它們彼此以及整體設計構想的關系，都會影響到用戶對內容的識別與接收，以及他們對內容所產生的情緒反應。利用親密性原則和對齊方式可以促進用戶接收頁面中呈現的信息。

對齊原則

什么是對齊方式：是指文字或圖片在垂直層面和水平層面頁面的位置。

下面列舉一些較為常見的對齊方式：

1. 垂直對齊

文字的垂直對齊可以是居中對齊、上對齊或底端對齊

2. 水平對齊

文字或圖片的水平對齊可以是左對齊、右對齊、居中對齊或兩端對齊。

對齊方式決定了整個畫面的流暢性，在做日常需求中明明有對齊的意識，但是為什么設計出來的頁面就是很奇怪呢？對齊方式的合理運用絕大部份是體現在視覺維度上，而我們往往僅考慮物理對齊方式。

下面舉幾個我的需求案例來解決視覺對齊的幾點問題：

3. 以視覺邊界線對齊

上圖案例好像看起來并沒有問題，但是在上半部分的列表中灰色背景承擔了兩端對齊的角色，而事實上文字的視覺重量大于背景，就會導致整個頁面的視覺重量不對等，視覺引導線發生形變。

而下圖中將列表數據做兩端對齊，讓整個畫面大方得體，視覺重量趨于一致，瀏覽閱讀上變得舒適。

小結：對齊邊緣以視覺引導線為準。

4. 以視覺流對齊

我們正常在看東西的時候會是從上到下，從左到右這樣進行瀏覽閱讀信息，那么在頁面設計的時候也應當考慮一下。

上圖兩個卡片的操作區域分別運用了左、右對齊，兩種看起來沒有什么問題，但是考慮到視覺流向，會發現第二個的操作區域位置更為合理，也是視覺距離更近的方案。

小結：頁面的一個區塊內，重要元素或者操作區往往會跟隨著視覺流向進行布局。

5. 多屬性對齊原則

上圖案例在對齊方式上列表標題和內容采用了左對齊的形式，形成了不規整的邊緣，視覺上就會參差不齊，操作流暢性大打折扣。

上圖為優化后的版本，將列表標題和內容的對齊方式進行單獨劃分，用戶在瀏覽中可以快速識別和區分信息。

小結：同一屬性的可以使用同一對齊方式。

那么通過解決這幾個常見問題，我們會發現，對齊原則是在滿足物理對齊原則的同時，在視覺上也要思考他適合哪種對齊方式，元素之間是如何對齊。

親密性原則

首先通過一組物品來感受一下親密性原則。

這張圖片中的四個不同類別物品我們會感覺它們是一個整體。

當我們移動了物體的位置之后，會感覺左面三個物品屬于一個區域整體。

同一組物品我們將它們分成不同顏色，同樣也是左面三個物品看起來是一個區域整體

通過上面的案例我們可以得出一種結論：距離較近，我們就會感覺它們之間存在著一定的關系同屬一個整體。

由此我們可以得知，親密性原則是在界面設計中相對靠近的元素，它們之間就會存在聯系。

那么在需求中我會用到兩種方法來對親密性實現和調優的：

借助間距優化親密性

上面這張設計圖中，我們會感覺日期、評論、點贊量和下面的章節是一個區塊，在瀏覽的時候造成很大困擾。

而在優化后，將三個信息點的距離拉近成為一個區塊，并且層級關系也一目了然。

小結：在信息容易產生誤解的時候，需要注意間距的把控

1. 借助元素建立親密性

除了把控間距之外我們在處理親疏關系的時候還會借助一些輔助元素，下面介紹一下兩個常用的方式。

卡片工具

分割工具

小結：針對不同的頁面風格和強弱，工具的使用也會有所差異，要適合頁面調性來選擇使用。

歡迎關注「TCD設計中心」公眾號：