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