Terrain UI
這些規則是從一款工業主題遊戲的介面中提煉出來的，只保留了對一般網頁有用的部分。此技能不包含任何遊戲素材，也無意重現該遊戲。
開始前請先閱讀整份文件。開啟 assets/terrain.css 以取得色彩與元件標記，使用 assets/contours.js 來產生輪廓線背景，並參閱 references/research.md 以了解每條規則的來源以及為何省略某些項目。
八條規則
- 單一強調色，兩種意義：當前位置與主要動作。預設為
#FEEC00，取自遊戲中選取的頁籤。僅作為填色使用，上方為墨水色文字；在淺色主題中，絕不以強調色作為線條或文字。懸停狀態也同理：只有主要按鈕會在懸停時以強調色填滿。連結、藥丸按鈕和列表行僅會變亮或加粗底線。 - 選取取決於方向：
- 垂直列表：懸停時變亮該行；選取的行變暗、文字變亮，並在左側出現一條強調色條。
- 水平頁籤：選取的頁籤以強調色填滿。切換時，舊區塊收合，新區塊從其中心橫向展開。
- 按鈕形狀顯示優先級：主要動作為右下角切角的方塊；次要動作為右端帶有圓形圖示的藥丸。每個按鈕組最多一個主要動作。
- 每頁左上角放置路徑：
// 作品 / 關於我。可返回的層級應為連結。 - 數字即裝飾，且必須真實：使用寬形表格數字設定 ID、日期和
目前 / 總數計數器。絕不發明資料或加入偽造的技術文字。同樣適用於文案：僅根據使用者提供的內容或專案文件描述產品（功能、支援範圍、安裝方式），並保持其範圍。若無來源，應填入[TODO: ...]這類佔位符，而非自行填寫。 - 顯示快捷鍵提示：例如在頁面按鈕旁顯示
←→。僅在具備精細指標的裝置上顯示。 - 背景：封閉輪廓線：在兩個角落各有一塊，透明度 6% 至 9%，每第五條線加粗，無動畫。
- 短促、果斷的動畫：懸停 90 毫秒，選取 110 至 120 毫秒，曲線為
cubic-bezier(.2,0,0,1)。當系統要求減少動畫時，關閉所有動畫。
先選擇頁面類型
在開始之前先決定要建立哪一種頁面。三種頁面共享相同的色彩與元件，差異僅在於大膽程度。若不確定，請選擇「閱讀」。
| 類型 | 用途 | 方法 | 遊戲中的等效頁面 |
|---|---|---|---|
| 閱讀 | 文章、專案細節、設定、說明 | 一個文字欄，寬度約 65 個拉丁字符或 38 個 CJK 字符；強調色僅用於目前導航項目和主要按鈕；輪廓線可選 | 百科全書、檔案庫 |
| 展示 | 首頁、作品集、登陸頁面 | 大型寬標題，可使用輪廓字型；大型數字作為背景；開啟輪廓線；內容可逐區塊淡入 | 主選單、商店 |
| 工作台 | 管理頁面、儀表板、工具、擴充功能設定 | 左側為垂直列表導航，頂部為頁籤；主要包含表格、數字和表單；無大型標題；僅在回應操作時才有動畫 | 庫存、裝備、好友列表 |
元件
所有元件均位於 assets/terrain.css 中，並以 tu- 前綴命名。examples/demo.html 展示了每個元件。
| 元件 | 類別 | 備註 |
|---|---|---|
| 路徑標題 | tu-crumb | 規則 4 |
| 垂直列表 | tu-list | 使用 aria-current 標記目前項目 |
| 水平頁籤 | tu-tabs tu-tab | 使用 aria-selected="true" 或 aria-current 標記目前頁籤 |
| 主要 / 次要按鈕 | tu-btn / tu-btn--pill + tu-btn__icon | 規則 3 |
| 快捷鍵提示 | tu-kbd | 規則 6 |
| 欄位行 | tu-fields tu-sep | 使用垂直線 │ 分隔中繼資料 |
| 面板 | tu-panel | 扁平區塊：無圓角、陰影或邊框 |
| 表格 | tu-table-wrap tu-table | 小型寬標籤標題；數字欄位使用 tu-right 右對齊；窄螢幕時橫向捲動 |
| 輸入框 | tu-field tu-input tu-hint | 聚焦時底線加粗，左側出現強調色條 |
| 錯誤訊息 | tu-error，並在輸入框加上 aria-invalid="true" | 一個小強調色方塊加上一句解決方法說明；無紅色文字 |
| 開關 | tu-switch | 「開啟」為目前狀態，因此軌道以強調色填滿 |
| 對話框 | <dialog class="tu-dialog"> | 按鈕置於底部列：一個主要按鈕，取消為藥丸；從模糊狀態銳化出現 |
| 通知 | tu-toast | 帶有左側強調色條的深色條；從左側滑入，2 秒後消失 |
| 空狀態 | tu-empty | 一個虛線框，內含一句說明此處將顯示什麼的句子，可選一個主要按鈕 |
| 載入 | tu-progress，等待時加上 tu-progress--busy | 一條 2 像素的線；若已知進度，設定 --tu-value 並顯示百分比 |
無紅色。警告、失敗和待處理狀態使用小強調色方塊搭配墨水色文字。將刪除等不可逆操作置於確認對話框之後。
對於表中未列出的項目，請根據八條規則推導：是否為「目前」或「主要」決定能否使用強調色；主要或次要決定方塊或藥丸；可否點擊決定懸停時是否變亮。
動畫
| 動作 | 持續時間 | 方法 |
|---|---|---|
| 懸停變亮 | 90 毫秒 | 背景色轉場 |
| 列表選取條落下 | 110 毫秒 | scaleY(0 → 1) |
| 頁籤切換 | 120 毫秒 | 強調色區塊 scaleX(0 → 1)，從中心展開 |
| 主要按鈕懸停 | 280 毫秒 | 強調色從左側擦拭進入 |
| 頁面切換 | 淡出 320 毫秒，淡入 480 毫秒 | 舊頁面模糊並淡出；新頁面逐區塊淡入，間隔 100 毫秒 |
避免事項
- 看不見的標記（紅點、
NEW徽章）：在遊戲中它們促使玩家領取獎勵；在作品集或一般網站上則感覺像在催促。 - 磨砂玻璃、故障撕裂、掃描線、發光、大面積強調色填充、帶陰影的圓角卡片。
- 僅限遊戲的元素，例如 3D 輪播選單、角色美術和稀有度色條。
- 任何官方遊戲素材：截圖、標誌、圖示、角色美術、文案或官方字型檔案。
字型
- 拉丁文字和數字：Saira（開源，SIL OFL 授權）。標籤拉伸至 125%，全部大寫，0.06em 字距。官方網站對其寬標籤未添加字距；此處為小尺寸保留少許字距。
- 中文：Noto Sans SC 或系統無襯線字型。正文不使用襯線或毛筆字型。
- 所有數字使用表格數字（
font-variant-numeric: tabular-nums）。
交付單一 HTML 檔案
- 直接使用
terrain.css的類別，不要新增頁面層級的覆寫來改變其色彩。如果需要變更，表示元件有問題，應回報給此技能。 - 將
terrain.css放入<style>元素，contours.js放入<script>元素。在內嵌任何腳本之前，確保其中不包含字面上的</script>；若有，則應寫成</script>。 - 若頁面必須離線運作，將 Saira 以 woff2 資料 URI 嵌入
@font-face；否則連結 Google Fonts 並保留後備字型。
交付前檢查清單
- 已選擇頁面類型，且不同類型的標題大小未混用於同一頁面。
- 強調色僅出現在當前位置和主要動作上；頁面中無紅色。
- 每個按鈕組最多一個主要方塊按鈕；其餘為藥丸。
- 垂直列表和水平頁籤使用各自的選取樣式。
- 每頁都有
//路徑標題。 - 所有數字皆為真實資料；每個產品陳述皆有來源且不誇大其範圍。
- 已檢查淺色和深色主題；在手機寬度（約 400 像素）下無橫向捲動。
- 鍵盤焦點可見；啟用減少動畫時一切靜止。
- 未使用任何官方遊戲素材。
檔案
| 檔案 | 內容 |
|---|---|
assets/terrain.css | 色彩記號（淺色和深色）及所有元件 |
assets/contours.js | 輪廓線背景，一行設定即可：TerrainContours.mount(canvas) |
examples/demo.html | 所有元件於同一頁面，可直接開啟 |
examples/screenshots/ | 元件頁面在淺色、深色、手機寬度及對話框狀態下的截圖 |
references/research.md | 研究筆記：觀察到什麼、保留了什麼、遺漏了什麼 |