在Web UI 模型出現(xiàn)之前，經(jīng)過了很長一段的時(shí)間，設(shè)計(jì)師們都會選擇使用縮略圖（Thumbnail Sketching）來展現(xiàn)自己的創(chuàng)意，表達(dá)自己的思路。這種技巧就像是設(shè)計(jì)師專門用于溝通的一種藝術(shù)，而這種藝術(shù)現(xiàn)在卻漸漸淡出大家的視線。

而通過本文，就讓大家重新審視品味一下這種藝術(shù)。

對于設(shè)計(jì)師而言，對線框圖的期望其實(shí)是一種能夠在繁重設(shè)計(jì)工作中整理自己思路的方式。而繪制縮略圖更多的是就是為自己累計(jì)更多的創(chuàng)意，從中找到自己思維中的閃光點(diǎn)。

草圖是繪制線框圖的地基

線框圖（Wireframing）是我們熟知的設(shè)計(jì)基礎(chǔ)。按照大家現(xiàn)在的認(rèn)知，大部分的設(shè)計(jì)師都會將線框圖當(dāng)作設(shè)計(jì)的第一個基礎(chǔ)步驟。

實(shí)際上，縮略圖是一種更久遠(yuǎn)并且使用起來更成熟的技術(shù)，可惜現(xiàn)在大家基本不會在這個技術(shù)上投入什么精力進(jìn)行討論。縮略圖并不像從前那樣受到重視，我們無需回避這個話題，因?yàn)楝F(xiàn)在，線框圖的使用可以讓設(shè)計(jì)師能夠更專注在最基礎(chǔ)的頁面架構(gòu)上，使得設(shè)計(jì)過程中可以不受設(shè)計(jì)風(fēng)格的考量干擾。

但縮略圖的確比線框圖更加基礎(chǔ)，在設(shè)計(jì)中通過對縮略圖的繪制，所表達(dá)出的設(shè)計(jì)更加具現(xiàn)化。但更重要的是，設(shè)計(jì)師是否愿意理解并使用縮略圖。

縮略圖的意義是什么

縮略圖聽上去是一種結(jié)構(gòu)簡單的簡筆畫，聽到這個名字給人的第一個感覺就是很有趣。

不過，縮略圖的意義更多的是在很短的時(shí)間內(nèi)，將大量自己的所想到的創(chuàng)意在紙面上繪制出來，直接的說就是一種在視覺上進(jìn)行的頭腦風(fēng)暴。而在這一點(diǎn)上，縮略圖與線框圖的功能一致，只是縮略圖的結(jié)構(gòu)更小，制作的速度更快速。

當(dāng)完全擺脫了各種干擾，在同樣時(shí)間內(nèi)，縮略圖所能記錄下來的創(chuàng)意遠(yuǎn)超過線框圖。在這個過程中，設(shè)計(jì)者可以繪制出大量的縮略圖草稿，而在這些草稿的基礎(chǔ)上就能進(jìn)一步進(jìn)行線框圖的繪制。

如何去做

在創(chuàng)作縮略圖的過程中，我們需要先畫幾個簡單的瀏覽器模板、頁面邊框，這可以是任何你所需要的設(shè)計(jì)模板。這里有一些現(xiàn)成模板，或許可以給你的設(shè)計(jì)帶來一些幫助。

當(dāng)你完成這些準(zhǔn)備工作，你就能開始進(jìn)行你的繪制。在繪制的過程中，你不需要優(yōu)秀的畫功或其它的任何技巧。正好相反，你可以完全投入到創(chuàng)意的思考中，隨手畫出自己的想法，哪怕這讓你在過于倉促的繪制過程中，只能畫出幼兒涂鴉的作品。

在這一點(diǎn)上，縮略圖可以說是一種追求速度、甚至可以說是一種偷懶的行為。把所有會浪費(fèi)你時(shí)間的多余修飾統(tǒng)統(tǒng)拋棄，只需要最簡單的圖形，可以把你想到的最基本的框架勾勒出來，就能進(jìn)行下一個設(shè)計(jì)。

這能給你帶來什么？

我們能從這些看上去很簡陋的小圖圖上得到什么？

現(xiàn)在的情況是，我們已經(jīng)能夠輕易的得到太多

通過電腦繪制，我們的創(chuàng)意往往在剛剛生成的時(shí)候就能夠快速制作成最接近現(xiàn)實(shí)的圖紙。

但這就帶來一個問題：盡管這個過程已經(jīng)非常短，但是時(shí)間上仍然只夠我們展現(xiàn)其中一項(xiàng)或者兩項(xiàng)設(shè)計(jì)。雖然我們希望這些設(shè)計(jì)最終能被實(shí)現(xiàn)，但是我們最初的設(shè)計(jì)往往就未必是我們最好的設(shè)計(jì)。

將一個設(shè)計(jì)過早的具現(xiàn)化未必是一件好事。

當(dāng)一個創(chuàng)意已經(jīng)被繪制成相對成型的線框圖甚至是原型、視覺稿的時(shí)候，我們可能已經(jīng)很難對整個設(shè)計(jì)進(jìn)行改良，甚至從新開始一個設(shè)計(jì)。哪怕在一個設(shè)計(jì)上你沒有面臨需要改進(jìn)的情境，你也浪費(fèi)了一次進(jìn)行大量創(chuàng)作的機(jī)會。

通過各種設(shè)備、軟件我們可以很輕易的做出一個設(shè)計(jì)的圖樣，但是通過繪制縮略圖我們可以在很短的時(shí)間內(nèi)記錄大量的創(chuàng)意，而我們從這些被記錄下來的設(shè)計(jì)中，可能會找到我們自己創(chuàng)作過程中的閃光點(diǎn)。

節(jié)省自己的時(shí)間

在設(shè)計(jì)中，對時(shí)間的管理總是被大家放在交付環(huán)節(jié)的首位，每每規(guī)劃時(shí)間，都為自己的交付結(jié)果設(shè)定了嚴(yán)格的最后期限（拋開原文，譯者很自豪有一定程度的拖延癥）。

但在實(shí)際情況中，設(shè)計(jì)并不需要把所有的時(shí)間都用在交付結(jié)果上，生成創(chuàng)意的時(shí)間完全取決于個人。而通過繪制縮略圖，這個步驟所花費(fèi)的時(shí)間幾乎就是創(chuàng)意生成的全部。并且這個步驟可以讓你在一定程度上對自己的成果進(jìn)行評估和審視。因?yàn)槟闼�考慮的情況已經(jīng)足夠的多，所以在后續(xù)的過程中你可以更快的應(yīng)付突發(fā)的狀況，包括布局的更改以及功能的轉(zhuǎn)換。

縮略圖不僅僅是用于布局

當(dāng)我們在闡述縮略圖的這個概念時(shí)，我們不僅僅是針對布局，縮略圖在任何類型的設(shè)計(jì)上發(fā)揮左右。事實(shí)上，大家在繪制LOGO時(shí)，就是從繪制縮略圖開始的。

在設(shè)計(jì)LOGO時(shí)，大家普遍會從繪制縮略圖開始，那么在其它領(lǐng)域我們可以進(jìn)行相關(guān)的嘗試。

標(biāo)題設(shè)計(jì)、網(wǎng)頁開發(fā)、宣傳冊、名片、App界面、角色設(shè)計(jì)

繪制縮略圖的技巧

現(xiàn)在對縮略圖我們達(dá)成了統(tǒng)一的概念，那么無論你將其用于哪個領(lǐng)域，我們首先都需要找到一些繪制它的原則技巧。

就是一幅幅小小的涂鴉

同樣從事設(shè)計(jì)工作，可能我們中間的確有人無法用鉛筆繪制出一幅足以表達(dá)自己創(chuàng)意的草圖。

但在繪制縮略圖這一點(diǎn)上，如果你是一個繪畫苦手，那很好，你更加適合創(chuàng)作縮略圖。因?yàn)閷τ诹?xí)慣用鉛筆繪圖的人，他們的習(xí)慣制約了他們繪制縮略圖。一條直線，一個圓角都會成為他們這些細(xì)節(jié)控的絆腳石。

我們需要達(dá)成一個共識，這個技術(shù)需要的是量而并非是質(zhì)。我們不反對完美的繪圖，事實(shí)上，作者（譯者也是）非常欣賞（譯者是羨慕）可以繪制完美草圖的藝術(shù)天才。

上圖是出色草圖中的其中一個案例，繪制技巧在文章《設(shè)計(jì)中的溝通，繪制表達(dá)自己創(chuàng)意的草圖》中但在縮略圖中，我們只需要把我們創(chuàng)意通過紙筆進(jìn)行概述。我們不需要在圖紙上繪制出裸視3D的效果。

保持推進(jìn)的步伐

我們不需要在繪制的過程中過多的琢磨其中一個創(chuàng)意，當(dāng)一個創(chuàng)意被畫出來后并不討我們的喜歡，我們不需要它的基礎(chǔ)上進(jìn)行改良，更不需要把它擦掉后推翻從來。你所需要的就是把目光從這個圖上移開，并開始進(jìn)行下一個創(chuàng)意的繪制。這是因?yàn)�，在幾小時(shí)后你回頭一看，或許會發(fā)現(xiàn)這個創(chuàng)意沒有你想象的那么遭。

多多益善，千萬別少

既然是繪制創(chuàng)意，當(dāng)然是越多越好、來者不拒。繪制縮略圖時(shí)，完成5、6個根本不足以表達(dá)腦海中的創(chuàng)意。當(dāng)你落實(shí)繪制縮略圖時(shí)，你就應(yīng)該肯定了自己腦海中有繪之不盡的創(chuàng)意。在設(shè)計(jì)專業(yè)方面的教授會在授業(yè)的過程中要求自己的學(xué)生一次性提出25個以上的創(chuàng)意，這個方式可以激發(fā)創(chuàng)意的思考。

不要畫出50幅同樣的圖

最初進(jìn)行大量的縮略圖繪制時(shí)，我們可能會產(chǎn)生一個錯覺，就是每一個創(chuàng)意看上去差別都不大。這種情況并不少見，我們所需要的就是發(fā)揮自己的想法，如果沒有清晰的概念，那就從不同的方向和領(lǐng)域上去思考。謹(jǐn)記這里所做的一切不過是一次頭腦風(fēng)暴，這里面所有的創(chuàng)意并不是每個都是最好的，僅僅是自己與自己的一次“激烈討論”。

保留好自己“每一個”創(chuàng)意

盡可能的把自己繪制的草稿都保留下來，現(xiàn)在被你淘汰的這些作品或許日后會成為重要的參考（或者成為生后被別人肯定的參考，譯者想到了蘋果近年把喬幫主的生前推翻的創(chuàng)意從新翻出來并實(shí)現(xiàn)了，設(shè)計(jì)者一定很驚喜）。

當(dāng)一個設(shè)計(jì)師踏入了一個全新的領(lǐng)域時(shí)，我們往往會遇到瓶頸�；仡^看看自己曾經(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是一個簡單易用的網(wǎng)絡(luò)畫圖工具，運(yùn)用它可以制作多種圖表，例如：site maps， wire frames， UML 和網(wǎng)絡(luò)圖表等。

Via：DesignShack 

（Warlial 供雷鋒網(wǎng)專稿，轉(zhuǎn)載請注明來自雷鋒網(wǎng)及作者)

標(biāo)簽： 產(chǎn)品設(shè)計(jì) 交互設(shè)計(jì) 縮略圖設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。