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