Color
Color

Color

Color

此章節說明顏色在產品中的使用方式。KKBOX 以使用者體驗的立場出發，平衡品牌形象和可訪問性 (accessibility) ，打造適合應用於產品中的顏色系統。

⚡️ 色票、語意顏色使用規則與開發文件：

→🎨Palettes

色票規格書

→💡Workflow

工作流程

→📔Semantic color

語意顏色規格書

Color Principle

色彩原則

image

Meaningful

在重點且有意義的地方使用指定顏色。

image

Bold

在主題式頁面中，使用讓人印象深刻的大面積品牌色塊，或具反差/撞色/對比度高的色彩，營造大膽的鮮明風格。

image

Clear

善用顏色營造一目瞭然的層次佈局，同時注意明暗對比，使文字保有易讀性。

Glossary of Terms

名詞解釋

顏
顏色數值、色盤與語意之間的關係
  1. Color Value 顏色數值 顏色的色碼，例如：Hex #FFFFFF、rgb(255, 255, 255)。
  2. Palettes 色盤 附有指定名稱的顏色，例如：Red10、White、Gray90。
  3. Semantic Color 語意顏色 語意名稱代表某種使用意圖，且一種語意會包含不同主題色（Light/Dark Theme），例如：primaryText、iconDisabled、primaryBtn。
    4. 💡
    KKBOX 主要使用 Semantic Colors 進行設計與開發。

Device & App Appearance Mode

裝置和 App 外觀模式

Core Appearance 主要外觀

KKBOX App 提供兩種 UI 外觀色 —— Light Mode、Dark Mode，供使用者自由選擇或根據裝置系統的預設外觀呈現。

A
App UI 可忽略裝置系統的外觀色，根據使用者設定的 App 外觀色呈現

設計師可以根據需求定義該頁面僅顯示 Light Mode 或 Dark Mode，即表示無論 App 外觀色為 Light Mode 或 Dark Mode，在此頁面僅顯示指定外觀色。

N
Now Playing 頁以及其延伸頁面僅顯示 Dark Mode

Custom Theme in Mobile App 主題面板

KKBOX Mobile App 能夠有限度的提供客製化主題，且客製範圍可不受 App 設定的外觀色影響。

客
客製化範圍不受 App 外觀色影響，例如：Bottom Navigation Bar 維持主題面板的底色

Legibility

易讀性

Contrast Ratio

為了讓使用者容易閱讀和辨識，KKBOX 顏色的生產方式和使用規則，需滿足 WCAG 定義的 AA 級最低對比度：小型文字對比度至少為 4.5:1，大型文字對比度至少為 3:1。

物件
等級
說明
文字
AAA
較好
文字
AA
尚可
圖形
AA
圖形僅 AA 級，AA 即代表符合
顏色對比度可訪問性規範 WCAG
KKBOX 顏色系統檢測結果 (Figma) 對比度檢測
顏色檢測工具 Contrast Ratio
檢
檢驗範圍包含不同外觀模式下的文字和圖形

Using Color

顏色使用方式

Hierarchy 階級

Background & Container Color

根據物理的光影變化，越前景的物件表面受到的光照越多，所以顏色會越淺。我們藉由背景色和前景的表面顏色深淺變化，營造物件的前後關係。

⚠️
Mobile App 在亮色模式 (Light Mode) 中，背景色為白色 #FFFFFF，所以前景物件的表面顏色無法再更淺，需要藉由陰影疊層增加畫面層次。
佈局方式參考章節 Layout / Hierarchy
image
Hierarchy
Light Mode
Dark Mode
Primary Background
White
Gray95
First-level Container
White
Gray90
Second-level Container
Gray5
Gray80

Title, Body

利用灰階的深淺安排資訊層級。通常重要程度越高的文字對比度越高，視覺引導效果越顯著。

image

Button

利用顏色的層級區分引導使用者操作。有色背景的按鈕通常使用於正向或希望使用者操作的動作，較部會使用於否定型態。

image

Accent

使用 Standard Blue 系列色作為強調色，可用於文字或圖標的視覺強化，但須謹慎使用，避免在同一個頁面中出現過多強調色。

image

Specific Identity 特定身份

Pricing Plan 付費方案（以下出現*符號代表尚未在目前產品中更新的用色）

Pricing Plan
Light
Dark
Usage
Hi-Fi&HiRes 音質方案*
Gold60
Gold60
IAP/IAB
標準音質方案*
stdBlue60
stdBlue60
IAP/IAB
學生方案*
Green60
Green60
-
儲值
Gray20
Gray40
-
⚠️
Website 付費中心 及 App 內的方案用色需一致，避免使用者混淆。 子分類例如：標準音質三人家庭方案、無損音質家庭三人方案因變動性高，則不宜再使用顏色區分。

Audio Quality 音質（*為尚未在目前產品中更新用色）

Light
Dark
Usage
HiRes - Outline
Gold60
Gold60
List
HiRes - Solid*
Gold50*
Gold70*
NowPlaying
HiFi - Outline
stdBlue60
stdBlue60
List
Hifi - Solid*
stdBlue50
stdBlue70
NowPlaying
標準音質*
Gray40
Gray50
NowPlaying

Branding & Random 品牌推廣與隨機

產品中適度地運用 4 色配置（StdBlue、Pink、Green、Vermilion）可以幫助使用者瀏覽頁面時，有色彩起伏的感受，減緩視覺疲勞。

參考章節 Color / Palettes / Expended Colors

使用時機

  • 當我們要為關鍵場景適度配置色彩時
  • 當我們有多組要任意選擇色彩的地方時
  • 當我們要創造畫面上的變化吸引使用者注意時
  • 當我們要為使用者打造個性場景時

這些顏色常以單純背景色或輔助圖形形式進行配置，亦會視需求搭配文字呈現。例如：底色蓋板通知搭配文字使用、個人頁的自訂義背景無搭配文字。

Background / Container 背景/填充

作為背景和填充使用時，樣式可分為三種類別：單色（Plain）、實心輔助圖形（Solid Patterned）、線框輔助圖形（Outline Patterned）。

image

色調分為鮮豔 (Bright) 與柔和 (Soft) 兩種色調。建議鮮豔色調使用於較重要的簡短資訊傳遞，柔和色調可使用於資訊量較多或複雜的元件中，設計師需根據不同場景採用適合的背景色。

鮮
鮮豔與柔和色調在不同主題色中有對應的色彩調整

Plain 單色

運用於關鍵場景需配置滿版或局部色彩的地方，例如：啟動頁、探索頁輔助圖形、彈窗；多張卡片排列需任意配置顏色時也可以使用（App 暫無此種用法）。

滿
滿版或局部應用
多
多色任意配置
image
Tone
Element
Light
Dark
Semantic
Bright
Bg / Container
60
60
未建立
Primary Text
Gray90
Gray90
primaryOnDarkText
Secondary Text
Gray70
Gray70
secondaryOnDarkText
Soft
Bg / Container
20
90
未建立
Primary Text
Gray90
Gray5
primaryText
Secondary Text
Gray70
Gray20
secondaryText

Solid / Outline Patterned 實心/線框輔助圖形

用輔助圖形點綴背景，可以創造畫面上的變化吸引使用者注意，或打造使用者的個性場景，例如：曲風情境早中晚、底色蓋板通知、個人頁自訂義背景。

參考章節
實
實心輔助圖形的應用
線
線框輔助圖形的應用
image
Tone
Element
Light
Dark
Semantic
Bright
Bg / Container
60
60
未建立
Patterned
50
50
未建立
Primary Text
Gray90
Gray90
primaryOnDarkText
Secondary Text
Gray70
Gray70
secondaryOnDarkText
Soft
Bg / Container
20
90
未建立
Patterned
30
80
未建立
Primary Text
Gray90
Gray5
primaryText
Secondary Text
Gray70
Gray20
secondaryText
image
Tone
Element
Light
Dark
Semantic
Bright
Bg / Container
60
60
未建立
Patterned
40
40
未建立
Primary Text
Gray 90
Gray 90
primaryOnDarkText
Secondary Text
Gray 70
Gray 70
secondaryOnDarkText
Soft
Bg / Container
20
90
未建立
Patterned
40
80
未建立
Primary Text
Gray 90
Gray 5
primaryText
Secondary Text
Gray 70
Gray 20
secondaryText

錯誤及正確應用

避免在使用者長時間瀏覽的頁面做色彩滿版背景，或一屏畫面中出現一個以上的重點用色。

image

避免多色彩佈滿畫面，一屏若超過 4 組以上 , 請改用情境圖或其他方式代替。

image

使用錯誤顏色或對比色，讓畫面不協調。

image

輔助圖形色塊過小且瑣碎，讓畫面構圖太複雜。

image

Changelog

Date
Version
Notes
Chapters
Person
January 17, 2023
1.2

・Layout - 響應式斷點說明更新 ・Icons - 新增缺口風格設計說明

All
Jaco Huang
November 25, 2022

・所有筆記彙整

All
Mark Liang
November 22, 2022
1.1

・Changelog 測試 ・範本介紹

All
Mark Liang
November 1, 2022
1.0

・XD Playbook Foundation 正式上線

All
pei-tzu Lin

← Previous

Brand

Next →

Contents