如何讓設(shè)計(jì)的頁(yè)面看上去更舒服呢？這其實(shí)是一個(gè)非?？简?yàn)人的問題，本文作者總結(jié)了一些經(jīng)驗(yàn)分享給大家。

剛開始做界面設(shè)計(jì)的時(shí)候，很多時(shí)候會(huì)遇到這種情況：產(chǎn)品經(jīng)理看了設(shè)計(jì)稿會(huì)說頁(yè)面看起來不是很舒服，有點(diǎn)單調(diào)，再改改……

這個(gè)時(shí)候就會(huì)很迷茫該怎么改，后來隨著做界面設(shè)計(jì)的時(shí)間越來越長(zhǎng)，也漸漸地有了自己方法，其實(shí)有的時(shí)候一點(diǎn)小小的改動(dòng)就會(huì)讓頁(yè)面看上去更舒服，總結(jié)了一些經(jīng)驗(yàn)跟大家分享。

一、布局

布局就好像房子的鋼筋結(jié)構(gòu)，造得安全適用了，往里面添加元素才能滿足各種預(yù)期功能的需求。

1. 間距

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

下圖通過間距的大小將音樂榜單的層級(jí)表現(xiàn)出來：

2. 對(duì)齊方式

對(duì)齊能讓界面中的各種元素有一個(gè)比較明確的排隊(duì)規(guī)則，讓頁(yè)面看上去更規(guī)整。

①左對(duì)齊

左對(duì)齊應(yīng)該是界面中最常見的對(duì)齊方式了，特別是在一些列表頁(yè)中，因?yàn)闃?biāo)題內(nèi)容的文字長(zhǎng)度并不確定，左對(duì)齊可以很好將每行文字的開頭固定在同一個(gè)位置，更加整齊。

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

②居中對(duì)齊

居中對(duì)齊適用于文字段落不是很長(zhǎng)的，有一定的字?jǐn)?shù)范圍的，類似于詩(shī)歌、歌詞之類的，這樣居中對(duì)齊就不會(huì)給人一種雜亂的感覺，而且相對(duì)來說會(huì)更加使視線集中。

③右對(duì)齊

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

二、統(tǒng)一性

統(tǒng)一性就好像是給房子裝修定一個(gè)風(fēng)格，相關(guān)的物件都要是同一風(fēng)格的，不然就會(huì)顯得別扭突兀。

1. 字體

界面設(shè)計(jì)中的字體一般都會(huì)用系統(tǒng)默認(rèn)的無襯線體，因?yàn)闊o襯線體的字體看上去比襯線體字體更大，結(jié)構(gòu)更清晰。

但是也不是必須用無襯線體，可以根據(jù)產(chǎn)品的風(fēng)格選擇合適的字體。例如下圖，為了契合學(xué)習(xí)產(chǎn)品的特性，除了一些小字是用無襯線體更易讀，其余的字體用的都是宋體這種襯線體，讓你感覺回到以前讀報(bào)紙的時(shí)代，拉近了你和屏幕的距離，有了一種情懷。

2. 圖標(biāo)

圖標(biāo)相對(duì)文字來講能讓用戶更快地理解你想表達(dá)的意思，也能提高整個(gè)界面的美觀度。但是圖標(biāo)與圖標(biāo)之間得保持一定的統(tǒng)一性。

①大小
大小一致是指在視覺上保持大小一致，而不是圖標(biāo)尺寸的大小一致。下圖兩個(gè)圖片的大小是一模一樣的但是你視覺上會(huì)覺得圓形更小一些。

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

②樣式
圖標(biāo)一般分為線性圖標(biāo)和面性圖標(biāo)。
線性圖標(biāo)一般用在入口比較多的頁(yè)面，底部菜單欄未點(diǎn)擊狀態(tài)還有一些功能按鈕的地方。

線性圖標(biāo)的統(tǒng)一主要體現(xiàn)在圖標(biāo)線條的粗細(xì)、圖標(biāo)的圓角、特殊元素。

面性圖標(biāo)相對(duì)于線性圖標(biāo)給人的視覺沖擊性更大一些，所以一般用于一級(jí)頁(yè)面重要的入口，在頁(yè)面的黃金位置吸引用戶去點(diǎn)擊，一屏一般不會(huì)超過10個(gè)。面性圖標(biāo)的統(tǒng)一主要體現(xiàn)在圖形表現(xiàn)手法的一致以及圖標(biāo)顏色色調(diào)的一致。

三、對(duì)比

對(duì)比就好像收拾屋子，一些東西我是要放在顯眼的位置平時(shí)會(huì)常用的，一些東西是要放進(jìn)柜子里甚至是壓箱底的，使用頻率或者是重要性不同的東西擺放的位置和占用面積是不同的。

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

ios11更新之后字體的變化是大家感受最深的，字號(hào)變得更大，可選字號(hào)更多，使界面對(duì)比更強(qiáng)烈，更具引導(dǎo)性。下圖以App Store中的一個(gè)頁(yè)面為例，頁(yè)面大標(biāo)題①不但字號(hào)是最大的還給字體加了粗，能很明顯感到它的重要性；接著是分類標(biāo)題②，字號(hào)與熱門話題標(biāo)題③一樣大，并且還加了粗；作為熱門話題推薦的標(biāo)題③和詳情內(nèi)容④比下方新App標(biāo)題⑤和詳情內(nèi)容⑥的字體更大更突出；詳情內(nèi)容④將字號(hào)減小和字體明度的降低來弱化層級(jí)和標(biāo)題③形成比較大的對(duì)比。

總結(jié)

剛做界面設(shè)計(jì)的時(shí)候總是想做得漂亮酷炫，有的時(shí)候用力過猛還得不到好的效果，時(shí)間久了碰了好多壁之后才發(fā)現(xiàn)，忽略了設(shè)計(jì)最基礎(chǔ)的部分，一些細(xì)節(jié)能夠決定界面的質(zhì)量。

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

本文由 @Delia 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議