如何讓設計的頁面看上去更舒服呢？這其實是一個非常考驗人的問題，本文作者總結了一些經驗分享給大家。

剛開始做界面設計的時候，很多時候會遇到這種情況：產品經理看了設計稿會說頁面看起來不是很舒服，有點單調，再改改……

這個時候就會很迷茫該怎麼改，後來隨着做界面設計的時間越來越長，也漸漸地有了自己方法，其實有的時候一點小小的改動就會讓頁面看上去更舒服，總結了一些經驗跟大家分享。

一、佈局

佈局就好像房子的鋼筋結構，造得安全適用了，往裏面添加元素才能滿足各種預期功能的需求。

1. 間距

格式塔原理中的親密性原則就很好地解釋了間距的重要性。相關的元素靠近一些，不相關的距離大一些。內容與內容之間的間距、文字行與行的間距即使是很細小的差別都能讓各個元素的層級更加明顯。如果是一級頁面承載的內容較多的，可以考慮大一些的間距，太擠會讓人感覺頁面透不過氣。

下圖通過間距的大小將音樂榜單的層級表現出來：

2. 對齊方式

對齊能讓界面中的各種元素有一個比較明確的排隊規則，讓頁面看上去更規整。

①左對齊

左對齊應該是界面中最常見的對齊方式了，特別是在一些列表頁中，因爲標題內容的文字長度並不確定，左對齊可以很好將每行文字的開頭固定在同一個位置，更加整齊。

下圖左邊是左對齊的，對齊的邊界是直線，不僅視覺上更整齊，對齊的力度更強；右邊改成居中對齊後，對齊的邊界是曲線，相對來說看上去就有些混亂，對齊的力度也會稍弱一些。

②居中對齊

居中對齊適用於文字段落不是很長的，有一定的字數範圍的，類似於詩歌、歌詞之類的，這樣居中對齊就不會給人一種雜亂的感覺，而且相對來說會更加使視線集中。

③右對齊

右對齊一般用在數據列表界面中，數字個位數對齊，用戶可以更快地對比出數據與數據的差距，提高瀏覽的效率。

二、統一性

統一性就好像是給房子裝修定一個風格，相關的物件都要是同一風格的，不然就會顯得彆扭突兀。

1. 字體

界面設計中的字體一般都會用系統默認的無襯線體，因爲無襯線體的字體看上去比襯線體字體更大，結構更清晰。

但是也不是必須用無襯線體，可以根據產品的風格選擇合適的字體。例如下圖，爲了契合學習產品的特性，除了一些小字是用無襯線體更易讀，其餘的字體用的都是宋體這種襯線體，讓你感覺回到以前讀報紙的時代，拉近了你和屏幕的距離，有了一種情懷。

2. 圖標

圖標相對文字來講能讓用戶更快地理解你想表達的意思，也能提高整個界面的美觀度。但是圖標與圖標之間得保持一定的統一性。

①大小

大小一致是指在視覺上保持大小一致，而不是圖標尺寸的大小一致。下圖兩個圖片的大小是一模一樣的但是你視覺上會覺得圓形更小一些。

所以爲了讓它們看上去“一樣大”，尺寸不變的情況下，正方形必須要縮小一些，才能使它們視覺上一致。

②樣式

圖標一般分爲線性圖標和麪性圖標。

線性圖標一般用在入口比較多的頁面，底部菜單欄未點擊狀態還有一些功能按鈕的地方。

線性圖標的統一主要體現在圖標線條的粗細、圖標的圓角、特殊元素。

面性圖標相對於線性圖標給人的視覺衝擊性更大一些，所以一般用於一級頁面重要的入口，在頁面的黃金位置吸引用戶去點擊，一屏一般不會超過10個。面性圖標的統一主要體現在圖形表現手法的一致以及圖標顏色色調的一致。

三、對比

對比就好像收拾屋子，一些東西我是要放在顯眼的位置平時會常用的，一些東西是要放進櫃子裏甚至是壓箱底的，使用頻率或者是重要性不同的東西擺放的位置和佔用面積是不同的。

在界面設計中，不同內容放在一起有了對比，纔有吸引用戶的效果。其中文字之間的對比是最能將界面信息分出層次的。文字對比首先是將文字的大小拉開差距，如果調整完了還是不能很好的將層次分開，可以考慮將字體加粗，最後還可以考慮將文字的明度降低來減弱文字的層級，但是不能有太多的明度變化，否則會顯得混亂。

ios11更新之後字體的變化是大家感受最深的，字號變得更大，可選字號更多，使界面對比更強烈，更具引導性。下圖以App Store中的一個頁面爲例，頁面大標題①不但字號是最大的還給字體加了粗，能很明顯感到它的重要性；接着是分類標題②，字號與熱門話題標題③一樣大，並且還加了粗；作爲熱門話題推薦的標題③和詳情內容④比下方新App標題⑤和詳情內容⑥的字體更大更突出；詳情內容④將字號減小和字體明度的降低來弱化層級和標題③形成比較大的對比。

總結

剛做界面設計的時候總是想做得漂亮酷炫，有的時候用力過猛還得不到好的效果，時間久了碰了好多壁之後才發現，忽略了設計最基礎的部分，一些細節能夠決定界面的質量。

建立自己的設計方法論，分析界面每個元素帶給用戶的感受，才能將界面變得更加舒服。

本文由 @Delia 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議