[筆記] Desiring Clicks - 色彩與視覺

最近發現的一個blog
Desiring Clicks
我覺得裡面的文章都滿不錯的，所以想全部讀完，想說順便來做個筆記
這篇主要是針對裡面的：色彩與視覺這個類別
ps.【資訊視覺化】這一系列的專題沒有包含在裡面

替視覺設計「動線」

視覺的動線很重要，例如說

在一列向左對齊的清單上，數字和清單文字之間的空白就成為了引導使用者的視覺動線。這種無形中出現的白色「線條」，源自於視覺完形理論中的「封閉性」：人們會傾向把一序列連續的物體是為一個封閉的形狀。因此，在一般的情況下，清單應該由文字的開頭對齊，而不是由數字對齊。

所以在網頁的版面編排、設計上面，要注重動線的安排
例如說讓使用者從上到下順序的看下來，而不要跳來跳去，或是按鈕突然從靠右對齊跑到中間

完形心理學的視覺法則

封閉性（Law of Closure：點跟虛線圍成的圓形都會被看成是一個封閉的區域
相似性（Law of Similarity）：把相似的事物看成一塊，例如說正方形一塊，圓形一塊
接近性（Law of Proximity）：像是按鈕組的概念，接近性權重可能會大於相似性
連續性（Law of Symmetry）：連續的概念

先選擇對的顏色，而不是喜歡的顏色

顏色的明度很重要，因為跟底色放在一起的時候就會凸顯出差異
例如說大家都知道白底黃字看的很不清楚，因為黃色明度很高
白色 > 黃色 > 橘色、綠色 > 紅色、藍色 > 紫色 > 黑色
找明度差異高的，就可以很好的凸顯出對比

低解析度的人類視網膜？

我們一次能注意到的地方很小，要掃描完整個畫面就像是用水彩筆來幫整面牆上色一樣，是非常辛苦而且困難的一件事。

淺談色彩學：從調和色出發

12色相色環：
3主色：紅黃藍
3二次色：橘（紅黃）、紫（紅藍）、綠（黃藍）
6三次色：其他的

依據二次色以及三次色帶有共同色系的性質，在色相環上相鄰的色彩代表這些顏色擁有共同的色彩，例如紫色以及綠色的共有色是藍色，橘色以及綠色的共有色為黃色，在配色的使用上都具有比較調和的性質。

文章有附一些圖可以參考

淺談色彩學：加入明度的色彩體系

可以加入明度，色環就變得更多樣化

類比配色：產生令人感覺愉悅、低對比的和諧感
互補色：互補配色容易表現出力量感、讓人感覺具有活力的活潑感覺。通常在互補色的配色應用上不會採取等量比例﹔一片綠中點綴一點點紅色會讓整個畫面更有力量：
單色色調配色：容易帶給人精緻、階調感。由於缺乏色相的變化，因此很少被單獨使用

色域廣不一定比較好

這篇比較深入難懂一點XD
筆記幾個關鍵字：色彩空間（Color Space）、 sRGB 與 adobeRGB

大家來找碴：淺談視覺搜尋系統

從一堆X裡面挑出O超級無敵容易
容易被辨識的基本特徵：

顏色
線段方向（例如說斜線）
大小
運動

淺談色彩學：人性化的 HSB 色彩空間

在科學的分類上，我們簡單的將 RGB 稱之為色光的三原色，而 CMYK 則稱為印刷的四原色（或將紅、黃、藍稱為色彩三原色，後述）

CMYK 被稱為印刷四原色，由於顏料的特性剛好和光線相反，顏料是吸收光線，而不是增強光線。因此顏料的三原色必須是可以個別吸收 R、G、B 的顏色，那就是它們的補色：青（Cyan ）、洋紅（Magenta）以及黃色（Yellow），在印刷上我們已以濃度 0~100% 來表示。但由於現實生活中，完美無雜質的顏料是不存在的，因此即使混合三種顏色也無法得到純粹的黑色，因此在印刷中加入了黑色（Black），組成 CMYK 四個印刷用的色彩，在印刷時依照順序一層層的疊印在紙張上，形成我們在印刷品上看到的色彩

HSV （有時也稱作 HSB）為色相（Hue）、飽和度（Saturation）以及色調（Value ）所組成，稱呼成 HSB 的時候的 B 指的是亮度（Brightness）

網頁圖片整理術：CSS Sprite的應用

一種在遊戲裡面很常見的應用方式
就是把一個角色的很多動作的小圖合在一張大圖，可以節省空間
文章裡面有附一些輔助的工具可以使用

【魔鬼藏在細節裡】互動按鈕大小事

細節很重要
這點我也滿有深刻體會的，通常專家跟一般人的差異就在於細節
細節有時候真的影響很多

淺談色彩學：對比色配色

互補色：紅綠、黃紫、藍橙
互補色分配比例原則：7:3、8:2
或是70（底色）、25（主色）、5（強調色）

紅色明度很低，帶給人熱情、主動、活潑、溫暖的感覺
除此之外也代表著警告的意思（紅燈、危險！、滅火器）
與綠色搭配：比例要對，不能太過於相近，例子像是聖誕節
與黃色搭配：屬於鄰近色，而且紅色明度低，黃色明度高，搭配起來相當適合。
與藍色搭配：高彩度、低明度，為避免太過黯淡，宜加入白色調和
與白色搭配：紅色與白色的搭配最容易凸顯出彼此的特性
與黑色搭配：紅色與黑色的搭配相對沈重，也更容易讓人察覺人類文化上差異的感覺。（東方：福氣；西方：魔鬼）

介面上的微小細節：動畫效果的呈現

動畫的幾個原則，詳細看裡面那個影片就會懂了

淺談色彩學：以黃色為主的色彩配色

黃色屬於色彩三原色之一（消減型），是所有色彩中最明亮的色彩。作為暖色調的基準色彩之一，黃色給人快樂、輕快、通透、輝煌、充滿希望與活力的色彩印象。但也由於黃色的明度相當高，黃色很容易受到其他顏色的影響，色相稍微偏紅、綠一點就會被覺得是橙色或綠色，明度降低時就容易被認為是土色，所以某方面而言，黃色是一個相當難以掌握的色彩。

黃色在人的淺意識中具有暫停、注意的意思。像是交通標示、安全島的塗色、減速板、警告標線、火車塗裝等等皆多採用黃色（與黑色相間）來提醒人們的注意力。

與紫色：互補色，紫色帶有迷幻神祕感，可產生很強的視覺強度
與紅色：同為暖色，要小心會不會太過於溫暖炎熱，實務上常使用金色
與綠色：調和性很高，適合營造春天與自然的原野視覺效果
與藍色：容易營造出高彩度、活潑的感覺。
與黑白：

黃色與黑白搭配的組合是個很流行的配色方案。由於黃色明度接近白色的緣故，因此很少出現搭配白色單獨使用，在大多數狀況下，黃色與與白色、黑色這兩個無彩度的顏色可以搭配得相當好。在另一個角度來看，色彩明亮度、視覺強烈的黃色可以很有效的點亮單純黑與白的組合的場合。

Huli's Blog

Learning by sharing