好的設(shè)計究竟好在哪里
我們每天都會看到很多各種形式的作品(廣告、APP界面、幻燈片……),當(dāng)這些作品呈現(xiàn)在我們眼前的時候,通常我們比較容易就能分辨出來哪些是好的設(shè)計,哪些是不好的設(shè)計,但我們卻不一定能準(zhǔn)確說出隱藏在背后的邏輯,《寫給大家看的設(shè)計書》這本書就給我們揭示了好的設(shè)計究竟好在哪里。
四大設(shè)計原則
設(shè)計的目的是為了向用戶更好地表達信息,并且將信息以更好地視覺效果呈現(xiàn)出來,書中介紹的四大原則(親密性、對比、對齊、重復(fù))就是為以上目的服務(wù)的,好的設(shè)計往往也就是因為很好的滿足四大原則。
Robin親密性原則是指:將相關(guān)的項組織在一起,移動這些項,使它們的物理位置相互靠近,這樣一來,相關(guān)的項將被看作凝聚為一體的一個組,而不再是一堆彼此無關(guān)的片段。
Robin對齊原則是指:任何元素都不能在頁面上隨意安放。每一項都應(yīng)當(dāng)與頁面上的某個內(nèi)容存在某種視覺聯(lián)系。
Robin重復(fù)原則指出:設(shè)計的某些方面需要在整個作品中重復(fù)。
Robin對比原則指出:頁面上的不同元素之間要有對比效果,達到吸引讀者的對比效果。
信息表達層面,好的設(shè)計會通過視覺來體現(xiàn)信息之間的相關(guān)性、重要性和一致性,以更好地引導(dǎo)用戶的閱讀;視覺效果層面,好的設(shè)計需要整齊有序、能吸引眼球并且具備整體性。
1. 相關(guān)性是指哪些元素更加相關(guān),哪些元素沒那么相關(guān),可以通過控制元素間的距離來管理(親密性原則)
2. 重要性是指對用戶來說哪些信息更重要,可以通過制造視覺上的對比來管理(對比原則)
3. 一致性是指哪些信息在整體上是屬于同一級別/類別等,可以通過為一致的信息設(shè)計相同(相似)的視覺元素來管理(重復(fù)原則)
4. 不同的元素之間可能距離遠近不同,可以通過為不同的元素制造某種對齊來實現(xiàn)即便如此它們也是整齊有序的(對齊原則)
5. 通過制造視覺上的強烈對比可以迅速抓住用戶的眼球(對比原則)
6. 在多頁面的作品中,通過重復(fù)視覺元素來告訴用戶他們是一體的(重復(fù)原則)
四大原則實踐
作者在書中為我們介紹了很多易于掌握的使用技巧,即使沒有任何設(shè)計功底也不妨礙我們實踐它們。
親密性
同一個頁面上通常會擺放很多元素,親密性原則倡導(dǎo)通過物理距離來管理同一個頁面上不同元素之間的關(guān)聯(lián)性,相關(guān)性高的元素應(yīng)該緊挨在一起,相關(guān)性低的元素之間應(yīng)該保持一定的距離。
親密性原則解決的問題是如何將我們需要呈現(xiàn)的信息更有條理(突出相關(guān)性)的展現(xiàn)在用戶面前。
親密性原則實現(xiàn)方法
如果多個項相互之間有很近的親密性,它們就會成為一個視覺單元,而不是多個孤立的元素。
微微瞇起眼睛,統(tǒng)計眼睛停頓的次數(shù)來數(shù)一數(shù)頁面上有多少個元素。如果頁面上的項超過3~5個(當(dāng)然,這取決于具體情況),就要看看哪些孤立的元素可以歸在一組建立更近的親密性,使之成為一個視覺單元。
親密性原則要避免的問題
避免一個頁面上有太多孤立的元素。
不要在元素之間留出同樣大小的空白,除非各組同屬于一個子集。
標(biāo)題、子標(biāo)題、圖表標(biāo)題、圖片能否歸入其相關(guān)材料?在這個問題上一定要非常清楚(哪怕只有一點含糊都要盡量避免)。
在有很近親密性的元素之間建立關(guān)系。不同屬一組的元素之間不要建立關(guān)系!如果元素彼此無關(guān),要把它們分開。不要僅僅因為有空白就把元素放在角落或中央。
對齊
頁面上的不同元素之間會因為關(guān)聯(lián)性不同而會有不同的物理距離,對齊原則倡導(dǎo)的是將這些不同元素建立視覺上的某種聯(lián)系,而不是被隨意的擺放,建立這種聯(lián)系的方式就是為元素尋找某種對齊。
對齊性原則解決的問題是如何將要呈現(xiàn)的信息有秩序的展現(xiàn)在用戶面前。
對齊原則實現(xiàn)方法
1. 不建議初學(xué)者輕易使用居中對齊
如果文本為左對齊或右對齊,讓文本聯(lián)系在一起的那條看不見的線會更明確,因為現(xiàn)在有一條“硬”的豎邊。這就使左對齊和右對齊的文本看起來外觀更清晰、效果更分明。
居中對齊會創(chuàng)建一種更正式、更穩(wěn)重的外觀,這種外觀顯得更為中規(guī)中矩,但通常也很乏味。請注意你喜歡的那些設(shè)計。我敢保證,大多數(shù)看來精巧的設(shè)計都沒有采用居中對齊。我知道,作為一個初學(xué)者,要完全摒棄居中對齊會很難,但你必須從一開始就強制自己避開它。
在得到更多培訓(xùn)之前,一定要堅持一個原則:只使用一種對齊方式。頁面上只使用一種文本對齊,所有文本都左對齊,或右對齊,或者全部居中。
明顯而有意為之的居中對齊效果最好。當(dāng)對齊經(jīng)過精心策劃而又明確時,你就可以對其他元素充分發(fā)揮創(chuàng)造力,作品看起來仍然顯得匠心獨具,而這些元素也不會像是莫名其妙地散落在頁面上一樣。
2. 盡量只使用一種對齊方式
在得到更多培訓(xùn)之前,一定要堅持一個原則:只使用一種對齊方式。頁面上只使用一種文本對齊,所有文本都左對齊,或右對齊,或者全部居中。
如果不同文本塊使用了不同的對齊方式,一定要確保這些文本塊之間以某種方式對齊。
3. 頁面上每一個項都應(yīng)該與其他項存在某種對齊
在頁面上放其他項時,一定要確保每一項都與頁面上的其他項存在某種對齊。如果文本行水平擺放,則按其基線對齊。如果有多個單獨的文本塊,則對齊其左邊界或右邊界。如果有圖片元素,將其邊界與頁面的其他邊界對齊。
4. 標(biāo)題和正文對齊的雷區(qū)
絕對不要在左對齊的正文或縮進的文本上方將標(biāo)題居中。如果文本沒有明確的左邊界和右邊界,就無法區(qū)分標(biāo)題是否確實居中,看起來它只是懸掛著而已。
應(yīng)當(dāng)找一條明確的對齊線,并用它來對齊。如果有一張照片或圖片(有明確的直邊),可以沿著照片的這個直邊與文本的平邊對齊,如下圖所示。
重復(fù)
重復(fù)原則倡導(dǎo)通過通過視覺元素的重復(fù)來更好的組織信息(通常針對單頁作品)和增強作品的整體性(主要是對多頁作品)。
重復(fù)的實現(xiàn)方法
1. 從標(biāo)題和子標(biāo)題入手
要創(chuàng)建重復(fù)元素,可以從標(biāo)題和子標(biāo)題入手,這是一個很好的起點,因為這些元素很可能在某個方面是一致的。
2. 其他
可以專門做一個圖片設(shè)計,并且將某些一致元素(如標(biāo)題)作為這個圖片設(shè)計的一部分。
重復(fù)性元素并不必須是圖形或者剪貼畫。可以是空白、線、字體、對齊,或者任何你有意重復(fù)的東西。
看看有沒有可能增加一些純粹為建立重復(fù)而設(shè)計的元素。是不是有一個編號項列表?可不可以使用另外一種字體或逆序數(shù)字,然后對出版物中的每一個編號列表都重復(fù)同樣的處理?最初,可以只是找出現(xiàn)有的重復(fù),然后將其加強。熟悉了這種思想之后,再開始創(chuàng)建新的重復(fù)元素,來增強設(shè)計的效果并提高信息的清晰度。
要避免太多地重復(fù)一個元素,重復(fù)太多會讓人討厭。
對比
頁面上的不同元素會存在關(guān)聯(lián)性和差異性,對比原則倡導(dǎo)通過視覺元素的對比來表現(xiàn)這種差異性
對比原則要解決的問題是如何更好的吸引用戶的眼球以及如何更好的為用戶展現(xiàn)不同信息的重要程度。
對齊原則的實現(xiàn)方法
1. 大膽對比
如果兩個元素雖然不同,但是區(qū)別不大,這時候就不是對比了,而是沖突。不應(yīng)該用12磅大小的字體與14磅大小的字體進行對比。
不要害怕讓一些項很小,這樣不僅可以與更大的項形成對比,還能留出更多的空白!一旦讀者把握住重點,只要他們感興趣,自然會去讀這些較小的文字。如果他們不感興趣,不論你把這些文字設(shè)置得多大他們也不會去讀。
2. 常用的對比方式
要增加有意思的對比,最容易的方法就是實現(xiàn)字體對比(這也是本書第二部分的重點)。不過不要忘記,還可以利用線、顏色、元素之間的間隔、材質(zhì)等形成對比。
小結(jié)
作者總結(jié)了好設(shè)計遵循的四大基本原則,它們可以幫助我們更好地提升自己的設(shè)計水平,比如制作簡歷、PPT,甚至是寫一篇文章(本文貼的圖基本都沒做好對齊……);它們也可以幫我們更客觀的去評價我們見到的作品,而不只是簡單的說出自己的主管感受。
另外,作者在介紹理論的同時給出了很多具體的例子幫助讀者更好地理解四大原則,非常值得一讀。
顏色和字體
顏色和字體是設(shè)計作品中最常使用的元素之一,作者同樣深入淺出的介紹了如何為作品選擇合適的顏色組合和字體組合,顏色和字體的讀書筆記: