《頁面設(shè)計原則》

1、只需使用鼠標(biāo)左鍵鼠標(biāo)左鍵操作課件哦！課件的定位課件的定位有些人需要設(shè)計頁面（比如學(xué)生需要設(shè)計社團(tuán)活動的海報和宣傳單；教師需要設(shè)計PPT），但完全沒有設(shè)計背景，或者在設(shè)計方面沒有經(jīng)過正規(guī)的培訓(xùn)，這個課件正是為他們而做。課件的定位課件的定位有些人需要設(shè)計頁面（比如學(xué)生需要設(shè)計社團(tuán)活動的海報和宣傳單；教師需要設(shè)計PPT），但完全沒有設(shè)計背景，或者在設(shè)計方面沒有經(jīng)過正規(guī)的培訓(xùn)，這個課件正是為他們而做。學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)本課件里將要介紹的四大設(shè)計原則：幾乎每一個精良的設(shè)計中都會用到。這些原則非常明確而且很具體。我相信，如果遵循了這些基本原則，你的設(shè)計看上去會更專業(yè)、更有條理、更統(tǒng)一，也更有趣。親密性對齊重

2、復(fù)對比參考文獻(xiàn)參考文獻(xiàn)版式設(shè)計原理 佐佐木剛士寫給大家看的設(shè)計書 Robin Williams說明課件的定位課件的定位有些人需要設(shè)計頁面（比如學(xué)生需要設(shè)計社團(tuán)活動的海報和宣傳單；教師需要設(shè)計PPT），但完全沒有設(shè)計背景，或者在設(shè)計方面沒有經(jīng)過正規(guī)的培訓(xùn)，這個課件正是為他們而做。課件的定位課件的定位有些人需要設(shè)計頁面（比如學(xué)生需要設(shè)計社團(tuán)活動的海報和宣傳單；教師需要設(shè)計PPT），但完全沒有設(shè)計背景，或者在設(shè)計方面沒有經(jīng)過正規(guī)的培訓(xùn)，這個課件正是為他們而做。學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)本課件里將要介紹的四大設(shè)計原則：幾乎每一個精良的設(shè)計中都會用到。這些原則非常明確而且很具體。我相信，如果遵循了這些基本原則，你

3、的設(shè)計看上去會更專業(yè)、更有條理、更統(tǒng)一，也更有趣。親密性對齊重復(fù)對比參考文獻(xiàn)參考文獻(xiàn)版式設(shè)計原理 佐佐木剛士寫給大家看的設(shè)計書 Robin Williams說明彼此相關(guān)的項應(yīng)當(dāng)靠近，歸組在一起。親密性親密性每個元素都應(yīng)與頁面上另一個元素有某種視覺聯(lián)系。對齊對齊設(shè)計中的視覺要素在整個作品中重復(fù)出現(xiàn)。重復(fù)重復(fù)避免頁面上元素太過相似。對比對比親密性新手的問題親密性原則例子一例子二小結(jié)要避免的問題親密性新手的問題親密性原則例子一例子二小結(jié)要避免的問題新手的問題新手的問題在新手設(shè)計中，單詞、短語和圖片四處分布，連角落也不放過，它們占據(jù)了每一處空間，以至于根本沒有任何留白?？瓷先ニ坪跏窃O(shè)計者們不敢留有空白

4、。不過要知道，如果一個設(shè)計中如果一個設(shè)計中充斥這太多的內(nèi)容，這個頁面會顯充斥這太多的內(nèi)容，這個頁面會顯得雜亂無章得雜亂無章，讀者也無法從中很快看到所需的信息。親密性親密性原則親密性原則親密性原則是指：親密性原則是指：將相關(guān)的項組織在一起，移動這些項，使他們的物理位置相互靠近，這樣一來，相關(guān)的項將被看作凝聚為一體的一個組，而不再是一堆彼此無關(guān)的片段。也就是說，元素之間距離的遠(yuǎn)近，也就是它們關(guān)系的遠(yuǎn)近。新手的問題親密性原則例子一例子二小結(jié)要避免的問題親密性一個簡單的例子一個簡單的例子看看下面兩個顏色列表，感覺有何不同？兩個列表之間的區(qū)別只是：第二個列表后面三個顏色和前面的有比較大的距離。而這個距離

5、讓我們感覺，前面三種顏色和后面三種顏色是不同的。這一眼就能感受到，無需任何提醒。這正反映了親密性的概念：在一個頁面上，物理位置的在一個頁面上，物理位置的接近就意味著存在著關(guān)聯(lián)。接近就意味著存在著關(guān)聯(lián)。顏料土黃檸檬黃桔黃墨綠草綠橄欖綠1顏料土黃檸檬黃桔黃墨綠草綠橄欖綠2新手的問題親密性原則例子一例子二小結(jié)要避免的問題親密性例二例二來看下面兩個名片。一種典型的無視設(shè)計規(guī)則的布局。在這樣小的空間里可以看到五個獨(dú)立的元素。把類似的元素組織為一個單元，馬上會帶來很多變化。首先，頁面會變得跟有條理。其次，你會清楚地知道從那里開始讀信息，什么時候結(jié)束。另外，“空白”也會變得更有組織。鐘偉威鐘偉威設(shè)計愛好者1

6、59xxxx3585潮州韓山師范學(xué)院鐘偉威鐘偉威設(shè)計愛好者159xxxx3585潮州韓山師范學(xué)院新手的問題親密性原則例子一例子二小結(jié)要避免的問題親密性親密性小結(jié)親密性小結(jié)如果多個元素相互之間存在很近的親密性，它們將成為一個視覺單元，而不是多個孤立的元素。彼此相關(guān)的元素應(yīng)當(dāng)歸在一組。親密性的根本目的是實現(xiàn)組織性。盡管其他的原則也能達(dá)到這個目的，不過利用親密性原則，只需簡單地將相關(guān)的元素分在一組建立更近的親密性，就能自動地實現(xiàn)條理性和組織型。親密性根本目的新手的問題親密性原則例子一例子二小結(jié)要避免的問題親密性要避免的問題要避免的問題不要僅僅因為有空白就把元素放在角落或中央。避免一個頁面上有太多的孤

7、立元素。不要在元素之間留出同樣大小的空白，除非各組同屬于一個子集。不同屬一組的元素之間不要建立關(guān)系！如果元素彼此無關(guān)，要把它們分開。新手的問題親密性原則例子一例子二小結(jié)要避免的問題對齊新手的問題對齊原則例子一例子二小結(jié)要避免的問題對齊新手的問題對齊原則例子一例子二小結(jié)要避免的問題新手的問題新手的問題設(shè)計新手往往很草率，只要頁面上剛好有空間，就會把文本和圖片放在那里，而全然不考慮頁面上的其他項。這樣得到的頁面會給人一種雜亂無章的感覺，就像是一個略顯混亂的廚房。對齊原則是指：對齊原則是指：任何元素都不能在頁面上隨意安放。每一項都應(yīng)當(dāng)與頁面上的某個內(nèi)容存在某種視覺關(guān)系。對齊原則要求特別小心，再不能像

8、從前那樣，只要頁面上剛好有空間就把元素隨意“扔”到那里。如果頁面上的一些項是對齊的，這會得到一個更內(nèi)聚的單元。即使對齊的元素物理位置是彼此分離的，但在你眼里，它們之間也會有一條看不見的線把它們連在一起。對齊的方式可分為左對齊、右對齊、居中對齊以及兩端對齊。雖然對齊的方式有多種，但并不意味著可以在一個頁面中使用多種對齊方式，那樣只會讓頁面中的元素顯得凌亂，而在頁面中只使用一種對齊方式將會使頁面統(tǒng)一而有條理。對齊對齊原則對齊原則新手的問題對齊原則例子一例子二小結(jié)要避免的問題對齊一個簡單的例子一個簡單的例子還是親密性原則中所舉例的名片：鐘偉威鐘偉威一個設(shè)計愛好者159xxxx3585潮州韓山師范學(xué)院

9、居中對齊是初學(xué)者最常用的對齊居中對齊是初學(xué)者最常用的對齊，這種對齊看起來很安全，感覺上也很舒服。這種外觀顯得更為中規(guī)中矩，但通常也很乏味。左對齊或右對齊左對齊或右對齊，讓文本聯(lián)系在一起的那條看不見的線會更明確。鐘偉威鐘偉威一個設(shè)計愛好者159xxxx3585潮州韓山師范學(xué)院新手的問題對齊原則例子一例子二小結(jié)要避免的問題對齊例子二例子二當(dāng)然，也不是說絕對不要居中！有時候確實要用到居中對齊：例如，大多數(shù)婚禮都很莊重、很正式，完全可以用居中對齊。但有時讓居中對齊顯得不一樣一些但有時讓居中對齊顯得不一樣一些：You are warmlyInvited to attend!You are WarmlyI

10、nvited to attend!如果想讓文本居中，嘗試一下用另外某種方式使它更加生動。新手的問題對齊原則例子一例子二小結(jié)要避免的問題對齊對齊小結(jié)對齊小結(jié)任何元素都不能在頁面上隨意擺放。每個元素應(yīng)當(dāng)與頁面上的另一個元素存在某種視覺聯(lián)系。對齊的根本目的是使頁面統(tǒng)一而且有條理。其效果類似于把客廳里四處零落的洋娃娃撿起來，并把它們放在一個玩具箱中。對齊根本目的新手的問題對齊原則例子一例子二小結(jié)要避免的問題對齊要避免的問題要避免的問題要避免在頁面上混合使用多種文本對齊方式（也就是說，不要將某些文本居中對齊，而另一些文本右對齊）。另外要著力避免居中對齊，除非你有意識地想要創(chuàng)建一種比較正式、穩(wěn)重的表示。并

11、不是完全杜絕使用居中對齊，有時可以有意地選擇這種對齊方式，但是不要把它作為默認(rèn)選擇。新手的問題對齊原則例子一例子二小結(jié)要避免的問題重復(fù)新手的問題重復(fù)原則例子一例子二小結(jié)要避免的問題重復(fù)新手的問題重復(fù)原則例子一例子二小結(jié)要避免的問題新手的問題新手的問題不同的元素組合之間的關(guān)系可以是平等的、從屬的或是毫不相關(guān)的，這些元素組合之間的關(guān)系在視覺上僅靠親密性原僅靠親密性原則以及對齊原則并不能完整的呈現(xiàn)則以及對齊原則并不能完整的呈現(xiàn)。比如兩個平等關(guān)系的元素組合，雖然通過親密性原則使其之間保持一定的距離，再通過對齊原則使其在一個頁面中看起來彼此相關(guān)，但如果這兩個元素組合使用不同的字體以及字號，我們依然無法從

12、視覺上辨別出它們之間的關(guān)系。重復(fù)重復(fù)原則重復(fù)原則你在之前肯定已經(jīng)用過重復(fù)。例如，所有標(biāo)題都設(shè)置為相同的大小和粗細(xì)，在每一頁地步增加一條半英寸的線，項目中的每個列表都使用相同的項目符號，這些都是重復(fù)的例子。新手通常需要把這個概念更進(jìn)一步，把無意的重復(fù)變?yōu)橛幸猓弥貜?fù)將一系列出版物從視覺上系為一體。新手的問題重復(fù)原則例子一例子二小結(jié)要避免的問題重復(fù)例子一例子一以下是前面討論過的名片。鐘偉威鐘偉威一個設(shè)計愛好者159xxxx3585潮州韓山師范學(xué)院鐘偉威鐘偉威一個設(shè)計愛好者159xxxx3585159xxxx3585潮州韓山師范學(xué)院在右邊的名片，我增加了一個重復(fù)性的元素，即一個明顯的粗字體?？纯催@

13、個例子，注意一下你的眼睛向哪里移動。這是設(shè)計人員常用來控制讀者視線的一種視覺技巧視覺技巧，以使讀者的注意力盡可能長地保持在頁面上。新手的問題重復(fù)原則例子一例子二小結(jié)要避免的問題重復(fù)例子二例子二同樣的頂線、底線、字體及字號。這兩個頁面有太多相同的東西，所以很容易從視覺上快速判斷出這兩張紙是屬于同一本書里的內(nèi)容。這就是重復(fù)的力量！這就是重復(fù)的力量！新手的問題重復(fù)原則例子一例子二小結(jié)要避免的問題重復(fù)重復(fù)小結(jié)重復(fù)小結(jié)設(shè)計中視覺元素的重復(fù)可以將作品中的各個部分連在一起，從而統(tǒng)一并增強(qiáng)整個作品，否則這些部分只是彼此孤立的單元。重復(fù)不僅對只有一頁的作品有用，對于多頁文檔的設(shè)計更顯重要。重復(fù)的目的就是統(tǒng)一，并

14、增強(qiáng)視覺效果。不要低估頁面視覺效果的威力，如果一個作品看起來很有趣，它往往也更容易閱讀。重復(fù)根本目的新手的問題重復(fù)原則例子一例子二小結(jié)要避免的問題重復(fù)要避免的問題要避免的問題要避免太多地重復(fù)一個元素，重復(fù)太多會讓人討厭。要注意對比的價值。太多的重復(fù)將混淆重點！新手的問題重復(fù)原則例子一例子二小結(jié)要避免的問題對比新手的問題對比原則例子小結(jié)要避免的問題對比新手的問題對比原則例子小結(jié)要避免的問題新手的問題新手的問題沒有對比的頁面，在讀者的眼里就像是平靜的海面，視線可及之處沒有一個焦點；當(dāng)出現(xiàn)了對比，突出了視覺重點，也即意義著平靜的海面上有個小島之類的可以吸引住視覺焦點。對比效果很容易實現(xiàn)。如果兩個元素

15、不同，就會產(chǎn)生對比。倘若兩個元素存在某種不同，但差別并不是很大，但差別并不是很大，那么你做出的效果并不是對比，而是那么你做出的效果并不是對比，而是沖突。沖突。對比是為頁面增強(qiáng)視覺效果的最有效的途徑之一，很容易吸引讀者去看一個頁面；另外對比還能在不同元素之間建立一種有組織的層次結(jié)構(gòu)。要記住一個重要規(guī)則：要想實現(xiàn)有效的對比，對比就必須強(qiáng)烈。千萬不要畏畏縮縮。所以，對比原則就是：如果兩個項不完全相同，就應(yīng)當(dāng)使之不同，而且應(yīng)當(dāng)是截然不同?？梢圆捎枚喾N方式產(chǎn)生對比。如：不過千萬不要畏縮。不過千萬不要畏縮。不應(yīng)該用12點大小的字體與14點大小的字體進(jìn)行對比。 大字體與小字體的對比； 典雅的字體與粗體字體產(chǎn)

16、生對比； 細(xì)線與粗線的對比；冷色與暖色的對比； 平滑材質(zhì)與粗糙材質(zhì)的對比； 小圖片與大圖片的對比 對比對比原則對比原則新手的問題對比原則例子小結(jié)要避免的問題對比對比原則對比原則可以采用多種方式產(chǎn)生對比。如：不過千萬不要畏縮。不過千萬不要畏縮。不應(yīng)該用12點大小的字體與14點大小的字體進(jìn)行對比。 大字體與小字體的對比； 典雅的字體與粗體字體產(chǎn)生對比； 細(xì)線與粗線的對比；冷色與暖色的對比； 平滑材質(zhì)與粗糙材質(zhì)的對比； 小圖片與大圖片的對比 新手的問題對比原則例子小結(jié)要避免的問題對比一個簡單的例子一個簡單的例子看下面兩張卡片，哪張更吸引人的注意？字體之間和線之間確實有一點對比，不過對比還是很微弱?，F(xiàn)在字體之間強(qiáng)烈的對比使它更生動，更引人注目。新手的問題對比原則例子小結(jié)要避免的問題對比對比小結(jié)對比小結(jié)在頁面上增加對比能吸引人的眼球。我們的眼睛喜歡看到對比的事物。如果頁面上放兩個不完全相同的元素