極簡現代網站

簡約現代 UI：感覺完整的精簡網站

適用於個人網站、作品集、登陸頁面和部落格：小型、內容優先的網站，以克制和細節取勝。不適用於 Web 應用程式、產品介面、儀表板或工具；這些問題（應用程式狀態、資料密度、複雜表單）需要不同的指導方針。

此處的所有內容都是純 HTML、CSS 和一些原生 JavaScript，因此適合任何技術堆疊或無堆疊。如果專案已有建置或範本設定，請使用它；原則不變。

這是一個指南針，而非範本：每個規則都提供原因和一個起點，以便根據主題和用戶的品味進行調整。標記為Firm 的項目是少數不應跳過的事項。

支援檔案（需要時閱讀）：

• references/snippets.md：可複製貼上的建構區塊（代號、基礎、散文、文章列表、表單、動畫）。
• references/interface-checklist.md：詳細的互動、表單、內容和效能檢查，改編自 Vercel 的 Web 介面指南。
• references/ship-checklist.md：SEO、社交預覽、RSS、分析、託管。
• references/lessons.md：來自真實專案的陷阱和瀏覽器驗證技巧。
• references/templates.md：來自 10 個 Carrd 登陸頁面範本的測量數據（以 Carrd 的範本編號引用，例如 #304）。用於校準您眼光的參考數據，而非規則。

1. 工作流程

1. 了解任務。 這是誰的網站、為誰而設、訪客應做或了解的一件事、需要的頁面，以及「完成」的定義。當答案改變建置時提問：最終網域、是否追蹤訪客、誰擁有文案，以及是否有現有內容（文章、項目）需要導入。
2. 設定方向（§2）並將其寫下：顏色代號、字型搭配、間距和圓角比例以及動畫個性，記錄在專案筆記（CLAUDE.md、AGENTS.md 或 README）中，以便後續的對話保持一致。
3. 在首頁之前設定共享元件（§3）：代號、基礎樣式、佈局原語、元件，以及頁首、頁尾和 <head> 的單一來源。每個頁面（包括第一頁）都是從這些元件建構的。
4. 先有真實文案。 佔位文字會隱藏佈局問題。遵循頁面配方（§4）。
5. 建置靜態、響應式和無障礙的網站，然後添加動畫，最後進行潤飾。
6. 部署（§11），在瀏覽器中驗證（§12），然後執行克制審查（§13）。
7. 以小而可見的步驟迭代。 一次只做一個變更，查看它，詢問品味判斷而非猜測，清楚說明哪些已驗證、哪些未驗證，並僅在要求時才提交或發布。

2. 選擇方向

簡約是預設：內容優先、一個強調色、寬敞的空間、細線而非方框、小幅動畫。每個元素都應承載意義；不承載意義的裝飾則移除。

系列	外觀	常適合
寧靜淺色	近乎白色、中性無襯線、細線分隔線、一種鮮明的強調色	個人網站、部落格、寫作
寧靜深色	近乎黑色、輕量級大號字型、一種強調色、用於元數據的等寬字型	工程和個人網站、產品發布
編輯風格	用於標題或正文的襯線字型、寬敞的行長、輪廓按鈕	長篇寫作、書籍、文化；可能被科技受眾視為過時，因此請先上線展示
柔和光暈	寧靜基底加上一種微妙的漸層或徑向光暈，可選的磨砂表面	需要一些溫暖感的登陸頁面
一個大膽區塊	寧靜基底加上一個滿版顏色區塊或帶框照片	作品集、活動、個人品牌

• 基調勝過新奇。 嚴肅的主題需要冷靜和可信；俏皮的字型和誇張的效果通常會被拒絕。
• 符合受眾的慣例。 科技受眾通常期望在近乎白色或近乎黑色背景上使用中性無襯線字型，並帶有一種鮮明的強調色；其他受眾則有自己的偏好。當提出多個方向時，讓它們在佈局和表面上有所不同（列表頁面、固定分割、卡片網格、一個顏色區塊），而不僅僅是字型和紙張顏色，以便用戶在真正的替代方案之間選擇。
• 當品味未知時，嘗試上線。 在真實頁面中更換字型、強調色或間距，並讓用戶做出反應。預期需要幾輪調整。
• 用戶的品味優先於本指南。 一旦他們接受或拒絕某個方向，請將其寫入專案筆記，並遵循該方向，而不是此處的任何預設值。

3. 共享樣式和元件

第二個頁面應看起來與第一個頁面相同，因為它是從相同的元件建構的，而不是因為樣式被複製過來。

• 代號的單一來源。 顏色、字型比例、間距、圓角、陰影和動畫時間都在一個檔案中以自訂屬性定義。頁面和元件使用代號，而非原始值：頁面樣式中的十六進制代碼或一次性像素大小是需要修復的錯誤。
• 為元件而非頁面設定樣式。 .btn、.card、.field、.prose、.post-list、.site-header，而不是 .about .blue-box。變體是修飾符（.btn--outline），絕非編輯過的副本。頁面樣式僅用於安排元件並保持簡短。
• 分層 CSS：代號 → 基礎 → 佈局原語 → 元件 → 頁面安排，使用 @layer 宣告，這樣頁面規則就不會悄然覆蓋元件（請參閱片段）。
• 一次性編寫共享的 chrome。 頁首、導航、頁尾、<head> 和網站腳本來自單一來源：專案的包含、部分或範本，或一個小型建置腳本。手動複製的頁首會產生偏差；如果在只有兩個頁面的網站上無法避免複製，請說明情況，並在每次變更後重新檢查每個副本。使用 aria-current="page" 標記導航中的目前頁面。
• 透過標記實現行為。 一個網站腳本透過資料屬性和類別處理顯示和揭露，因此新頁面無需每個頁面的 JavaScript 即可獲得這些功能。
• 保持庫存清單。 在專案筆記中列出元件（名稱、用途、變體）。在新頁面上，優先重用；任何新元件都應放入共享檔案和清單中，而不是頁面中。一個 styleguide.html 頁面，顯示每個元件在每種狀態和主題下的外觀，是變更後快速檢查的方法。
• 今天只有一個頁面？ 無論如何，將代號和元件與頁面樣式分開；下一個頁面將只是組裝。

4. 頁面配方

登陸頁面

• 英雄區：一個標題、一句引言、主要行動（或註冊表單本身）在第一個視口內。
• 然後是按順序回答訪客問題的章節：它是什麼、如何運作（編號步驟加上一張小圖片）、證明（短引言、標誌、真實的數字）、常見問題、頁尾。
• 不要重複宣傳語：如果英雄區已有表單，則結尾區塊重新陳述它不會增加任何價值。

個人網站 / 作品集

• 姓名和一行關於此人做什麼的描述，然後是簡短章節：工作或項目、寫作、關於、聯繫。
• 對於項目和文章，帶有細線的列表比卡片網格更好；一張帶框的照片就足夠了。
• 聯繫是純文字連結（電子郵件、個人檔案），而不是表單，除非用戶要求。

部落格索引

• 一個列表，而不是卡片：標題、日期（<time datetime>）、可選的一行摘要。一旦文章很多，則按年份分組。整行都是連結，沒有無效區域。
• 沒有預設縮圖。分頁或一個長頁面都可以；在筆記中說明選擇。

部落格文章

• 一個閱讀列，約 60–72 個字元，正文 17–19px，行高 1.6–1.75（§5）。
• 頂部有標題、日期和可選的閱讀時間；帶有錨點和 scroll-margin-top 的標題；僅對長篇文章使用目錄。
• 帶有說明的圖片可以比文字寬；程式碼區塊在內部滾動，絕不影響頁面。
• 以下一步結束：上一頁/下一頁文章或更多文章的簡短列表，以及 RSS 連結。

跨類型共享

• 頁首：導航或無。 品牌對面一個孤立的按鈕會顯得不完整。
• 頁尾在底部，即使在短頁面（全高 flex 列）上也是如此，其下方沒有多餘的外邊距。
• 設計每種狀態：空（尚無文章）、非常長的標題、缺失圖片、具有網站外觀的 404 頁面。

5. 字體排版

• 一個或兩個字體家族：一個中性正文字體（系統堆疊即可）加上最多一個標題字體。用於日期、程式碼和元數據的等寬字體是第三個字體家族，僅當它值得時才使用。
• 標題看起來現代、大號、輕量和緊密追蹤：英雄區約 40–72px，粗細 300–500，字距 −0.02 到 −0.05em（用於 neo-grotesk 字型），行高 1.1–1.25，使用 clamp() 設定大小。
• 短頁面上的章節標題（個人網站、部落格索引）：約正文的 1.25 倍（≈20px）、半粗體、使用文字顏色。微弱的全大寫標籤太弱；標題大小會與英雄區競爭。
• 閱讀文字。 17–19px，行高 1.6–1.75，60–72ch 行長，段落間距約 1em。次要文字使用柔和顏色，而非更小的字型大小。
• 整齊的線條：標題使用 text-wrap: balance，段落使用 text-wrap: pretty 以避免孤立的單詞。
• 字體排版細節：彎曲引號（""）、省略號字元（…）、數字和單位之間的非斷行空格（10 MB）、列表中的日期和數字使用 tabular-nums。將品牌和產品名稱標記為 translate="no"，以便瀏覽器翻譯忽略它們。
• 字標：足夠大以在章節標題旁邊保持自身（通常為 1.2–1.6 倍）；一個單詞內部的粗細對比（輕量 + 超粗體）可以廉價地增加個性。
• 兩端對齊文字僅在設置了 lang 和 hyphens: auto 時使用，並且絕不用於狹窄的列。

6. 顏色和表面

• 在 :root 上的代號：背景、表面、文字、柔和色、細線顏色、一種強調色（可選的第二個漸層停止點）和一種 on-accent 顏色。
• 對比度（Firm）。 正文文字在實際表面上至少為 4.5:1（WCAG 2），並在透明或漸層表面的最亮點檢查。輕量級標題字型需要更多。APCA 是薄字型的有用第二意見，而非替代品。始終設置連結顏色；瀏覽器預設的藍色在幾乎所有設計上看起來都不對。
• 強調色用於少量小標記：標題中的一個詞、連結、懸停和焦點、當前導航項目。不是一個大塊顏色，也不用於列表編號。
• 表面：預設為帶有細線的平面。使用陰影時，有兩層（柔和的環境光加上更緊密的直接光）；邊框可以是半透明的，以便邊緣在任何背景上都保持清晰。內部圓角絕不大於其容器的圓角。在彩色背景上，將邊框和陰影向該色調傾斜。
• 懸停和焦點會提高相對於靜止狀態的對比度。
• 淺色、深色或兩者。 及早決定。一個固定的方案是可以的：設置 color-scheme 和 theme-color 以匹配。對於兩者，在 prefers-color-scheme: dark 下重新定義相同的代號（如果存在切換開關，則加上 [data-theme] 覆蓋），並在每種方案中檢查對比度、陰影、圖片和程式碼區塊。
• 背景：純色，或一種溫和的漸層或光暈；圖案僅在 ≤10% 對比度時使用。絕不同時使用兩個喧鬧的元素。

7. 動畫

動畫應幫助人們看到發生了什麼變化或應該看哪裡。在這些網站上，通常越少越好。

• 預設：載入時主要內容的短暫淡入（向上移動幾個像素）加上懸停/焦點反饋。僅此而已的頁面是一個完整、平靜的結果。
• 滾動顯示是可選的，並保持微妙：透明度加上 6–20px 的移動、ease、0.3–1 秒、在大約 25% 可見時播放一次。按距離級聯（標題移動最少，按鈕最多）；交錯 100–150ms，最多 6–8 個項目。絕不用於長篇閱讀內容。
• 先使用 CSS，然後使用 Web 動畫 API，最後只有在真正需要時才使用 JS 函式庫。
• 僅動畫 opacity 和 transform，明確列出轉換屬性（從不使用 transition: all），並設置 transform-origin 為動畫物理起始的位置。對於 SVG，使用 transform-box: fill-box 動畫 <g>。
• 可中斷：使用轉換而非固定時間軸，以便滑鼠移出或第二次點擊能平滑反向。
• 懸停/焦點：按鈕縮放約 1.02–1.06 或上升；導航和文字連結獲得一個從左側滑入的 2px 底線，也在 :focus-visible 上。
• 環境動畫：最多一個慢速循環，或沒有。循環媒體是靜音的 <video>，而非 GIF，且超過 5 秒的動畫需要暫停控制。
• 玻璃閃爍（Chrome）：不要淡出 backdrop-filter 元素的子元素或動畫其模糊（請參閱課程）。

8. 互動模式

• 連結就是連結。 導航使用 <a>，以便新標籤頁、複製連結和中鍵點擊正常運作。沒有無效區域：如果一行看起來可點擊，則整個行都應可點擊。
• 表單（註冊、聯繫）：每個欄位都有標籤；正確的 type、name、autocomplete 和 inputmode；電子郵件欄位關閉拼寫檢查；首先使用原生驗證。不要阻止貼上或按鍵輸入，並且不要在使用者嘗試之前禁用提交按鈕。錯誤訊息位於欄位旁邊，說明如何解決問題，並且提交時焦點移動到第一個錯誤。更多資訊在介面檢查清單中。
• 提交：按鈕保持其標籤並添加一個旋轉器，僅在約 200ms 後顯示，然後持續至少約 400ms，這樣快速響應就不會閃爍（請參閱片段）。成功後，用清晰的下一步替換表單。
• 揭露（常見問題、"顯示更多"）：一個 <button aria-expanded aria-controls>，使用 grid-rows 技巧動畫化，僅在 JavaScript 運行時才關閉狀態。
• 行內幫助優於工具提示。 首先在文字中解釋。如果需要工具提示，絕不依賴 title；在懸停和焦點上使用自訂工具提示，在第一個工具提示之前有短暫延遲，而在相鄰項目之間移動時沒有延遲。
• 文案：用訪客的語言說明頁面提供的內容；按鈕準確說明它們的作用（"獲取電子報"，不是"提交"）；錯誤訊息說明如何恢復。

9. 品質基準（Firm）

• 減少動畫：使用 prefers-reduced-motion: reduce 時，顯示立即出現，循環和平滑滾動關閉。
• 無 JS 安全：隱藏直到顯示的狀態位於 .js 類別之後，因此如果 JavaScript 失敗，沒有東西會保持不可見。
• 鍵盤和焦點：一個"跳到主要內容"連結、邏輯標題層級、

…

[為翻譯而截斷]