要是看過(guò)的話(huà)，那......
這里是手動(dòng)分割線(xiàn)，下面開(kāi)始正文內(nèi)容
一、角度統(tǒng)一
角度統(tǒng)一包含漸變以及投影的角度，在一個(gè) APP 內(nèi)，所使用的漸變以及投影的角度需要是一樣的。
1.漸變
在扁平設(shè)計(jì)流行的時(shí)代，越來(lái)越多的人喜歡用漸變來(lái)增加頁(yè)面質(zhì)感，但使用漸變的時(shí)候需要注意，角度要一樣。如下圖淘寶
首頁(yè)頭部用的是從左到右零度的線(xiàn)性漸變，購(gòu)物車(chē)頁(yè)面的頭部以及結(jié)算按鈕也是用的線(xiàn)性漸變。
漸變除了淘寶這種各個(gè)頁(yè)面用的相同顏色的漸變，還有如下圖京東金融的不同顏色的漸變。
這個(gè)時(shí)候的角度相同，指的就是顏色的飽和度、明度了，都是一個(gè)角度的從高到低或者從低到高。
漸變的角度是大家很容易忽略的問(wèn)題，做的時(shí)候很容易隨心所欲，光顧著單個(gè)地方的顏色好看，而忽略了整體，但對(duì)于用戶(hù)來(lái)說(shuō)，看到的整個(gè)頁(yè)面，是所有元素搭配起來(lái)的整體視覺(jué)感受。
2.投影
和漸變一樣，不同地方的同一個(gè)層級(jí)的元素，投影參數(shù)需要一致，比如下圖壹錢(qián)包的卡片的投影，理財(cái)頁(yè)面和購(gòu)物頁(yè)面的卡片投影是一樣的。
原則上來(lái)說(shuō)，一個(gè) APP 內(nèi)所有頁(yè)面用到的投影都必須是一樣的，但是難免有一些特殊情況，元素大小相差較大時(shí)，投影參數(shù)一樣的話(huà)會(huì)造成視覺(jué)上不一樣。
當(dāng)遇到這種情況時(shí)，我們就要學(xué)會(huì)變通，比如把小元素的投影參數(shù)調(diào)小一點(diǎn)，讓它在視覺(jué)上和大元素保持一致。就和之前說(shuō)到的圖形的圓角度一樣，小元素的圓角度要小于大元素的。
二、顏色要有規(guī)律可循
顏色要有規(guī)律可循指的就是要定義輔助色，且輔助色不要太多。這樣重復(fù)出現(xiàn)多種顏色的時(shí)候，也不會(huì)讓人覺(jué)得花銷(xiāo)。
當(dāng)不同頁(yè)面出現(xiàn)時(shí)，顏色也更加統(tǒng)一。
三、間距優(yōu)先用 cell
當(dāng)定義文字間距時(shí)，如果直接用文字本身來(lái)定義文字距離其他元素的間距， 很容易出現(xiàn)偏差，因?yàn)椴煌能浖?、不同字體的行高都是不一樣的。
其次當(dāng)文字和圖標(biāo)組合出現(xiàn)的時(shí)候，如果以元素本身來(lái)定義上下的間距的話(huà)，間距會(huì)因?yàn)樵乇旧泶笮〉牟煌灰粯?，如此一?lái)間距就沒(méi)有一個(gè)定值，沒(méi)有定值的話(huà)就意味著同一個(gè)模塊，間距有好幾種，標(biāo)注起來(lái)也麻煩而且容易出錯(cuò)。
其實(shí)有一個(gè)最簡(jiǎn)單的方法，就是用 cell 的形式，定一個(gè)固定的高度，內(nèi)部的元素都在內(nèi)部居中對(duì)齊。這樣就不需要考慮文字和 icon 的高度不一樣的情況了。
四、增加修飾元素
增加修飾元素就是給頁(yè)面增加細(xì)節(jié)，恰到好處的細(xì)節(jié)能讓人覺(jué)得設(shè)計(jì)者是花費(fèi)了心思在里面的，而不是隨意排放。
1.卡片
卡片作為一種包容性的“容器”，它能將不同的信息很好的集合在一起，而且卡片一般占地面積比較大，如果簡(jiǎn)簡(jiǎn)單單的一個(gè)背景，很容易造成頁(yè)面很空，沒(méi)有細(xì)節(jié)。所以就需要給它添加一點(diǎn)恰如其分的小細(xì)節(jié)。
比如下圖網(wǎng)易有錢(qián)的銀行卡就加入了 Logo 的底紋，看起來(lái)就比京東金融的更有細(xì)節(jié)。
其次京東金融的銀行卡信息與申辦小白卡、小金卡相比，細(xì)節(jié)處理上也顯得更弱一些，申辦卡的背景上有一些小的修飾元素，增添了卡片的細(xì)節(jié)成分。
其實(shí)說(shuō)來(lái)說(shuō)去就是這些小的細(xì)節(jié)點(diǎn)，背景上加品牌元素，或者加一些沒(méi)有什么實(shí)際意義的修飾元素。
說(shuō)起來(lái)很容易，做的時(shí)候需要特別注意分寸，不要太過(guò)了，過(guò)了就會(huì)顯得花銷(xiāo)。
2.輪播點(diǎn)
第二個(gè)舉例就拿最常見(jiàn)的輪播點(diǎn)來(lái)吧，旨在教大家方法，希望能舉一反三。
想到輪播點(diǎn)，大家腦海中最先想到的樣式肯定是幾個(gè)小圓點(diǎn)，沒(méi)選中的是灰色的，選中是白色的，如下圖所示：
這樣的方式?jīng)]什么問(wèn)題，能夠滿(mǎn)足產(chǎn)品的需求，但是我們可不可以在現(xiàn)有的基礎(chǔ)上，進(jìn)行一些微細(xì)節(jié)處理呢，比如把當(dāng)前選中態(tài)做的更明顯些。
再比如加上品牌色
方式有很多種，只要能夠滿(mǎn)足產(chǎn)品功能需求，不破壞用戶(hù)的使用習(xí)慣，純視覺(jué)上的修改我覺(jué)得都可以嘗試。先發(fā)散思維、放飛自我，然后再去考慮落地時(shí)的情況。
就拿輪播點(diǎn)來(lái)說(shuō)，它的主要作用是提示用戶(hù)當(dāng)前選中的是第幾張圖，一共有幾張圖，只要能滿(mǎn)足這一點(diǎn)就好。如 ENJOY 的文字輪播。
五、還原線(xiàn)上真實(shí)場(chǎng)景
很多人在做設(shè)計(jì)稿的時(shí)候，為了頁(yè)面當(dāng)前的效果，規(guī)避了很多真實(shí)的場(chǎng)景，這樣雖然在設(shè)計(jì)稿很完美，但是上線(xiàn)后，效果卻差強(qiáng)人意，所以做設(shè)計(jì)稿時(shí)，需要盡量還原線(xiàn)上真實(shí)的場(chǎng)景。
1.配圖
和文字相比，圖片更能吸引用戶(hù)的目光，用一些高清美照雖然能提高設(shè)計(jì)圖的質(zhì)感，但也要合適符合真實(shí)情況才行。比如一個(gè)做一個(gè)國(guó)內(nèi)醫(yī)療的 APP，那設(shè)計(jì)稿的配圖就不能是國(guó)外的醫(yī)生。
2.真實(shí)狀態(tài)
其次就算是同一個(gè)模塊，也需要模擬線(xiàn)上真實(shí)的數(shù)據(jù)，配圖文字都需要不同，可能有些人會(huì)說(shuō)這只是做個(gè)示意，到時(shí)候上線(xiàn)的時(shí)候，會(huì)有后臺(tái)數(shù)據(jù)，這些圖不會(huì)都是一樣的。話(huà)雖是這么說(shuō)，但作為設(shè)計(jì)師來(lái)說(shuō)，頁(yè)面元素都是一樣的，會(huì)讓人覺(jué)得頁(yè)面不真實(shí)、不耐看，也會(huì)影響到對(duì)頁(yè)面細(xì)節(jié)的把控。
所以建議設(shè)計(jì)師把設(shè)計(jì)稿當(dāng)作真實(shí)上線(xiàn)的頁(yè)面來(lái)對(duì)待。改幾個(gè)數(shù)據(jù)或幾張圖片，費(fèi)不了多少時(shí)間，但是能提高頁(yè)面的質(zhì)感，也會(huì)讓看的人覺(jué)得你是個(gè)認(rèn)真靠譜的人。
3.底間距
頁(yè)面底部元素距離底部的間距，這個(gè)也需要設(shè)計(jì)師去定義的。
在做圖的時(shí)候要特別注意，底部是相同元素的，比如都是文字、按鈕、圖片等，間距都需要保持一致。設(shè)計(jì)師在做的時(shí)候，就需要定義不同元素所使用的底間距。
不同元素之間的底間距可以不一樣，也可以一樣，只需要記住相同元素的間距一樣即可。
六、總結(jié)
細(xì)節(jié)決定成敗, 要想讓自己做的界面更精致、更耐看、更有細(xì)節(jié)、經(jīng)得起推敲, 就需要我們?cè)谧龅臅r(shí)候, 從小處做起, 比如從文中所說(shuō)的那些點(diǎn)做起：
1.漸變以及投影的角度要統(tǒng)一；
2.界面內(nèi)所使用的輔助色要有規(guī)律可循，可通過(guò)定義輔助色來(lái)實(shí)現(xiàn)；
3.涉及到間距的時(shí)候，優(yōu)先選用 cell ；
4.嘗試在界面的合適的位置增加恰到好處的細(xì)節(jié)，比如在卡片背景上以及輪播點(diǎn)上；
5.做圖的時(shí)候，要盡可能的還原線(xiàn)上真實(shí)效果，把設(shè)計(jì)稿當(dāng)作線(xiàn)上完成稿來(lái)對(duì)待。
