← Back Layout

Foundations

Brand

Color

Content

Illustrations

Icons

Layout

Typography

Object Style

Interaction / Animation

Mobile App

此章節為 iOS / Android Layout 的設計規格。

Adaptive UI

自適應

KKBOX Mobile App 支援手機與平板設備，為了確保產品能在不同螢幕尺寸（包含螢幕自動旋轉）上正常顯示，我們將螢幕尺寸根據寬度 (Android) 或長寬比 (iOS)，分為 Small Screens 和 Large Screens 並提供對應的的畫面。

參考章節 Layout / Intro / Adaptive

Screen size

螢幕尺寸

Android Layout Breakpoints

Android 系統的 KKBOX Mobile App 根據螢幕寬度切換顯示介面。

iOS, iPadOS Class Size

iOS 系統的 KKBOX Mobile App 根據螢幕的長度以及寬度切換顯示介面。

Compact 和 Regular 的尺寸依照 Apple 官方定義。

參考連結 iOS, iPadOS Class Size

Small & Large Screens Design Spec

大小螢幕設計規格

Mobile App 的頁面佈局依照 Large Screens 和 Small Screens 提供對應的設計，以維持使用者最佳的使用體驗。

因為文字會對應 Large / Small Screens 顯示不同尺寸，所以設計佈局時可參考文字尺寸的縮放邏輯，根據小螢幕設計放大 1.15 倍作為大螢幕設計，讓整體視覺等比放大。

參考章節 Typography / Accessibility / Adaptive Text Style

Small Screens Layout (Default)

以小螢幕的 Layout 作為預設的設計。

Large Screens Layout

將元件尺寸以小螢幕的尺寸為基礎放大約 1.15 倍，整體佈局與文字將因應螢幕尺寸而放大。

當元件尺寸放大後，若不調整間距，會發現物件看起來較擁擠，建議可視情況微調間距，讓整體設計接近小螢幕尺寸的視覺感受

Page Layout

頁面佈局

Default Margin & Body 預設左右邊距與內容

Margin 是指內容和螢幕邊緣之間的距離，會根據裝置類型或螢幕尺寸而有不同設計；Body 是指去除 Margin 後可供排列的內容主體。

⚠️

設計師應避免在同一產品中出現不同的 Margin 設定

Top Navigation 上方導航列

Bottom 頁面底部

頁面最底部需保留固定的空白高度，提供播放條 (Now palying bar) 顯示空間。

⚠️

不會顯示 Now playing bar 的頁面不需保留頁面底部空間

Top 頁面頂部

頁面頂部保留視覺一致的空白區塊，讓使用者切換頁面時可以從一致的高度位置開始瀏覽。

設計時請使用水平 Keyline，設定至距離 Top Navigation ? 單位的位置，並將此頁面的起始物件對齊至 Keyline。

Block Margin

區塊間距

Cards Block Margin 卡片區塊間距

Feature/List Block Margin 功能、列表區塊間距

Elements Spacing

物件空間

因為 8 的倍數較容易將大部分的移動設備劃分為 8 單位的網格，所以 UI 元件的大小和間距通常都設置為 4 或 8 的倍數。

→ 參考 Layout / Intro / Measurements

Padding in container 容器內間距

Screen Size	Mid Size elements	small size elements
Small Screens	16 pt/dp	8 pt/dp
Large Screens	16 pt/dp	8 pt/dp

Margin in Card 卡片的物件間距

Text with icon 文字 + 圖標

Auto Layout

自動佈局

KKBOX Mobile App 可支援「Dynamic Text Style」，所以文字尺寸會根據使用者手機系統的設定顯示（參考 iOS Accessibility Mode）。當使用者設定較大的顯示文字時，UI 會根據設計師不同的定義而有不同的效果，為了確保 UI 在使用者動態調整文字尺寸時能夠正常顯示，可參考以下幾種定義方式。

參考章節 Typography / Mobile App /Accessibility / Dynamic Text Style

1. 固定元件高度 假設定義元件固定高度，當文字動態放大後，元件的空間只允許顯示一行文字，可能造成字數量不足。

2. 固定元件上下間距 - 不調整圖片尺寸 KKBOX 目前採用此種設計方法 假設定義元件固定上下間距，當文字動態放大後，可容納較多文字數，但可能會造成壞板。

3. 固定元件上下間距 - 圖片尺寸跟著文字高度等比放大 若圖片依照文字高度等比放大，較能維持原本的版型，但由於寬度為固定尺寸，所以文字顯示量也會降低。同時要注意文字最大的顯示高度，避免圖片過大。

Elevation

海拔

海拔是指能夠製造前後景視覺效果的物件高度，在 Android 系統中可透「Z 軸」計算物件的絕對高度。所有 UI 元件和現實世界中的堆疊效果相同，設計時可以利用表面顏色、陰影、動態或固定位置等方式，創造出使用者熟悉的物理環境。

Components Elevation 元件海拔

To-Do

• Mobile App
• Adaptive UI
• Screen size
• Small & Large Screens Design Spec
• Page Layout
• Block Margin
• Elements Spacing
• Auto Layout
• Elevation