心智圖資源庫 【UI設計】色彩設計指南
色彩在網路UI設計師的日常設計中起著定生死的作用,它是設計的靈魂,舒適的色彩搭配可以讓設計師一遍定稿,他們日常工作中大部分都是在與色彩的博弈中度過的,雖然使用者可能不懂色彩原理,可是使用者天生都是色彩的感受家,什麼樣的色彩搭配美,通常他們瞄一眼就會有定論,不用你去辯解太多,不好的搭配,縱使有千萬種理由,也說服不了用戶,所以好好研究色彩以及每種色彩傳遞的情感對做好設計至關重要。 這不,億圖從7個方面講述UI設計中色彩的用處: 一、 色彩定義 二、 色彩三屬性 三、 三種常見色彩模型 四、 色彩的語意及它的應用 五、 色彩在 線下 - 商場 和 線上 - B端設計 的應用 六、 色彩在B端設計中的作用 七、 B端色彩設計使用的原則
編輯於2024-11-21 17:21:50This template shows the structure and function of the reproductive system in the form of a mind map. It introduces the various components of the internal and external genitals, and sorts out the knowledge clearly to help you become familiar with the key points of knowledge.
This is a mind map about the interpretation and summary of the relationship field e-book, Main content: Overview of the essence interpretation and overview of the relationship field e-book. "Relationship field" refers to the complex interpersonal network in which an individual influences others through specific behaviors and attitudes.
This is a mind map about accounting books and accounting records. The main contents include: the focus of this chapter, reflecting the business results process of the enterprise, the loan and credit accounting method, and the original book of the person.
This template shows the structure and function of the reproductive system in the form of a mind map. It introduces the various components of the internal and external genitals, and sorts out the knowledge clearly to help you become familiar with the key points of knowledge.
This is a mind map about the interpretation and summary of the relationship field e-book, Main content: Overview of the essence interpretation and overview of the relationship field e-book. "Relationship field" refers to the complex interpersonal network in which an individual influences others through specific behaviors and attitudes.
This is a mind map about accounting books and accounting records. The main contents include: the focus of this chapter, reflecting the business results process of the enterprise, the loan and credit accounting method, and the original book of the person.
色彩設計指南
05
04
03
02
01
內容凸顯
定色調意識
帶有主色調的灰
無彩色
6:3:1原則
卡片用白色,底色選灰色,因卡片內容重要,需高亮色突顯。白色使內容突出,灰色背景則顯後退,形成前後對比,有助於內容傳播。這種設計能更有效引導視覺焦點,並增強訊息傳達效果。
設計前一定要提前與需求方定好主色調,這樣設計交付的產品才不會偏離正確的軌道,避免大面積重做修改。
在設計中用跟主視覺相符的灰,會使得介面更加的高階、協調與美觀
為了確保畫面風格的統一、乾淨整潔,文字顏色、邊框顏色、以及邊框背景色都需要用到無彩色,通常透過顏色的深淺來區分訊息的層級關係。
色彩設計應遵循6:3:1原則:60%的主色,30%的次要色,10%的點綴色; 依照這個規則的配色會顯得高級。
七、B端色彩設計使用的原則
人的性格多樣,色彩亦然。了解色彩特性,有助於更好地因應客戶需求。活潑、安靜、沉穩、深邃等色彩特性,在設計時更游刃有餘,精準拿捏色彩,滿足顧客的多元設計需求。
色彩可以傳遞性格
選擇合適的色彩對比度可以增強文字的可讀性,並減少使用者的視覺疲勞。例如,黑色文字在白色背景上通常比較容易閱讀。
舒適的色彩搭配可以提升使用者體驗
B端設計中通常可以透過不同的色彩來區分功能區域,可以讓使用者更清晰地了解介面的結構和佈局,例如,導覽列使用特定的顏色,而內容區域則使用另一種顏色。
顏色做資訊區分明顯
B端設計大面積運用品牌色能強化品牌形象。採用與品牌標誌相近的色彩,方便使用者快速辨識記憶。統一不同B端產品的色彩方案,可建立品牌連貫性與一致性,增強使用者信任。
增強用戶對品牌的信任
流程設計中,紅色代表失敗,綠色代表成功,橙色代表訊息有告警,藍色代表著鏈接,同時不同的按鈕顏色也可以很好的區分按鈕狀態,在反饋結果和狀況方面,色彩起著非常重要的作用。
利用鮮明色彩即時向使用者傳達操作結果與當前狀態
減少焦慮 提高專注度
提高產品的複用率
科技業引領 傳統與延續
系統復用
產業準則
心理影響
04
03
02
穩定性 專業性
視覺特性
01
傳遞 人格屬性
提升 使用者體驗
明確 資訊區分
增強 品牌傳達
六、色彩在B端設計的作用
告知 結果狀態
線上 - B端設計:為什麼藍色在B端設計上廣泛應用?
商場透過特定色彩組合展現個性與風格,吸引目標顧客。獨特鮮明的色彩搭配加深顧客印象,不僅彰顯品牌特色,也顯著提升品牌的記憶度與辨識度,讓顧客在眾多商場中輕鬆記住並辨認出該商場。
塑造品牌形象
引導消費行為
商場用色彩分區幫助顧客快速尋找興趣區,提升效率。同時,鮮豔色彩突顯重點商品,吸引顧客目光,引導購買,提升銷售。
緩解壓力
在現代生活中,人們常常面臨各種壓力。走進一個多彩熱烈的商場,可以暫時擺脫日常的煩惱和壓力,享受購物的樂趣。
營造愉悅氛圍
當顧客進入一個色彩豐富的商場時,會感受到一種愉悅和輕鬆的氛圍,從而更願意在商場中停留和購物。
即使在較遠的距離或在繁忙的街道上,多彩熱烈的配色也能讓商場更容易被發現,提高商場的知名度和曝光度。
更容易被看到
色彩鮮豔的商場外觀和內部裝飾更容易在人們的視線中凸顯出來,吸引過往行人的目光,激發他們的好奇心和探索欲。
吸引顧客注意力
6
5
4
3
2
1
線下 - 商場:商場的色彩為什麼總是多彩熱烈的?
五、色彩在 線下 - 商場 和 線上 - B端設計 的應用
粉紅色代表甜美、浪漫、可愛和溫馨 粉紅色是一種溫暖的色彩,能夠緩解緊張情緒,營造溫馨浪漫的氛圍,使人感到舒適和放鬆。
青色寓意清新、寧靜和沈穩 青色是一種帶有藍色和綠色的顏色,既有藍色的專業感、信任感,也有綠色的活力、希望感。
藍色代表冷靜、忠誠和信任 它常與沉穩、深邃的情感相關,能帶來寧靜、和平的心境,也像徵智慧和理性。
紫色象徵神秘、優雅、高貴和浪漫 它常給人一種優雅、奢華的感覺,同時也帶有神秘莫測的氛圍,與夢幻、創造力等情感有關。
粉紅色 ec80b3
青色 5ccee9
藍色 7085ff
紫色 9177ec
綠色代表平靜、和諧與生機 綠色常與大自然相關,帶給人們安寧、放鬆的感覺,也像徵成長、希望和新生。
綠色 5bdc98
黃色象徵富貴、快樂、開朗和樂觀 黃色能帶來明亮、愉悅的情緒,代表陽光、溫暖和智慧。
黃色 ffc34c
橙色傳達溫暖、歡快和積極向上的情感 橙色常與樂觀、友善、創造力連結在一起,給人充滿希望的感覺。
橘色 fe864b
紅色代表熱情、活力、喜慶、強烈的情感和愛 紅色象徵激情、勇氣和行動力,也常與興奮、熱烈的情緒有關。
紅色 ff4757
四、色彩的語意及應用
CMYK模型 CMYK模型是一種用於彩色印刷的套色模式,它利用色料的三原色混色原理,加上黑色油墨,共計四種顏色混合疊加,形成所謂的「全彩印刷」。 這四種標準顏色分別是青色(Cyan)、洋紅色(Magenta)、黃色(Yellow)和黑色(Black)。 C青:Cyan,以百分比值(0%-100%)表示 M品紅:Magenta,以百分比值(0%-100%)表示 Y黃:Yellow,以百分比值(0%-100%)表示 B黑:Black,以百分比值(0%-100%)表示 特點:CMYK模式是一種依賴反光的色彩模式 應用場景:在印刷業中有著廣泛的應用,透過調整這四種顏色的比例和強度,可以實現豐富的色彩效果。
RGB模型 RGB模型是一種加色模型,透過紅色(Red)、綠(Green)、藍色(Blue)三種色光的不同比例相加來產生多種多樣的色光。 RGB模型使用紅、綠、藍三個顏色通道的變化以及它們相互之間的疊加來得到各種顏色。 R紅:Red,以數值(0-255)表示 G綠:Green,以數值(0-255)表示 B藍:Blue,以數值(0-255)表示 特點:色彩範圍廣泛:約千萬種;標準應用:螢幕顯示器等應用標準;設備依懶性:色彩顯示依賴設備 應用場景:顯示器系統、彩色陰極射線管、彩色光柵圖形顯示器;掃描器、LED顯示技術等領域
HSB模型 HSB模型也稱為HSV模型,其中H代表色相,即顏色的種類;S代表飽和度,即顏色的純度;B(V)代表亮度,即顏色的明亮程度。 H色相:Hue,以角度(0°-360°)表示 S飽和度:Saturation,以百分比值(0%-100%)表示 B/V 亮度:Brightness 或 Value,以百分比值(0%-100%)表示 特點:視覺上直觀易懂,能夠透過簡單的數字判斷顏色的色相、飽和度和亮度。 應用場景:UI設計中,用於制定色板、漸層色搭配等。透過調整色相、飽和度和亮度,可以輕鬆調整和匹配顏色,使設計更加協調和美觀。
三、三種常見色彩模型
飽和度(純度)是指同一色別的純度和鮮明度的變化。從色光的角度而言,色光波長越單一,飽和度越高。紅色純度常最高,綠色較低。同色相深淺不同,飽和度各異。黑白色光滲入會改變飽和度和明度。
飽和度
明度是指色彩的明暗程度。一般在反光率相同的情況下,不同色別的明暗程度不同。如黃色光比紅色光明亮,而紅色光則比青色光明亮。
明度
色相是指不同顏色之間的差別,即不同顏色的表象和名稱,每個顏色都有自己的專屬ID,如紅、橙、黃、綠、青、藍、紫等。不同的色別都可用光譜中的波長來表示,人的眼睛可分辨出的色別有180種左右。
色相
二、色彩三屬性
在數位影像處理中,色彩通常透過色彩模型(如RGB、CMYK等)來定義,這些模型透過不同比例的原色或色料混合來表示各種顏色。
電腦
色彩是光的屬性,當光波通過物體時,物體會吸收某些波長的光,而反射或透射其他波長的光,這些被反射或透射的光波長度決定了我們看到的顏色。
物理學
色彩是藝術創作的重要元素,它不僅關乎視覺感受,也與情感、文化、象徵意義相關。
色彩是傳達訊息、影響情緒和創造美感的關鍵工具
設計學
藝術 學
心理學
色彩是人腦對光波長的視覺感知,不同的波長刺激視網膜上不同類型的感光細胞,進而產生不同的色彩感覺。
一、色彩定義