【譯者的話】 Segway，一種具有自我平衡及便捷機(jī)動(dòng)能力的兩輪移動(dòng)工具，曾一度被稱為劃時(shí)代的發(fā)明。隨著其價(jià)格的降低，越來(lái)越受到個(gè)人消費(fèi)者的青睞。在你愿意花五千美元買一架 Segway 讓自己成為一個(gè)超酷的神行太保之前，讓我們看一下它的產(chǎn)品目錄設(shè)計(jì)是如何利用簡(jiǎn)單的矩形分布產(chǎn)生漂亮的視覺(jué)效果。
原文出處：www.bamagazine.com
Segway 個(gè)人運(yùn)輸工具的價(jià)格已經(jīng)物有所值（ 5000 美元左右），對(duì)于我們來(lái)說(shuō)這當(dāng)然是一個(gè)好消息，或許我們現(xiàn)在就應(yīng)該騎著它出去威風(fēng)一下，而不是在這里寫這篇文章。該產(chǎn)品于 2001 年面世，具有自我平衡能力及讓駕乘者來(lái)去自如，無(wú)論是室外還是室內(nèi)使用時(shí)都非常安靜，已經(jīng)受到越來(lái)越多需要在城市中往返穿梭、旅游團(tuán)隊(duì)及其它需要代替步行人士的歡迎。一本 28 頁(yè)紙的產(chǎn)品目錄手冊(cè)傳達(dá)出了這種產(chǎn)品專業(yè)可靠及真實(shí)的氣息。其吸引人之處是在版面中無(wú)論是文字還是圖片，都只是簡(jiǎn)單地使用矩形來(lái)分布空間。這種設(shè)計(jì)手法是值得我們借鑒的，因?yàn)槔镁匦螀^(qū)域來(lái)設(shè)計(jì)版面，可以讓我們輕易將各種不同的元素協(xié)調(diào)統(tǒng)一成一個(gè)整體。這一點(diǎn)正是我們?cè)诒疚闹幸U述的：
在整體產(chǎn)品目錄手冊(cè)中，包括形狀、邊框及線條等簡(jiǎn)單矩形區(qū)域隨處可見(jiàn)，它使到設(shè)計(jì)者可以將不同的圖片及不同內(nèi)容的文字結(jié)合成一個(gè)不可分割的整體。
兩個(gè)層次的設(shè)計(jì)：
(點(diǎn)擊上圖看大圖)
上圖左方大尺寸文字及一張大圖片形成一個(gè)容易“閱讀”的焦點(diǎn)，這種設(shè)計(jì)形式貫穿整本目錄的版面設(shè)計(jì)中。段落文字增加了視覺(jué)的圖案感，該部分白色文字區(qū)域較寬，與右邊較窄的灰色文字形成了對(duì)比。
標(biāo)題一反常規(guī)地放置在底部，但由于與背景形成了強(qiáng)對(duì)比，我們還是很自然地看到它，非常酷的設(shè)計(jì)。
版面中無(wú)論是縱向還是橫向，都是由矩形區(qū)域構(gòu)成。留意產(chǎn)品圖片放置在一個(gè)黑色的背景中，同時(shí)產(chǎn)品圖片區(qū)域形成一個(gè)矩形區(qū)域，這種視覺(jué)辨別是通過(guò)負(fù)空間及其相鄰的各種相對(duì)元素來(lái)襯托的。而最右邊的文字列采用了灰色，顯得非常低調(diào)，沒(méi)有與左邊形成過(guò)強(qiáng)的視覺(jué)沖突。
一張超大的產(chǎn)品在真實(shí)環(huán)境中使用的圖片給我們很大的沖擊力，也給人一種真實(shí)的生活體驗(yàn)。
文字放置于黑色矩形列中的設(shè)計(jì)手法同樣延續(xù)到下一頁(yè)……
大圖片，小文字：
這本產(chǎn)品目錄重復(fù)應(yīng)用同一種設(shè)計(jì)手法，即大圖片及較大的說(shuō)明文字，而正文字體尺寸則非常小，主要的目的是要讓讀者能夠真實(shí)體驗(yàn) Segway 在真實(shí)環(huán)境中使用的效果。在如下的版面中，通過(guò)展現(xiàn)產(chǎn)品的使用或個(gè)人享受體驗(yàn)來(lái)使讀者加深對(duì)產(chǎn)品的了解。
版面視覺(jué)一致：放置文字的黑色區(qū)域在內(nèi)頁(yè)中互相調(diào)換位置，但卻沒(méi)有影響整體的視覺(jué)觀感。而大圖片的尺寸則必須保持一致。
在角位放置較大尺寸的說(shuō)明文字：中哪一個(gè)角位放置其實(shí)并不需要固定，只需要找一個(gè)最清晰不雜亂的背景區(qū)域放置即可。說(shuō)明文字與其邊緣的距離應(yīng)保持一致。說(shuō)明文字可以是黑色或白色，無(wú)論是哪一種都能產(chǎn)生良好的對(duì)比效果。
展示產(chǎn)品：
產(chǎn)品介紹的版面主要是對(duì)該產(chǎn)品進(jìn)行詳細(xì)的介紹。單純白色的背景減少了不必要的視覺(jué)干擾，然后通過(guò)編號(hào)引導(dǎo)讀者逐一瀏覽下去。
(點(diǎn)擊上圖看大圖)
醒目清晰：消費(fèi)者買東西總是喜歡這里摸一下，那里看一下，然后心里盤算一下，才會(huì)決定是否購(gòu)買。所以讓產(chǎn)品逼真地展現(xiàn)在觀眾面前是非常重要的。呈角度擺放的產(chǎn)品圖片非常合適展現(xiàn)該產(chǎn)品的外觀及特點(diǎn)。在這個(gè)版面中，灰色的文字與多個(gè)幼細(xì)邊框元素配合顯得非常酷，呈現(xiàn)一種簡(jiǎn)約的設(shè)計(jì)風(fēng)格。留意這個(gè)內(nèi)頁(yè)中，除了產(chǎn)品，文字的布置顯得非常樸素――沒(méi)有鮮艷的顏色、沒(méi)有陰影、沒(méi)有斜體等等――沒(méi)有任何東西搶去產(chǎn)品的風(fēng)頭。產(chǎn)品下方使用了一些陰影效果，使產(chǎn)品在純白色的背景中增加了層次感及真實(shí)感。而型號(hào) i2 放置在黑色的矩形元素中，顯得非常醒目，同時(shí)也使觀眾在瀏覽時(shí)對(duì)不同性能的產(chǎn)品更加清晰。
在 x2 系列產(chǎn)品的展示頁(yè)里中展示了 3 種同類型的產(chǎn)品。雖然相對(duì)于其他版面來(lái)說(shuō)，每一個(gè)產(chǎn)品的展示版面大大縮小，但其構(gòu)成仍然包括了大頁(yè)面中使用的構(gòu)成元素。
同樣由三個(gè)相同元素構(gòu)成，更少的空間，但視覺(jué)效果卻一致：
在設(shè)計(jì)同一個(gè)項(xiàng)目中，如果你已經(jīng)建立了一個(gè)視覺(jué)形式，則在后面繼續(xù)使用。在這個(gè)版面中，雖然由于要介紹三種產(chǎn)品導(dǎo)致每一個(gè)產(chǎn)品的版面空間減少，但其組成元素與前面的大頁(yè)面所使用元素是一樣的，同樣是由段落文字、產(chǎn)品在實(shí)際使用中的圖片及矩形邊框構(gòu)成。字體、尺寸及顏色仍然與前面保持一致。出來(lái)的效果就是給人一種強(qiáng)烈的協(xié)調(diào)感。非常值得學(xué)習(xí)的手法。
圖片剪切要一致：不要忽略這些細(xì)節(jié)，這幾張圖片雖然不一樣，但出來(lái)的效果卻非常接近。頭與車輪都是對(duì)齊的。人物在圖片中所占的比例也一樣。
多功能矩形版面：
在介紹附件的版面中，各種零配件圖片尺寸、形狀及文字說(shuō)明都不一樣，而利用矩形來(lái)安排則可以使這些看似零亂的元素變得協(xié)調(diào)。其中，元素的對(duì)齊關(guān)系是關(guān)鍵。
由于在這個(gè)版面中，不同的產(chǎn)品圖片有不同的尺寸比例，也導(dǎo)致了在圖片區(qū)域不能平均分布，這似乎不是非常理想。但利用矩形來(lái)安排版面則可輕易使版面產(chǎn)生協(xié)調(diào)感。其中的關(guān)鍵就是無(wú)論是橫向還是縱向，都要將圖片對(duì)齊（如上面大圖藍(lán)線所示）。而為了文字安排的靈活性，說(shuō)明文字可以在圖片的下方或旁邊。正是這種對(duì)齊關(guān)系使看似凌亂的元素形成統(tǒng)一。
留意細(xì)節(jié)：
利用矩形區(qū)域整齊有序地分布元素可以讓我們輕易設(shè)計(jì)出漂亮專業(yè)的版面，你是否希望在下一次的設(shè)計(jì)中也試一下？
隨機(jī)推薦
- 設(shè)計(jì)理論 | 2006-03-02
- 設(shè)計(jì)理論 | 2006-04-26
- 設(shè)計(jì)理論 | 2006-03-12
- 設(shè)計(jì)理論 | 2016-07-11
- 設(shè)計(jì)理論 | 2010-05-27
- 設(shè)計(jì)理論 | 2006-07-18
