《寫給大家看的設(shè)計書》

寫給大家看的設(shè)計書

TheNon-Designer'sDesignBook講：設(shè)計原則2021/5/91優(yōu)秀的設(shè)計就這么容易……123學(xué)習(xí)4大基本原則。它們比你想像得要簡單。認識到自己沒有運用這些原則。形諸文字----陳述問題。應(yīng)用基本原則。結(jié)果將使你大吃一驚。2021/5/92對比（Contrast）

基本思想是，避免頁面上元素太過相似。如果元素，如字體、顏色、大小、線寬、形狀和空間等不相同，就讓它們截然不同。

對齊（Alignment）

每個元素都應(yīng)與頁面上另一個元素有某種視覺聯(lián)系。在對齊很明顯的基礎(chǔ)上，可以偶爾打破對齊規(guī)則。重復(fù)（Repetition）

可以重復(fù)顏色、形狀、材質(zhì)、空間關(guān)系、線寬、字體、大小和圖片等，增加條理性和加強統(tǒng)一性。

親密性（Proximity）

彼此相關(guān)的項應(yīng)當(dāng)靠近，歸組在一起。若多個項之間存在很近的親密性，它們會形成一個視覺單元，而不是多個孤立的元素。設(shè)計的四大原則‘2021/5/931親密性原則實現(xiàn)組織性2021/5/94也許光從字面上來說，版式設(shè)計中的“親密性”似乎不太好理解，正常的情況下，我們都會把“親密性”理解為人與人之間的關(guān)系的一種表現(xiàn)，事實上在版式設(shè)計中的“親密性”的確也有類似人與人之間的關(guān)系的意思。也正是印證了那句話——物以類聚，人以群分！“親密性”的原則即是將邏輯上存在關(guān)聯(lián)的元素排列組合在一起，使其被看作是一個密切相關(guān)的整體，而不是一堆雜亂無章的元素。親密性‘2021/5/95從書中所給的例子，可以看出版式設(shè)計中的“親密性”實際上是對信息的分類整理。即是通過這個“親密性”原則，對頁面中出現(xiàn)的雜亂無章的元素重新組合，使其有一個清晰明了的結(jié)構(gòu)，可以讓讀者在最短的時間內(nèi)獲取頁面中的正確的內(nèi)容。親密性‘2021/5/96進行“親密性”原則設(shè)計的第一步，即是對元素的歸類組合，將頁面中所需要出現(xiàn)的元素按照某種邏輯進行歸類劃分，對于同一組合內(nèi)的元素在物理位置上賦予其更近的距離，而不同組合之間的物理位置顯然要更遠。這也是頁面留白設(shè)計的一個核心。然而對于一個頁面的設(shè)計來說，僅僅只是依靠“親密性”原則并不能解決問題，除了“親密性”之外，在頁面的設(shè)計中還需要使用到對齊、對比、重復(fù)等原則，“親密性”只是版式設(shè)計的第一步，更多的意義是在于對元素的組織性上。親密性‘2021/5/97親密性‘2021/5/98親密性小結(jié)如果多個項之間存在很近的親密性，它們將成為一個視覺單元，而不是多個孤立的元素。彼此相關(guān)的項應(yīng)當(dāng)歸在一組。要有意識的注意你是怎樣閱讀的，你的視線怎樣移動：開始→路徑→結(jié)束；讀完后，接下來看哪里？整個過程應(yīng)當(dāng)是一個合理的過程，有確定的開始，而且要有確定的結(jié)束。根本目的實現(xiàn)組織性。將相關(guān)的元素建立親密性，更容易閱讀，更容易被記住，還可以使空白更美觀?！?021/5/99親密性小結(jié)如何實現(xiàn)瞇起眼睛，統(tǒng)計眼睛停頓的次數(shù)，來數(shù)數(shù)頁面上有多少元素；要避免的問題不要僅僅因為有空白就把元素放在角落或者中央；避免一個頁面上出現(xiàn)太多的孤立元素；不要在元素之間留出同樣大小的空白，除非各組屬于同一個子集；在有很近親密性的元素間建立關(guān)系；不屬于一組的元素不要建立關(guān)系，分開?！?021/5/9102對齊原則使頁面統(tǒng)一且有條理2021/5/911如果說親密性原則是對元素的歸類組合，是將元素之間邏輯理解上的差異在視覺上表現(xiàn)出來，是屬于信息分類的話，那么對齊原則即是在視覺上串起這些差異化元素組合之間的那根線，即是保證元素之間的統(tǒng)一性。雖然親密性原則說的是在邏輯理解上沒有關(guān)系的元素組合之間應(yīng)該以更遠的距離表現(xiàn)出來，但對于同一個頁面內(nèi)的元素組合而言，它們都是圍繞著同一個主題核心的，它們的差異性在邏輯上只是同一個主題的不同屬性而已，所以需要一種方式，讓頁面中的所有元素看上去統(tǒng)一、有聯(lián)系而且彼此相關(guān)，將這些不同元素之間的關(guān)聯(lián)在視覺上表達出來。這種方式，即是對齊。對齊‘2021/5/912對齊的方式可分為左對齊、右對齊、居中對齊以及兩端對齊。雖然對齊的方式有多種，但并不意味著可以在一個頁面中使用多種對齊方式，那樣只會讓頁面中的元素顯得凌亂，而在頁面中只使用一種對齊方式將會使頁面統(tǒng)一而有條理。在這四種對齊方式里，左對齊或是右對齊是最經(jīng)常被使用到的，而對于有一定行長的文本而言，兩端對齊也是一個好的方式，而居中對齊則是四種對齊方式中最不推薦使用的對齊方式。因為對于讀者而言，居中對齊可能導(dǎo)致視線的跳躍性太大，尤其是當(dāng)頁面中存在大量文本，那簡直就是一種災(zāi)難。對齊‘2021/5/913在明白對齊的規(guī)則之后，可以試著有意識的去打破這個規(guī)則，然而即使是打破對齊規(guī)則的設(shè)計，在更大的范圍之內(nèi)依然是遵循著對齊原則的。從左邊這個圖中可以看出，那一小段引用的文本，雖然在頁面的元素之間是打破了對齊規(guī)則的，但是其仍然與標(biāo)題是左對齊的。對齊‘2021/5/914對齊‘2021/5/915對齊小結(jié)根本目的

使頁面統(tǒng)一且有條理，就是要把丟在到處的書收在一個架子上的意思。

如何實現(xiàn)每個元素都能找到與之對齊的元素。要避免的問題不要用混合對齊，就是用了右對齊就別用居中了。不要用居中?。。?！因為很呆?！?021/5/9163重復(fù)原則統(tǒng)一并增加視覺效果2021/5/917通過親密性原則，我們可以將一個頁面中的元素按照某種邏輯理解上的差異劃分成不同的元素組合；再通過對齊原則，使這些不同的元素組合在視覺上看起來彼此相關(guān)。不同的元素組合之間的關(guān)系可以是平等的、從屬的或是毫不相關(guān)的，這些元素組合之間的關(guān)系在視覺上僅靠親密性原則以及對齊原則并不能完整的呈現(xiàn)。比如兩個平等關(guān)系的元素組合，雖然通過親密性原則使其之間保持一定的距離，再通過對齊原則使其在一個頁面中看起來彼此相關(guān)，但如果這兩個元素組合使用不同的字體以及字號，我們依然無法從視覺上辨別出它們之間的關(guān)系。擁有良好的組織性，同時保證了元素間的統(tǒng)一性，但很有可能缺乏一致性。這樣的頁面設(shè)計會成為妨礙讀者通過視覺快速獲取頁面正確的內(nèi)容的關(guān)鍵。這就需要使用到第三個原則——重復(fù)原則。重復(fù)原則‘2021/5/918同樣的頂線及底線、同樣是兩端對齊的方式、同樣的字體及字號，還有三角形。這兩個頁面有太多相同的東西，所以很容易從視覺上快速判斷出這兩張紙是屬于同一本書里的內(nèi)容。這就是重復(fù)的力量！重復(fù)原則‘2021/5/919重復(fù)原則并不僅僅只是表現(xiàn)在字體上，頁面中任何一個元素都可以成為設(shè)計中重復(fù)的對象：字體、字號、顏色、圖案，甚至是版式。猶如在上一個對齊原則中所說的一樣，規(guī)則是可以打破的。在設(shè)計中使用到的重復(fù)元素并沒有規(guī)定必須保證高度的一致性，高度的一致性很有可能會導(dǎo)致頁面設(shè)計的呆板無趣。同樣的字體及字號，可以使用不同的顏色；同樣的形狀，可以使用不同的大小……這些都是可以使重復(fù)性在頁面上的運用不會那么枯燥的方法。就像大部分單一的設(shè)計都會讓人感到無趣一樣，在設(shè)計中使用單一的重復(fù)元素，仍然會讓設(shè)計顯得枯燥無味，然而物極必反的道理也是通用的，過多的使用重復(fù)元素則會讓頁面顯得凌亂。這里就涉及到一個對比度的問題。重復(fù)原則‘2021/5/920使作品具有一致性的方法就是對形狀、顏色或某些數(shù)值進行重復(fù)。當(dāng)你看到一個設(shè)計元素在一個平面里，其不同部分被反復(fù)應(yīng)用，我們的眼睛自然就會跟隨著它們，有時就算它們并不是放在一起，但我們的視覺仍會將它們視作是一個整體。我們會潛意識地在它們之間畫上連線。應(yīng)用重復(fù)最簡單的方法就是在海報的背景中創(chuàng)造一個圖案然后重復(fù)應(yīng)用。在背景中這些重復(fù)的圖案會產(chǎn)生一種很有趣的視覺及構(gòu)圖效果，然后將背景與前景的元素聯(lián)接起來。另一個應(yīng)用重復(fù)的方法是一行重復(fù)的元素引導(dǎo)觀眾的眼睛到一個重要的信息、標(biāo)志或圖片上。重復(fù)的元素能夠產(chǎn)生一條路徑引導(dǎo)我們的視線，使觀眾創(chuàng)造出一種好奇心——另一端是什么來的？這其實是一種講故事的方式，吸引觀眾繼續(xù)看下去。如何應(yīng)用重復(fù)原則‘2021/5/921左圖中，重復(fù)的毛蟲圖案引導(dǎo)觀眾的視線去到INNU這個標(biāo)志上。經(jīng)過這個標(biāo)志后又是一些蝴蝶的重復(fù)圖案，表示你去了這個美容院后前后的區(qū)別，構(gòu)思巧妙。右圖中，這些小點是采用標(biāo)志中的元素，而我們在圖中再次重復(fù)應(yīng)用——就產(chǎn)生了一致性，吸引了別人的注意，并且強化了品牌的宣傳。2021/5/922重復(fù)小結(jié)設(shè)計中視覺元素的重復(fù)可以將作品中的各部分連在一起，從而統(tǒng)一并增強整個作品，否則這些部分只是彼此孤立的單元。重復(fù)不僅對只有一頁的作品很有用，對于多頁文檔的設(shè)計更顯重要（對此我們通常稱之為保持一致）。根本目的重復(fù)的目的就是統(tǒng)一，并增強視覺效果。不要低估頁面視覺效果的威力，如果一個作品看起來很有趣，它往往也更易于閱讀?！?021/5/923

重復(fù)可以認為是保持一致性，而且我相信你早已經(jīng)這樣做過?，F(xiàn)在，需要把現(xiàn)有的一致性更向前推進一步?？刹豢梢詫ｉT做一個圖片設(shè)計，并且將某些一致元素（如標(biāo)題）作為這個圖片設(shè)計的一部分？在每個頁面底部或每個標(biāo)題下面使用一條粗細為1點的線嗎？或者是不是使用一條更粗的線（4點），使重復(fù)元素顯得更明顯，更生動？再看看有沒有可能增加一些純粹為建立重復(fù)而設(shè)計的元素。是不是有一個編號項列表？可不可以使用另外一種字體或逆序數(shù)字，然后對出版物中的每一個編號列表都重復(fù)同樣的處理？最初，可以只是找出現(xiàn)有的重復(fù)，然后將其加強。熟悉了這種思想之后，再開始創(chuàng)建新的重復(fù)元素，來增強設(shè)計的效果并提高信息的清晰度。重復(fù)就像是強調(diào)你的衣著。如果一位女士穿著一件可愛的黑色晚禮服，戴著一頂別致的帽子，她可能會用紅色高跟鞋、紅色口紅和一朵紅色小花來突出她的晚禮服。重復(fù)小結(jié)‘2021/5/924要避免的問題

要避免太多地重復(fù)一個元素，重復(fù)太多會讓人討厭。要注意對比的價值太多的重復(fù)將混淆重點?！蹋亍?021/5/925一致的網(wǎng)站標(biāo)志和導(dǎo)航欄網(wǎng)站設(shè)計中重復(fù)性(一致性)‘它們可以說是最體現(xiàn)網(wǎng)站特征的部分。就像VIS（視覺識別系統(tǒng)）一樣，應(yīng)該對LOGO的顏色、大小、位置等方面都有嚴(yán)格的說明。如果一個網(wǎng)站里面每個網(wǎng)頁的LOGO都大小不同，或者位置不統(tǒng)一，或者導(dǎo)航欄在某些頁面突然多出兩個子選項，給瀏覽者的感覺一定很不好。2021/5/926一致的頁面布局這可以說是一種“包裝”，我們使用圖片或者圖表來表達一些信息。如果某些頁面的等級是一致的，那么它們的“包裝”風(fēng)格也應(yīng)是一致的，用戶應(yīng)該使用同樣的瀏覽方式來閱讀這些網(wǎng)頁。網(wǎng)站設(shè)計中重復(fù)性(一致性)‘2021/5/927一致平衡的信息結(jié)構(gòu)網(wǎng)站每個欄目的信息量應(yīng)當(dāng)合理分配。除了一些特定的內(nèi)容（例如“網(wǎng)站地圖”和“聯(lián)系方式”），所有分支的信息量應(yīng)當(dāng)相對平衡。如果用戶在A欄目看到有20多個下級欄目，但B欄目中卻只有3個，他們肯定會有點頭昏腦脹--你迫使他們?nèi)ニ伎肌盀槭裁磿@樣”一致的重復(fù)性元素如果使用了文本框，那么網(wǎng)站中所有文本框的形式都應(yīng)當(dāng)一致。如果某個圖標(biāo)的尺寸是40*40，那么相類似的圖標(biāo)大小都應(yīng)該差不多。一致和諧的字體和色彩字體和色彩也應(yīng)遵循同樣的標(biāo)準(zhǔn)。你可以為不同的版塊設(shè)置不同的色系，但是如果這個版塊用的是桔紅，那么它所有的頁面都應(yīng)該是桔紅。版塊與版塊之間的差異也應(yīng)該明顯。網(wǎng)站設(shè)計中重復(fù)性(一致性)‘2021/5/928一致，但不一樣需要注意的是,一致性并不是“相似性”。如果太相似，很可能用戶無法區(qū)別彼此之間的不同。例如下面的網(wǎng)頁，圖片之間的顏色、形式過于相似，盡管圖標(biāo)能代表各選項的功能和概念，但用戶一眼看上去無法覺察出差異，圖標(biāo)沒有體現(xiàn)出明確輔助標(biāo)識的作用。網(wǎng)站設(shè)計中重復(fù)性(一致性)‘2021/5/9294對比原則增強頁面的效果和組織性2021/5/930假如一個頁面中的文本采用的都是同樣的字體、同樣的字號、同樣的顏色，做為讀者的你能輕易的區(qū)分出哪里是標(biāo)題，哪里是正文內(nèi)容嗎？所以通常情況下，設(shè)計師會對標(biāo)題采用加大字號、加粗字體、改變字體、更換顏色等方式進行處理以使其區(qū)別于正文內(nèi)容。這就是對比原則的一個表現(xiàn)。沒有對比的頁面，在讀者的眼里就像是平靜的海面，視線可及之處沒有一個焦點；當(dāng)出現(xiàn)了對比，突出了視覺重點，也即意義著平靜的海面上有個小島之類的可以吸引住視覺焦點。對比‘2021/5/931對比要強烈！這是書中一直強調(diào)的一個觀點，其本意應(yīng)該是通過視覺上的強烈差異化來增強頁面的效果，以及強調(diào)元素之間的差異性?？墒沁@個強烈依然涉及到一個度的問題，過于強烈的對比，很有可能導(dǎo)致讀者對于在頁面中處于對比弱的那些元素的忽視。對比‘2021/5/932紙面及網(wǎng)頁這兩種載體有著各自的局限性，在對比的處理上，網(wǎng)頁所受到的局限性會更大。比如在字體的對比上，這一點尤其是在中文網(wǎng)頁上，利用字體進行對比處理的局限性相當(dāng)之大，因為系統(tǒng)默認帶有的中文字體不多，所以很多時候在中文網(wǎng)頁上對于文本的對比處理依然是在字號、加粗以及顏色上面。對比元素可以做為重復(fù)元素來使用，而與親密性原則對元素的歸類組織類似，對比原則除了可以增強視覺效果外，同樣有助于信息的組織。親密性、對齊、重復(fù)、對比，這是四個相輔相成的設(shè)計原則，單一的處理方式并不能給設(shè)計帶來多大的改觀，但當(dāng)同時應(yīng)用這四個原則的時候，雖然不可能說讓設(shè)計變得非常精美，起碼也可以讓讀者在掃視后快速正確的獲取到設(shè)計中所想表達的內(nèi)容。對比‘2021/5/933對比小結(jié)在頁面上增加對比能吸引人的眼球。我們的眼睛喜歡看到對比的事物。如果頁面上放兩個不完全相同的元素（比如有兩種不同字體，或者有兩種不同線寬），它們就不能類似。要實現(xiàn)有效的對比，這兩個元素必須截然不同。根本目的對比的根本目的有兩方面，這兩個方面相輔相成，無法分開。一個目的是增強頁面的效果，如果一個頁面看起來很有意思，往往更有可讀性。另一個目的是有助于信息的組織。讀者應(yīng)當(dāng)能立即了解信息以何種方式組織，以及從一項到另一項的邏輯流程。對比元素不能讓讀者混淆，也不能錯誤地強調(diào)重點‘2021/5/934如何實現(xiàn)可以通過字體選擇（見下一部分）、線寬、顏色、形狀、大小、空間等等來增加對比。增加對比很容易，途徑有很多，這可能是增加視覺效果最有意思也最讓人滿意的方法了。重要的是：對比一定要強烈。要避免的問題不要猶豫。如果你想形成對比，就加大力度。不要將一種粗線與一種更粗的線進行對比。不要將棕色文本與黑色標(biāo)題建立對比。要避免使用兩種或多種類似的字體。如果各個項不完全一樣，干脆讓它們截然不同！對比小結(jié)‘2021/5/935５復(fù)習(xí)實現(xiàn)組織性2021/5/936對比（Contrast）

基本思想是，避免頁面上元素太過相似。如果元素，如字體、顏色、大小、線寬、形狀和空間等不相同，就讓它們截然不同。