我剛入行時臨摹了不少界面，不過因為那時候 UI 發展還不夠成熟（2013 年），也很難從外界了解更多的 UI 相關學習信息，所以我只是單一的去臨摹界面，目的也只是純粹提升設計效率以及主流審美，盡早的找到第一份工作（當時市場要求很低，我又是設計出生，所以對于當時情況來講工作相對好找），除此沒有想那么多。

不過時至今日，各大公司對 UI 的要求越來越高，因此門檻也不斷提升，對于一個初級設計師而言，走的每一步都很關鍵，如何快速正確的成長是設計師的一個難題。臨摹界面是提升設計基礎能力的一個關鍵，在臨摹時不要把自己當作一個復制粘貼的工具，而是要學會分析與思考，學會輸出自己的臨摹結果。下面給大家詳細講一下臨摹前需要做什么準備工作？到底應該如何從臨摹中做總結？

我提供的方法主要是從用戶體驗五要素中進行拆解，簡化了大量內容，著重點在于分析與思考能力，新手設計師也能輕松完成。（此方法不講軟件基礎知識）下面是步驟與所牽涉的五要素連接圖：

了解并體驗產品

這是一個非常重要的過程，也是你在臨摹前所必須要準備的事情，當你都不了解所臨摹的產品，那你臨摹又有何意義？

1. 了解產品

了解產品就如了解人一樣，如果只是表面的覺得她長的好看就想去追求，那也未必太膚淺了。我們想要真正了解一個人肯定需要知道她的興趣、愛好、工作等等，結合了這些才能了解內在美。

對于產品而言，又該如何去了解呢？其實有一個非常直接并簡單的方法，那就是查看產品報告。我就拿我非常喜歡的一個 APP 開眼舉例，當我想要去了解它更多信息時，必定會搜索它的各種產品相關信息來看，這些產品信息你可以從知乎、簡書等網站中搜到，雖然查到的產品報告不是最新的，但是信息卻是最直接。

戰略層

在產品報告中我們可以看到很多關于產品的分析，比如產品數據、商業目標、市場分析、用戶分析、功能分析等等，讓你更了解你所要臨摹的對象。當然最重要的還是看了產品分析報告后，要對它的戰略層面有較為清晰的理解，并且按照自己的理解對其打標簽（總結輸出）。例如可以給開眼打標簽為：輕量級短視頻應用、優質高清短視頻、創意人群、全球、審美。

框架層

在產品報告中我們所要了解的與戰略層同為重要的是框架層，我們可以多看看產品報告中的界面框架解析，了解每個板塊的放置原理、優勢、缺點以及修改建議等，這樣能夠很好的拓展自己的思維能力。（雖然在很多產品報告中框架的分析并不是完全正確，但對于新人來講可以很好的拓寬知識面，發散自己的思維）

2. 體驗產品

這里提到的體驗產品是指親自去使用產品，并且在使用體驗完產品后要對其范圍層、結構層進行簡單的總結輸出，這樣不僅能讓我們更近一步的去了解產品，還能提升自己的分析、思考、總結能力，對以后的競品分析也有很大的幫助。

范圍層

這里所指的范圍層主要是偏向視覺方向的界面布局，我們可以把所要臨摹的界面范圍布局用圖文形式表現出來。

結構層

這里的結構層僅僅是指產品的信息架構，我們可以用 xmind、百度腦圖等工具整理出來。

臨摹界面中的總結輸出

當了解完產品后，我們就對產品有了很好的認知，那么就可以開始著手臨摹產品。臨摹產品的軟件知識我這里就不講了，因為過于基礎，我這里重點是講臨摹后我們從表現層中需要輸出哪些內容，分為 6 大塊：顏色、字體、柵格、資源位、圖標、風格。

1. 顏色

顏色的合理使用，對 APP 來說至關重要，我們在臨摹過程中要學會分析與發現，要總結出 APP 的存在的色彩以及應用場景，例如 APP 的主色為 XX 色，是產品的品牌色，多用于什么場景下；輔助色為 XX 色，多用于什么場景下；灰色系又用了幾種，哪些情況下用重度灰色，哪些情況為輕度灰色。這些都是你在臨摹時所要思考與總結的。

2. 字體

字體需要總結的是它的字體大小、字體顏色、如何突出字體的層級關系。例如字號為：20-24-28-40（標簽文字-正文-正文小標題-大標題），顏色 666-666-333-000。

3. 柵格

柵格系統是在臨摹前就必須做好的，我們可以根據產品的頁面去推算出它用的幾像素的柵格系統（放入 sketch 中調試），在臨摹界面中我們可以觀察它的柵格用法，例如如何運用到圖片比例、資源位比例、卡片等等，如果有值得借鑒的可以記錄下來。

4. 資源位

資源位也是我們著重要去了解的一個板塊，在臨摹時可以標注在哪個板塊有資源位，羅列資源位的展示形式，如果是不常見的展示形式可以分析其好壞，進行總結。

5. 圖標

圖標作為 UI 界面重要的組成元素之一，我們在臨摹圖標時需要代入圖標的 keyline，這樣更能清晰的看到圖標的組成結構，也能夠很好的規范自己的制圖過程，并且建議在臨摹完后對圖標的風格進行打標簽（圖標風格類別具體可查看我之前發布的圖標文章），目的是為了以后遇到同類的圖標設計，有一個很好的借鑒途徑。

6. 風格

產品的設計風格（氣質）跟產品的整體品牌形象保持一致，好的設計風格能在紅海市場的同質化情況下保持差異化的，做到別具一格，增加用戶對產品的識別度。你可以在臨摹完后總結出產品的整體風格，并且向自己提問為什么它在此產品中運用這樣的風格，風格有哪些特點，哪些 APP 與它的風格類似。

輸出總結文檔

• 戰略層：輸出標簽
• 范圍層：輸出主要界面布局的范圍信息（圖文結合）
• 結構層：輸出產品的信息架構（xmind、百度腦圖）
• 表現層：按以上講解的方式進行輸出

（注：輸出內容文章中全部帶有案例，可作為參考）

作用：

以上的文檔輸出不僅可以讓你更好的理解產品，還能為你在做設計時提供更好的借鑒思路。畢竟現在設計同質化嚴重，我們想要做出更多突破還是需要多去分析與思考。

總結：

100%還原界面對于 UI 設計師而言再簡單不過，如果想要讓自己在臨摹中收獲更多，那么就要學會從多角度去分析與思考?？梢园l現雖然我提供的總結內容有一定量，不過對于新手來說執行起來還是沒有任何難度，最大的難題就是需要多做思考，思考不夠全面很正常，因為這些都是需要一步步積累的，多看多學，沒有 0 哪來的 1。

好了，今天的基礎設計分享就到這里，希望文章對大家有所幫助。

歡迎關注作者微信公眾號：「黑獅力」