如何用臨摹來提升你的設計能力

有一種方法，能幫助設計師擴展自己的視覺辭彙，並且能有效的提高UI設計的水平。但是我卻很少聽到數字設計師提起過。

它是什麼呢？

我說的這種方法就是臨摹。臨摹是一種被畫家和作家使用了幾個世紀的方法。這是一種為了提高自己的技能，儘可能重現現有作品的過程。對於我們來說，這意味著一個像素一個像素的重現優秀的用戶界面作品。

我保證，臨摹並不像它聽起來那麼沒有意義。臨摹的關鍵在於，挑選比你現有的水平高一點的作品。通過複製你能力之外的東西，你將會提升你的技能。

所以，如果你想提高你對顏色的使用。那麼你可以選擇一些用色大膽的作品臨摹。如果你想在奢侈品的品牌形象上有所長進，就找一些相對豪華、時尚的品牌網站進行臨摹。

這並不是什麼捷徑，事實上很難有比它更普通的練習了。但它是我知道提高UI設計技能的最有效的學習方式。

哪個是原稿，哪個是臨摹的副本？

作家們也會臨摹

我第一次聽說臨摹是在一個叫The Art of Manliness的blog，Brett McKay 舉了很多通過臨摹來磨鍊自己寫作技能的諸多作家的事例。

• 傑克·倫敦 曾臨摹過 Rudyard Kipling 的文字，用來學習他世界級的措辭和節奏技巧。

• 羅伯特·劉易斯·史蒂文 會非常仔細的研究他看過的特別美麗的文欄位落，然後利用記憶將其在自己的作品中再現。

• 本傑明·富蘭克林會對好文章中的每一個句子都寫筆記分析，然後過幾天，他通過閱讀筆記重新寫一篇，再對兩者進行比較。

這種例子舉不勝舉，我知道，著名的神秘主義作家錢德勒，也使用了一種類似本傑明的方法，依靠詳細的筆記重寫一個中篇小說，並與原文相互比較。

他後來寫信給原著作者，告訴他這項練習的指導意義。注意他是這麼分析的：

我發現你的手法最精妙的地方在於釐清局勢（或者把情況弄假成真），這一點幾乎是難以置信的，但是在實際閱讀中卻看起來相當真實。我希望你把我這番話理解為誇獎的意思。我從來沒有哪怕是試著自己做過這件事情。大仲馬在這點上有極強的能力。狄更斯也一樣。這也許是所有快速工作的基礎，因為快速的工作很自然地需要很大程度的即興發揮，而創造一個即興的場景不可避免的需要相當不錯的技巧。

這不是一個生搬硬套的練習。錢德勒通過這個練習對他自己和其它作者之間文筆細微的差別已經瞭然於心。你能對UI設計有如此清晰的認識么？如果沒有，我強烈推薦通過臨摹來練習。

正如作家通過臨摹名家的作品，無意識的吸收了他們對於那些文字、短語、節奏等的細微的選擇，一個設計師也可以通過臨摹去體會設計中的布局、文字、顏色以及各種裝飾。這就是臨摹的力量。

讓我們再來看看另外一種具有非常悠久歷史的藝術形式中的臨摹方法。

臨摹名畫

如果你漫步在藝術博物館，你可能會看到很多人正在現場臨摹著。畫家們臨摹有著比作家更悠久的歷史。萊昂納多·達芬奇通過臨摹他的老師（安德烈·德爾·韋羅基奧）來提升繪畫技巧，這是文藝復興時期的學徒藝術家的慣例。達芬奇甚至將臨摹作為學生的首要實踐項目：

藝術家應該首先通過從臨摹大師的手中的作品來練習技巧。

為什麼要這樣做？因為臨摹可以訓練你的眼睛。

當你畫一個現實的場景，會有很多需要擔心的事情，模型會移動，風可能會吹亂東西，太陽會落山等等。在你的大腦能夠自然的思考顏色和形狀之前，在現實中繪畫是很艱難的。但是如果是在工作室里臨摹的話，你可以用你全部的精力去吸收那些繪畫基本知識。

界面設計師雖然不需要繪製現實的場景，但是臨摹仍然是一個有效地方法去屏蔽掉額外的干擾因素，從而迅速提升你的基礎技能。

雖然它曾經是世界上最偉大的藝術家的一個基礎性的練習，臨摹現在已經沒落了。如今，它被視為生搬硬套，缺乏創造力和抄襲。

那麼，為什麼UI設計師需要用臨摹來練習。

這都是源於對細節的重建

重點是這樣的：當你一個個像素的臨摹的時候，你不得不重做原作設計師之前做過的每一個決定：選用哪種字體？多大合適？用什麼背景圖片？你會沉浸在那些優秀的設計師所作出的細微的決策中。

你可能會說，會不會在臨摹中將一些該注意的決策都忽略掉了呢？也有可能。但是只要你認真了，臨摹還是會暴露一些你自己從來沒有關注過的設計決策。

例如，我對Dann Petty的Epicurrence網站的臨摹是非常有價值的一次經歷。我從這個過程中內化了三件事：

超大的字體

臨摹中用到的「Hawaii」的首字母 H 的字型大小竟然是365號。這麼多年的設計中我從來沒有敢用過這麼大的字。然而，將字母做成視覺元素，和圖片結合在了一起的感覺非常酷。

利用畫筆的筆觸作「陰影」

在標題、菠蘿、游泳的圖片下面，原本應該是一些陰影的地方卻使用了筆觸的效果，哇，這真是一個奇妙的手法。

慷慨的大寫字母間距

毫無疑問，利用大寫字母可以增強元素的對齊的感覺、提升間距可以讓字體更優雅是教科書式的做法，我發現自己越來越不自覺的應用這些方法。這裡看到的很酷的大些字母，基本上都調整過了間距。

在我臨摹Dann Petty這個作品之前，我看到它只會想「哇，這作品真的很棒」，然而我並不能在看了之後把作品中的技巧變成自己的。只有臨摹之後，我才可能真正吸收了作者的思考的方法和設計技巧。

對 Vic Bell 的 Skedio 圖標集的臨摹讓我的技能得到了很大的提升。（紅色的是我的臨摹）

這是另一個例子。Skedio 是圖標設計大師 Vic Bell 的作品。（她的原件是藍色的，我的複製品是紅色的。）

這又是一個令人著迷的練習，因為 Vic 的圖標總是比我自己的圖標有著更多和更豐富的細節。她用兩種微妙的方式增加了這種複雜性：

• 第二個稍微淺一些的藍色

  對比第二行的第一個圖標「setting」，描邊和填充顏色深淺不一。而我之前設計的圖標大都只有一種顏色。

• 第二條稍微細一點的描邊

  第一行第二個「tags」中代表文字的兩條線和第三個「upgrades」中的箭頭，所用的粗細和描邊是不一樣的。我一直以為圖標中粗細需要完全一致，但事實上 Vic 使用了 3px和4px 的兩種粗細。

臨摹並不僅僅在於幫助你「看到」這些細節，更在於幫助你如何在設計中使用這些細節。

讓我們看看這個點子，給強調色配上一個輔助的、淺一些的顏色。Vic會在以下四中情況中用到：

• 作為陰影 如第二行的第三個圖標「delete」，還有第一行的第三個「upgrades」

• 作為光線

  第三行的第五個「search」

• 顏色對比

  第一行的第四個圖標「help」和第二行第四個「rename」

• 視覺重量對比

  第一行第一個「all sketches」 和第三行第五個「layers」。利用不同的顏色將白色的前景凸顯出來。

這些技巧比任何課堂中學到的都更細微。他們會直接從大師的思想中傳遞給你，只要你願意付出努力去臨摹。

好吧，讓我們再舉一個例子。

左邊是Taylor Perrin的Díade los Muertos的設計，右邊是我的副本。

我不久前看到了Taylor Perrin的Díade los Muertos設計，它讓我震驚了。他處理元素的方式非常讓我嚮往，如美麗的攝影，豐富的紋理和全景布局。

我平時大部分的時間都是用來設計乾淨，簡潔的企業應用程序。臨摹Taylor Perrin的作品讓我以一種新的方式拓展了我對設計的思考。

一個新的工作流程

我打從一開始就是Sketch的擁護者。我甚至在教一個基於Sketch的UI課程，但它的簡單性也有其缺點。也就是說，由於從Photoshop切換到Sketch，我的設計反射趨向於一切都是平面矩形。在這個練習中，我對整個頁面的每一個背景進行了紋理化，它是通過PS來提醒我，在設計過程中讓風格更多樣化，而不只是使用簡單的元素。

讓平庸的素材閃耀

我第一個重塑的對象是那個吹號角的骷髏。老實說，當我在網上找到它時，我並沒有什麼印象深刻的感覺。如果我按照我平時的喜好來找素材，我肯定就忽略它了。但是它在Perrin的作品裡看起來很棒。臨摹的過程讓我學到這樣一件事，你可以讓平庸的素材在你的作品裡超越它的外觀。

全寬布局

雖然最近全寬的布局越來越流行了，但是我自己很少這麼做。這個練習幫助增強了處理這類布局的信心。當我臨摹的時候，我會嘗試著猜測某些細節（例如字體的大小），看看是不是正確的。然後我再檢查和調整。如果我以後再處理1400寬度的布局網頁的時候，就不會為標題是60像素而感到奇怪了。

那麼，我這樣就跟Dann Petty、Vic Bell、Taylor Perrin 一樣好了么？我覺得這恐怕還得花些時間，畢竟他們是遊戲行業最頂尖的UI設計師。但是我相信，我每天都在將他們的技能融入到自己的能力中。

常見問題

你都是什麼時候臨摹的？

我一般都會在早上臨摹30分鐘左右。有兩個好處：

• 醒來的時候學習一些新東西可以激勵我開始新的一天。

• 相比查郵件和微博來說臨摹是更有效的喚醒活動。沖咖啡的時候總需要做點事情。

只有30分鐘么？臨摹不完怎麼辦？

我會在第二天繼續接著來。

我應該臨摹些什麼？

當然要臨摹一些超越你的現有水平的作品，一些你尚未磨鍊過的技巧的作品。

我利用dribbble找到要臨摹的作品。

我喜歡瀏覽 Dribbble 。 每當我看到喜歡的作品的時候都保存下來。這裡推薦一些設計師的作品，提供給那些正在學習基礎的設計師：

• Jonathan Quentin 的顏色和漸變都使用的非常棒。

• Brijan Powell 的作品優雅、高檔，很有逼格。

• Tubik Studio 的作品非常夢幻，明亮、多彩又爽快。

如果你是一個專業設計師，這裡有更多的建議：

• 有時候我會臨摹客戶的網站和app，如果他們需要保持原有的樣式風格。

• 有時候我會臨摹潛在客戶的網站和app，這樣在第一次會面的時候我就能對他們的視覺語言有更深刻的認識。

比如說，我為代餐公司Soylent做了一些設計。一旦他們聯繫了我，我會提前臨摹下他們的官網，這樣我就可以跟他們流程的討論用色，排版和使用圖片了。

我通過複製了Soylent的主頁，來與他們的工作。臨摹讓我能感受到他們是如何使用視覺，排版等等。

我需要臨摹的跟原稿一模一樣么？

不，你不需要完全一致。但是重要的是不要比原來的差。你只要讓它看起來一致或更好就行了，即便細節上可能不完全一樣。

你也不可能總是能幸運的找到完全一致的資源和字體，所以總會有不一樣的地方。Identifont 和 WhatTheFont 可以找到一些常見的字體和圖片。

你是否會通過臨摹系列的作品來提升某一項技能呢？

臨摹某個方面的5個作品來提升,比如說排版就比較適合。但是我個人更喜歡那些能吸引我注意力的作品。

你是用Sketch 還是 HTML和css 進行臨摹呢？

我用Sketch臨摹。我發現臨摹是一項視覺化的訓練，而css是個比較差的方法。寫css的時候我會陷入一些不必要的細中去，如果你想成為一個好的前端的話可能可行，但是對於設計師來說太費勁了。

我能把臨摹放進簡歷中么？

別這麼做。簡歷是展示你自己作品的地方，臨摹僅僅是一個學習過程。

會不會造成剽竊呢？

不會的。這裡有一些大設計師Sean McCabe 關於如何避免剽竊的建議：

• 吸收所有你需要的靈感。

• 睡一覺。

• 依靠記憶做你的新作品。

順便說一下，利用記憶而不是根據原作進行臨摹，也是臨摹技巧的一種。但是我更建議相對專業的人使用這種方法。如果你想提升自己，從原作臨摹會讓你學到更多的東西。

藝術家和創意群體中有一個顯著的共識，那就是創意就是講一些已經存在的東西進行混合，沒有什麼東西是完全原創的。

不成熟的詩人模仿；成熟的詩人偷竊；糟糕的詩人毀掉他們偷來的，好的詩人讓它們變得更好，或者至少讓什麼東西不一樣。好的詩人將拿來的熔煉成獨特的完整的感覺，完全不同於片段的撕裂的感覺；糟糕的詩人隨便將其用在完全沒有統一性的地方。

– T.S. Eliot

我想我聽到的那些聞所未聞的音樂，不過是把那些已經存在的東西拼合成一種從未存在過的新鮮的東西。

– Brian Eno

所有的寫作都是剪輯，拼貼讀到和聽到的。難道還有例外？

– William S. Burroughs

臨摹可以幫助你發現靈感，將其融合成你自己的風格。隨意的瀏覽則只能了解表面粗淺的技術和風格，但是臨摹可以幫你真正深入的擴展自己的技能。

臨摹適合我么？

除非你是世界聞名的大師，那麼你就能夠從臨摹中獲益。

這些基本包含了關於臨摹的所有常見的問題。臨摹雖然簡單，但是你將會從中獲得回報。如果你始終如一的臨摹那些讓你眼前一亮或者超越你現有水平的作品的話，你將會從中積累很多靈感和技巧，並且可以用到任何的工作中。藝術家們都已經用這個方法幾個世紀了，現在是設計師迎頭趕上的時候了。

所以，下次需要拓展你的視覺辭彙的時候，找一個好設計作品（比如跟我一樣從dribbble上找），放一首歌，開始像素的追逐吧。

原文鏈接：Copy If You Can: Improving Your UI Design Skills With Copywork

翻譯：逗砂

本文首發於公眾號：非科班設計

推薦閱讀：