Foundations

Brand

Color

Content

Illustrations

Icons

Layout

Typography

Object Style

Interaction / Animation

Object Style

Object Style 是組成各種 components 的不同零件樣式，部分樣式使用 semantic color 在 core tokens 的定義，例如 Border、Separator。

Rounding

圓角

Rounding 會被應用於方形或是矩形當中，其中圓角方形多呈現音樂／Podcast 內容；圓角矩形則用在影片／文章類型的介面。

Mobile App

Mobile App 有詳細定義三種層級的 Rounding，依據不同 Components 應用。

（1）Large Rounding

應用範圍：

❶ Dialog

❷ Action Sheet

（2）Medium Rounding（Default）

應用範圍：

❶ 通知大／中／小卡（上至下排列）

❷ 歌單小卡

❸ List Item - 大圖

（3）Small Rounding

應用範圍：

❶ Tag

❷ List Item - 小圖

（4）Mini Rounding

Mini Rounding 2px 屬於特殊應用，使用於非元件當中。

應用範圍：

❶ 部分 icon 的 rounding style，例如：Hi-Fi / Hi-Res 無損音質、其他音質、分級制度

💡

目前實作為提供圖片渲染。

（5）Full Rounding

應用範圍：

❶ Button，例如：Pill 全圓角膠囊案件、Block 全撐滿按鍵

💡

因應按鈕使用 Dynamic Text Style，會將高度撐高，圓角參數也會浮動改變，在 figma 檔案中以 100px 參數作為固定極大值，保持全圓角的設定。

🛠

Full Rounding 實作規範

• iOS ：理論上，半圓圓角是按鈕高度的一半，每次需看按鈕本身的高度決定參數。
• Android ：對齊 Figma 規格，設定 Corner radius，但可以針對四個角的半徑個別設定。

Copy

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_pressed="true">
		<shape android:shape="rectangle">
			<stroke android:width="1dp" android:color="@color/kkbox_stdblue_hc_80"/>
			<solid android:color="@color/login_button_background"/>
			<corners android:radius="180dp"/>
		</shape>
	</item>
	<item>
		<shape android:shape="rectangle">
			<stroke android:width="1dp" android:color="@color/kkbox_stdblue_hc_60"/>
			<solid android:color="@color/login_button_background"/>
			<corners android:radius="180dp"/>
		</shape>
	</item>
</selector>

Universal

Universal 圓角應用於元件及物件，其中卡片圓角目前為 15px（5 的倍數），未來會逐步調整 4 的倍數。

（1）Full Rounding

應用範圍：Button、Input Field、輸入框：Search Bar、Action Bar、Download Queue。

（2）4 倍數的 Rounding

應用範圍：Dialog、Toast、Tooltip。

（3）5 倍數的 Rounding

目前多用於 Cards 以及部分物件當中，因應用廣泛，將不顯示所有圖示舉例，僅以一張分類代表圖，更多應用詳情可參考連結。

應用範圍：

❶ MIH：Jumbo、Runway、Playlist / Podcast、文章、影音內容、排行榜、Listen with 速爆音樂台

❷ Listen With：一起聽節目、名人台長 / 熱門台長、個人頁一起聽

參考 [規範] Universal Components / Cards

Website

Rounding 以 4 的倍數為主，由於 Website 涵蓋桌機到手機的裝置尺寸，為確保大 / 小螢幕看得出 Rounding 效果，數值範圍通常較大，其中常用數值為 12px、8px。

（1）4 倍數 Rounding

應用範圍 1：

官方功能等宣傳頁面使用的卡片，例如：首頁特色卡片、付費中心方案卡片、支援服務裝置卡片等。

• 8px，例如：FAQ。
• 12px，例如：首頁特色卡片、支援服務裝置卡片。
• 16px，例如：付費方案卡片。

應用範圍 2：

功能用途、需要展示多資訊頁面的卡片，例如 4more 的歌單、專輯、文章卡片。

• 4px，使用於小型圖片，寬度 60px 以下，例如：4more（歌手/專輯/歌單/歌曲） List 。

• 8px，使用於大型圖片，寬度 61px 以上，例如：4more（歌手/專輯/歌單/歌曲）的專輯/歌單圖。

（2）Full Rounding

應用範圍：Button。在 figma 檔案中以 100px 參數作為固定極大值，保持全圓角的設定。

Border

物件框線

預設的物件框線，使用於不需特別凸顯的物件，通常物件無填充色。

Object Border 物件框線

使用於 AD Banner，例如：品牌歌單頁的封面下方（行銷露出），但無論新、舊設計，目前較少使用線框設計。

Image Border 圖片框線

圖片內框線設計，為了避免於圖像為白 / 黑時，在 Light / Dark Mode 上分不出圖像範圍，通常使用於列表專輯、專輯 / 歌單、藝人、文章卡片。

Mobile App

參考 [規範] iOS/Android Components v2 🚧／Image Border 參考 border 的 semantic color 定義

Universal

應用範圍：List Item Image (Album、Podcast Cover)、Artist (ListenWith Card)

參考 [規範] Universal Components / Cards

Website

應用範圍：Artist 藝人頭像、Playlist Cards、Album Cards、Article Cards

參考 [規範] Official Web Components 🚧 / Cards

Button Border 按鈕框線

	Border
Mobile App	1px
Universal	1px
Website	1px

Separator

分隔線

預設的物件分隔線，通常用於區隔列表或物件區塊。

Mobile App

General

應用範圍：Action Sheet、List（Large Screen）

Input Field 輸入框

應用範圍：情境懶人包、我都聽什麼

參考 [改版]資產/個人/藝人頁2022_APP

Universal

General

應用範圍：

❶ 迷你播放器

❷ Action Bar

❸ SideMenu

➍ Dropdown Menu

Input Field 輸入框

應用範圍：資產 / 編輯個人檔案

Shadow

陰影

Shadow 屬於 effect 特殊效果的樣式之一。

Card Shadow 卡片陰影

Mobile App

• 大 / 小螢幕使用相同陰影效果。
• 主要用於一般的包框卡片，例如：Podcast 單集。
• iOS 和 Android 因系統渲染效果和寫法不同，所以實際呈現的效果不同。

參考 [規範] iOS/Android Components v2 🚧

Universal

自定義 Universal Card Shadow

應用於 Action Bar、卡片，例如：MIH、Podcast，以及彈窗、Dropdown menu。

參考 [規範] Universal Components / Shadow

Background Blur

背景模糊

背景模糊（Background Blur）僅使用於物件的背景，而不是物件本身。使用背景模糊效果可以達到三種用途：（1）突顯前景物件成為焦點，集中使用者的注意力、（2）覆蓋在模糊背景上的文本，可增加易讀性、（3）作為裝飾性效果。參考

Mobile App

主要用於 Now Playing、Now Playing Bar、歌單頁、藝人頁。

iOS 實作

客製 Blur 參數

Android 實作

單純的 blur 效果，可以現有的 blur function 直接帶數值，或提供 radius 數值（需大於 1），即可做出相對應效果。

Universal

劇場模式

背景實作方法為將桌集封面圖各邊放大 15px，並加上 30px blur filter。

Website

Now Playing Bar

Header

Changelog

Date	Version	Notes	Chapters	Person
January 17, 2023	1.2	・Layout - 響應式斷點說明更新 ・Icons - 新增缺口風格設計說明	All	Jaco Huang
November 25, 2022	1.2	・所有筆記彙整	All	Mark Liang
November 22, 2022	1.1	・Changelog 測試 ・範本介紹	All	Mark Liang
November 1, 2022	1.0	・XD Playbook Foundation 正式上線	All	pei-tzu Lin

On This Page

• Object Style
• Rounding
• Border
• Object Border 物件框線
• Image Border 圖片框線
• Button Border 按鈕框線
• Separator
• Shadow
• Card Shadow 卡片陰影
• Background Blur
• Changelog