《寫給你們看的設計書》讀書筆記

1、設計原則

4大基本原則

1. 親密性（Proximity）

含義：將相關的項組織在一塊兒，成爲一個視覺單元，而不是孤立的元素
做用：使信息更有組織性和條理性，減小混亂，使結構更加清晰，更容易閱讀。
實現：

- 要注意視線的移動，從哪裏開始，沿着怎麼樣的路徑，在哪裏結束。
- 分析哪些信息在邏輯上存在關聯，哪些信息須要強調，經過分組來突出這些信息
- 利用元素的緊密程度反映元素之間的關係
- 若是頁面上的元素超過3~5個，就要考慮哪些穀粒多元素能夠創建更近的親密性，使之成爲一個視覺單元

避免：

- 避免一個頁面有太多的孤立元素
- 不要在元素之間留出一樣大小的空白
- 不要由於有空白就把元素放在角落或中央

1. 對齊（Alignment）

含義：任何元素都不能隨意擺放，每一個元素都應當與頁面另外一個元素有某種視覺聯繫，
做用：創建一種清晰、精巧並且清爽的外觀，使頁面統一而有條理，給人一種平靜、安全的感受。
實現：

- 找一條明確的對齊線，並堅持以它爲基準。
- 若是文本行水平擺放，則按其基線對齊；若是有多個單獨的文本塊，則對齊其左邊界或右邊界；圖片元素與頁面的其餘的邊界對齊
- 只要是有意爲之，能夠大膽乾脆的打破對齊，前提是打破規則以前必須清楚規則是什麼

避免：

- 避免同時使用多種對齊方式。
- 減小居中對齊（正式、穩重，但過於常規，偏於乏味）

1. 重複（Repetition）

含義：設計中的視覺要素要在整個做品中重複出現（顏色、形狀、材質、空間關係、空白、字體、線寬、大小和圖片等）
做用：增長條理性，增強統一性，加強視覺效果。重複是一種深思熟慮的設計決策，能夠爲做品帶來一種專業性和權威性。
實現：

- 若是那個元素引發了你的興趣，就能夠拿它用做重複元素。
- 使用重複原則時候，能夠將一個元素從如今的設計中抽取出來，並根據這個元素建立一個新設計
- 能夠添加一些純粹爲創建重複而設計的元素（編號列表、字體、線條等）
-

避免：

- 重複的項並不必定徹底相同，只是存在明確關聯的對象
- 避免太多的重複一個元素，要注意對比的價值

1. 對比（Contrast）

含義：頁面上的不一樣元素之間要有對比效果（字體、顏色、間隔、大小、材質等），在設計原則中，對比效果最爲顯著。
做用：加強頁面的效果，有助於信息的組織
實現：

- 將關鍵短語設爲粗體
- 要實現有效的對比，兩個元素必然大相徑庭
- 對比必定要強烈

避免：

- 對比元素不能讓讀者混淆，也不能錯誤地強調重點
- 不要猶豫，加大力度，元素之間對比要大相徑庭

顏色運用

1. 色輪的運用

   • 三原色： 紅 黃 藍（沒法建立的顏色，色輪的基礎）
   • 三間色：將色輪上相鄰的顏色燈亮混合獲得的顏色。（紅 橙 黃 綠 藍 紫）
   • 第三色：將色輪剩下的空白兩邊的顏色繼續等量混合獲得的顏色
   • 互補色：色輪上相對的原色（使用時一種做爲主色，另外一種用於強調）

   • 三色組：彼此等距的三種顏色會造成一個讓人愉悅的三色組。

     1. 基色三色組：紅黃藍，兒童產品多采用這組顏色組合
     2. 間色三色組：綠橙紫，讓人感受愉悅的色彩組合
     3. 全部的三色組的顏色都有基礎色使其相互鏈接，因此看上去很是協
   • 分列式互補三色組：從色輪一邊選擇一個顏色，而後找出對面互補色兩側的顏色獲得的組合。這樣的組合會有一種更加細緻的顏色邊界。
   • 相似色：色輪上擁有相同基礎色而彼此相鄰的顏色，協調而醒目。

2. 暗色和亮色

   • 色調：色輪上的12中純色
   • 暗色：向色調中添加黑色
   • 亮色：向色調中添加白色
   • 單色：由一種色調及其相應的多種亮色和暗色組成
   • 暗色和亮色的組合：互補色能夠採用對應色調的亮色和暗色，這樣能夠極大地豐富選擇，而且能夠放心這些色彩的協調性（紅黃藍沒法擺脫幼稚ID感受，紅色和綠色會讓人更多地聯想到聖誕節）

3. 暖色和冷色

   • 暖色：黃色或黃色，趨進型的顏色，少許的顏色變能夠產生強烈的效果
   • 冷色：藍色，後退型的顏色，適合作背景色
   • 暖色和冷色組合，少用暖色，多用冷色，才能產生有效而明顯的對比。

4. CMYK

   • Cyan（藍綠色、青色）、Magenta（洋紅色）、Yellow、Key
   • 全部的印刷品都是使用CMYK 模型印刷的

5. RGB

   • Red、Green、Blue
   • 計算機顯示器、手機、電視上顯示的是 RGB 顏色
   • 組成 RGB 的有色光束不是從任何物理物理反射出來的，而是直接從顯示器傳入人眼的光。

提示和技巧

1. 去掉一切非必要的信息，如「電話」、「郵箱」、「網址」之類的詞
2. 圖像通常不須要邊框
3. 建立一箇中心點，在頁面放一個很大、有趣並且明顯的東西
4. 使用有對比的子標題
5. 字母不要全大寫
6. 多段落文本第一段不用縮進，後面的段落縮進1em，段落之間要麼有額外的空間，要麼有縮進，但不要二者都有。
7. 不要使用 Helvetica/Arial
8. 不要在文本的最後一行留下一個單詞，甚至是一個單詞的一部分（使用鏈接符號）
9. 跟隨在有樣式的文字後的標點應該是一樣的樣式（如：加粗文字後的冒號也應該加粗）

10. 括號中的標點：

    • 若是括號中的文字是整個句子的一部分，那麼標點就應該在括號以外（就像這裏的例子同樣）。
    • 若是括號內的文字是一個完整單獨的句子，標點應該出如今括號內。（這就是一個標點出如今括號內的例子。）

2、字體設計

字體的基本規則

標點後面一個空格、引號、撇號、鏈接號、特殊符號、重音符號、大寫字母、下劃線、字距調整、寡婦和孤兒

字體（與人生）

1. 協調：頁面上全部的元素採用一樣性質的字體。（平和正式）
2. 衝突：頁面上設置了多個相似的字體，不徹底相同但也不徹底不一樣。

3. 對比：建立協調和製造衝突都至關容易，不過不受歡迎，產生對比則很是有趣。

   • 對比的方式：大小、粗細、結構、形狀、方向、顏色

字體類別

1. Oldstyle（舊式體）：基於手寫體建立的，有襯線（小寫字母的襯線有固定傾斜的角度）、過渡（從粗到細的變化）和強調線（在曲線筆劃最細的部分畫的對角線）。
2. Modern（現代體）：再也不遵循手中拿筆的筆跡，襯線水平，再也不傾斜，結構嚴格，筆劃中又劇烈的粗細過渡和對比。效果醒目而震撼，可是在顯示大量文本時，會顯得「眩目」。
3. Slab serif（粗襯線體）：將字體加粗，字體的粗細過渡很小甚至沒有。能夠提供很好的閱讀性，適用於顯示大量文本，外觀間接直接，常在兒童圖書中使用。
4. Sans serif（無襯線體）：sans 在法語中含義是「沒有」。筆劃末端沒有襯線，字體的粗細幾乎是單一的。
5. Script（手寫體）：讓人印象深入，可是要少用。
6. Decorative（花體）：其餘的奇怪字體，會傳達鮮明的情緒，使用要有限制。

字體對比

1. 爲了有效使用大小對比，以爲不要保守，大小相差很少的字體只會形成衝突。
2. 字體大小對比不是讓字體變得很大，而是要求有對比。即便是在一張很大的空白頁中放一行很小的字體，也是一種明顯的對比。
3. 儘可能不要所有用大寫，大寫文本比小寫寬度大不少，並且可讀性下降。
4. 襯線體和無襯線體的對比（大小、結構），不要試圖結合兩種類似的無襯線體。
5. 佈局中方向上的對比：水平方向使用擴展字體，垂直方向使用高字體。
6. 字體顏色的對比：暖色、冷色、不一樣程度的黑色。

3、其餘

設計的過程

1. 從中心點開始。肯定但願讀者最早看到什麼。
2. 將信息分組。經過組之間的靠近與否（親密性）來顯示這些關係。
3. 在組織文本和圖片時，要創建並維護明確的對對齊。
4. 建立重複，或者找出能夠重複的項。
5. 創建對比，吸引讀者的視線。

本文由博客一文多發平臺 OpenWrite 發佈！