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

好的設(shè)計究竟好在哪里

我們每天都會看到很多各種形式的作品(廣告、APP界面淹魄、幻燈片……),當(dāng)這些作品呈現(xiàn)在我們眼前的時候甲锡,通常我們比較容易就能分辨出來哪些是好的設(shè)計,哪些是不好的設(shè)計虎韵,但我們卻不一定能準(zhǔn)確說出隱藏在背后的邏輯,《寫給大家看的設(shè)計書》這本書就給我們揭示了好的設(shè)計究竟好在哪里缸废。

四大設(shè)計原則

設(shè)計的目的是為了向用戶更好地表達(dá)信息包蓝,并且將信息以更好地視覺效果呈現(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對比原則指出:頁面上的不同元素之間要有對比效果瓣赂,達(dá)到吸引讀者的對比效果。

信息表達(dá)層面片拍,好的設(shè)計會通過視覺來體現(xiàn)信息之間的相關(guān)性煌集、重要性和一致性,以更好地引導(dǎo)用戶的閱讀捌省;視覺效果層面苫纤,好的設(shè)計需要整齊有序、能吸引眼球并且具備整體性纲缓。

1. 相關(guān)性是指哪些元素更加相關(guān)卷拘,哪些元素沒那么相關(guān),可以通過控制元素間的距離來管理(親密性原則

2. 重要性是指對用戶來說哪些信息更重要祝高,可以通過制造視覺上的對比來管理(對比原則

3. 一致性是指哪些信息在整體上是屬于同一級別/類別等栗弟,可以通過為一致的信息設(shè)計相同(相似)的視覺元素來管理(重復(fù)原則

4. 不同的元素之間可能距離遠(yuǎn)近不同,可以通過為不同的元素制造某種對齊來實現(xiàn)即便如此它們也是整齊有序的(對齊原則

5. 通過制造視覺上的強(qiáng)烈對比可以迅速抓住用戶的眼球(對比原則

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é)者叠赐,要完全摒棄居中對齊會很難,但你必須從一開始就強(qiáng)制自己避開它屡江。

在得到更多培訓(xùn)之前芭概,一定要堅持一個原則:只使用一種對齊方式。頁面上只使用一種文本對齊惩嘉,所有文本都左對齊罢洲,或右對齊,或者全部居中文黎。

明顯而有意為之的居中對齊效果最好惹苗。當(dāng)對齊經(jīng)過精心策劃而又明確時,你就可以對其他元素充分發(fā)揮創(chuàng)造力耸峭,作品看起來仍然顯得匠心獨具桩蓉,而這些元素也不會像是莫名其妙地散落在頁面上一樣。

2. 盡量只使用一種對齊方式

在得到更多培訓(xùn)之前劳闹,一定要堅持一個原則:只使用一種對齊方式院究。頁面上只使用一種文本對齊,所有文本都左對齊玷或,或右對齊儡首,或者全部居中片任。

如果不同文本塊使用了不同的對齊方式偏友,一定要確保這些文本塊之間以某種方式對齊。

3. 頁面上每一個項都應(yīng)該與其他項存在某種對齊

在頁面上放其他項時对供,一定要確保每一項都與頁面上的其他項存在某種對齊位他。如果文本行水平擺放,則按其基線對齊产场。如果有多個單獨的文本塊鹅髓,則對齊其左邊界或右邊界。如果有圖片元素京景,將其邊界與頁面的其他邊界對齊窿冯。

4. 標(biāo)題和正文對齊的雷區(qū)

絕對不要在左對齊的正文或縮進(jìn)的文本上方將標(biāo)題居中。如果文本沒有明確的左邊界和右邊界确徙,就無法區(qū)分標(biāo)題是否確實居中醒串,看起來它只是懸掛著而已执桌。

應(yīng)當(dāng)找一條明確的對齊線,并用它來對齊芜赌。如果有一張照片或圖片(有明確的直邊)仰挣,可以沿著照片的這個直邊與文本的平邊對齊,如下圖所示缠沈。

重復(fù)

重復(fù)原則倡導(dǎo)通過通過視覺元素的重復(fù)來更好的組織信息(通常針對單頁作品)和增強(qiáng)作品的整體性(主要是對多頁作品)膘壶。

重復(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ù),然后將其加強(qiáng)粱檀。熟悉了這種思想之后洲敢,再開始創(chuàng)建新的重復(fù)元素,來增強(qiáng)設(shè)計的效果并提高信息的清晰度茄蚯。

要避免太多地重復(fù)一個元素压彭,重復(fù)太多會讓人討厭。

對比

頁面上的不同元素會存在關(guān)聯(lián)性和差異性渗常,對比原則倡導(dǎo)通過視覺元素的對比來表現(xiàn)這種差異性

對比原則要解決的問題是如何更好的吸引用戶的眼球以及如何更好的為用戶展現(xiàn)不同信息的重要程度壮不。

對齊原則的實現(xiàn)方法

1. 大膽對比

如果兩個元素雖然不同,但是區(qū)別不大皱碘,這時候就不是對比了询一,而是沖突。不應(yīng)該用12磅大小的字體與14磅大小的字體進(jìn)行對比。

不要害怕讓一些項很小健蕊,這樣不僅可以與更大的項形成對比缓醋,還能留出更多的空白!一旦讀者把握住重點绊诲,只要他們感興趣送粱,自然會去讀這些較小的文字。如果他們不感興趣掂之,不論你把這些文字設(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)系作者
  • 序言:七十年代末畦戒,一起剝皮案震驚了整個濱河市籍嘹,隨后出現(xiàn)的幾起案子闪盔,更是在濱河造成了極大的恐慌,老刑警劉巖辱士,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異听绳,居然都是意外死亡颂碘,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來头岔,“玉大人塔拳,你說我怎么就攤上這事∠靠ⅲ” “怎么了靠抑?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長适掰。 經(jīng)常有香客問我颂碧,道長,這世上最難降的妖魔是什么类浪? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任载城,我火速辦了婚禮,結(jié)果婚禮上费就,老公的妹妹穿的比我還像新娘诉瓦。我一直安慰自己,他們只是感情好力细,可當(dāng)我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布睬澡。 她就那樣靜靜地躺著,像睡著了一般眠蚂。 火紅的嫁衣襯著肌膚如雪猴贰。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天河狐,我揣著相機(jī)與錄音米绕,去河邊找鬼。 笑死馋艺,一個胖子當(dāng)著我的面吹牛栅干,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播捐祠,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼碱鳞,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了踱蛀?” 一聲冷哼從身側(cè)響起窿给,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎率拒,沒想到半個月后崩泡,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡猬膨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年角撞,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡谒所,死狀恐怖热康,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情劣领,我是刑警寧澤姐军,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站尖淘,受9級特大地震影響奕锌,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜德澈,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一歇攻、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧梆造,春花似錦缴守、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至忽肛,卻和暖如春村砂,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背屹逛。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工础废, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人罕模。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓评腺,卻偏偏與公主長得像,于是被迫代替她去往敵國和親淑掌。 傳聞我的和親對象是個殘疾皇子蒿讥,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,901評論 2 345

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