同一個界面為什么別人的看起來就比你的高級，為什么自己做的圖總是不精致、不耐看。其實這就跟頁面細節(jié)有關(guān)。今天總結(jié)幾個注意點，更多是多學(xué)習(xí)多看多總結(jié)。

一、角度統(tǒng)一

角度統(tǒng)一包含漸變以及投影的角度，在一個 APP 內(nèi)，所使用的漸變以及投影的角度需要是一樣的

1.漸變

在扁平設(shè)計流行的時代，越來越多的人喜歡用漸變來增加頁面質(zhì)感，但使用漸變的時候需要注意，角度要一樣。如下圖淘寶

首頁頭部用的是從左到右零度的線性漸變，購物車頁面的頭部以及結(jié)算按鈕也是用的線性漸變。

漸變除了淘寶這種各個頁面用的相同顏色的漸變，還有如下圖京東金融的不同顏色的漸變。

這個時候的角度相同，指的就是顏色的飽和度、明度了，都是一個角度的從高到低或者從低到高。

漸變的角度是大家很容易忽略的問題，做的時候很容易隨心所欲，光顧著單個地方的顏色好看，而忽略了整體，但對于用戶來說，看到的整個頁面，是所有元素搭配起來的整體視覺感受。

2.投影

和漸變一樣，不同地方的同一個層級的元素，投影參數(shù)需要一致，比如下圖壹錢包的卡片的投影，理財頁面和購物頁面的卡片投影是一樣的。

原則上來說，一個 APP 內(nèi)所有頁面用到的投影都必須是一樣的，但是難免有一些特殊情況，元素大小相差較大時，投影參數(shù)一樣的話會造成視覺上不一樣。

當遇到這種情況時，我們就要學(xué)會變通，比如把小元素的投影參數(shù)調(diào)小一點，讓它在視覺上和大元素保持一致。就和之前說到的圖形的圓角度一樣，小元素的圓角度要小于大元素的。

二、顏色要有規(guī)律可循

顏色要有規(guī)律可循指的就是要定義輔助色，且輔助色不要太多。這樣重復(fù)出現(xiàn)多種顏色的時候，也不會讓人覺得花銷。

當不同頁面出現(xiàn)時，顏色也更加統(tǒng)一。

三、間距優(yōu)先用 cell

當定義文字間距時，如果直接用文字本身來定義文字距離其他元素的間距， 很容易出現(xiàn)偏差，因為不同的軟件、不同字體的行高都是不一樣的。

其次當文字和圖標組合出現(xiàn)的時候，如果以元素本身來定義上下的間距的話，間距會因為元素本身大小的不同而不一樣，如此一來間距就沒有一個定值，沒有定值的話就意味著同一個模塊，間距有好幾種，標注起來也麻煩而且容易出錯。

其實有一個最簡單的方法，就是用 cell 的形式，定一個固定的高度，內(nèi)部的元素都在內(nèi)部居中對齊。這樣就不需要考慮文字和 icon 的高度不一樣的情況了。

四、增加修飾元素

增加修飾元素就是給頁面增加細節(jié)，恰到好處的細節(jié)能讓人覺得設(shè)計者是花費了心思在里面的，而不是隨意排放。

1.卡片

卡片作為一種包容性的“容器”，它能將不同的信息很好的集合在一起，而且卡片一般占地面積比較大，如果簡簡單單的一個背景，很容易造成頁面很空，沒有細節(jié)。所以就需要給它添加一點恰如其分的小細節(jié)。

比如下圖網(wǎng)易有錢的銀行卡就加入了 Logo 的底紋，看起來就比京東金融的更有細節(jié)。其次京東金融的銀行卡信息與申辦小白卡、小金卡相比，細節(jié)處理上也顯得更弱一些，申辦卡的背景上有一些小的修飾元素，增添了卡片的細節(jié)成分。

其實說來說去就是這些小的細節(jié)點，背景上加品牌元素，或者加一些沒有什么實際意義的修飾元素。說起來很容易，做的時候需要特別注意分寸，不要太過了，過了就會顯得花銷。

2.輪播點

第二個舉例就拿最常見的輪播點來吧，旨在教大家方法，希望能舉一反三。

想到輪播點，大家腦海中最先想到的樣式肯定是幾個小圓點，沒選中的是灰色的，選中是白色的，如下圖所示：

這樣的方式?jīng)]什么問題，能夠滿足產(chǎn)品的需求，但是我們可不可以在現(xiàn)有的基礎(chǔ)上，進行一些微細節(jié)處理呢，比如把當前選中態(tài)做的更明顯些。

再比如加上品牌色

方式有很多種，只要能夠滿足產(chǎn)品功能需求，不破壞用戶的使用習(xí)慣，純視覺上的修改我覺得都可以嘗試。先發(fā)散思維、放飛自我，然后再去考慮落地時的情況。

就拿輪播點來說，它的主要作用是提示用戶當前選中的是第幾張圖，一共有幾張圖，只要能滿足這一點就好。如 ENJOY 的文字輪播。

五、還原線上真實場景

很多人在做設(shè)計稿的時候，為了頁面當前的效果，規(guī)避了很多真實的場景，這樣雖然在設(shè)計稿很完美，但是上線后，效果卻差強人意，所以做設(shè)計稿時，需要盡量還原線上真實的場景。

1.配圖

和文字相比，圖片更能吸引用戶的目光，用一些高清美照雖然能提高設(shè)計圖的質(zhì)感，但也要合適符合真實情況才行。比如一個做一個國內(nèi)醫(yī)療的 APP，那設(shè)計稿的配圖就不能是國外的醫(yī)生。

2.真實狀態(tài)

其次就算是同一個模塊，也需要模擬線上真實的數(shù)據(jù)，配圖文字都需要不同，可能有些人會說這只是做個示意，到時候上線的時候，會有后臺數(shù)據(jù)，這些圖不會都是一樣的。話雖是這么說，但作為設(shè)計師來說，頁面元素都是一樣的，會讓人覺得頁面不真實、不耐看，也會影響到對頁面細節(jié)的把控。

所以建議設(shè)計師把設(shè)計稿當作真實上線的頁面來對待。改幾個數(shù)據(jù)或幾張圖片，費不了多少時間，但是能提高頁面的質(zhì)感，也會讓看的人覺得你是個認真靠譜的人。

3.底間距

頁面底部元素距離底部的間距，這個也需要設(shè)計師去定義的。

在做圖的時候要特別注意，底部是相同元素的，比如都是文字、按鈕、圖片等，間距都需要保持一致。設(shè)計師在做的時候，就需要定義不同元素所使用的底間距。

不同元素之間的底間距可以不一樣，也可以一樣，只需要記住相同元素的間距一樣即可。

六、總結(jié)

細節(jié)決定成敗, 要想讓自己做的界面更精致、更耐看、更有細節(jié)、經(jīng)得起推敲, 就需要我們在做的時候, 從小處做起, 比如從文中所說的那些點做起：

1.漸變以及投影的角度要統(tǒng)一；

2.界面內(nèi)所使用的輔助色要有規(guī)律可循，可通過定義輔助色來實現(xiàn)；

3.涉及到間距的時候，優(yōu)先選用 cell ；

4.嘗試在界面的合適的位置增加恰到好處的細節(jié)，比如在卡片背景上以及輪播點上；

5.做圖的時候，要盡可能的還原線上真實效果，把設(shè)計稿當作線上完成稿來對待。

原文作者：橙子的橙子