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

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

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

草圖是繪制線框圖的地基

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

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

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

縮略圖的意義是什么

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

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

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

如何去做

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

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

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

這能給你帶來什么？

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

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

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

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

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

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

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

節(jié)省自己的時間

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

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

縮略圖不僅僅是用于布局

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

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

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

繪制縮略圖的技巧

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

就是一幅幅小小的涂鴉

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

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

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

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

保持推進的步伐

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

多多益善，千萬別少

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

不要畫出50幅同樣的圖

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

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

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

當一個設(shè)計師踏入了一個全新的領(lǐng)域時，我們往往會遇到瓶頸�；仡^看看自己曾經(jīng)靈光一閃的設(shè)計，或許其中正好就是現(xiàn)在的自己需要的想法。

筆者所使用的方法就是通過壓感筆在iPad上利用Adobe Ideas以及iDraw等軟件進行草圖創(chuàng)作。通過數(shù)字產(chǎn)品進行草圖創(chuàng)作更覺有幫助，通過這些設(shè)備可以導入Illustrator或者Photoshop中進行處理。

如果你也使用了縮略圖進行創(chuàng)作，希望你能留下你的鏈接，和大家一起分享。

推薦工具：實時協(xié)作網(wǎng)絡(luò)制作圖表制作Cacoo工具，Cacoo是一個簡單易用的網(wǎng)絡(luò)畫圖工具，運用它可以制作多種圖表，例如：site maps， wire frames， UML 和網(wǎng)絡(luò)圖表等。

Via：DesignShack 

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

標簽： 產(chǎn)品設(shè)計 交互設(shè)計 縮略圖設(shè)計 

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