← Back Layout

Foundations

Interaction / Animation

Layout

螢幕排版設計

KKBOX Universal 包含 Mac OS、Windows 軟體系統，以及網頁播放器（Web Player）介面設計，可在桌機或筆電裝置下載或開啟網頁使用。

Overview 完整結構

KKBOX 桌面版播放器佈局依據內容與功能可分作 5 大區塊，其中 Right Section 為可展開收合的動態區塊，因此產生兩種主要介面操作。

Window 最小寬度

當整個視窗寬度小於 960 時，視窗畫面則會裁切。

Side Menu 側欄

Side Menu 最小寬度為 160px，最大寬度為 300px。

Main View 主要顯示區塊

Main View 為 Universal 用來顯示主要內容的區塊

最大寬度 1800px，超過則延展 margin

最小寬度為視窗最小寬度減 Side Menu 寬度，小於則裁切畫面

Right Section 右側歌詞區塊

最小寬度 200px
當 Main View 小於 620px，Right Section 會變成前景第二層疊在 Main View 上
當 Right Section 變成前景第二層時，底層 Main View 全寬小於 1400px 時，Right Section 最大寬度即 Main View 寬度
當 Right Section 變成前景第二層時，底層 Main View 全寬大於 1400px 時，Right Section 最大寬度為 1400px

最小寬度 200px

前景第二層

最大寬度 = Main View 寬度

最大寬度 1400px

Player Mode

播放模式

在軟體系統內包含三種播放視窗模式：一般 KKBOX 播放器、劇場模式播放器、迷你播放器，可利用 Now playing bar 右側 icon 切換。

Mini Mode 迷你播放器

	Max width	Default	Min width
breakpoints	720	522	409

[優化] 迷你播放器 Mini Mode_Universal

Created with Figma

www.figma.com

Theater Mode 劇場模式

Responsive

自動佈局

Card Responsive 卡片縮放規則

Responsive Grid 響應式網格系統

透過 Responsive UI 的特性，將一種介面設計分為 4 個斷點（breakpoints）來回應不同視窗尺寸，呈現適當的佈局。

只有在 Main View 當中使用 Grid 系統，根據 Main View 縮放調整，breakpoint 為 768，大於 breakpoint 採用 12 column，小於 breakpoint 則使用 6 column。

Minimum Width	Columns	Gutters	Margin
620 - 768 px	6	20	20
768 - 1800 px	12	20	20

6 Grid

當 MainView 寬度為 620 - 768 px 時使用 6 column grid system

12 Grid

當 MainView 寬度為 769 - 1800 px 時使用 12 column grid system

List Item Column Responsive 列表縮放規則

在 Universal 工程端共有三種 List 元件，主要用於歌單、專輯、搜尋結果、Podcast 節目頁呈現列表，列表內欄位元件主要分兩種，固定寬度欄位以及縮放寬度欄位，固定寬度欄位指的是不會隨視窗縮放而縮放的欄位，譬如封面圖片、收藏 icon …，當視窗縮放列表內的彈性欄位也會響應縮放，目前寬度分配的方式為主要資訊欄位有設定比例寬度 (父層寬度之比例)，其餘無設定則平分減掉固定寬度欄位後剩下寬度。

⚠️

目前應用為舊版百分比 % 規則，未來將逐步調整新版本規範。