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