《寫給大家看的設計書》

1、寫給大家看的設計書寫給大家看的設計書The Non-Designers Design BookThe Non-Designers Design Book第一講：設計原則優(yōu)秀的設計優(yōu)秀的設計就這么容易123學習學習4 4大基本原則。大基本原則。它們比你想像得要簡單。認識到自己沒有運用這些原則。認識到自己沒有運用這些原則。形諸文字-陳述問題。應用基本原則。應用基本原則。結果將使你大吃一驚。n對比（對比（Contrast）基本思想是，避免頁面上元素太過相似。如果元素，如字體、顏色、大小、線寬、形狀和空間等不相同，就讓它們截然不同。n 對齊（對齊（Alignment）每個元素都應與頁面上另一個元素有某

2、種視覺聯(lián)系。在對齊很明顯的基礎上，可以偶爾打破對齊規(guī)則。 n重復（重復（Repetition）可以重復顏色、形狀、材質(zhì)、空間關系、線寬、字體、大小和圖片等，增加條理性和加強統(tǒng)一性。n 親密性（親密性（Proximity）彼此相關的項應當靠近，歸組在一起。若多個項之間存在很近的親密性，它們會形成一個視覺單元，而不是多個孤立的元素。 設計的四大原則1親密性原則實現(xiàn)組織性實現(xiàn)組織性也許光從字面上來說，版式設計中的“親密性”似乎不太好理解，正常的情況下，我們都會把“親密性”理解為人與人之間的關系的一種表現(xiàn)，事實上在版式設計中的“親密性”的確也有類似人與人之間的關系的意思。也正是印證了那句話物以類聚，人

3、以群分物以類聚，人以群分！“親密性”的原則即是將邏輯上存在關聯(lián)的元素排列組合在一起，使其被看作是一個密切相關的整體，而不是一堆雜亂無章的元素。 親密性n從書中所給的例子，可以看出版式設計中的“親密性”實際上是對信息的分類整理。即是通過這個“親密性”原則，對頁面中出現(xiàn)的雜亂無章的元素重新組合，使其有一個清晰明了的結構，可以讓讀者在最短的時間內(nèi)獲取頁面中的正確的內(nèi)容。 親密性進行“親密性”原則設計的第一步，即是對元素的歸類組合，將頁面中所需要出現(xiàn)的元素按照某種邏輯進行歸類劃分，對于同一組合內(nèi)的元素在物理位置上賦予其更近的距離，而不同組合之間的物理位置顯然要更遠。這也是頁面留白設計頁面留白設計的一個

4、核心。然而對于一個頁面的設計來說，僅僅只是依靠“親密性”原則并不能解決問題，除了“親密性”之外，在頁面的設計中還需要使用到對齊、對比、重復等原則，“親密性”只是版式設計的第一步，更多的意義是在于對元素的組織性上。 親密性 親密性 親密性小結如果多個項之間存在很近的親密性，它們將成為一個視覺單元，而不是多個孤立的元素。彼此相關的項應當歸在一組。要有意識的注意你是怎樣閱讀的，你的視線怎樣移動：開始 路徑 結束；讀完后，接下來看哪里？整個過程應當是一個合理的過程，有確定的開始，而且要有確定的結束。n 根本目的根本目的 實現(xiàn)組織性。 將相關的元素建立親密性，更容易閱讀，更容易被記住，還可以使空白更美觀

5、。 親密性小結n 如何實現(xiàn)如何實現(xiàn) 瞇起眼睛，統(tǒng)計眼睛停頓的次數(shù)，來數(shù)數(shù)頁面上有多少元素；n 要避免的問題要避免的問題 不要僅僅因為有空白就把元素放在角落或者中央； 避免一個頁面上出現(xiàn)太多的孤立元素； 不要在元素之間留出同樣大小的空白，除非各組屬于同一個子集； 在有很近親密性的元素間建立關系； 不屬于一組的元素不要建立關系，分開。2對齊原則使頁面統(tǒng)一且有條理使頁面統(tǒng)一且有條理n如果說親密性原則是對元素的歸類組合，是將元素之間邏輯理解上的差異在視覺上表現(xiàn)出來，是屬于信息分類的話，那么對齊原則即是在視覺上串起這些差異化元素組合之間的那根線，即是保證元素之間的統(tǒng)一性。n雖然親密性原則說的是在邏輯理解

6、上沒有關系的元素組合之間應該以更遠的距離表現(xiàn)出來，但對于同一個頁面內(nèi)的元素組合而言，它們都是圍繞著同一個主題核心的，它們的差異性在邏輯上只是同一個主題的不同屬性而已，所以需要一種方式，讓頁面中的所有元素看上去統(tǒng)一、有聯(lián)系而且彼此相關，將這些不同元素之間的關聯(lián)在視覺上表達出來。這種方式，即是對齊。 對齊n對齊的方式可分為左對齊、右對齊、居中對齊以及兩端對齊。雖然對齊的方式有多種，但并不意味著可以在一個頁面中使用多種對齊方式，那樣只會讓頁面中的元素顯得凌亂，而在頁面中只使用一種對齊方式將會使頁面統(tǒng)一而有條理。n在這四種對齊方式里，左對齊或是右對齊是最經(jīng)常被使用到的，而對于有一定行長的文本而言，兩端

7、對齊也是一個好的方式，而居中對齊則是四種對齊方式中最不推薦使用的對齊方式。因為對于讀者而言，居中對齊可能導致視線的跳躍性太大，尤其是當頁面中存在大量文本，那簡直就是一種災難。 對齊n在明白對齊的規(guī)則之后，可以試著有意識的去打破這個規(guī)則，然而即使是打破對齊規(guī)則的設計，在更大的范圍之內(nèi)依然是遵循著對齊原則的。n從左邊這個圖中可以看出，那一小段引用的文本，雖然在頁面的元素之間是打破了對齊規(guī)則的，但是其仍然與標題是左對齊的。 對齊 對齊 對齊小結n根本目的根本目的 使頁面統(tǒng)一且有條理，就是要把丟在到處的書收在一個架子上的意思。 n如何實現(xiàn)如何實現(xiàn) 每個元素都能找到與之對齊的元素。 n要避免的問題要避免

8、的問題 不要用混合對齊，就是用了右對齊就別用居中了。 不要用居中！因為很呆。 3重復原則統(tǒng)一并增加視覺效果統(tǒng)一并增加視覺效果n通過親密性原則，我們可以將一個頁面中的元素按照某種邏輯理解上的差異劃分成不同的元素組合；再通過對齊原則，使這些不同的元素組合在視覺上看起來彼此相關。n不同的元素組合之間的關系可以是平等的、從屬的或是毫不相關的，這些元素組合之間的關系在視覺上僅靠親密性原則以及對齊原則并不能完整的呈現(xiàn)。比如兩個平等關系的元素組合，雖然通過親密性原則使其之間保持一定的距離，再通過對齊原則使其在一個頁面中看起來彼此相關，但如果這兩個元素組合使用不同的字體以及字號，我們依然無法從視覺上辨別出它們

9、之間的關系。n擁有良好的組織性，同時保證了元素間的統(tǒng)一性，但很有可能缺乏一致性。這樣的頁面設計會成為妨礙讀者通過視覺快速獲取頁面正確的內(nèi)容的關鍵。這就需要使用到第三個原則重復原則。 重復原則n同樣的頂線及底線、同樣是兩端對齊的方式、同樣的字體及字號，還有三角形。這兩個頁面有太多相同的東西，所以很容易從視覺上快速判斷出這兩張紙是屬于同一本書里的內(nèi)容。這就是重復的力量！ 重復原則重復原則并不僅僅只是表現(xiàn)在字體上，頁面中任何一個元素都可以成為設計中重復的對象：字體、字號、顏色、圖案，甚至是版式。重復的對象：字體、字號、顏色、圖案，甚至是版式。猶如在上一個對齊原則中所說的一樣，規(guī)則是可以打破的。在設計

10、中使用到的重復元素并沒有規(guī)定必須保證高度的一致性，高度的一致性很有可能會導致頁面設計的呆板無趣。同樣的字體及字號，可以使用不同的顏色；同樣的形狀，可以使用不同的大小這些都是可以使重復性在頁面上的運用不會那么枯燥的方法。就像大部分單一的設計都會讓人感到無趣一樣，在設計中使用單一的重復元素，仍然會讓設計顯得枯燥無味，然而物極必反的道理也是通用的，過多的使用重復元素則會讓頁面顯得凌亂。這里就涉及到一個對比度的問題。 重復原則 使作品具有一致性的方法就是對形狀、顏色或某些數(shù)值進行重復。當你看到一個設計元素在一個平面里，其不同部分被反復應用，我們的眼睛自然就會跟隨著它們，有時就算它們并不是放在一起，但我

11、們的視覺仍會將它們視作是一個整體。我們會潛意識地在它們之間畫上連線。n應用重復最簡單的方法就是在海報的背景中創(chuàng)造一個圖案然后重復應用。在背景中這些重復的圖案會產(chǎn)生一種很有趣的視覺及構圖效果，然后將背景與前景的元素聯(lián)接起來。n另一個應用重復的方法是一行重復的元素引導觀眾的眼睛到一個重要的信息、標志或圖片上。重復的元素能夠產(chǎn)生一條路徑引導我們的視線，使觀眾創(chuàng)造出一種好奇心另一端是什么來的？這其實是一種講故事的方式，吸引觀眾繼續(xù)看下去。 如何應用重復原則n左圖中，重復的毛蟲圖案引導觀眾的視線去到 INNU 這個標志上。經(jīng)過這個標志后又是一些蝴蝶的重復圖案，表示你去了這個美容院后前后的區(qū)別，構思巧妙。

12、n右圖中，這些小點是采用標志中的元素，而我們在圖中再次重復應用就產(chǎn)生了一致性，吸引了別人的注意，并且強化了品牌的宣傳。 重復小結設計中視覺元素的重復可以將作品中的各部分連在一起，從而統(tǒng)一并增強整個作品，否則這些部分只是彼此孤立的單元。重復不僅對只有一頁的作品很有用，對于多頁文檔的設計更顯重要（對此我們通常稱之為保持一致）。n根本目的根本目的重復的目的就是統(tǒng)一，并增強視覺效果。不要低估頁面視覺效果的威力，如果一個作品看起來很有趣，它往往也更易于閱讀。重復可以認為是保持一致性重復可以認為是保持一致性，而且我相信你早已經(jīng)這樣做過。現(xiàn)在，需要把現(xiàn)有的一致性更向前推進一步?？刹豢梢詫ｉT做一個圖片設計，并

13、且將某些一致元素（如標題）作為這個圖片設計的一部分？在每個頁面底部或每個標題下面使用一條粗細為1點的線嗎？或者是不是使用一條更粗的線（4點），使重復元素顯得更明顯，更生動？再看看有沒有可能增加一些純粹為建立重復而設計的元素。是不是有一個編號項列表？可不可以使用另外一種字體或逆序數(shù)字，然后對出版物中的每一個編號列表都重復同樣的處理？最初，可以只是找出現(xiàn)有的重復，然后將其加強。熟悉了這種思想之后，再開始創(chuàng)建新的重復元素，來增強設計的效果并提高信息的清晰度。重復就像是強調(diào)你的衣著。如果一位女士穿著一件可愛的黑色晚禮服，戴著一頂別致的帽子，她可能會用紅色高跟鞋、紅色口紅和一朵紅色小花來突出她的晚禮服。

14、 重復小結 要避免的問題要避免的問題要避免太多地重復一個元素，重復太多會讓人討厭。要注意對比的價值太多的重復將混淆重點。n一致的網(wǎng)站標志和導航欄 網(wǎng)站設計中重復性(一致性)它們可以說是最體現(xiàn)網(wǎng)站特征的部分。就像VIS（視覺識別系統(tǒng)）一樣，應該對LOGO的顏色、大小、位置等方面都有嚴格的說明。如果一個網(wǎng)站里面每個網(wǎng)頁的LOGO都大小不同，或者位置不統(tǒng)一，或者導航欄在某些頁面突然多出兩個子選項，給瀏覽者的感覺一定很不好。n一致的頁面布局這可以說是一種“包裝”，我們使用圖片或者圖表來表達一些信息。如果某些頁面的等級是一致的，那么它們的“包裝”風格也應是一致的，用戶應該使用同樣的瀏覽方式來閱讀這些網(wǎng)頁

15、。 網(wǎng)站設計中重復性(一致性)n一致平衡的信息結構網(wǎng)站每個欄目的信息量應當合理分配。除了一些特定的內(nèi)容（例如“網(wǎng)站地圖”和“聯(lián)系方式”），所有分支的信息量應當相對平衡。如果用戶在A欄目看到有20多個下級欄目，但B欄目中卻只有3個，他們肯定會有點頭昏腦脹-你迫使他們?nèi)ニ伎肌盀槭裁磿@樣”n一致的重復性元素如果使用了文本框，那么網(wǎng)站中所有文本框的形式都應當一致。如果某個圖標的尺寸是40*40，那么相類似的圖標大小都應該差不多。n一致和諧的字體和色彩字體和色彩也應遵循同樣的標準。你可以為不同的版塊設置不同的色系，但是如果這個版塊用的是桔紅，那么它所有的頁面都應該是桔紅。版塊與版塊之間的差異也應該明顯

16、。 網(wǎng)站設計中重復性(一致性)n一致，但不一樣需要注意的是,一致性并不是“相似性”。如果太相似，很可能用戶無法區(qū)別彼此之間的不同。例如下面的網(wǎng)頁，圖片之間的顏色、形式過于相似，盡管圖標能代表各選項的功能和概念，但用戶一眼看上去無法覺察出差異，圖標沒有體現(xiàn)出明確輔助標識的作用。 網(wǎng)站設計中重復性(一致性)4對比原則增強頁面的效果和組織性增強頁面的效果和組織性n假如一個頁面中的文本采用的都是同樣的字體、同樣的字號、同樣的顏色，做為讀者的你能輕易的區(qū)分出哪里是標題，哪里是正文內(nèi)容嗎？所以通常情況下，設計師會對標題采用加大字號、加粗字體、改變字體、更換顏色等方式進行處理以使其區(qū)別于正文內(nèi)容。n這就是對

17、比原則的一個表現(xiàn)。n沒有對比的頁面，在讀者的眼里就像是平靜的海面，視線可及之處沒有一個焦點；當出現(xiàn)了對比，突出了視覺重點，也即意義著平靜的海面上有個小島之類的可以吸引住視覺焦點。 對比n對比要強烈！這是書中一直強調(diào)的一個觀點，其本意應該是通過視覺上的強烈差異化來增強頁面的效果，以及強調(diào)元素之間的差異性?？墒沁@個強烈依然涉及到一個度的問題，過于強烈的對比，很有可能導致讀者對于在頁面中處于對比弱的那些元素的忽視。 對比n紙面及網(wǎng)頁這兩種載體有著各自的局限性，在對比的處理上，網(wǎng)頁所受到的局限性會更大。比如在字體的對比上，這一點尤其是在中文網(wǎng)頁上，利用字體進行對比處理的局限性相當之大，因為系統(tǒng)默認帶有

18、的中文字體不多，所以很多時候在中文網(wǎng)頁上對于文本的對比處理依然是在字號、加粗以及顏色上面。n對比元素可以做為重復元素來使用，而與親密性原則對元素的歸類組織類似，對比原則除了可以增強視覺效果外，同樣有助于信息的組織。n親密性、對齊、重復、對比，這是四個相輔相成的設計原則，單一的處理方式并不能給設計帶來多大的改觀，但當同時應用這四個原則的時候，雖然不可能說讓設計變得非常精美，起碼也可以讓讀者在掃視后快速正確的獲取到設計中所想表達的內(nèi)容。 對比 對比小結在頁面上增加對比能吸引人的眼球。我們的眼睛喜歡看到對比的事物。如果頁面上放兩個不完全相同的元素（比如有兩種不同字體，或者有兩種不同線寬），它們就不能

19、類似。要實現(xiàn)有效的對比，這兩個元素必須截然不同。n根本目的根本目的對比的根本目的有兩方面，這兩個方面相輔相成，無法分開。一個目的是增強頁面的效果，如果一個頁面看起來很有意思，往往更有可讀性。另一個目的是有助于信息的組織。讀者應當能立即了解信息以何種方式組織，以及從一項到另一項的邏輯流程。對比元素不能讓讀者混淆，也不能錯誤地強調(diào)重點n如何實現(xiàn)可以通過字體選擇（見下一部分）、線寬、顏色、形狀、大小、空間等等來增加對比。增加對比很容易，途徑有很多，這可能是增加視覺效果最有意思也最讓人滿意的方法了。重要的是：對比一定要強烈。n要避免的問題不要猶豫。如果你想形成對比，就加大力度。不要將一種粗線與一種更粗的線進行對比。不要將棕色文本與黑色標題建立對比。要避免使用兩種或多種類似的字體。如果各個項不完全一樣，干脆讓它們截然不同！ 對比小結復習實現(xiàn)組織性實現(xiàn)組織性n對比（對比（Contrast）基本思想是，避免頁面上元素太過相似。如果元素，如字體、顏色、大小、線寬、形狀和空間等不相同，就讓它們截然不同。n 對齊（對齊（Alignment）每個元素都應與頁面上另一個