Authentic

真誠的呈現動態的目的，直覺且不喧賓奪主

通常使用於元件的互動回饋

Seamless

自然的銜接操作行為，貫穿整個產品的互動

通常使用於頁面的轉換

Delightful

有巧思與驚喜，為產品體驗增添新鮮感

通常使用於動態物件、等待畫面以及和音樂相關的互動

Splash Screen

動態：會有一段 App Icon 展開轉變成 KKBOX 的動畫。

應用：用於 APP 的開啟畫面。

歌單同步中

動態：藍色進度條隨著歌單同步的進度，延伸長度。

應用：「我的」頁面。

下載歌曲中

動態：深灰色進度條隨著下載的進度，延伸長度。

應用：會用在「歌曲列表」上，作為歌曲下載的進度顯示。

Searching

動態：兩個缺口狀的外框圓各自旋轉，呈現收聽中的狀態。

應用：”聲音辨識”功能。

頁面載入中

動態：灰色由深到依序變化，呈現轉動的樣子。

應用：各頁面載入前的顯示。

[可能需要調整] 資產頁有調整需求

Refresh

動態：頁面最上方往下拉拖著不放，上面會出現一個Refresh符號

應用：一起聽、通知中心。

[可能需要調整] 這個風格太復古? 應該可以跟Loading more共用同一款設計

Loading more

動態：頁面滑到最底部後，再繼續往下滑顯示更多新資料

應用：用來表示載入更多資料的Icon。

換一批

動態：

應用：

Slide in

動態：頁面由右側往左進來

應用：進入「下一頁」

Slide out

動態：頁面由左側往右回來

應用：回到「下一頁」

Move In

動態：頁面由下往上進來

應用：「編輯類頁面」、「Action Sheet」、「通知中心」、「播放頁」

Move Out

動態：頁面由上往下縮回去

應用：「編輯類頁面」、「Action Sheet」、「通知中心」、「播放頁」

Move In（Dialog）

動態：頁面由下往上進來

應用：Dialog

Move Out（Dialog）

動態：頁面由下往上進來

應用：Dialog

Fade in

動態：黑色半透明淡入於畫面中

應用：收藏提示訊息

Fade out

動態：黑色半透明淡出於畫面中

應用：收藏提示訊息

Nav Bar 單層

動態：頁面往下滑動時 , Navbar會縮小並Fix

應用：入口頁

NavBar 雙層

動態：頁面往下滑動時 , Navbar與Tab會縮小並Fix

應用：入口頁

NavBar 物件Fix

動態：頁面往下滑動時 , 頁面中的關鍵物件會Fix在Navbar

應用：入口頁

跑馬燈

動態：由左到右重複跑，兩側淡出

應用：Navbar 的Title過長時會套用此效果。

隨機專屬推薦

Now Playing Icon

動態：由左到右重複跑，兩側淡出

應用：Navbar 的Title過長時會套用此效果。

登入畫面 Universal

Tap 點擊

Pressed State 下壓期間會有型態變化的反應 (可至各別元件了解規範) Card, List, Icon

Swipe 左右滑動

• Card 切換
• Page 切換, 返回

Scroll 捲動畫面

Tap 點擊

Change State 點擊後會切換型態

• Checkbox (check/uncheck)
• Switch (on/off)
• Input Field (focus/unfocus)
• Tab switch (active/inactive)
• Now Playing Bar (open/collapse)
• 內容展開/收合 (open/collapse)
• List(Universal) (focus/unfocus)

Drag 上下拖曳

• 歌單編輯時拖曳清單內容
• 下拉更新：通知中心, 一起聽
• 歌曲清單拖曳至歌單 Universal

Swipe 左右滑動

• List 刪除

Pinch / Spread 縮放

• 歌詞頁