1、設計技巧雜談（之一）本文由 LOGOSKY.NET網(wǎng)站設計師陳漢聰編譯，轉(zhuǎn)載請注明出處文章編號：061242006年9月8日 【譯者的話】 為什么一張圖片比三張圖片更有力量？如何設計產(chǎn)品使用指南？如何在設計中通過各種對比產(chǎn)生層次感？如何使設計內(nèi)外統(tǒng)一協(xié)調(diào)？如何設計一個獨一無二的簽名式 LOGO ？本文繼續(xù)發(fā)揚實用主義，對這些問題給出了解決辦法。五個設計技巧，開拓你的設計視野。原文出處：封面設計：小即是多 當你在設計時手頭上有三張照片，你會如何處理？你會將這三張照片都用上，對吧？其實沒必要！一張照片就已經(jīng)能夠使設計信息有效傳達。在這個例子中，校區(qū)里的塔樓就已經(jīng)

2、能夠傳達出這所學校的本質(zhì)，比用上三張效果更好！標題單獨一行，文字中的背景顏色區(qū)域靜靜地傳達出有關信息。 設計師有三張照片，但如果在版面上都用上這些照片，那你還要對這三張照片進行剪切，然后將它們擠進版面里。但出來的效果卻是，這三張照片在版面中的樣式很相似（相似的圖片元素及圖案），文字閱讀起來很費力。所以，設計師又不得不將字體變得很粗，字體變粗后，又要找個地方放置學校的名字，所以在最下方設計師又加上一個紫色區(qū)域來突出學校名稱。設計師越“設計”，封面就越虛弱。無論是學校信息還是所要傳達的文字信息都在這些復雜的、太多人工痕跡的元素中消失得一干二凈。封面可以說是成為“被侮辱及被損害”的對象。為什么會這樣

3、？因為設計師做過頭了！解決辦法：只讓一張圖片來說話！ 記住，在設計中，小即是多。學校的塔樓已經(jīng)可以傳達很多信息。簡單的居中設計，就是直接讓這張照片“說話”，然后加上文字就行了。注意在上圖中，文字的背景區(qū)域并沒有橫跨整個版面，因為我們要讓圖片由上至下都可以流動。而上圖右，學校的主色（紫色）及褐色與樹的綠色形成吸引人的視覺效果，留意這三種顏色在色輪中的位置關系，綠色及褐色是紫色的補色的鄰近色，聽起來很復雜？紫色的補色是色輪中相隔 180 度的草綠色，而草綠色的兩邊鄰近色就是綠色及褐色（留意色輪中的線條）。我們將這種顏色關系稱之為“補色分割”（ Split complementary ）。排版：文字

4、應該與圖片緊密配合 我們經(jīng)常會接觸到一些與電器、高科技產(chǎn)品，而設計一個描述式的版面其實充滿樂趣。 原來的設計使版面變得復雜。對于這種小型產(chǎn)品的使用指南，我們的目標是要追求簡單易讀，讓使用的人一看就知道文字是指哪一部分。但上面的設計卻使這種聯(lián)系斷裂，也使到這張說明卡片的元素呈一個平放的“ L ”型，在上圖中，圖片放在一邊，而文字說明則放在另一邊。結(jié)果就是，產(chǎn)品顯得很單薄，而頁面中間那么重要的空間卻空無一物。讀者為了看明白這張卡片，不得不來來回回仔細對照。 在修改后的版面中，產(chǎn)品顯得靠前，而且居中。我們將產(chǎn)品盡可能拉大，然后將各個要說明的部位用引線在其周圍說明。非襯線字體容易辯認閱讀。文字對比不強

5、烈，整個版面顯得干凈清爽。并不需要象原圖一樣采用數(shù)字來說明。最底部的聯(lián)系信息排成一行，呼應產(chǎn)品的水平感。而文字都是同一種字體，只是樣式不一樣而已用粗體和細體來形成對比。版面：差別產(chǎn)生層次哈欽斯大街廣場酒店（ Hutchins Street Square Hotel ）是舉行會議、宴會、接待及其它活動的理想場所，但如果你只是看它的這張價格宣傳單張，沒有人會覺得這家酒店有什么優(yōu)點。它的版面缺乏生氣，字里上的文字同一種字體，同一種尺寸，同一種的樣式，同一種顏色，但都迷失在白色的海洋中雖然頁里上寫滿信息，但毫無生命力。 這種低調(diào)的設計很容易讓人忽略，但你要記住，對于酒店來說，很多顧客第一個看到的東西就

6、是它（也可能是最后?。?。還是讓我們花點時間來設計，使人瞥上一眼就能知道它要說什么。 這個設計讓人看起來并不象是一家酒店，反倒象是一個電子郵件的宣傳版面，所有東西都是相同的，缺乏變化，而圖表的細線看起來就象是用鉛筆畫出來一樣，沒有層次，沒有視覺焦點。宣傳的對象倒是美輪美奐（見下圖），但問題是，如果這張價格牌本身不能吸引別人閱讀從而使顧客走進這家酒店，里面再漂亮，也沒有人知道！這張平淡的單張使所有的信息都變得暗淡。 看一下我們改造后的效果： 通過字體創(chuàng)造出層次感：只需要簡單的對字體、字體樣式及顏色作一些調(diào)整，就可以輕易使版面變得吸引。上圖中： 1, 此處讓人一看就知道是標題，其字體輪廓與桌子上的擺

7、設有共同的特征； 2 及 3 ，粗體突出主要信息，而黑和白則告訴你這是兩個不同的信息； 4 ，細體是具體的描述文字； 5 ，線條用了白色而不是黑色，線條不明顯，使整個圖表給人一種以行排列的感覺。 (點擊上圖看修改后大圖)通過顏色來創(chuàng)造層次：深中淺三色是用吸管在這張宴會廳的圖片上取色的，我們用這三種顏色安排版面，輕易創(chuàng)造出層次感。深色用在圖表的上方，而另外兩種用來區(qū)分每一行。由于這三種顏色來自于酒店圖片，使到顏色直接與酒店產(chǎn)生了聯(lián)系。版面：由外到內(nèi) 要使設計的內(nèi)部與外部有著相同的風格需要一定的技巧。怎么做？簡單，將封面的字體、顏色、圖片風格及主要的版式都搬到里面去。注意各種元素的比例，如綠色的使

8、用比例及圖片的大小，具體看一下效果： 人物采用輪廓形圖片，沒有背景，使到其不規(guī)則的邊緣顯得更有活力。對一張大圖片來說，采用這種輪廓形的設計，可以加強圖片的力量，使圖片充滿流動感。模糊的邊緣傳達了一種開闊及健康的氣息。留意，兩張圖片在實際應用中都有一個直角形的部分，即圖片直接去到出血位區(qū)域。而文字無論是左對齊還是右對齊，都與這種直角區(qū)域相似。留意設計中的標題，采用了一種非常幼細的字體，這種字體充滿清新，一如版面的風格。兩者配合，天生一對。 簽名 LOGO ： 還有什么圖案比你自己的簽名顯得更獨一無二？它完全屬于你自己。所以當你有一項業(yè)務或項目是需要你最終來確認的一個典型的例子就是公證人那你為什么

9、不直接用你的名字作為一個 LOGO ？ 一個簽名式 LOGO 很容易制作。你只需要在紙上簽個名，掃描進電腦，然后用鋼筆工具描邊。一個獨一無二的 LOGO 就完成了?？梢韵笊蠄D一樣，將白色的 LOGO 放在灰色背景上，當然，你也可以藝術一點選擇一種您喜歡的顏色。 字體調(diào)整：我們可以通過對字體進行恰當?shù)恼{(diào)整及選擇來加強設計。在這個例子中，經(jīng)典的 Adobe Garamond 傳達了一種久遠、傳統(tǒng)及權威的感覺，而粗壯的 Franklin Gothic 粗體加強視覺的傳達效果。因為上述這些都是差別很大的字體，所以為了使它們在一起能夠協(xié)調(diào)配合，我們需要對個別字體進行調(diào)整。在這個例子中，我們將 Frank

10、lin 縮小一些。留意在上圖名片中，白色的標題放在灰色區(qū)域中，顯得特立獨行。本文所用顏色數(shù)值： 設計技巧雜談（之二）本文由 LOGOSKY.NET網(wǎng)站設計師陳漢聰編譯，轉(zhuǎn)載請注明出處文章編號：061262006年9月25日 【譯者的話】 如何通過分割圓形區(qū)域來設計 CD 上的文字與圖案？面對一組長名單時如何排版才顯得吸引而不凌亂？如何將一張照片變成一個有趣故事？如何通過組建一個模板來設計冊子？四個技巧，與大家分享。 原文出處：版面：將 CD 版面分成四等份使設計更加輕松 CD 已經(jīng)成為大家都經(jīng)常用到一種儲存媒介，但其圓形的區(qū)域有時令設計師感到頭痛。在這里，我

11、們將整個版面分為四等份，能夠使你輕易完成設計。 將區(qū)域分成四等份： 經(jīng)過四等份的劃分，整個 CD 形成了四個區(qū)域，使你在排版時能更好安排元素圖片在其中一個，文字在另一個，而標題或文字則占據(jù)第三個。在上圖中，文字背景的顏色是從圖片取色這是最快獲得顏色和諧搭配的辦法。 希望有更多的區(qū)域來表現(xiàn)圖片？簡單，將相鄰的兩個區(qū)域合并即可，有四種排版形式（見下圖）。留意在下圖中，所有四種設計中的文字都為了配合 CD 的邊緣弧線而作了調(diào)整。 避免上圖這兩種排版形式：如果圖片占用了三個區(qū)域，則使圖片的視覺效果過于強烈，導致整個版面不平衡。圖片對角擺放，雖然顯得活潑，但也顯得過于復雜，而且使整個版面缺少一個視覺焦點

12、。文字：兩種方法安排名單 通過漂亮的文字及排版來安排名字及職位包括工作人員、捐贈人、贊助商及參與者等，是向這些人最好的敬意。其中的關鍵是在設計名單時要簡樸正統(tǒng)，不張揚，不夸張，為了達到這個目的，我們只使用一種經(jīng)典的字體，尺寸要小，而且處于版面的主要位置，兩種方式： 1:象電影演員表一樣 無數(shù)部電影在安排演員名單時都采用這一種模式：名字及職位各向中間對齊，通過字體的粗細來區(qū)分名字及職位。而在顏色上則非常接近。我們可以簡單地在矢量軟件中使用“制表位”工具來調(diào)整。 博物館職員名單的設計 2 ，將名單合并成一個整體區(qū)域。 這種排版會使讀者在閱讀時速度減慢，但卻顯得更有藝術氣息。用圓點來區(qū)分各個名單。整

13、體形成一個矩形（上圖紅色直角處）。我們在段落面板中選擇“所有行齊行”按鈕即可實現(xiàn)（上圖），為了達到最佳的效果，你可能需要對個別文字進行一些細節(jié)調(diào)整。 出來的效果清新優(yōu)雅版面：劃分圖片區(qū)域，使圖片講述更多的故事。 無論你采用的是什么圖片，圖片中的每個人、每個對象及每個元素都有他們各自的故事。這就是我們?yōu)槭裁磿@種技巧情有獨鐘，愛不釋手。通常，當人們要對一張圖片進行說明時，都是將所有文字結(jié)合在一起來說明。而在這里，我們反其道而行之，打散這些說明，將文字各就各位，各自去到具體要描述的對象上，這種手法非常有趣，而且閱讀起來也更加明了，而且由于文字區(qū)域較大，非常適合我們這些總是感覺時間不夠用的現(xiàn)代人閱

14、讀。文字可放置在描述的對象的上方或者旁邊，或者兼用也行：點擊上圖看大圖 如果你想讓這張照片透露更多的信息，你還可以象上述一樣，在你還要發(fā)揮的地方編號，然后將所要交代的背景在圖片外說明，如上圖中， 1 的文字為：活動中心，雖然活動中心設備乏善可陳，但卻還是深受歡迎； 2 ： JAVA 小姐，這已經(jīng)是她的第三杯咖啡了，而現(xiàn)在還只是早上八點。她在上第二節(jié)課前還要喝第四杯。這些信息你可以隨意發(fā)揮，讓整張圖片顯得更加有趣，還帶點幽默。版面：建立頁面模板令你快速完成一本協(xié)調(diào)的冊子設計 產(chǎn)品手冊設計要從一而終！在設計時應該能夠使你快速協(xié)調(diào)各個版面，而且能夠經(jīng)受得起無數(shù)次的“最后一分鐘”（甚至最后一秒！）的修

15、改。 Crate & Barrel 公司在設計產(chǎn)品手冊時應用了一種效果良好的版面安排，使它可以輕易達到這個目標。在這一小開本尺寸的產(chǎn)品手冊中，每個版面都被分成 6 個正方形區(qū)域（這就是一個頁面模板）。每一個正方形區(qū)域中都放置圖片或文字，但同一個正方形區(qū)域中絕對沒有同時放置文字及圖片。文字全部采用同一尺寸，而圖片都是采用同一種類型及風格的照片，而且沒有經(jīng)過繁瑣的特效加工。出來的結(jié)果就是：整本冊子顯得干凈清新，就象他們的產(chǎn)品給人的感覺一樣而且做起來也一點不難，只要按著模板擺放元素就行了。 字體采用一種簡單清晰的字體，與圖片相比，文字形成了一個低調(diào)的區(qū)域。只用一種字體尺寸，一種樣式類別（如在整本小冊

16、子中，正文文字采用 Helvetica 細體，標題用粗體，而價錢用粗黑體）。這種文字安排使其沒有與圖片互相擠壓，讓人看起來很舒服。 對于整個展開頁來說，整個版面就有 12 個正方形的區(qū)域模板。圖片可以占據(jù)其中一個，也可以占據(jù)九個，象上圖一樣，圖片的排放是可以很靈活的，使每一頁中圖片與文字都產(chǎn)生空間上的對比（大與小，多與少）。特別留意一點：上圖中，文字沒有“包圍”圖片，而是與文字的直線邊緣直接對齊。頁面小標題及頁碼放在最上方一個細小區(qū)域中。本文所用顏色數(shù)值如下： 回到首頁 我想留言 閱讀更多LOGO IS EVERYTHING!設計技巧雜談（之三）本文由 LOGOSKY.NET網(wǎng)站設計師陳漢聰編

17、譯，轉(zhuǎn)載請注明出處文章編號：06139 2007年1月10日 【譯者的話】 如何既保持網(wǎng)頁整齊又能提供盡可能多的產(chǎn)品信息？為什么很多文字我們設定為對齊時，但眼睛卻還是感覺不整齊？如何利用空白的區(qū)域來產(chǎn)生具沖擊力的作品？如何制作一張充滿個性的卡片？利用簡單的幾個步驟，我們可以制作出充滿現(xiàn)代質(zhì)感的價格牌設計。五個小技巧，與大家分享。 原文出處：網(wǎng)頁：圖片自動翻頁的設計傳達更多的信息Alien Skin 軟件的網(wǎng)頁在展示眾多的產(chǎn)品時仍能保持版面整潔干凈。他們使用了圖片自動翻頁的技巧來實現(xiàn)這一目的當鼠標指針移到圖片上時，圖片便轉(zhuǎn)換成產(chǎn)品說明。 不需要點擊圖片，便會自

18、動出現(xiàn)產(chǎn)品說明。 A 的介紹產(chǎn)品的網(wǎng)頁通過整齊的網(wǎng)格來安排版面。每一個產(chǎn)品都有另一張文字說明圖片，讓觀眾能夠更深入了解。只需要將鼠標放在圖片上，不需點擊，便會出現(xiàn)產(chǎn)品的簡要說明。 利用 Adobe Golive 創(chuàng)建自動翻頁效果 這種特效需要對每一種狀態(tài)都建立一張單獨的圖片：正常狀態(tài)，鼠標滑過時狀態(tài)，點擊狀態(tài)及鼠標移開后的狀態(tài)等。每一張圖片都必須是相同的尺寸。首先對一張正常狀態(tài)時用的圖片起一個名，比如 product1.gif ，然后在其它狀態(tài)下根據(jù)這個名稱安排其它文件（如， product1_over.gif, product1_down.gif 等）。將它們都放在同

19、一個文件夾中。將正常狀態(tài)時顯示的圖片拖到 Golive 頁面上， Golive 軟件會自動按你起的名稱安排好不同狀態(tài)下顯示的圖片（見上圖）。字體：如何“真正”對齊文字 你是否有注意到，當你在電腦排版中，將文字對齊后，但卻感覺有點不對勁？這是因為，你對齊的是邊緣，字母并沒有完全對齊，因為不同的字母結(jié)構不一樣，有的是弧線邊緣，有些又有一些小橫桿突出來（如 t ），有時還有一些引號，這些都導致設定為對齊時仍然感覺不自然。在 Indesgin 軟件中的“ Optical Margin Alignment ”功能可以彌補這一不足。 在使用“ Optical Margin Alignment ”功能前的效

20、果。你的電腦認為它們上述已經(jīng)是對齊的，但你的眼睛告訴你說，好象還不齊啊。字母及引號使到邊緣產(chǎn)生起伏不平的感覺。 使用“ Optical Margin Alignment ”功能后的效果。我們在 Indesign 軟件中，選擇 Typestory Optical Margin Alignment ，然后看一下有什么變化你會看到有些字母中會超出對齊線一些。有趣的是，這個時候，你看起來倒是真正對齊的樣子。在該功能的對話框中設置的參數(shù) , 一般來說，應該與字體的大小一樣。圖片剪切：大小及位置決定一切 圖片以不同的大小及不同的擺放位置來排版的話，可以產(chǎn)生不同的沖擊力。在下圖中，我們將一張尺寸較小的肖像圖

21、片放置在一個空白區(qū)域的下方，完美地與標題文字的意思搭配。 空白區(qū)域的力量：這種排版方式使版面中的各個元素一目了然。雖然空白的區(qū)域占了大部分，但給你的感覺卻一點也不單薄，相反，充滿了力量感。這位不幸的 CEO 肖像背后是一塊厚重的黑色區(qū)域，使該人物給觀眾形成一種分離感及距離感。之所以能夠產(chǎn)生這樣的視覺效果，關鍵是人物圖片的尺寸很小，而且放得很低。她深色的外套在這個設計中可以說是一個有利因素，使到給人的感覺是她的身體與黑色的背景混為一體，使其與她那憂郁的面部表情形成強烈的對比。標題設計不能設計得過于夸張顯眼，應該平實一些，標題的位置同樣應該以平實為主（否則標題會使整個版面顯得過于緊張，從而削弱了下

22、方肖像所傳達的力量）。 碎紙片組成的卡片設計 為了向親朋好友宣布他們的兒子 Drew 終于來到這個世界上，我們的朋友阿丹與米高這對夫婦希望以個人卡片的形式來傳達這個喜訊還有什么東西比你自己書寫的文字顯得更個性化？看一下我們?yōu)樗麄兯龅脑O計： 不需要剪刀哦。雖然碎紙片看起來象是貼上去了，但這只是在電腦中的效果。這個卡片剛好可以用您的那臺桌面打印機打印。首先寫上一些活潑有趣的詞語，然后將這些詞語掃描進電腦中。然后用 Photoshop 軟件剪切成一片片，再應用一些陰影效果，再將這些碎片置入你的版面中，排好它們，就可以打印出來了。這種設計沒有復雜的技巧，但絕對充滿個性化，值得一試 ! Adobe I

23、llustrator ：煥然一新的價格牌寶馬汽車（ BMW ）的網(wǎng)頁橫幅中，清晰及有趣的價格牌模仿收銀機的價格顯示吸引著觀眾的眼睛。這個設計很有趣舊式的價格顯示設備，古典的字體，陳舊的顏色，但明暗的處理卻賦予它現(xiàn)代的質(zhì)感。BMW 網(wǎng)頁廣告橫幅 第一步：畫三個圓角矩形。在圖片面板中，雙擊圖層 1 ，將其命名為“ Tabs ”。然后復制這三個矩形。接著，應用陰影效果： EffectStylizeDrop shaodw ，打開預覽，輸入的數(shù)值如下：模式： Multiply ，不透明度： 50% ； X 偏移： 0 ； Y 偏移 Op2 ；模糊： Op2 ，顏色為黑色。然后按 OK ，應用陰影特效。在

24、圖層面版上將該圖層鎖上。然后，再創(chuàng)建一個新圖層，命名為“ Highlight ”，將剛才復制的三個矩形粘貼到該圖層上。最后，再創(chuàng)建一個文字圖層，輸入價格牌上的文字。將這個文字圖層拖到“ Highlight ”圖層的下方。 第二步：在 Highlight 圖層中，我們用鋼筆工具畫一條平滑的曲線橫跨三個矩形。然后在 Pathfinder 面板中，點擊 Divide 圖標（上圖黃色處）。這樣我們就將這三個矩形分成六個區(qū)域。 第三步：在選擇這六個區(qū)域時，將它們填充為白色。用直接選擇工具（空白箭頭）選擇下面的三個區(qū)域選擇，然后刪除。再選擇上方的三個區(qū)域，除低其不透明度，我們設置的數(shù)值為 60% 。一個耀

25、眼的價格牌就做好了。本文所用顏色數(shù)值如下： 設計技巧雜談（之四）本文由 LOGOSKY.NET網(wǎng)站設計師陳漢聰編譯，轉(zhuǎn)載請注明出處文章編號：06143 2007年2月11日 【譯者的話】 如何僅僅利用簡單的線條設計一個充滿典雅風格的封面？在版面上如何放置多張圖片？在一張大圖片上加上多個說明文字區(qū)域，出來的效果永遠吸引人。如何將你公司枯燥的產(chǎn)品名稱變得更加吸引？如何通過矩形區(qū)域元素來制作一個漂亮的網(wǎng)頁？讓我們一起繼續(xù)雜談！ 原文出處：圖片：線條構成文件 用線條（技術上說，是一條線）描繪的元素可以傳達出非常漂亮或電子信息感的印象，它可以將復雜的圖片簡化，并將本來

26、平淡的元素變得有趣。對于一些原來缺乏沖擊力的圖片，這樣處理是一種非常不錯的補救辦法，如果應用在網(wǎng)頁上，在信息交換上也效率十足。 居中排版：如果說，設計一個典雅的封面有什么技巧，那就是，用一種溫和的顏色，字體尺寸要小，有大面積的開放空間，并用線條來描繪元素（包括邊框），線條的粗細均相等。 不同的線條： 找一張有清晰輪廓的照片，用鋼筆工具沿邊緣描線。你可以將不同的照片結(jié)合在一起也行。如果是對字母、數(shù)字及符號進行描邊，那更加容易。線條可以是多種多樣的，可以應用細線，粗線，點線或加上各種顏色的線條（見上圖的幾個例子，從左到右：描邊，粗線條，點線，重疊）。一般來說，線條越細，出來的效果顯得越經(jīng)典，很有藝

27、術味。 封面：設計一張圖片相框式的封面 最近你有沒有去過售賣藝術品的商店？用多張相片放在一起組成的相框現(xiàn)在特別熱銷！它們顯得干凈整潔，象網(wǎng)線排列，掛在你家的墻上，蓬蓽生輝，當然，應用在頁面上，效果同樣不錯。設計師長期以來都在使用網(wǎng)格線來安排版面，所以借用一下也合情合理。 多張相片整齊放在相框里，效果當然要比那些在墻上掛滿尺寸參差不齊的相框出來的效果要好很多。應用在設計上，同樣有這種效果。注意上面大圖中這個版面的層次感：背景區(qū)域是采用一種中性的顏色，可以同時與圖片中的深色及淺色形成對比，從而使整個版面呈現(xiàn)深、中、淺的層次感。 要應用這種方法時，首先要確保在一個版面中所有的圖片尺寸要一樣大。然后再

28、根據(jù)圖片的數(shù)量來組織成行或列或組，位置可以是向頁面中心對齊（穩(wěn)定、平靜）或偏向一邊（緊張、興奮）。 字體要??！均中或偏向某一邊，效果一樣不錯。版面：在一種特別的照片用上多個說明 在我們前面的一篇文章中，我們曾經(jīng)告訴你我們是很喜歡這種在圖片上加上多個說明的排版技巧的，要記住的是：一定是要多個說明文字，而不是僅僅一塊文字。這種技巧用在一些大圖片上，效果特別不錯，象是在同步傳達圖片的信息，但我們使用這種技巧最大的原因是，每一張照片我們都有“很多個故事”要講給觀眾聽。 （點擊上圖看大圖） 半透明的文字背景： 這張照片魅力十足，所以在使用上，照片應該盡可能放大，然后直接在圖片上方使用說明文字。背景框線條

29、一定要細，字體形式要簡單，切忌使用花里花俏的字體，某些背景設為半透明（可以填充淺灰色，再設置不透明度），使圖片局部傳達一種若隱若現(xiàn)及靈巧的感覺。 名稱：在名字中加進圖片 有時候，產(chǎn)品名稱與產(chǎn)品本身就是天生一對，試一下這種技巧，將文字與圖片緊密結(jié)合，可以比單獨的文字給人留下更深刻的印象。有兩種情況：一種是將圖片直接插入，如上圖中，盆景是一個說明性的圖片，很容易“閱讀”，加進 IKKO 的名稱中。從上圖示意圖可以看出，要將圖片當作是一個字母來對待，各個間隔要相等。第二種情況：將圖片代替其中的一個字母 這種情況不是總會發(fā)生，即你的產(chǎn)品不僅僅配合文字意思，而且其形狀還與名稱中其中一個字母形狀接近，如上

30、面的例子，其產(chǎn)品剛好形成其中一個“ h ”，或者一個邊緣圓滑的球形成為一個“ o” 。雖然你不一定總這么好運，但如果碰上了，嘗試一下，不亦樂乎？網(wǎng)頁：矩形組合如果你將一個元素、顏色或者位置組合作為一個視覺元素來重復應用，那你就無形中創(chuàng)造了一種“風格”。如果這種重復應用能夠給人留下印象，那你就可以將它作為一個主題。主題比文字更容易“閱讀”，還能夠給人留下深刻印象。為了說明這一點，我們看一下 Parc Rittenhouse 公司是如何利用矩形及春天的顏色來作為它們網(wǎng)站的主題： 大矩形，小矩形： 上圖大圖中，五個小的正方形組成了導航區(qū)域，而頁面中一個大的矩形區(qū)域就放置著大標題。在每一個矩形中，白色

31、的文字都是放置于左下角，形成一種圖案美。上圖小圖中，當你點擊其中一個小矩形鏈接，該區(qū)域就會變成白色，同時，下方大矩形背景顏色會變成與點擊的小矩形原來一樣顏色，而且，文字標題同樣是位于左下角。而以樹葉構成弧線邊緣的標志，則與所有的矩形形成了鮮明的對比。本文所用顏色數(shù)值： 設計技巧雜談（之五）本文由王安編譯，LOGOSKY.NET網(wǎng)站設計師陳漢聰校對，轉(zhuǎn)載請注明出處文章編號：年5月25日 【譯者的話】 無論是哪一種商業(yè)設計，其最終目的都是為了 幫助客戶推銷產(chǎn)品，促進銷售，否則再漂亮的設計都毫無意義。在本文中，我們通過幾個低成本的單張設計案例來探討一下如何在設計中讓信息更有效傳達。其中所涉及的一些基

32、本原則適合于任何的設計項目。 一、宣傳單張設計要點 通過下面的步驟能讓你的宣傳單張更有吸引力。 在預算很緊張的情況下你能設計出切實有效的宣傳單張嗎？當然可以，只要你能讓人們的注意力一直集中在你的產(chǎn)品上。 想像你步入一個家具展廳，停留在一件你真得很喜歡的家具旁邊，你腦子的第一反應是什么？是它的價格？這家公司還有什么其它產(chǎn)品？還是店的電話號碼？ 都不是！你只想更進一步的了解這東西是什么質(zhì)量，對自己合適嗎，還有怎么才能得到它。 你在設計宣傳單張時就是要做到這一點展示有吸引力的商品，給顧客一個擁有它的理由，并告訴顧客如何得到它。 原來的宣傳單張并不理想。這個店到底在賣什么？戶外涼亭還是家具 ? 紛亂的

33、頁面只會讓讀者迷惑。頁面上的店鋪地址，電話，地圖都著意地處理得比較低調(diào)，避免喧賓奪主，但卻沒有很好的突出最核心的東西產(chǎn)品！ 下面我們看看如何讓一個簡單的宣傳單張成為一個得力的推銷員。 1 首先布置場景 如果你把一個宣傳單張想象成一臺戲，那么紙張就是舞臺。和戲劇一樣，好的廣告的作用就是要讓人們的注意力都集中在你的產(chǎn)品上。 因為產(chǎn)品的圖片背景是比較暗的，那么宣傳單張的背景也處理成黑色與它配合， ok, 舞臺已經(jīng)暗下來了，就等演出開始。當然背景并不一定就是黑色，不過處理成黑色是最容易形成戲劇氛效果的方法。 添加一個很細的邊框，可以把它想象成幕布，引導讀者的目光到中間的內(nèi)容。這種線框一定要很細，如果太

34、粗太亮就會分散讀者的注意力。 2 把產(chǎn)品推向前臺 將你的產(chǎn)品放在頁面的顯眼位置上，就像你在家后院招呼朋友吃燒烤時，你也會同樣將這些臺椅放在院子的顯眼的地方一樣，讓每一個客人都看得見摸得著。產(chǎn)品圖片一定要清晰，實物照片是最合適的，一般廠家提供的照片質(zhì)量都比較高，比如例子中的照片，你可以試著向廠家索取。如果不行，那就請攝影師給產(chǎn)品拍張高質(zhì)量的照片，這樣可能費用比較高，但是請記?。喝绻櫩筒荒芮宄卮蛄慨a(chǎn)品，他們也不會掏錢。 也許有時候你有一種給產(chǎn)品圖片增加一些特殊效果的沖動，且慢！在一個產(chǎn)品宣傳單中，產(chǎn)品是需要展示的重點，不要自作聰明搞一些傾斜，變形的效果，這樣會顯得華而不實；也不要把照片弄得太小

35、，以為顧客會拿起放大鏡仔細研究一番；更不要像海報一樣對圖片進行剪裁，顧客只會忽略產(chǎn)品本身，甚至以為你要刻意隱藏什么。 3 加上標題 一旦展示了產(chǎn)品，下面就要加一些文字來更詳細的說明產(chǎn)品，介紹一些不是一眼就能看出來的優(yōu)點和用途。 顧客喜歡體驗各種新產(chǎn)品，如果你把顧客想象成非?？释M一步了解的受眾，那你就可以寫出好的宣傳標題。 想象一下，如果是給好朋友介紹這件產(chǎn)品，你會先介紹哪一方面，要從最激動人心的部分開始。在這個例子里，這些家具看上去是藤條編制的，其實是玻璃鋼的，很結(jié)實，這就是特點。如果你要推銷的是螺絲刀，浴巾這類普通商品，那么就思考一下你的產(chǎn)品什么地方最惹人喜愛，為什么顧客要買它們，然后用文

36、字表述出來。規(guī)則一：短標題更合適。我們平時說話時，如果一個人每說一句話都要用上 20 個以上的詞，只會讓聽的人發(fā)瘋。顧客可能喜歡你的產(chǎn)品，但是忍受不了你這樣嘮叨。一樣話，百樣說，最好找一種最簡潔，準確的說法。規(guī)則二：不要叫嚷一些華而不實的口號。 強扭的瓜不甜， 喊這些口號不能幫助你賣東西，你會因為某種車宣稱自己是代表“新新人類”就去買它嗎？不會，你買一輛車是因為它外觀漂亮，做工地道，價格適中或是剛好滿足你的某種需要。 4、下面加上文字說明 當你撰寫你的文字說明的時候，記?。侯櫩椭粫谒苷业揭恍└信d趣的信息時才會讀它，所以在你寫的時候一定要找到顧客的興趣點。好好端詳一下你的產(chǎn)品，想想哪些信息可

37、以讓顧客對它了解更多，還有什么細節(jié)可以強調(diào)，還可以建議什么好的使用方法，有了這些信息，顧客就更可能拿起電話訂購了。規(guī)則三：顧客才是上帝。顧客永遠是第一位的，你只能是靠邊站。只有顧客掏出錢真的購買你的產(chǎn)品，世界才是美好的，否則一切都變得無意義。你要尊重這一事實，一個好的廣告應該能準確反映產(chǎn)品真正的優(yōu)點，文字不是在為產(chǎn)品百般辯護，而是加強這一事實。如果你認為一個顧客會毫無理由買你的產(chǎn)品，那只是在發(fā)白日夢。 選用什么樣的字體 1 Times 字體是不錯的選擇。這些傳統(tǒng)的字體讓顧客有一種信賴感，平實的字體更能使產(chǎn)品引人注目。 標題和文字相的字體必須匹配，但是字符間距處理的更緊湊一點。 Times, C

38、entury, Garamond, Caslon 這幾種字體都是不錯的選擇。 2 Bauhaus Heavy 字體。包豪斯風格的裝飾字體就不太適合了，這是一種比較粗重的字體，本身的裝飾性在整體頁面中有點太惹眼，會讓讀者忽略了產(chǎn)品本身。這類字體用在海報更合適，而不是用在產(chǎn)品廣告單張上。 3 Snell Roundhand 和 Futura Heavy 字體配合。這個選擇很不錯，優(yōu)雅的字體風格同時也配合了文字本身的意思， 標題中“Wicher Beautiful ”（漂亮的藤條編織）的字體很秀麗，而“ Fibrglass strong ”（堅硬的鋼化玻璃）的字體很粗壯，字體的特點配合了字面的含義。

39、一般如果字體很醒目或是很風格化，這種字體和文字之間的聯(lián)系就會很明顯，記住：我們的目的是突出產(chǎn)品的特性。 5 加上LOGO 最后要打出自己的標識，但是標識形體要小一點，有兩個原因：在銷售的過程中，商店是最后才被意識到的，記住我們是在賣產(chǎn)品，不是商店本身，同時小的標識也顯得更自信。友情提示： 在設計一個廣告或是宣傳單張的時候，你要面對的是公眾，會有很多普通大眾接觸到你設計的東西。想象一下你是在給你的朋友介紹這種產(chǎn)品，形容給他聽，這樣對你設計很有好處，因為你的受眾就是他們你的朋友和鄰居。一筆好買賣是雙贏的，你應該順著這個思路來設計你的廣告。 如果你暫時還沒有一個標志，變通的方法是將你店的名字做成標志

40、，當然要選用和標題比較搭配的字體。這樣低調(diào)的處理可以在商店和產(chǎn)品之間建立一種隱性的聯(lián)系，非常適合產(chǎn)品線比較窄的商店，比如珠寶店，花店，服飾店等。 標志可以體現(xiàn)一種不同的風味：它是一個標簽，同時暗示這個產(chǎn)品只是商店眾多產(chǎn)品中的一種。這樣這個宣傳單張分為相互關聯(lián)的四部分標題，照片，文字，標志，它們相互照應形成一個整體。 如何設計一個文字標志 如果時間很緊，下面有個方法可以很快的設計一個文字標志。用標準 Helvetica 字體打出商店的名字，看上去 嗯 一般般啦。 把文字向中間壓縮，讓字母幾乎靠在一起，去掉“ & ”字符兩邊的空格，加上黑色背景，文字反白處理，看上去像印章的感覺。 將名字改成 Am

41、erican Typewriter 字體，注意這個字體的“ & ”字符很輕松有趣，很符合這家夏季避暑用品商店的風格。 將名字斷行，這樣看上去更緊湊，可以應用在不同的文字排版布局中，注意這里上下兩行的距離很近，配合字符之間距離。 還可利用計算機產(chǎn)生的灰度生成另一種效果，這里文字已經(jīng)加粗，注意“ & ”字符依然是白色，這樣可以產(chǎn)生強烈的對比效果，制造一個視覺上的焦點。 那里可以買的到呦？ 路線圖也是一個可以利用的資源。在迷宮一樣的街區(qū)中找到一家店很困難，這時如果有個路線圖，顧客會覺得商店很體貼。這個例子里，利用一幅簡明的路線圖就可以找到這家小店。 上圖為原來的路線圖：路線圖全是線條構成，好像鉛筆畫

42、的一樣。最大的問題是圖中的實線，方框還有文字形態(tài)上很相似，容易造成混淆，分散讀者的注意力。讀者要費好大勁，才能從這些亂七八糟的符號里找到哪是商店。拜托，這幅圖還不是上北下南的。 修改后的路線圖：灰色背景，白色道路看起來更舒服，更容易理解。先讓北面朝上，白色道路旁邊黑色的是建筑物，這種對比可以很好的傳達我們需要的信息哪里是目的地，怎么過去。較寬的道路表示你要走的路線，道路上的街道名稱是大寫的，避免了小寫字符上下參差不齊，這樣街道和名稱看起來是一個整體。去掉 Elk Grove 公園的標識，一般情況下，在一個簡單路線圖上，只需要標出目的地的位置。 二、設計產(chǎn)品展示版面 如果你能恰當?shù)慕M織你產(chǎn)品的圖

43、片，可以使你的版面吸引更多的目光 照片天生就是一個信息傳達者它就像一扇窗，反映了你公司的定位。這也使它區(qū)別與標題和一般的圖形，通過在一個頁面恰當?shù)慕M織你的圖片，你可以讓這種功能體現(xiàn)的更充分。 設計師應該是引導者，讓讀者按照你的思路去閱讀。 設計師的任務不是把各種元素象擺花兒那樣擺在一起，只是為了很漂亮，而是應該恰當?shù)匕岩獋鬟_的信息組織在一起。在這個例子中，我們把頁面里面的東西分成兩類，放在兩個區(qū)域里，顏色淺的上半部分用來排布產(chǎn)品說明，下面較暗的部分來展示產(chǎn)品，這樣讀者可以抓住重點，分區(qū)瀏覽，不用東看西看找不到北。 圖片已經(jīng)調(diào)動起了讀者的興趣，如何趁熱打鐵傳達進一步的信息？這就需要利用圖片的注釋

44、了，圖片注釋、標題和圖片一起傳達一個完整的信息。 上圖為修改前的設計：不要讓讀者的目光無所適從，這個頁面效果不好，沒有完成傳達的目的，為什么？因為讀者看的時候還要自己去把支離破碎的信息拼在一起，這個熱情有余經(jīng)驗不足的設計師安排頁面里的元素就像安排他的單身宿舍，一角放沙發(fā)，一角放椅子，茶幾放中間，他這么做是因為他只將注意力放在如何安排文字欄及區(qū)域，卻忘了他的目的是要傳達完整的信息。修改后的設計：就像個琳瑯滿目的櫥窗，同樣還是那些照片和文字，不過圖片都集中在一起，效果完全不同。 1 設計要側(cè)重于注意力和信息 下面介紹幾種方法，可以結(jié)合使用也可以單獨使用： 將展示產(chǎn)品加上邊框 在這里，灰色的背景就是

45、邊框，注意背景和上面的文字是對齊的，很多時候加上背景比直接加邊框要好，不會顯得那么緊張，而且更有對比效果，如果不是有特意強調(diào)的不必直接加邊框。 不同層次的信息傳達不同的字體、大小、顏色會表達不同的意義。我們可以通過這些區(qū)別來將信息進行區(qū)隔。為了達到這種效果，同一類信息保持相同的風格，比如圖片的注釋都用相同的字體、顏色和大小，同時和正文相區(qū)別。運用組合概念 你可以把圖片放在一起而把圖片注釋放在周圍，也可以象例子中一樣，讓圖片把注釋文字圍在中間。這個文字區(qū)域模仿了頁里的版面設計，它非常有效地將上方的文字與下方的圖片聯(lián)系起來。注釋的藝術 不論你的主題是什么，當你把照片組織在一起，你就能將讀者的注意力

46、放在這個圖片區(qū)域上。如果考慮到做廣告的人花了那么多心思和金錢也只是要吸引人們的注意力，這種效果已經(jīng)非常不錯了，而且并沒有增加額外的花費。人們在觀看版面時，往往會首先閱讀這些圖片注釋，然后才閱讀正文。對于這些圖片注釋，簡單整齊的布局就已經(jīng)是最理想的了。接下來怎么辦呢？ 你要是想立刻打動讀者，讓他掏錢，那么圖片的注釋就是廣告中最重要的文字了。這個再怎么強調(diào)都不為過。如果圖片吸引了讀者，那么他接下來肯定會看一下圖片的注釋 。 最后一擊，打動讀者 你要讓你的文字更豐滿，先用標題抓住讀者，提出他關心的問題，解決它，指出你產(chǎn)品的優(yōu)點，吸引他，賣出你的產(chǎn)品，文字要簡潔，生動，智慧，如果你的文筆不好，找個專業(yè)

47、的來做這事兒。白色的注釋標題在 40% 灰度的背景下已經(jīng)能夠形成醒目的對比。 布局的平衡影響視覺判斷 人類潛意識里會追求一種平衡感，這種平衡感的需要會影響我們創(chuàng)造的各種東西，不管有意無意，我們對平衡的感覺都會很微妙的影響我們視覺的判斷， 我們潛意識里對平衡的追求決定了我們在觀察到的很多事物中都會有意無意地去尋求這種視覺的穩(wěn)定感。比如，如果標題過長，使整個版面顯得缺乏穩(wěn)定，我們可以標題分成幾行，然后安排在統(tǒng)一的軸線上，來獲得比較穩(wěn)定的感覺。 三、讓你的宣傳單更易讀 一些基本的設計原則可以讓你的頁面更醒目。文藝復興之旅展覽： 參觀這種展覽會總會給人無窮的遐想， 但是如果交給一個比較無趣的設計師去做

48、推廣，可能會給人沒有什么新意的感覺。所以這種推廣設計要更用心。 能用于宣傳單設計的圖片有會展的標志，還有一些版畫，會展的藝術品非常吸引人，你的宣傳單也應該同樣獨具風味。 至少這是你希望達到目的。不過你可能試了很多種頁面布局，但是都顯得比較呆板，沒有生氣，雖然有很多漂亮的圖片，但是頁面沒有動感，比較僵硬，到底有什么問題？ 主要原因是你沒有利用元素大小和輕重的差別。如果能妥善處理這兩個方面，你就可以引導讀者按照你的意愿瀏覽頁面了。這樣不僅讓你的設計更漂亮，也可以讓你的宣傳單更易讀，下面我們看看怎么做。未修改之前，這個布局中規(guī)中矩，比較靜態(tài)。主要問題是沒有大小和輕重的對比，雖然圖片和標志本身都不錯，

49、但是他們基本上都差不多大小，有相同的尺寸，因此缺少一個視覺上的焦點，讀者不知道往哪里看。 還可以增加輕重的對比來改善布局，每個設計上的元素都有重量，顏色比較暗或是線條比較粗的圖案看上去比較重，用余光瞥一下頁面，看看各個部分的輕重的不同。原來的設計中，除了文字，其他的元素重量都差不多，所以造成頁面比較乏味。 修改后就好多了，大小和輕重都有了充分的變化和對比，頁面比較生動，有活力，下面我們看看是如何做到的。 1 挑選一個主導元素 然后將它放大或加重。記住，要達到君臨天下的地位取決于大小和重量兩方面，如果只是尺度比較大 , 重量不足還是起不到作用。 為什么要有一個主導元素？圖形大小和重量的差別可以引

50、導讀者瀏覽頁面的順序。當我們的目光掃過頁面的時候，最先注意到最大，最重的元素，然后是小一點輕一點的，這樣按照順序瀏覽完整個頁面。事實上，我們是通過元素的不同來引導讀者的視線。上圖中，藝人形象的圖案是主體，圖中的數(shù)字代表讀者瀏覽的順序。有經(jīng)驗的設計者會利用這個原理，調(diào)整圖形的大小來引導讀者按照既定的順序瀏覽。 在這個例子里，藝人的圖案為主體，注意其他的圖形是如何按照不同的大小排列來引導讀者目光的。 調(diào)整其它圖像的大小 其他元素都比主題的圖像小或是輕一點，很多時候你都需要按照大小設置元素，大中小不同的元素組合在一起，讀者的目光會按照你的設計來移動。 2 創(chuàng)造字體上的對比 利用大小，輕重還可以創(chuàng)造標題、文字和圖形注釋之間的對比，對于標題，我們使用了粗壯的 Compacta