《寫給大家看的設(shè)計書》讀書筆記1-四大設(shè)計原則

好的設(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è)計作品中最常使用的元素之一,作者同樣深入淺出的介紹了如何為作品選擇合適的顏色組合和字體組合,顏色和字體的讀書筆記:

1、顏色:《寫給大家看的設(shè)計書》讀書筆記2-顏色搭配

2、字體:《寫給大家看的設(shè)計書》讀書筆記3-字體選擇

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,835評論 6 534
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,676評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,730評論 0 380
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,118評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 71,873評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,266評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,330評論 3 443
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,482評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,036評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,846評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,025評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,575評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,279評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,684評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,953評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,751評論 3 394
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 48,016評論 2 375

推薦閱讀更多精彩內(nèi)容