五. 簡單原則
注意Sketch中對齊參數中的小數點,尤其是位置參數。我們經常在執行過程中不愛看圖層和大小,所以會導致位置的數值出現小數點或者奇數,從而使整個界面元素的間距、位置都不夠規范,如下圖:
1. 數字簡單
△ (左圖)間距的小數點,會讓頁面不嚴謹
△ (右圖)正確做法對齊每個像素,位置
2. 規則簡單
一張平面設計的字體種類不宜太多、對齊方式不宜太多…..因為規則太過繁瑣會讓設計變得復雜,甚至臃腫不堪。而UI設計師也是一樣的,能用一個規則解決的問題,就盡量不要使用兩個。
△ 間距規則簡單一致,復用
△ 間距規則統一
△ 由于親密原則,我們知道上下間距(紅色高度)一定大于內容區間距(綠色高度),但是為了規則的簡潔,內容區的所有間隔(綠色高度)可以采用同一個規則,而上下間距(紅色高度)也可以相同。
這樣四個距離,我們僅僅只用了兩個規則就解決了問題。比如,Facebook為了保持頁面簡潔,間距都采用一個規則解決,并且不失美感。
△ (左圖)4個間距規則,繁瑣缺乏統一
△ (右圖)簡化規則,從4個調整為2個
△ (左圖)優化前,間距規則冗余
△ (右圖)簡單規則優化后,簡單統一
3. 樣式簡單
今年流行一個趨勢就是「無線化分隔」。將分隔線去掉,成為一種樣式上的簡潔,這種技法分場景使用。
△ 韓國29CM、Airbnb、Pinterest 都采取了這種簡潔的分隔樣式
這樣的排版方法使整個頁面看著輕量、干凈、大氣、更加突出內容,甚至能夠增加用戶的欣賞時間。