🌐

Website

Layout

螢幕排版設計

此章節為 Official Website 的設計規格。

Responsive Grid System

響應式網格系統

KKBOX 官方網站可以利用 Responsive Grid System 讓網頁在不同裝置及螢幕尺寸上正常顯示。

我們將 Desktop 的 Container（內容區域）寬度定為 960px，左右留白區域定義出最小值，當螢幕已經縮窄到超過留白區域最小值後，才會對 Container 進行縮窄寬度處理。

參考章節 Layout / Intro / Responsive
Platform
Margin
Container
Desktop
40 px
最寬 960 < 1040 時，螢幕寬- Margin
Tablet
40px
螢幕寬- Margin
Mobile
16 px
螢幕寬- Margin
⚠️
Tablet 線上版本 Margin 為 20px，未來均使用 40px
image

Responsive Breakpoint

響應式斷點

斷點與使用者的裝置（Desktop/Tablet/Mobile）無關，僅會依該裝置的螢幕寬度進行縮放，例如：使用者的裝置寬度小於 768 ，即會看到根據 Mobile 樣式（375）來縮放的畫面；大於 1024 的螢幕寬度就會看到 Desktop 畫面。

通用版

1024 為大部分 Desktop 的螢幕寬度範圍，1023 至 600 為大部分 Tablet 的螢幕寬度範圍，599 以下為大部分 Mobile 的螢幕寬度範圍。

一般情況下設計師使用 1440、768、375 的畫面交付給工程師。除非特別重要頁面，例如：官網首頁，才需額外製作 2560px 大螢幕示意圖給工程師參考。

image

重要頁面

有大螢幕需求的重要頁面，可增加此斷點設定。

image

補充說明

如網頁有特別需求，例如：行銷方面的特殊設計，設計師可以調整斷點設定，但需將頁面的各個斷點變化交代清楚。

List Item Column Responsive 列表

網頁上的 list item 會出現在 4more（歌曲頁、專輯頁、歌單頁以及藝人頁）及搜尋頁。

List item 會根據整體佈局 Container 定義出最寬數值，扣除元件寬度及間距後，剩餘空間會視螢幕寬度做縮短處理。

工程師 code 寫法：grid-template-columns: 27px 1fr auto 32px

實際寬度= 27px 552px 33px 32px

image

Page Layout

頁面佈局

Header & Footer

KKBOX 官網會加上 Header 及 Footer，提供使用者查看其他頁面的路徑。

image

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

Header 到 Visual Key 之間的 Margin 多為 100 或 120px。Desktop、Tablet、Mobile 三種裝置的 Margin 通常會選擇一致來達成 Responsive 效果。不過由於 Mobile 佈局較小，當 Header 至 Visual Key 之間留白太多時，可以視視覺畫面縮短 Mobile 的 Margin 。

image

Elements Spacing

物件空間

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

image

Text with icon 文字 + 圖標

image

Elevation

海拔

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

image
元件海拔 高 → 低
Dialog
Now playing bar
Contextual menu