在做 UI 的時候，前期都是需要去大量臨摹好的頁面，然後記憶，形成條件反射，最後再為己用。但很不幸很多新手在入行之初，完全忽略了這點，包括剛入行時的我，拿到原型之後，一味的想自我創新，頁面布局、字體大小、間距等都沒有深入的去研究，完全憑着感覺來。這做不好也實屬正常。

那怎麼改善這一情況呢？最好的方法就是從臨摹開始...

一、怎麼找臨摹素材

臨摹最重要的就是找素材，素材的好壞直接影響到後期的效果。

1，臨摹線上 APP。線上 APP 的頁面在落地前經過很多人的打磨，特别是那些大廠的 APP，直接去臨摹就好，并從中找到規律所在。

2，臨摹UI巴巴提供下載的素材。有很多用戶下載了UI巴巴的素材後不知道怎麼用，其實完全可以臨摹一份。

二、臨摹四步曲

很多人臨摹的時候，總喜歡“描摹”，比照着原圖進行臨摹，但這樣的成效有限，沒有經過太多的思考。我建議可以和上面我講述的學畫畫的故事一樣，描摹完之後再憑借記憶畫一遍，畫完之後再比照着原圖進行修改。

在臨摹 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 是有規律可循的，隻要平時你多注意、多積累，一步一個腳印不要急。技法隻要肯花時間都能學會。越到後面看的其實是思維方式，善于思考的人，總能從過往的經曆裡總結出一套方法論。

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

原文作者：橙子的橙子

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!