有一種方法,能幫助設(shè)計(jì)師擴(kuò)展自己的視覺詞匯,并且能有效的提高UI設(shè)計(jì)的水平。但是我卻很少聽到數(shù)字設(shè)計(jì)師提起過。
它是什么呢?
我說的這種方法就是臨摹。臨摹是一種被畫家和作家使用了幾個(gè)世紀(jì)的方法。這是一種為了提高自己的技能,盡可能重現(xiàn)現(xiàn)有作品的過程。對(duì)于我們來說,這意味著一個(gè)像素一個(gè)像素的重現(xiàn)優(yōu)秀的用戶界面作品。
我保證,臨摹并不像它聽起來那么沒有意義。臨摹的關(guān)鍵在于,挑選比你現(xiàn)有的水平高一點(diǎn)的作品。通過復(fù)制你能力之外的東西,你將會(huì)提升你的技能。
所以,如果你想提高你對(duì)顏色的使用。那么你可以選擇一些用色大膽的作品臨摹。如果你想在奢侈品的品牌形象上有所長進(jìn),就找一些相對(duì)豪華、時(shí)尚的品牌網(wǎng)站進(jìn)行臨摹。
這并不是什么捷徑,事實(shí)上很難有比它更普通的練習(xí)了。但它是我知道提高UI設(shè)計(jì)技能的最有效的學(xué)習(xí)方式。
哪個(gè)是原稿,哪個(gè)是臨摹的副本?
作家們也會(huì)臨摹
我第一次聽說臨摹是在一個(gè)叫The Art of Manliness的blog,Brett McKay 舉了很多通過臨摹來磨煉自己寫作技能的諸多作家的事例。
杰克·倫敦 曾臨摹過 Rudyard Kipling 的文字,用來學(xué)習(xí)他世界級(jí)的措辭和節(jié)奏技巧。
羅伯特·劉易斯·史蒂文 會(huì)非常仔細(xì)的研究他看過的特別美麗的文字段落,然后利用記憶將其在自己的作品中再現(xiàn)。
本杰明·富蘭克林會(huì)對(duì)好文章中的每一個(gè)句子都寫筆記分析,然后過幾天,他通過閱讀筆記重新寫一篇,再對(duì)兩者進(jìn)行比較。
這種例子舉不勝舉,我知道,著名的神秘主義作家錢德勒,也使用了一種類似本杰明的方法,依靠詳細(xì)的筆記重寫一個(gè)中篇小說,并與原文相互比較。
他后來寫信給原著作者,告訴他這項(xiàng)練習(xí)的指導(dǎo)意義。注意他是這么分析的:
我發(fā)現(xiàn)你的手法最精妙的地方在于厘清局勢(或者把情況弄假成真),這一點(diǎn)幾乎是難以置信的,但是在實(shí)際閱讀中卻看起來相當(dāng)真實(shí)。我希望你把我這番話理解為夸獎(jiǎng)的意思。我從來沒有哪怕是試著自己做過這件事情。大仲馬在這點(diǎn)上有極強(qiáng)的能力。狄更斯也一樣。這也許是所有快速工作的基礎(chǔ),因?yàn)榭焖俚墓ぷ骱茏匀坏匦枰艽蟪潭鹊募磁d發(fā)揮,而創(chuàng)造一個(gè)即興的場景不可避免的需要相當(dāng)不錯(cuò)的技巧。
這不是一個(gè)生搬硬套的練習(xí)。錢德勒通過這個(gè)練習(xí)對(duì)他自己和其它作者之間文筆細(xì)微的差別已經(jīng)了然于心。你能對(duì)UI設(shè)計(jì)有如此清晰的認(rèn)識(shí)么?如果沒有,我強(qiáng)烈推薦通過臨摹來練習(xí)。
正如作家通過臨摹名家的作品,無意識(shí)的吸收了他們對(duì)于那些文字、短語、節(jié)奏等的細(xì)微的選擇,一個(gè)設(shè)計(jì)師也可以通過臨摹去體會(huì)設(shè)計(jì)中的布局、文字、顏色以及各種裝飾。這就是臨摹的力量。
讓我們?cè)賮砜纯戳硗庖环N具有非常悠久歷史的藝術(shù)形式中的臨摹方法。
臨摹名畫
在美術(shù)畫廊的臨摹。
如果你漫步在藝術(shù)博物館,你可能會(huì)看到很多人正在現(xiàn)場臨摹著。畫家們臨摹有著比作家更悠久的歷史。萊昂納多·達(dá)芬奇通過臨摹他的老師(安德烈·德爾·韋羅基奧)來提升繪畫技巧,這是文藝復(fù)興時(shí)期的學(xué)徒藝術(shù)家的慣例。達(dá)芬奇甚至將臨摹作為學(xué)生的首要實(shí)踐項(xiàng)目:
藝術(shù)家應(yīng)該首先通過從臨摹大師的手中的作品來練習(xí)技巧。
為什么要這樣做?因?yàn)榕R摹可以訓(xùn)練你的眼睛。
當(dāng)你畫一個(gè)現(xiàn)實(shí)的場景,會(huì)有很多需要擔(dān)心的事情,模型會(huì)移動(dòng),風(fēng)可能會(huì)吹亂東西,太陽會(huì)落山等等。在你的大腦能夠自然的思考顏色和形狀之前,在現(xiàn)實(shí)中繪畫是很艱難的。但是如果是在工作室里臨摹的話,你可以用你全部的精力去吸收那些繪畫基本知識(shí)。
界面設(shè)計(jì)師雖然不需要繪制現(xiàn)實(shí)的場景,但是臨摹仍然是一個(gè)有效地方法去屏蔽掉額外的干擾因素,從而迅速提升你的基礎(chǔ)技能。
雖然它曾經(jīng)是世界上最偉大的藝術(shù)家的一個(gè)基礎(chǔ)性的練習(xí),臨摹現(xiàn)在已經(jīng)沒落了。如今,它被視為生搬硬套,缺乏創(chuàng)造力和抄襲。
那么,為什么UI設(shè)計(jì)師需要用臨摹來練習(xí)。
這都是源于對(duì)細(xì)節(jié)的重建
重點(diǎn)是這樣的:當(dāng)你一個(gè)個(gè)像素的臨摹的時(shí)候,你不得不重做原作設(shè)計(jì)師之前做過的每一個(gè)決定:選用哪種字體?多大合適?用什么背景圖片?你會(huì)沉浸在那些優(yōu)秀的設(shè)計(jì)師所作出的細(xì)微的決策中。
你可能會(huì)說,會(huì)不會(huì)在臨摹中將一些該注意的決策都忽略掉了呢?也有可能。但是只要你認(rèn)真了,臨摹還是會(huì)暴露一些你自己從來沒有關(guān)注過的設(shè)計(jì)決策。
臨摹 Epicurrence Oahu 網(wǎng)站是我重要的學(xué)習(xí)經(jīng)歷。
例如,我對(duì)Dann Petty的Epicurrence網(wǎng)站的臨摹是非常有價(jià)值的一次經(jīng)歷。我從這個(gè)過程中內(nèi)化了三件事:
超大的字體
臨摹中用到的“Hawaii”的首字母 H 的字號(hào)竟然是365號(hào)。這么多年的設(shè)計(jì)中我從來沒有敢用過這么大的字。然而,將字母做成視覺元素,和圖片結(jié)合在了一起的感覺非?。
利用畫筆的筆觸作“陰影”
在標(biāo)題、菠蘿、游泳的圖片下面,原本應(yīng)該是一些陰影的地方卻使用了筆觸的效果,哇,這真是一個(gè)奇妙的手法。
慷慨的大寫字母間距
毫無疑問,利用大寫字母可以增強(qiáng)元素的對(duì)齊的感覺、提升間距可以讓字體更優(yōu)雅是教科書式的做法,我發(fā)現(xiàn)自己越來越不自覺的應(yīng)用這些方法。這里看到的很酷的大些字母,基本上都調(diào)整過了間距。
在我臨摹Dann Petty這個(gè)作品之前,我看到它只會(huì)想“哇,這作品真的很棒”,然而我并不能在看了之后把作品中的技巧變成自己的。只有臨摹之后,我才可能真正吸收了作者的思考的方法和設(shè)計(jì)技巧。
對(duì) Vic Bell 的 Skedio 圖標(biāo)集的臨摹讓我的技能得到了很大的提升。(紅色的是我的臨摹)
這是另一個(gè)例子。Skedio 是圖標(biāo)設(shè)計(jì)大師 Vic Bell 的作品。(她的原件是藍(lán)色的,我的復(fù)制品是紅色的。)
這又是一個(gè)令人著迷的練習(xí),因?yàn)?Vic 的圖標(biāo)總是比我自己的圖標(biāo)有著更多和更豐富的細(xì)節(jié)。她用兩種微妙的方式增加了這種復(fù)雜性:
第二個(gè)稍微淺一些的藍(lán)色
對(duì)比第二行的第一個(gè)圖標(biāo)“setting”,描邊和填充顏色深淺不一。而我之前設(shè)計(jì)的圖標(biāo)大都只有一種顏色。
第二條稍微細(xì)一點(diǎn)的描邊
第一行第二個(gè)“tags”中代表文字的兩條線和第三個(gè)“upgrades”中的箭頭,所用的粗細(xì)和描邊是不一樣的。我一直以為圖標(biāo)中粗細(xì)需要完全一致,但事實(shí)上 Vic 使用了 3px和4px 的兩種粗細(xì)。
臨摹并不僅僅在于幫助你“看到”這些細(xì)節(jié),更在于幫助你如何在設(shè)計(jì)中使用這些細(xì)節(jié)。
讓我們看看這個(gè)點(diǎn)子,給強(qiáng)調(diào)色配上一個(gè)輔助的、淺一些的顏色。Vic會(huì)在以下四中情況中用到:
作為陰影 如第二行的第三個(gè)圖標(biāo)“delete”,還有第一行的第三個(gè)“upgrades”
作為光線
第三行的第五個(gè)“search”
顏色對(duì)比
第一行的第四個(gè)圖標(biāo)“help”和第二行第四個(gè)“rename”
視覺重量對(duì)比
第一行第一個(gè)“all sketches” 和第三行第五個(gè)“l(fā)ayers”。利用不同的顏色將白色的前景凸顯出來。
左邊是Taylor Perrin的Díade los Muertos的設(shè)計(jì),右邊是我的副本。
我不久前看到了Taylor Perrin的Díade los Muertos設(shè)計(jì),它讓我震驚了。他處理元素的方式非常讓我向往,如美麗的攝影,豐富的紋理和全景布局。
我平時(shí)大部分的時(shí)間都是用來設(shè)計(jì)干凈,簡潔的企業(yè)應(yīng)用程序。臨摹Taylor Perrin的作品讓我以一種新的方式拓展了我對(duì)設(shè)計(jì)的思考。
一個(gè)新的工作流程
我打從一開始就是Sketch的擁護(hù)者。我甚至在教一個(gè)基于Sketch的UI課程,但它的簡單性也有其缺點(diǎn)。也就是說,由于從Photoshop切換到Sketch,我的設(shè)計(jì)反射趨向于一切都是平面矩形。在這個(gè)練習(xí)中,我對(duì)整個(gè)頁面的每一個(gè)背景進(jìn)行了紋理化,它是通過PS來提醒我,在設(shè)計(jì)過程中讓風(fēng)格更多樣化,而不只是使用簡單的元素。
讓平庸的素材閃耀
我第一個(gè)重塑的對(duì)象是那個(gè)吹號(hào)角的骷髏。老實(shí)說,當(dāng)我在網(wǎng)上找到它時(shí),我并沒有什么印象深刻的感覺。如果我按照我平時(shí)的喜好來找素材,我肯定就忽略它了。但是它在Perrin的作品里看起來很棒。臨摹的過程讓我學(xué)到這樣一件事,你可以讓平庸的素材在你的作品里超越它的外觀。
全寬布局
雖然最近全寬的布局越來越流行了,但是我自己很少這么做。這個(gè)練習(xí)幫助增強(qiáng)了處理這類布局的信心。當(dāng)我臨摹的時(shí)候,我會(huì)嘗試著猜測某些細(xì)節(jié)(例如字體的大小),看看是不是正確的。然后我再檢查和調(diào)整。如果我以后再處理1400寬度的布局網(wǎng)頁的時(shí)候,就不會(huì)為標(biāo)題是60像素而感到奇怪了。
那么,我這樣就跟Dann Petty、Vic Bell、Taylor Perrin 一樣好了么?我覺得這恐怕還得花些時(shí)間,畢竟他們是游戲行業(yè)最頂尖的UI設(shè)計(jì)師。但是我相信,我每天都在將他們的技能融入到自己的能力中。
常見問題
你都是什么時(shí)候臨摹的?
我一般都會(huì)在早上臨摹30分鐘左右。有兩個(gè)好處:
醒來的時(shí)候?qū)W習(xí)一些新東西可以激勵(lì)我開始新的一天。
相比查郵件和微博來說臨摹是更有效的喚醒活動(dòng)。沖咖啡的時(shí)候總需要做點(diǎn)事情。
感謝您對(duì)極地作品的預(yù)覽,品牌策劃與設(shè)計(jì),形象店設(shè)計(jì)制作,專注中高端品牌策劃設(shè)計(jì),我們更專業(yè),歡迎咨詢微信/手機(jī):13656226579 0512-89169975 tangjingyan.com
|