在Web UI 模型出現(xiàn)之前，經(jīng)過了很長(zhǎng)一段的時(shí)間，設(shè)計(jì)師們都會(huì)選擇使用縮略圖(Thumbnail Sketching)來展現(xiàn)自己的創(chuàng)意，表達(dá)自己的思路。這種技巧就像是設(shè)計(jì)師專門用于溝通的一種藝術(shù)，而這種藝術(shù)現(xiàn)在卻漸漸淡出大家的視線。
而通過本文，就讓大家重新審視品味一下這種藝術(shù)。
對(duì)于設(shè)計(jì)師而言，對(duì)線框圖的期望其實(shí)是一種能夠在繁重設(shè)計(jì)工作中整理自己思路的方式。而繪制縮略圖更多的是就是為自己累計(jì)更多的創(chuàng)意，從中找到自己思維中的閃光點(diǎn)。
草圖是繪制線框圖的地基
線框圖(Wireframing)是我們熟知的設(shè)計(jì)基礎(chǔ)。按照大家現(xiàn)在的認(rèn)知，大部分的設(shè)計(jì)師都會(huì)將線框圖當(dāng)作設(shè)計(jì)的第一個(gè)基礎(chǔ)步驟。
實(shí)際上，縮略圖是一種更久遠(yuǎn)并且使用起來更成熟的技術(shù)，可惜現(xiàn)在大家基本不會(huì)在這個(gè)技術(shù)上投入什么精力進(jìn)行討論。縮略圖并不像從前那樣受到重視，我們無需回避這個(gè)話題，因?yàn)楝F(xiàn)在，線框圖的使用可以讓設(shè)計(jì)師能夠更專注在最基礎(chǔ)的頁(yè)面架構(gòu)上，使得設(shè)計(jì)過程中可以不受設(shè)計(jì)風(fēng)格的考量干擾。
但縮略圖的確比線框圖更加基礎(chǔ)，在設(shè)計(jì)中通過對(duì)縮略圖的繪制，所表達(dá)出的設(shè)計(jì)更加具現(xiàn)化。但更重要的是，設(shè)計(jì)師是否愿意理解并使用縮略圖。
縮略圖的意義是什么
縮略圖聽上去是一種結(jié)構(gòu)簡(jiǎn)單的簡(jiǎn)筆畫，聽到這個(gè)名字給人的第一個(gè)感覺就是很有趣。
不過，縮略圖的意義更多的是在很短的時(shí)間內(nèi)，將大量自己的所想到的創(chuàng)意在紙面上繪制出來，直接的說就是一種在視覺上進(jìn)行的頭腦風(fēng)暴。而在這一點(diǎn)上，縮略圖與線框圖的功能一致，只是縮略圖的結(jié)構(gòu)更小，制作的速度更快速。
當(dāng)完全擺脫了各種干擾，在同樣時(shí)間內(nèi)，縮略圖所能記錄下來的創(chuàng)意遠(yuǎn)超過線框圖。在這個(gè)過程中，設(shè)計(jì)者可以繪制出大量的縮略圖草稿，而在這些草稿的基礎(chǔ)上就能進(jìn)一步進(jìn)行線框圖的繪制。
如何去做
在創(chuàng)作縮略圖的過程中，我們需要先畫幾個(gè)簡(jiǎn)單的瀏覽器模板、頁(yè)面邊框，這可以是任何你所需要的設(shè)計(jì)模板。這里有一些現(xiàn)成模板，或許可以給你的設(shè)計(jì)帶來一些幫助。
當(dāng)你完成這些準(zhǔn)備工作，你就能開始進(jìn)行你的繪制。在繪制的過程中，你不需要優(yōu)秀的畫功或其它的任何技巧。正好相反，你可以完全投入到創(chuàng)意的思考中，隨手畫出自己的想法，哪怕這讓你在過于倉(cāng)促的繪制過程中，只能畫出幼兒涂鴉的作品。
在這一點(diǎn)上，縮略圖可以說是一種追求速度、甚至可以說是一種偷懶的行為。把所有會(huì)浪費(fèi)你時(shí)間的多余修飾統(tǒng)統(tǒng)拋棄，只需要最簡(jiǎn)單的圖形，可以把你想到的最基本的框架勾勒出來，就能進(jìn)行下一個(gè)設(shè)計(jì)。
這能給你帶來什么?
我們能從這些看上去很簡(jiǎn)陋的小圖圖上得到什么?
現(xiàn)在的情況是，我們已經(jīng)能夠輕易的得到太多
通過電腦繪制，我們的創(chuàng)意往往在剛剛生成的時(shí)候就能夠快速制作成最接近現(xiàn)實(shí)的圖紙。
但這就帶來一個(gè)問題：盡管這個(gè)過程已經(jīng)非常短，但是時(shí)間上仍然只夠我們展現(xiàn)其中一項(xiàng)或者兩項(xiàng)設(shè)計(jì)。雖然我們希望這些設(shè)計(jì)最終能被實(shí)現(xiàn)，但是我們最初的設(shè)計(jì)往往就未必是我們最好的設(shè)計(jì)。
將一個(gè)設(shè)計(jì)過早的具現(xiàn)化未必是一件好事。
當(dāng)一個(gè)創(chuàng)意已經(jīng)被繪制成相對(duì)成型的線框圖甚至是原型、視覺稿的時(shí)候，我們可能已經(jīng)很難對(duì)整個(gè)設(shè)計(jì)進(jìn)行改良，甚至從新開始一個(gè)設(shè)計(jì)。哪怕在一個(gè)設(shè)計(jì)上你沒有面臨需要改進(jìn)的情境，你也浪費(fèi)了一次進(jìn)行大量創(chuàng)作的機(jī)會(huì)。
通過各種設(shè)備、軟件我們可以很輕易的做出一個(gè)設(shè)計(jì)的圖樣，但是通過繪制縮略圖我們可以在很短的時(shí)間內(nèi)記錄大量的創(chuàng)意，而我們從這些被記錄下來的設(shè)計(jì)中，可能會(huì)找到我們自己創(chuàng)作過程中的閃光點(diǎn)。
節(jié)省自己的時(shí)間
在設(shè)計(jì)中，對(duì)時(shí)間的管理總是被大家放在交付環(huán)節(jié)的首位，每每規(guī)劃時(shí)間，都為自己的交付結(jié)果設(shè)定了嚴(yán)格的最后期限(拋開原文，譯者很自豪有一定程度的拖延癥)。
但在實(shí)際情況中，設(shè)計(jì)并不需要把所有的時(shí)間都用在交付結(jié)果上，生成創(chuàng)意的時(shí)間完全取決于個(gè)人。而通過繪制縮略圖，這個(gè)步驟所花費(fèi)的時(shí)間幾乎就是創(chuàng)意生成的全部。并且這個(gè)步驟可以讓你在一定程度上對(duì)自己的成果進(jìn)行評(píng)估和審視。因?yàn)槟闼紤]的情況已經(jīng)足夠的多，所以在后續(xù)的過程中你可以更快的應(yīng)付突發(fā)的狀況，包括布局的更改以及功能的轉(zhuǎn)換。
縮略圖不僅僅是用于布局
當(dāng)我們?cè)陉U述縮略圖的這個(gè)概念時(shí)，我們不僅僅是針對(duì)布局，縮略圖在任何類型的設(shè)計(jì)上發(fā)揮左右。事實(shí)上，大家在繪制LOGO時(shí)，就是從繪制縮略圖開始的。
在設(shè)計(jì)LOGO時(shí)，大家普遍會(huì)從繪制縮略圖開始，那么在其它領(lǐng)域我們可以進(jìn)行相關(guān)的嘗試。
標(biāo)題設(shè)計(jì)、網(wǎng)頁(yè)開發(fā)、宣傳冊(cè)、名片、App界面、角色設(shè)計(jì)
繪制縮略圖的技巧
現(xiàn)在對(duì)縮略圖我們達(dá)成了統(tǒng)一的概念，那么無論你將其用于哪個(gè)領(lǐng)域，我們首先都需要找到一些繪制它的原則技巧。
就是一幅幅小小的涂鴉
同樣從事設(shè)計(jì)工作，可能我們中間的確有人無法用鉛筆繪制出一幅足以表達(dá)自己創(chuàng)意的草圖。
但在繪制縮略圖這一點(diǎn)上，如果你是一個(gè)繪畫苦手，那很好，你更加適合創(chuàng)作縮略圖。因?yàn)閷?duì)于習(xí)慣用鉛筆繪圖的人，他們的習(xí)慣制約了他們繪制縮略圖。一條直線，一個(gè)圓角都會(huì)成為他們這些細(xì)節(jié)控的絆腳石。
我們需要達(dá)成一個(gè)共識(shí)，這個(gè)技術(shù)需要的是量而并非是質(zhì)。我們不反對(duì)完美的繪圖，事實(shí)上，作者(譯者也是)非常欣賞(譯者是羨慕)可以繪制完美草圖的藝術(shù)天才。
上圖是出色草圖中的其中一個(gè)案例，繪制技巧在文章《設(shè)計(jì)中的溝通，繪制表達(dá)自己創(chuàng)意的草圖》中但在縮略圖中，我們只需要把我們創(chuàng)意通過紙筆進(jìn)行概述。我們不需要在圖紙上繪制出裸視3D的效果。
保持推進(jìn)的步伐
我們不需要在繪制的過程中過多的琢磨其中一個(gè)創(chuàng)意，當(dāng)一個(gè)創(chuàng)意被畫出來后并不討我們的喜歡，我們不需要它的基礎(chǔ)上進(jìn)行改良，更不需要把它擦掉后推翻從來。你所需要的就是把目光從這個(gè)圖上移開，并開始進(jìn)行下一個(gè)創(chuàng)意的繪制。這是因?yàn)椋趲仔r(shí)后你回頭一看，或許會(huì)發(fā)現(xiàn)這個(gè)創(chuàng)意沒有你想象的那么遭。
多多益善，千萬別少
既然是繪制創(chuàng)意，當(dāng)然是越多越好、來者不拒。繪制縮略圖時(shí)，完成5、6個(gè)根本不足以表達(dá)腦海中的創(chuàng)意。當(dāng)你落實(shí)繪制縮略圖時(shí)，你就應(yīng)該肯定了自己腦海中有繪之不盡的創(chuàng)意。在設(shè)計(jì)專業(yè)方面的教授會(huì)在授業(yè)的過程中要求自己的學(xué)生一次性提出25個(gè)以上的創(chuàng)意，這個(gè)方式可以激發(fā)創(chuàng)意的思考。
不要畫出50幅同樣的圖
最初進(jìn)行大量的縮略圖繪制時(shí)，我們可能會(huì)產(chǎn)生一個(gè)錯(cuò)覺，就是每一個(gè)創(chuàng)意看上去差別都不大。這種情況并不少見，我們所需要的就是發(fā)揮自己的想法，如果沒有清晰的概念，那就從不同的方向和領(lǐng)域上去思考。謹(jǐn)記這里所做的一切不過是一次頭腦風(fēng)暴，這里面所有的創(chuàng)意并不是每個(gè)都是最好的，僅僅是自己與自己的一次“激烈討論”。
保留好自己“每一個(gè)”創(chuàng)意
盡可能的把自己繪制的草稿都保留下來，現(xiàn)在被你淘汰的這些作品或許日后會(huì)成為重要的參考(或者成為生后被別人肯定的參考，譯者想到了蘋果近年把喬幫主的生前推翻的創(chuàng)意從新翻出來并實(shí)現(xiàn)了，設(shè)計(jì)者一定很驚喜)。
當(dāng)一個(gè)設(shè)計(jì)師踏入了一個(gè)全新的領(lǐng)域時(shí)，我們往往會(huì)遇到瓶頸。回頭看看自己曾經(jīng)靈光一閃的設(shè)計(jì)，或許其中正好就是現(xiàn)在的自己需要的想法。
筆者所使用的方法就是通過壓感筆在iPad上利用Adobe Ideas以及iDraw等軟件進(jìn)行草圖創(chuàng)作。通過數(shù)字產(chǎn)品進(jìn)行草圖創(chuàng)作更覺有幫助，通過這些設(shè)備可以導(dǎo)入Illustrator或者Photoshop中進(jìn)行處理。
如果你也使用了縮略圖進(jìn)行創(chuàng)作，希望你能留下你的鏈接，和大家一起分享。
推薦工具：實(shí)時(shí)協(xié)作網(wǎng)絡(luò)制作圖表制作Cacoo工具，Cacoo是一個(gè)簡(jiǎn)單易用的網(wǎng)絡(luò)畫圖工具，運(yùn)用它可以制作多種圖表，例如：site maps， wire frames， UML 和網(wǎng)絡(luò)圖表等。
Via：DesignShack