給我一個圖示，我就可以撬動整個頁面
記得剛開始學美術的時候，都是從臨摹開始的，等到一定的階段才開始寫生，照著實物畫。這個過程根據個人能力有長有短，但是每個人都必須經歷無法避免。
現在回想起來，印象最深的是畫室老師讓我們上午臨摹一張圖，下午就立馬默寫這一張圖，剛開始的時候，連畫面基本佈局都記不清，蘋果有幾個、分別在哪裡都會混亂，但沒辦法老師要求不能去看原圖，只好硬著頭皮畫。慢慢的到後面，臨摹的時候就會下意識的去記一些佈局、畫面筆觸，最後也能還原到百分之八九十了，而且等下次其他同學默寫同一張圖的時候，還能說出畫面某個地方的筆觸應該是怎麼怎麼樣的...記得特別牢靠。
在做 UI 的時候，我也發現有很多異曲同工之處。前期都是需要去大量臨摹好的頁面，然後記憶，形成條件反射，最後再為己用。但很不幸很多新手在入行之初，完全忽略了這點，包括剛入行時的我，拿到原型之後，一味的想自我創新，頁面佈局、字型大小、間距等都沒有深入的去研究，完全憑著感覺來。這做不好也實屬正常。
那怎麼改善這一情況呢？最好的方法就是從臨摹開始...
一、怎麼找臨摹素材
臨摹最重要的就是找素材，素材的好壞直接影響到後期的效果。建議臨摹線上 APP，線上 APP 的頁面在落地前經過很多人的打磨，特別是那些大廠的 APP，直接去臨摹就好，並從中找到規律所在。
二、臨摹四步曲
很多人臨摹的時候，總喜歡“描摹”，比照著原圖進行臨摹，但這樣的成效有限，沒有經過太多的思考。我建議可以和上面我講述的學畫畫的故事一樣，描摹完之後再憑藉記憶畫一遍，畫完之後再比照著原圖進行修改。
在臨摹 UI 介面時，需要有側重點，我自己的經驗是可以先從臨摹圖示開始，然後再擴充套件到佈局、字號、間距等，逐個擊破。之所以推薦從圖示開始，是因為它是每個 APP 中不可或缺的，畫不好會直接導致頁面不精細，沒有細節，而畫的好的話也能直接提升頁面質感。
2.1 圖示
初期只需要單一的只臨摹圖示，不過需要注意的是不要只臨摹一個兩個，而要整套臨摹，一個兩個圖示看不出來整體性，而 UI 介面上的圖示也是整套出現，不會單獨存在。
過程中也需要有意識的找一些當前不會畫的、和之前風格不一樣的圖示，擴充套件寬度以及轉換思維。不把自己限制在一個侷限的空間裡。
等手頭功夫練到一定階段的時候，再去和頁面相結合了。以我的經驗來說，前期練手頭功夫很重要，相當於打地基，單純的臨摹圖示會讓你更在意圖示本身，是否和原圖一致，怎麼畫才是最方便快速的。
如果一開始就臨摹一整個頁面，就會過多的去關注頁面，而忽略了圖示的細節。舉個例子，如下圖1、圖2相信大家第一眼看到的肯定是整體的頁面風格、調性怎麼怎麼樣，看完之後還會覺得這兩個頁面是一樣的，沒有區別？
但其實並不是，注意看一下導航欄上的圖示，兩個頁面的圖示在細節上不一樣。圖1的3個圖示描邊粗細、大小都不一致。而圖2是調整後的，看起來整體統一很多。這些小細節在整體頁面中很容易忽視，自己也很難意識到，但是當把它們單拎出來時，就很容易發現問題所在了。
以上只是列舉的一個小例子，在實際工作中還有很多很多，所以我建議是先臨摹整套圖示，把一整套圖示放到一起，看看是否統一。
2.2 頁面
當這一步攻克的時候，就可以到下一步了，臨摹整套頁面。去找幾個線上的圖示多的頁面了，最常見的就是個人中心頁面以及視訊類 APP 的頻道頁。去臨摹整個頁面。這個時候就要多去注意圖示和頁面風格是否一致、和字型是否匹配等等
2.3 分析總結
臨摹完了之後，要學會總結，比如個人中心圖示一般多大、配多大的文字以及顏色等等，不然久了之後就都忘了，白臨摹了。比如拿剛剛京東金融和陌陌的頁面舉例：京東金融是40*40px 的圖示配32px 的文字，cell 的高度100px。
而陌陌是48*48px的圖示配36px 的文字，cell 的高度100px。
再對比兩個產品，你會發現雖然他們字號和圖示大小不一樣，但是他們的 cell 高度都是100px，那下次自己做的時候就可以優先嚐試 100px 的 cell 高度。這樣等積累的素材夠多時，自己再做頁面的時候就心中有譜了，就不用悶頭蒼蠅一樣亂做了。
再額外擴充一點，如圖兩個 APP 圖示距離文字和圖示距離頁面邊距是一樣大的，一個都是32px，一個都是30px。
按照我們正常的理解肯定是圖示距離文字更近點，為什麼這兩個 APP 是一樣的呢？是不是所有的 APP 都是這樣的。這個時候我們就可以再多去截圖幾個加以對比。如下圖蝦米音樂的間距一個是48px，一個是28px，圖示到文字的距離小於頁邊距。
得到的一個是36px，一個是28px，圖示到文字的距離也小於頁邊距。
那是不是我們就可以大致得出一個結論，圖示到文字的距離小於或者等於頁邊距，而不能大於頁邊距。
在這裡只是給大家提供一個思路，在臨摹的時候遇到任何問題，覺得不對勁的地方，可以再多去找幾個 APP 進行對比，從中找到規律所在，當這些規律是你自己總結出來的，而不是別人直接告訴你的時候，印象也會更加深刻。
2.4 舉一反三
顏色
當總結完圖示的大小以及和間距、字型等之後，其實還有一個很關鍵的元素需要注意，那就是圖示的顏色，顏色非常能體現一個 APP 的氣質，一套經典的配色只看顏色就能讓人一眼認出來，而顏色最重要的一點就是需要和產品的調性相符合，如下圖，作為金融類產品，跟錢相關的京東金融配色就很穩重，而陌陌的配色就更年輕、活潑。
平時我們多積累幾套配色，培養自己的色彩感覺，也可以嘗試在臨摹完一套圖示的時候，重新給它配一套顏色，你會發現當顏色改變的時候，圖示整體的感覺也截然不同。
當然你也可以嘗試用同一套配色，但是圖示造型不同的方式，盡情去嘗試你覺得想做的方向，你會發現其實這過程很有意思。在這過程中你也會感悟到很多，方法已經說了，那至於具體什麼感悟就需要自己去意會了。
概念稿
總是做一些線上的落地稿的時候，難免會限制自己的思維，所以我們需要做一些概念稿，放飛一下自我。比如在臨摹完一張介面的時候，可以基於這個頁面的功能自己重構一個，這樣的好處是頁面功能可以落地，也能鍛鍊自己的產品思維。
三、如何整理素材庫
當臨摹四步曲做完之後，我們需要將產出物整理好。如果你在素材庫裡一分鐘內找不到想要找的那個，那麼你的素材庫多半是沒用的。素材不在於多，而在於質量，我們自己曾經畫過的圖示、頁面，都需要加以整理，以備不時之需。現在大部分設計師都是用 sketch 做圖，所以我們可以改變一下管理素材的方式，不用 PS 時代的那種一個需求一個原始檔的方式。
這種方式在我看來極大的浪費了 sketch 對於做 UI 來說先天的優勢。其實我們完全可以把所有圖都放置到一個檔案中，在這個檔案裡建 page 來區分，我自己是習慣用年份來區分，一年做的東西都放到一個 page 裡，然後會在每個不同的專案前加上說明，後期找的時候容易定位。
這樣我們就可以把一些通用的頁面元素做成元件，比如上下導航、時間欄等。而且還可以把所有的圖示整理到一起，一目瞭然，對於那些返回、搜尋也就不用每次單畫了。
按照這樣的方法整理的話，原始檔的個數就會少很多，只需要按類別把每個種類建一個 sketch 檔案就好。
特別是對於寫文章的我來說，當我把所有文章的配圖放到一起，在做新的圖的時候，就可以直接呼叫之前的素材，對於一些圖片大小、圖片下方文字的大小、顏色都可以做成規範，就不會出現每次做的不一樣的情況了。
總結
工作的越久，越會發現 UI 是有規律可循的，只要平時你多注意、多積累，一步一個腳印不要急。技法只要肯花時間都能學會。越到後面看的其實是思維方式，善於思考的人，總能從過往的經歷裡總結出一套方法論。
最後送大家和自己一句話“不要用戰術上的勤奮，來掩蓋戰略上的懶惰“。