按照我們正常的理解肯定是圖標距離文字更近點，為什么這兩個 APP 是一樣的呢?是不是所有的 APP 都是這樣的。這個時候我們就可以再多去截圖幾個加以對比。如下圖蝦米音樂的間距一個是48px，一個是28px，圖標到文字的距離小于頁邊距。

得到的一個是36px，一個是28px，圖標到文字的距離也小于頁邊距。

那是不是我們就可以大致得出一個結論，圖標到文字的距離小于或者等于頁邊距，而不能大于頁邊距。

在這里只是給大家提供一個思路，在臨摹的時候遇到任何問題，覺得不對勁的地方，可以再多去找幾個 APP 進行對比，從中找到規律所在，當這些規律是你自己總結出來的，而不是別人直接告訴你的時候，印象也會更加深刻。

4. 舉一反三

顏色

當總結完圖標的大小以及和間距、字體等之后，其實還有一個很關鍵的元素需要注意，那就是圖標的顏色，顏色非常能體現一個 APP 的氣質，一套經典的配色只看顏色就能讓人一眼認出來，而顏色最重要的一點就是需要和產品的調性相符合，如下圖，作為金融類產品，跟錢相關的京東金融配色就很穩重，而陌陌的配色就更年輕、活潑。

平時我們多積累幾套配色，培養自己的色彩感覺，也可以嘗試在臨摹完一套圖標的時候，重新給它配一套顏色，你會發現當顏色改變的時候，圖標整體的感覺也截然不同。

當然你也可以嘗試用同一套配色，但是圖標造型不同的方式，盡情去嘗試你覺得想做的方向，你會發現其實這過程很有意思。在這過程中你也會感悟到很多，方法已經說了，那至于具體什么感悟就需要自己去意會了。

概念稿

總是做一些線上的落地稿的時候，難免會限制自己的思維，所以我們需要做一些概念稿，放飛一下自我。比如在臨摹完一張界面的時候，可以基于這個頁面的功能自己重構一個，這樣的好處是頁面功能可以落地，也能鍛煉自己的產品思維。

三、如何整理素材庫

當臨摹四步曲做完之后，我們需要將產出物整理好。如果你在素材庫里一分鐘內找不到想要找的那個，那么你的素材庫多半是沒用的。素材不在于多，而在于質量，我們自己曾經畫過的圖標、頁面，都需要加以整理，以備不時之需。現在大部分設計師都是用 sketch 做圖，所以我們可以改變一下管理素材的方式，不用 PS 時代的那種一個需求一個源文件的方式。

這種方式在我看來極大的浪費了 sketch 對于做 UI 來說先天的優勢。其實我們完全可以把所有圖都放置到一個文件中，在這個文件里建 page 來區分，我自己是習慣用年份來區分，一年做的東西都放到一個 page 里，然后會在每個不同的項目前加上說明，后期找的時候容易定位。

這樣我們就可以把一些通用的頁面元素做成組件，比如上下導航、時間欄等。而且還可以把所有的圖標整理到一起，一目了然，對于那些返回、搜索也就不用每次單畫了。

按照這樣的方法整理的話，源文件的個數就會少很多，只需要按類別把每個種類建一個 sketch 文件就好。

特別是對于寫文章的我來說，當我把所有文章的配圖放到一起，在做新的圖的時候，就可以直接調用之前的素材，對于一些圖片大小、圖片下方文字的大小、顏色都可以做成規范，就不會出現每次做的不一樣的情況了。

四、總結

工作的越久，越會發現 UI 是有規律可循的，只要平時你多注意、多積累，一步一個腳印不要急。技法只要肯花時間都能學會。越到后面看的其實是思維方式，善于思考的人，總能從過往的經歷里總結出一套方法論。

最后送大家和自己一句話「不要用戰術上的勤奮，來掩蓋戰略上的懶惰」。

歡迎關注作者的微信公眾號：「海鹽社」