Huli's Blog

Learning by sharing

Lidemy 鋰學院是一個為初學者而生的線上程式課程平台,希望能以淺顯易懂的教學,帶領初學者更快速地入門程式設計。你可以直接到網站註冊,或者是追蹤 Lidemy 的粉絲專頁,就能搶先得知課程的最新消息

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

| Comments

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

替視覺設計「動線」

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

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

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

完形心理學的視覺法則

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

為你的表格文件適當的上色

  1. 上色不要太花俏,雜亂
  2. 在每頁開頭都要擺上欄位的資訊
  3. 有搜尋功能

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

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

我和你有點不一樣:對色盲者的體貼設計

除了顏色以外,還可以增加

  1. 形狀
  2. 明度對比高
  3. 材質

低解析度的人類視網膜?

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

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

12色相色環:
3主色:紅黃藍
3二次色:橘(紅黃)、紫(紅藍)、綠(黃藍)
6三次色:其他的

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

文章有附一些圖可以參考

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

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

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

色域廣不一定比較好

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

封閉性:看不見卻很重要的虛擬曲線

視覺上我們會將連續的點或是虛線視為一條線段(例如說時鐘)

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

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

  1. 顏色
  2. 線段方向(例如說斜線)
  3. 大小
  4. 運動

明度搭配對於資訊顯示的影響

黑底白字最能凸顯文字
明度的搭配很重要

改變盲視:什麼!有東西改變了嗎?

要動一下才能讓使用者知道有東西變了

淺談網站的主要色調應用

重點就是這張圖:


(來源:上面那個連結)

淺談色彩學:人性化的 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(強調色)

淺談色彩學:同一色系中的變化

利用HSB或是繪圖軟體來幫助取得相似的顏色

美麗的輻射圖表呈現方式

這篇幾乎都是圖表比較重要,點進去看吧

淺談色彩學:以紅色為主的色彩配色

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

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

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

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

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

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

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

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

光的三原色與視神經的對比傳遞

有點深入看不太懂,改天再仔細研究一下XD

錦上添加小紅花:讓圖示穿上顏色說說話

除了圖示,色彩也很重要
|是開,O是關,開關的符號則是由這兩者組合而成

無邊框按鈕的優缺點

那個動態專利超酷的!!!

Comments

comments powered by Disqus