Layout
思考產品整體中的一致性與節奏感，定義出一套設計到開發依循的佈局標準，幫助我們更快實現介面中的相關決策，並且讓不同功能頁面擁有一致的瀏覽體驗。
⚡️ 各平台設計規則與開發文件：
Layout principles
佈局原則
一致的組織方式 使用一致的區域位置、間距和對齊方式，讓使用者可預期畫面的佈局。
有指引的視覺動線 將相同屬性的物件集中，用視覺動線引導閱覽和行為。
適度的呼吸空間 利用間距創造區塊和層級，避免過量的資訊互相干擾。
適應螢幕尺寸 根據螢幕尺寸調整佈局，讓瀏覽方式更符合使用習慣。
Measurements
測量值
我們使用一致的測量值，確保整體的視覺節奏和佈局平衡。
一般情況以 8 的倍數作為測量值，例如：模塊之間的距離、元件的內間距，或固定元件的尺寸等等。若有較小的元件可以使用 4 的倍數作為測量值，例如：小型按鈕中的圖標與文字間距。
Spacing
空間
利用空間的差異創造資訊層級，同時幫助使用者組織相近的資訊，讓頁面結構更容易被了解。
Space Units 空間單位
設計時，使需用一致的空間單位，確保不同平台或螢幕尺寸間的一致性與視覺平衡。
Value | Token（開發未使用） | pt/dp/px | rem |
1 | space-1 | 4 | 0.25 |
2 | space-2 | 8 | 0.5 |
3 | space-3 | 12 | 0.75 |
4 | space-4 | 16 | 1 |
5 | space-5 | 20 | 1.25 |
6 | space-6 | 24 | 1.5 |
7 | space-7 | 28 | 1.75 |
8 | space-8 | 32 | 2 |
9 | space-9 | 36 | 2.25 |
10 | space-10 | 40 | 2.5 |
11 | space-11 | 44 | 2.75 |
12 | space-12 | 48 | 3 |
Space Density 空間密度
考慮不同物件的形態差異，我們可以在同一個畫面中，利用不同的間距組合維持閱讀節奏。
使用者可以透過資訊和空間的疏密安排，推測畫面的用途，進而影響使用者的瀏覽方式。
當資訊量較多時，適合以較密集的空間排列，讓單一畫面呈現更多資訊，也提升使用者快速瀏覽和尋找資訊的便利性。此外，密集的物件排列，也能讓使用者減少操作時的來回距離，提升對區塊操作的專注力，適合用於大螢幕的表單。
當資訊需要被聚焦時，適合使用較寬鬆的空間排列，讓主要資訊的周遭留出空間、不受其他資訊干擾，達到聚焦的效果。
需特別注意，最小點擊範圍為 44x44 (iOS)、48x48 (Android)，所以在比較密集的排列中需注意物件是否保留足夠的點擊空間，以及四周是否有其他按鈕容易誤觸，例如：選取日期的日曆本身帶有較多按鈕，設計時需保留適當的點擊空間，讓使用者能夠正確點擊到目標物。
若部分的內容設計較緊密，需使用較寬鬆的區塊間距，保留畫面的呼吸空間，也讓使用者容易區隔內容。
Grid
網格
8 單位網格
設計佈局時，可使用 8 單位的網格系統，讓頁面的基礎組成物件與 8 單位的網格對齊。
4 單位網格
設計較小的元件時，可使用 4 單位的網格系統，確保細節的一致性。
Column Grid 垂直（欄）網格
將 UI 元件放置於 Margin 之間的「欄 Row」內，可以幫助工程師在不同的螢幕尺寸建立一致的佈局，也確保使用者在不同尺寸的視窗中有一致性的體驗。
每一欄的寬度並非固定寬度，而是利用百分比定義，經常使用於 Universal、Web 等 Responsive UI。
參考 Universal Columns Grid
Alignment
對齊
適當的對齊方式除了可以提升視覺的舒適度，也可以影響使用者的閱讀行為。
水平對齊
對齊物件中線可以創造較舒適的橫式閱讀順序，也可以讓分散的物件有包裹在一起的感受，例如：無框線的卡片設計。
垂直對齊
使用 Keylines 對齊近似的物件，讓畫面排列有序，幫助使用者快速閱讀資訊。
Responsive & Adaptive
響應式 & 自適應
Responsive UI 響應式介面
適用於網頁和 Universal 設計，透過斷點 (breakpoints) 和 Colume Grid 進行響應式的變化，讓同一份介面設計能回應不同的視窗尺寸，呈現出適當的佈局。
Colume Grid 會因應畫面寬度產生變化，當畫面寬度越窄，Column 數量也會隨之減少，畫面中能夠呈現的內容也較少。
參考 Universal Columns Grid
Adaptive UI 自適應介面
以手機優先的設計概念，依據跨設備的螢幕尺寸進行設計，強調針對不同裝置佈局優化，尤其適用於 Mobile App 的設計當中，促使更友善的使用者體驗。
KKBOX Mobile App 將跨裝置螢幕尺寸區分為大螢幕 (Large Screens) 和小螢幕 (Small Screens)，並設計對應的 UI 元件和操作流程，我們稱為大螢幕設計 (Large Screens Design) 和小螢幕設計 (Large Screens Design)。
系統會根據裝置的螢幕尺寸，判斷需提供的對應畫面是大螢幕設計還是小螢幕設計。若使用者在大螢幕的平板中使用分割畫面，此時視窗為小螢幕的尺寸，也能對應產生小螢幕設計的畫面。
參考章節 Layout / Mobile App / Screen Size
Hierarchy
階級
階級指的是畫面中的閱讀次序，我們可以透過空間、形狀、顏色、疊層或群組方式，建立一套畫面的組成邏輯。 參考
視窗疊層
利用半透明覆蓋（Overlay）直接製造畫面的前後景，將未被半透明覆蓋的物件置於畫面的最前方。此時使用者不可點擊被覆蓋的後景物件，所以適合用於溝通重要資訊。
對疊層的物件使用陰影，表示該物件在物理環境中的位置較前，但不積極阻擋畫面或阻斷使用著的注意力，所以相較半透明覆蓋較為溫和，例如：Popover。
相似外觀群組
根據物件樣式將相似外型的元件集中擺放，將畫面中的資訊以視覺作區分，例如：加入音樂庫、收藏、分享按鈕。
距離分區
利用間距製造物件分區，越不相關的區塊間距越大。
滑動分區
利用滑動範圍，暗示區塊範圍與彼此關係。
表面顏色分層
根據物理的光影變化，越前景的物件表面受到的光照越多，所以顏色會越淺。我們藉由背景色和前景的表面顏色深淺變化，營造物件的前後關係。
一般情況下僅使用 PrimaryContainer，疊層設計最多不超過三層（Tertairy Container），避免資訊被層層包裹過於複雜，設計師可考慮以距離分區取代。
參考章節 Semantic Color / Container
視覺重量
利用物件的顏色和尺寸平衡視覺重量。
在 icon 設計時，需根據物件的形狀微調物件的尺寸，使視覺重量一致，例如：在相同尺寸的情況下，方形的視覺重量比圓形更重，所以需要縮小尺寸，讓視覺看起來較為一致。
Icon 繪製方法
顏色的深淺也會影像視覺的重量，創造前後景或重要層級的差異，例如：深色的外框線讓物件在畫面中更醒目，較淺的外框線感受較和諧且凸顯文字重點。
Changelog
Date | Version | Notes | Chapters | Person |
|---|---|---|---|---|
April 28, 2023 | 1.22 | ・補齊、調整 Layout 章節 Universal、Website 頁面 | Layout |  Vicky Hsu Jimmy Chang |
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 |