版式設計在界麵中的應用

引言

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

 對齊原則

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

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

垂直對齊

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

水平對齊

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

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

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

以視覺邊界線對齊

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

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

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

以視覺流對齊

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

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

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

多屬性對齊原則

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

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

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

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

 親密性原則

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

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

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

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

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

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

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

借助間距優化親密性

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

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

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

借助元素建立親密性

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

卡片工具

分割工具

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

總結：通過幾個小的需求案例，希望可以給大家一些幫助～

原文：TCD設計中心