LUMA基礎版是 LUMA 系列網站、MVP、總控台與單頁工具的共同視覺基礎。海岸感、編輯式敘事、豐富背景、自然光、慢速動態——活潑,但不凌亂。
LUMA基礎版不是傳統白底企業後台,也不是大量漸層與玻璃卡片堆疊的科技介面。它要讓使用者感受到真實的溫度。
品牌不是 SaaS 感,也不以 AI 科技感為主角。AI 是工具;人才是主角。
日光、亮面、柔和高光。
聚落、人物、共同創作。
海浪、路徑、緩慢動態。
自然、社區、真實生活。
左側導覽列固定於視窗,右側內容獨立捲動。桌面寬度不足時,優先收合側欄,不壓縮主要內容——你現在看到的這個頁面,就是這套骨架本身。
| 區域 | 建議尺寸 | 用途 |
|---|---|---|
| 左側導覽列 | 展開 232–256px / 收合 72–80px | Logo、主要功能、頁面切換、設定 |
| 右側內容區 | 剩餘寬度 | Hero、儀表板、表單、故事、圖表 |
| 內容最大寬度 | 1120–1280px | 控制閱讀線長,避免超寬鬆散 |
| 內容左右留白 | 32–56px | 依螢幕寬度自動調整 |
LUMA symbol＋名稱。
最多 5–7 個一級項目。
歷史、說明、設定等低頻操作。
頭像、身分、登出或收合。
側欄規則:icon 20–24px 統一線性風格;項目高度 48–52px、圓角 14–16px;active 以青綠底、左側短色條或柔和光暈表示三選一;收合狀態必須提供 tooltip;900px 以下改為抽屜式導覽。
同一畫面最多一個主色與一個輔色。文字不可直接放在複雜照片上。
限制:不用高飽和螢光藍、紫紅科技漸層作主視覺;文字放照片上必須加深色 scrim 或霧面層;暖棕只做點睛,不作大面積按鈕與背景。
「背景豐富」不等於每一處都放照片。用四層語言堆疊出空氣感。
海、自然光、道路、人物互動。Hero 可用 1 張強烈主圖,或 3–5 張慢速交叉淡入,以 cover 滿版並保留臉部安全區。
雙層漸層遮罩保護文字,而不是把照片染成單一顏色。
白 #FFFFFF 與暖米白 #F7F4EF 交替,可加極淡紙張／海霧紋理,透明度 3–8%。
模糊光影、弧線、波浪、圓形色塊。每個視窗只設一個視覺主角。
/* Layer B — 保護文字的雙層漸層 */ background: linear-gradient(90deg, rgba(10,25,30,.62), rgba(10,25,30,.18)), linear-gradient(180deg, rgba(10,25,30,.10) 30%, rgba(10,25,30,.66));
大型英文標題可搭配優雅 serif,但中文維持 Noto Sans TC。英文是節奏與氣氛,不搶走中文訊息。
| 用途 | 建議比例 |
|---|---|
| Hero／全幅情緒帶 | 16:9 或更寬 |
| 編輯式人物圖文 | 4:5 |
| 一般內容卡 | 4:3 |
| 四大精神／直式模組 | 3:4 |
| 人物頭像 | 1:1 |
圖片使用 object-fit: cover。網站版需壓縮,原圖留素材庫;檔名用小寫英文與連字號,例如 sea-sunrise-01.jpg。
App Icon / favicon:品牌 App 圖示另有專屬標準(見《LUMA App Icon 設計規範》)。重點——一律用實體 PNG＋相對路徑,禁止 Base64／SVG 當 apple-touch-icon;背景不透明深海藍 #07111f。全站只用一套 icon library,建議 2px 線性圖示。
| 動態 | 建議參數 |
|---|---|
| 內容進場 | opacity 0→1、translateY 28px→0、0.9s |
| 交錯延遲 | 每項 0.12s,最多 4 層 |
| Hero 淡入 | opacity 2s |
| Ken Burns | scale 1.04→1.14、約 9s |
| Hero 換圖 | 每 5.2s |
| 圖片 hover | scale 1→1.05、1.2–1.4s |
| 卡片 hover | translateY -6px、0.3s |
| 視差 | 0.15–0.18,僅大圖使用 |
必須支援 prefers-reduced-motion: reduce:取消視差、位移與自動縮放,保留簡短淡入即可——這個頁面本身已內建此支援。
/* 大型桌面微調 */ @media (max-width: 1180px) {} /* 平板:卡片由四欄改兩欄 */ @media (max-width: 980px) {} /* 小平板／手機:側欄改抽屜、內容單欄 */ @media (max-width: 900px) {} /* 小型手機 */ @media (max-width: 560px) {}
RWD 還要同步縮小留白、標題、Hero 高度與卡片內距。把瀏覽器縮到 900px 以下,左側欄會變成抽屜。
請依「LUMA基礎版」設計規範製作響應式網頁。 核心版型:桌面版採左側固定 icon 導覽、右側內容舞台;900px 以下改為抽屜式選單。整體視覺為海岸感、編輯式敘事、自然光與 慢速電影感。背景要豐富,但不能影響資訊閱讀。 使用 LUMA 色票:主色 #1F6F78、深主色 #15515A、暖米白 #F7F4EF、 暖棕 #C88A4A、深文字 #1F2A2E。字體使用 Noto Sans TC。卡片圓角 20–28px,按鈕使用膠囊形。圖片以真實人物、地方、海岸與自然 光為主,不使用制式 AI 科技圖。 避免整頁白底方卡、紫藍科技漸層、大理石背景、過多玻璃擬態與 快速動畫。只有需要分組或操作的內容才使用卡片。必須支援鍵盤 操作、清楚 focus、行動版與 prefers-reduced-motion。
使用者的任務永遠優先。
可讀性高於美感。
LUMA 的溫度不可丟。
活力,但不凌亂。
不必要就拿掉。