同一個界面為什麼別人的看起來就比你的高級，為什麼自己做的圖總是不精緻、不耐看。其實這就跟頁面細節有關。很早之前寫過一篇 為什麼你的 APP 不耐看，這次這篇算是下集吧，新增一些需要注意的點。
一、角度統一
角度統一包含漸變以及投影的角度，在一個 APP 內，所使用的漸變以及投影的角度需要是一樣的
1.漸變
在扁平設計流行的時代，越來越多的人喜歡用漸變來增加頁面質感，但使用漸變的時候需要注意，角度要一樣。如下圖淘寶
首頁頭部用的是從左到右零度的線性漸變，購物車頁面的頭部以及結算按鈕也是用的線性漸變。
漸變除了淘寶這種各個頁面用的相同顏色的漸變，還有如下圖京東金融的不同顏色的漸變。
這個時候的角度相同，指的就是顏色的飽和度、明度了，都是一個角度的從高到低或者從低到高。
漸變的角度是大家很容易忽略的問題，做的時候很容易隨心所欲，光顧著單個地方的顏色好看，而忽略了整體，但對於用戶來說，看到的整個頁面，是所有元素搭配起來的整體視覺感受。
2.投影
和漸變一樣，不同地方的同一個層級的元素，投影參數需要一致，比如下圖壹錢包的卡片的投影，理財頁面和購物頁面的卡片投影是一樣的。
原則上來說，一個 APP 內所有頁面用到的投影都必須是一樣的，但是難免有一些特殊情況，元素大小相差較大時，投影參數一樣的話會造成視覺上不一樣。
當遇到這種情況時，我們就要學會變通，比如把小元素的投影參數調小一點，讓它在視覺上和大元素保持一致。就和之前說到的圖形的圓角度一樣，小元素的圓角度要小於大元素的。
二、顏色要有規律可循
顏色要有規律可循指的就是要定義輔助色，且輔助色不要太多。這樣重複出現多種顏色的時候，也不會讓人覺得花銷。
當不同頁面出現時，顏色也更加統一。
三、間距優先用 cell
當定義文字間距時，如果直接用文字本身來定義文字距離其他元素的間距， 很容易出現偏差，因為不同的軟件、不同字體的行高都是不一樣的。
其次當文字和圖標組合出現的時候，如果以元素本身來定義上下的間距的話，間距會因為元素本身大小的不同而不一樣，如此一來間距就沒有一個定值，沒有定值的話就意味著同一個模塊，間距有好幾種，標註起來也麻煩而且容易出錯。
其實有一個最簡單的方法，就是用 cell 的形式，定一個固定的高度，內部的元素都在內部居中對齊。這樣就不需要考慮文字和 icon 的高度不一樣的情況了。
四、增加修飾元素
增加修飾元素就是給頁面增加細節，恰到好處的細節能讓人覺得設計者是花費了心思在裡面的，而不是隨意排放。
1.卡片
卡片作為一種包容性的“容器”，它能將不同的信息很好的集合在一起，而且卡片一般佔地面積比較大，如果簡簡單單的一個背景，很容易造成頁面很空，沒有細節。所以就需要給它添加一點恰如其分的小細節。
比如下圖網易有錢的銀行卡就加入了 Logo 的底紋，看起來就比京東金融的更有細節。其次京東金融的銀行卡信息與申辦小白卡、小金卡相比，細節處理上也顯得更弱一些，申辦卡的背景上有一些小的修飾元素，增添了卡片的細節成分。
其實說來說去就是這些小的細節點，背景上加品牌元素，或者加一些沒有什麼實際意義的修飾元素。說起來很容易，做的時候需要特別注意分寸，不要太過了，過了就會顯得花銷。
2.輪播點
第二個舉例就拿最常見的輪播點來吧，旨在教大家方法，希望能舉一反三。
想到輪播點，大家腦海中最先想到的樣式肯定是幾個小圓點，沒選中的是灰色的，選中是白色的，如下圖所示：
這樣的方式沒什麼問題，能夠滿足產品的需求，但是我們可不可以在現有的基礎上，進行一些微細節處理呢，比如把當前選中態做的更明顯些。
再比如加上品牌色
方式有很多種，只要能夠滿足產品功能需求，不破壞用戶的使用習慣，純視覺上的修改我覺得都可以嘗試。先發散思維、放飛自我，然後再去考慮落地時的情況。
就拿輪播點來說，它的主要作用是提示用戶當前選中的是第幾張圖，一共有幾張圖，只要能滿足這一點就好。如 ENJOY 的文字輪播。
五、還原線上真實場景
很多人在做設計稿的時候，為了頁面當前的效果，規避了很多真實的場景，這樣雖然在設計稿很完美，但是上線後，效果卻差強人意，所以做設計稿時，需要儘量還原線上真實的場景。
1.配圖
和文字相比，圖片更能吸引用戶的目光，用一些高清美照雖然能提高設計圖的質感，但也要合適符合真實情況才行。比如一個做一個國內醫療的 APP，那設計稿的配圖就不能是國外的醫生。
2.真實狀態
其次就算是同一個模塊，也需要模擬線上真實的數據，配圖文字都需要不同，可能有些人會說這只是做個示意，到時候上線的時候，會有後臺數據，這些圖不會都是一樣的。話雖是這麼說，但作為設計師來說，頁面元素都是一樣的，會讓人覺得頁面不真實、不耐看，也會影響到對頁面細節的把控。
所以建議設計師把設計稿當作真實上線的頁面來對待。改幾個數據或幾張圖片，費不了多少時間，但是能提高頁面的質感，也會讓看的人覺得你是個認真靠譜的人。
3.底間距
頁面底部元素距離底部的間距，這個也需要設計師去定義的。
在做圖的時候要特別注意，底部是相同元素的，比如都是文字、按鈕、圖片等，間距都需要保持一致。設計師在做的時候，就需要定義不同元素所使用的底間距。
不同元素之間的底間距可以不一樣，也可以一樣，只需要記住相同元素的間距一樣即可。
六、總結
細節決定成敗, 要想讓自己做的界面更精緻、更耐看、更有細節、經得起推敲, 就需要我們在做的時候, 從小處做起, 比如從文中所說的那些點做起：
1.漸變以及投影的角度要統一；
2.界面內所使用的輔助色要有規律可循，可通過定義輔助色來實現；
3.涉及到間距的時候，優先選用 cell ；
4.嘗試在界面的合適的位置增加恰到好處的細節，比如在卡片背景上以及輪播點上；
5.做圖的時候，要儘可能的還原線上真實效果，把設計稿當作線上完成稿來對待。
原文作者：https://i.ui.cn/ucenter/292869.html
原文地址：https://www.ui.cn/detail/423721.html
為什麼你的 APP 不耐看（上集）：
閱讀更多 UI小志 的文章
