【梁景紅色彩設計法則】《第一課 配色原理》課時2 - 色彩功能取色法(1)

智造课堂
1粉絲
2 次觀看·2026年9月22日
AI 生成·可能包含錯誤
視頻概述
AI 生成本影片介紹「色彩功能取色法」,指導設計師如何從具象圖像(如草莓冰淇淋)中提取色彩並應用於 UI 設計。透過定義主色、輔色、深淺色及同頻色,將自然圖像的色彩印象轉化為具有層次感與穩定性的界面設計,確保作品在視覺上既直觀又專業。
既然大家對色彩的搭配
以色彩的設計這麼好奇
或者是這麼多的困惑
我今天就跟大家討論一個
討論一個色彩功能取色法
看一看到底如何在設計過程中
通過設計的需求
去尋找合適的顏色
同樣我們來用一個
草莓冰淇淋的這麼樣子的圖片
我們看到這張圖片
有沒有流口水的感覺呢
很顯然它顏色非常的豔麗
然後有紅色有綠色
然後有深有淺的這種整個畫面
給人感覺非常好
這樣子的一個色卡
提出來的顏色
跟剛纔我們看到的
那個草莓冰淇淋的印象
是完全不同的
那麼這樣子的一張色卡
我們怎麼樣子來
以一個什麼樣子的思路提取
並且把它放置到
這樣的一個UI作品之中呢
我們來看看這個思路
所謂色彩功能取色法
到底是以怎樣的思路
怎樣的流程進行的
通常情況下
一個作品肯定是有主色的
因此我們要在
原本的這個色彩圖像之中
或者說色彩印象之中
我們來尋找一個主色
我在這裏藍色的位置
我畫了一個圈
這裏標註了一個紅色的位置
對於草莓冰淇淋
這麼一個概念來講
那麼它最重要的呢
應該說是草莓的顏色了
這個主色怎麼選呢
實際上主色需要選擇
顏色最豔麗的
或者說它的色彩傾向性
色相傾向性最明確的顏色
什麼叫做色彩傾向性呢
就是外行都能認出來的顏色
比如說你去買衣服
一個大媽就跟你說
你穿這個色不好看
你換一個綠色的
大概是這個樣子
大家都能普遍公認出來的顏色
並且有很明確的這種
它的色相比較飽和的顏色
如果你選擇一個色相
明度純度比較低
或者比較高的顏色
一旦畫面中出現
純度比較正的顏色的時候
它的位置
它原本的
你選出來的這個
明度比較高比較低的顏色
就會被純度比較正的這種顏色取代
它的力量更強
所以我們要選擇色相比較清晰的
這種傾向性非常明確的顏色
填入在關鍵的地方
所謂關鍵的地方
在UI的界面來說
主要是面積最大的地方
以及位置最粗粗的地方
我們可以看到
我畫圈的地方
在歡迎界面中
它是面積最大的地方
到了內頁之中
我們可以看到
它實際上屬於
位置比較突出的地方
是不可替代的
這是主色所要在的位置
填入之後
我們可以看到效果
就好像一錘定江山似的
把這個整個畫面
它的這種色彩感覺
一下就定下來了
非常明顯的
這個紅色
給人的印象非常直接
直觀的
包括它的情感
都非常的一目瞭然
接下來我們要選擇的是
輻色了
或者是怎麼說呢
是與這個紅色
是我們現在選擇的主色
相去抗衡的一個顏色
所謂抗衡的顏色
自然我們可以考慮到
比如說互補色
爲什麼要選擇互補色呢
互補色呢
它與互補對色
它實際上是一種抗衡關係
兩個之間
有一個很強的力量對抗關係
這種力量對抗關係
會使每種顏色的優點
非常突出
並且弱化它們兩者的缺點
它們兩者之間的
這樣的一個互補關係
會使每種顏色的
這種特質會顯現得非常明確
我們把它填入在次要的位置
所謂次要的位置呢
我們可以理解爲在歡迎界面
我們看到一個很重要的登錄按鈕
或者是在內頁之中
緊挨着主色的位置
或者是其他面積相對大的地方
我們看一下它的效果
這個時候
我們對這個作品的
它的色彩印象
一下子就更加清晰了
並且發現了它的特點
這就是第二種顏色
就是兩種顏色對抗之後
產生的這種效果
接下來呢
我們要選擇一個最深色
爲什麼要選擇最深色呢
很簡單
有光又有影
我們所有的色彩
對色彩的這種印象
或者這種體驗
全部都來自大自然
如果在大自然裏頭
有光影我們才能看到顏色
有光的地方就會有影子
這是一個很自然的感覺
爲什麼呢
如果說沒有影
只有光的話
那就很飄
對吧
就感覺不落地
整個是沒有影子
就好像是飄起來的
它不實在
當有這個深色的顏色的時候呢
我們就會有一種內心的穩重感
內心的這種穩重感
我們把它填入在
有暗影的地方
是吧
那個開關
是吧
有那個UI界面裏面
有一個開關按鈕
是吧
在開關的地方
或者是在背景
需要背景的地方
我們可以把它填入在這些地方
好
填入之後
我們可以看到
有了最深色
整個畫面的穩定感
會變得不太一樣了
之後呢
我們來選一款最淺色
爲什麼要選最淺色呢
很簡單
淺色可以給畫面帶來空氣感
或者透氣感
這些地方呢
相當於光的地方
那麼我們如果一個作品
全是暗色
就會覺得很堵的話
很不舒服
但是有了光呢
我們會覺得
這個地方可以讓我們有喘息的
或者在閱讀信息的時候
我們需要比較平和的一種心態
閱讀起來很舒適
那這些地方都需要用到淺色
所以畫面中一定要有最淺色
好
最淺色呢
我們就在冰淇淋的上面來選
是吧
它上面有冷色
有暖色
我們可以選擇一個偏暖一點的顏色
填入到這些表格啊
或者是文字
大量文字閱讀的地方
然後呢
我們再選兩款
再選兩款什麼顏色呢
與主色相近的同頻色彩
這個顏色的作用是什麼呢
是加厚主色的這種層次感
因爲如果只是有一個主色的話
那麼它的這種色彩呢
就會顯得比較硬
它沒有一種過渡或變化
但在自然界之中呢
我們知道
實際上色彩有很多的豐富的變化
層層次
就是層次非常的複雜
一個畫面之中
其實有上千上萬個顏色
在設計之中
我們雖然用不到那麼多種顏色
但是呢
我們可以稍微有意識的增加色彩的層次感
來豐富這個畫面
即便是一個扁平化的作品
我們依舊可以增加一兩款同頻的顏色
使其中一種顏色
比如像主色增加了它的層次感
使它更加的豐滿
我們提取兩個顏色出來
有深一點的
有淺一點的
然後呢
如果你覺得不夠
我再選兩款
可以多一點
同頻顏色其實是很多的在畫面之中出現
然後填入在各個地方
需要同頻色彩出現的地方
這些地方呢
比如說表格
表格呢
實際上它需要閱讀的舒適性
它有一層一層一層一層這樣子
它一層一層之間呢
需要一種區別
同時還可以填入在這種
需要一點點按鈕的變化的
比如說同樣一個按鈕
都是一個顏色
其中按住了以後
它會發生一點點變化的這種地方
都需要同頻顏色
所以是差別
遠看呢
其實是一個顏色
但是近看的時候呢
我們會發現它有一些層次變化
就是它的細節其實是有東西的
不是說一進去以後發現很枯燥
不是這樣子的
而是遠看是一致的
近看呢
哦 有區別
是這種感覺
好 我們把這幾款淺色跟層次變化色
一同填入到畫面之中
此時我們看到這個
大致上我們這個作品就完成了
而這個作品呢
與之前的印象是完全一致的
