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

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

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

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

對(duì)齊（Alignment）

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

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

親密性（Proximity）

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

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

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

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

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

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