因為微信公眾號的編輯器，能夠排出比簡書更好的版式。（哪怕簡書有markdown）
你可以選擇看微信公眾號的版本，特別是在手機端。
而且這期寫的是設計，更建議看微信版。
設計小基礎
the best way to understand
what's happening in design projects
is to learn a few basic design concepts
最近在自學設計，有朋友就問，「有沒有什么很基礎的，一看就能明白的可以拿出來分享呀？」
「誒～ 有～」
于是就有了這篇文章。它試圖簡單的說明：
- 設計的「視覺層次」與「間距」
- C.R.A.P 法則
- 基本的顏色知識
視覺層次 - Visual Hierarchy
Visual hierarchy refers to the arrangement or presentation of elements in a way that implies importance.
via **Wikipedia **
通過對元素的安排與展示，指示出重點是什么。
看完上面那句話，你能發現它是被設計過的么？
我在「安排」、「展示」、「重點」三個詞上，用了更深的「顏色」，以暗示，那三個詞是那句話的重點。
為什么要這么做？
因為在碎片化閱讀的時代，我假定讀者并不會逐字逐句的看文章，而更多的是，「溜一眼，找重點」。
所以：
通過對視覺層次的設計，引導觀看者更高效的看到重點。
下面我們來看張圖：
圖中有 3 個元素：
- Headine
- Logo
- Button
你應該能夠發現，Headine 是圖片中最重要的元素。因為：
- 它的顏色最深
- 黑色，與背景的白色，有最鮮明的對比
- 它的「塊頭」最大，而且最粗
- 它被安排在整個圖的正中間
- 那其他 2 個元素，就留給你去思考嘍～
間距 - Spacing
間距對于設計的意義，就像標點符號對于句子一樣。
WHATTHEFUCKAMIREADING? ( You see? )
來看張圖：
你應該能感受到，右邊那部分，有更好的可讀性。因為標題和段落之間，多了一些間隔。
再看一張圖：
請想一想：
- 如果每個按鍵之間靠得太緊 或者 太疏離，你敲擊時的體驗會發生怎樣的變化？
- 如果 delete 離它左邊的按鍵再近一點會發生什么？
- 為什么 delete 右邊的間距要加大？
貼士 - 間距可以帶來：
- 邏輯上的清晰明朗
- 視覺上的易識別、易閱讀
- 更好的使用體驗
四大基本原則 - C.R.A.P
C.R.A.P 指的是：
對比 - Contrast
**重復 **- Repetition
對齊 - Alignment
親密 - Proximity
下面我們來具體看一下。
對比 - Contrast
If two items are not exactly the same, then make them different. Really different.
via **@Robin Williams **
- 既然不相同，那就徹底點！
「對比」對于視覺層次來說非常重要，它用強烈的方式，抓人眼球，力求重點「與眾不同，脫穎而出」。
看圖：
請想一想，是什么在造成對比？
貼士 - 通過對它們的設計可以制造對比：
- 字體
- 顏色
- 大小
- 線寬
- 形狀
- 空間
......
重復 - Repetition
Repeat some aspect of the design throughout the entire piece.
via @Robin Williams
- 設計的某些方面需要在整個作品中重復出現
但請留意，重復的意義，不僅僅是簡單的重復出現；也不僅僅是「重要的事情要說三遍」。重復的意義在于：
- 制造「一致性」
- 而這種一致性，會提升「認知度」
什么意思？舉個簡單的例子：
我相信你能看出圖中的重復，你下意識的也會預期到，下一個章節，你還會看到相同的樣式。你不需要看完文章，就能對文章的架構方式有一定的認知和預估。
另外，要避免太多地重復一個元素：
- 重復太多會讓人覺得枯燥
- 要注重「對比」的價值
又到上圖時間：
- 左邊的叫 Duplication - 復用
- 右邊的才叫 Repetition - 重復
你能發現，右邊那部分，把「重復」和「對比」用在一起了么？
貼士 - 通過對它們的設計可以制造重復：
- 字體
- 顏色
- 大小
- 線寬
- 格式
- 設計要素
- 項目符號
- 空間關系
......
對齊 - Alignment
Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page.
via @Robin Williams
任何元素都不能隨意擺放
每個元素應當與另外一個元素存在某種視覺聯系
「對齊」能帶來整齊與條理。而整潔，是美的基礎。
還是看圖：
你應該能清晰的發現，右邊的部分，更為規整，也更易瀏覽。
但實際上要用好「對齊」，也并不那么容易。
讓我們來看一個「上古時代」的實例：
- 上圖是 2012 年 5 月份，安卓系統的「設置頁面」
- 下圖是 Dropbox 設計師 Morgan Knutson 修改過后的頁面
- 通過對 柵格系統（grid systerm）的重新設計，讓對齊的方式更為簡潔
簡單的來說，你看到了更少用來對齊的輔助線。當這些輔助線去掉之后，你看到的是更簡潔的設計。
下面請腦補一下 iOS 設置頁面的對齊輔助線吧～
親密 - Proximity
You group related items together, move them physically close to each other so that related items are seen as one cohesive group rather than a bunch of unrelated bits.
via @Robin Williams
- 把相關的元素分在同一個組合里
- 而不是讓它們各自散落看上去毫無聯系
看圖啦：
「親密」的操作方式在于「分組」，而「分組」的意義是在于帶來「清晰明確」，從而提高理解「速度」，降低行為「成本」。
講兩個實際例子，你會瞬間明白：
超市里，各種各樣的薯片被放在一起；各種各樣的飲料也被放在一起。你遠遠看到一堆薯片 / 飲料的時候，你就知道，你要找的那個口味的，就在那一堆里面。
反過來看上古時代的菜市場，當魚類、肉類、蔬菜的攤位混在一起的時候，買菜的人往往要花更多的時間提著袋子找尋、穿梭、比價，整個環境就更為臟亂差了。
C.R.A.P 精要
對比 - 突出重點
重復 - 一致性
**對齊 ** - 整潔
親密 - 加速理解
基本的顏色知識
說真的，顏色這一部分，是這篇稿子推遲了很久的主要原因。顏色的知識非常的繁復，我一直在躊躇，到底寫到哪個度，才是合適的。下面我們就來試一試吧。
關于顏色，如果你只能記住一件事情，那么我希望是這一件：
- 顏色是相對的
看圖：
中間那 3 個綠色的正方形，雖然看上去用的是不同的綠色，但真的，是相同的。
所以，不要單獨的去看顏色，特別是在買衣服的時候，要想想搭配。顏色，是相對的。
接下來：
- 顏色可以激發情緒
- 但也要放在不同的文化環境下考量
如果你特別有興趣了解，請看下圖：
但是日常的，我覺得知道下面這些，應該夠了：
- 紅色：激情、愛意、憤怒
- 橙色：能量、幸福、活力
- 黃色：幸福、希望、謊言
- 綠色：新的開始、富裕、自然
- 藍色：平靜、責任、悲傷
- 紫色：創造力、高貴、富有
- 黑色：迷幻、優雅、邪惡
- 灰色：變幻無常、保守、拘謹
- 白色：純潔、干凈、貞潔
- 棕色：自然、安全、虔誠、遲緩
- 米褐色：保守、虔誠、遲緩
- 奶油色：平靜、優雅、純潔
最后要說的是：
- 色輪及基本的搭配
色輪的基礎是黃、紅和藍 3 種顏色，它們被稱為三原色 (primary color)。它們為什么特別？因為，他們混合起來可以得到其他顏色，但沒有辦法通過混合其他顏色來得到純黃、純紅或純藍。
三原色中有個經典搭配，我想你一看就會明白：
接下來就用三原色來調色玩啦～
- 紅色 + 黃色 ＝ 橙色
- 紅色 + 藍色 ＝ 紫色
- 藍色 + 黃色 ＝ 綠色
橙色，紫色，綠色這三個新調出來的顏色，稱為，三間色 / 二次色（secondary color）。接著調下去，我們就會得到剩下的 6 個三次色（tertiary color）。也就得到了色輪（color wheel）的基礎 12 色。
根據色輪，可以得到一些搭配方式，最基本的有下面 3 種：
- 互補 - 色輪中正對面的 2 個顏色
- 類似 - 色輪中相鄰近的 3 個顏色
- 三色組 - 色輪中彼此間隔 120° 的 3 個顏色
這張組圖，從上至下，分別代表了這 3 種方式：
可能有點抽象，舉 3 個現實中「互補」的例子：
- 藍色 & 橙色互補 - 荷蘭隊球衣
黃色 & 紫色互補 - 湖人隊球衣
紅色和綠色互補 - 股市
圖我就不忍心放了...你們懂的...
顏色精要
- 顏色是相對的
- 顏色可以激發情緒
- 通過了解色輪，可以了解顏色搭配
Who is Jarrod Drysale?
- 是啦，文章里沒提到這個人
- 但文章里每個章節，都用了他的圖
- 他寫了 Bootstrapping Design: The design eBook for bootsrappers, founders, and hackers
- 寫這篇文章借鑒了他的寫作架構
Who is Robin Williams?
- 她提出了 C.R.A.P
- 她寫了 *The Non-Designer's Design Book， *即 《寫給大家看的設計書》
- The Non-Designer 是一個系列，即《寫給大家看的XXX》
后記
其實想用區區 2000 多字，把這些基本講到位，我也不知道能不能行。也不知道你看到這里，是否能有一個大概的概念。如果有，就真的太好了。
另外，顏色這一部分，算是沒有寫完的；字體這一部分，也是只字未提。一方面是因為要寫的太多，怕文章過長；一方面也是想給以后留個念想。
What is By?
By的主要邏輯是：Select. By. Someone.
選（Select）某個主題
由（By）某個人
分享有意思的信息
及相關的人物（Someone）
有興趣可以關注 By 的公眾賬號，目前 By 暫時選定的 4 個領域為：
Desgin | Startup | Management | Cool Tools
Bye By～
下期見～
