打造獲獎等級、沉浸式的網路體驗，達到 Awwwards 入選代理商的水準。當使用者提及「Awwwards 品質」、「讓我的網站驚豔」、「滾動動畫」、「視差敘事」、「電影級網頁設計」、「作品集網站」或「品牌體驗」時使用。也適用於將一般登陸頁面提升為令人難忘的數位體驗。涵蓋戲劇性排版、有目的的動態、基於滾動的構圖，以及效能最佳化的動畫。基礎 UI 請參考 refactoring-ui。字型選擇請參考 web-typography。
Top-Design：獲獎等級的數位體驗
打造世界級數位代理商水準的網站與應用程式。此技能體現了持續贏得 FWA、Awwwards、CSS Design Awards 與 Webby Awards 的工作室所擁有的工藝。
核心原則
每個像素都有意圖——沒有預設，沒有偶然。 您所仿效的代理商——Locomotive、Studio Freight、AREA 17、Active Theory、Hello Monday——共享相同的 DNA：排版即設計，動態創造情感，留白是武器，效能無可妥協（60fps 或 nothing）。
基礎： 8/10 與 10/10 之間的差距不是技巧——而是意圖。8/10 有好的排版與流暢的動畫；10/10 的排版令人屏息，動畫訴說故事。每個決定都必須回答：「這是否服務於體驗，還是只是填補空間？」
評分
目標：10/10。 使用以下評分量表為任何數位體驗評分 0-10——10/10 的作品會登上 Awwwards。務必陳述當前分數以及達到 10/10 所需的具體改進。
評分量表
| 分數 | 等級 | 描述 |
|---|---|---|
| 0-2 | 業餘 | 預設字型、無層級、通用版面、模板感 |
| 3-4 | 基本 | 尚可的排版、有些層級，但令人遺忘 |
| 5-6 | 合格 | 良好的基礎、乾淨的執行，但缺乏靈魂 |
| 7-8 | 專業 | 強烈的排版、有意的動態、清晰的觀點 |
| 9 | 卓越 | 標誌性時刻、令人難忘的細節、近乎完美的工藝 |
| 10 | 世界級 | 會贏得 Awwwards SOTD，定義新標準 |
類別評分（各 0-10）
排版（權重：25%）
| 分數 | 標準 |
|---|---|
| 0-3 | 系統字型、統一比例、預設字距 |
| 4-6 | 高級字型、有些比例對比、基本層級 |
| 7-8 | 戲劇性比例對比（10:1+）、完美字距、光學對齊 |
| 9-10 | 排版即設計——令人屏息的時刻、自訂/可變字型、字型作為建築 |
視覺構圖（權重：25%）
| 分數 | 標準 |
|---|---|
| 0-3 | 全部置中、等距、僵硬的網格、無張力 |
| 4-6 | 些許不對稱、尚可的間距節奏、基本深度 |
| 7-8 | 有意的網格破壞、分層元素、強烈的負空間 |
| 9-10 | 磁吸式構圖、出乎意料的尺度轉換、會呼吸且令人驚喜的元素 |
動態與互動（權重：20%）
| 分數 | 標準 |
|---|---|
| 0-3 | 無動畫或預設/線性動態 |
| 4-6 | 基本轉場、有些滾動效果 |
| 7-8 | 自訂緩動、編排好的揭露、有目的的視差 |
| 9-10 | 訴說故事的動態、完美計時的編排、滾動感覺像是被發明的 |
色彩與氛圍（權重：15%）
| 分數 | 標準 |
|---|---|
| 0-3 | 隨機顏色、純黑/白、無氛圍 |
| 4-6 | 和諧色板、有些氛圍 |
| 7-8 | 顏色感覺是擁有的、情境轉換、有意的對比 |
| 9-10 | 顏色感覺是為此專案發明的、可感受的氛圍 |
細節與工藝（權重：15%）
| 分數 | 標準 |
|---|---|
| 0-3 | 預設游標、無懸停狀態、一切通用 |
| 4-6 | 基本懸停狀態、有些自訂元素 |
| 7-8 | 磁吸按鈕、品牌選取顏色、自訂游標（若使用者同意） |
| 9-10 | 每個微細節都考慮到——焦點狀態、載入、空狀態、滾動指示器 |
快速評分公式
總分 = (排版 x 0.25) + (構圖 x 0.25) + (動態 x 0.20) + (色彩 x 0.15) + (細節 x 0.15)
10/10 設計的七大支柱
1. 排版即建築
核心概念： 排版不是裝飾在設計上的圖層——它就是設計本身。您的字型、比例與字距決定了色彩氛圍、動畫風格、間距節奏與整體個性。
為何有效： 戲劇性的比例對比創造了層級，即使在模糊或從房間另一端觀看時也能傳達訊息。紀念碑般的展示字型與親密內文之間的張力，讓人們停止滾動。
關鍵見解：
- 大規模比例對比無可妥協——展示字型與內文之間至少 10:1（例如 180px / 14px）；極端情況下使用填滿視口的字型
- 大字型的負字距（-0.02em 到 -0.05em）將展示字型收緊為凝聚的單元；內文需要寬鬆的行高（1.5-1.7）
- 字型選擇定義了層級——高級字型工房（Pangram Pangram、Dinamo、Grilli Type、Klim、Commercial Type）或優質 Google 替代方案（Space Grotesk、Instrument Serif、Fraunces）；英雄體驗絕不使用 Inter、Roboto、Arial 或 system-ui
- 可變字型可在懸停時實現重量動畫，而不會造成版面位移
- 光學對齊勝過數學對齊——以視覺調整，而非僅靠數值
- 控制每個標題的斷行——漂亮的斷行需要在關鍵斷點手動介入
應用： 填滿視口的展示字型驟降至內文（Locomotive 英雄區）；可變字型搭配懸停重量動畫（Studio Freight）；襯線/無襯線配對搭配極端比例對比（AREA 17 編輯風格）。展示字型 = 一句話，3-7 個字；內文 = 最小 16-18px，45-75 字元度量。
選擇字型或建立字型比例時，請參閱 references/typography.md——依風格命名的字型配對、完整的流體 clamp() 與基於階梯的比例、字距/行高階梯，以及字型子集化/FOUT 機制。
2. 版面與構圖
核心概念： 掌握網格，以便有意地打破它——每次違反都應感覺是刻意的，而非偶然。密度與呼吸空間的節奏創造了吸引注意力的閱讀體驗。
為何有效： 留白是主動的設計素材，能創造張力並控制節奏。不對稱產生了置中構圖無法達到的視覺能量；有意重疊或出血的元素感覺充滿活力且自信。
關鍵見解：
- 留白作為武器——業餘者填滿每個空隙；10/10 設計師利用空無來創造控制視線的張力
- 不對稱平衡創造趣味——將元素偏離中心，讓圖片溢出容器
- 出乎意料的尺度轉換創造節奏——交替巨大/親密、密集/稀疏以達到敘事節奏
- 網格悖論——強大的底層網格正是讓破壞有意義的原因；沒有它，破壞就是混亂
應用： 偏離標題搭配出血圖片（margin-left: 8.33%; margin-right: -5vw）；多變的卡片尺寸以達到有意的對稱（Locomotive 展示）；重疊元素以創造深度（Active Theory）。交替全幅沉浸與收納的閱讀區塊。
道德界限： 版面實驗絕不能損害導航清晰度——使用者必須始終知道他們在哪裡以及如何前進。
規劃區塊或進行響應式設計時，請參閱 references/layout-systems.md——網格框架、斷點系統，以及不對稱/出血元素模式。
3. 動態與動畫
核心概念： 每個動畫都必須回答「為什麼這個會動？」頂級動態的三條法則：目的勝於裝飾、自訂曲線（絕不線性）、編排勝於孤立。
為何有效： 編排好的動態引導注意力、傳達層級，並創造情感共鳴。自訂緩動曲線賦予動態一種預設瀏覽器緩動無法達到的物理質感。
關鍵見解：
- 自訂緩動是強制的——禁止使用
ease、ease-in、ease-out、linear；使用cubic-bezier(0.16, 1, 0.3, 1)（expo out）、cubic-bezier(0.25, 1, 0.5, 1)（quart out）、cubic-bezier(0.87, 0, 0.13, 1)（expo in-out） - 頁面載入遵循嚴格的編排——結構（0-200ms）、英雄標題單字交錯（200-600ms）、副標題（400-800ms）、導航串聯（600-900ms）、支援元素（800-1200ms）；參考資料持有每個元素的標準交錯值
- 以關係而非孤立的方式動畫——一起移動的元素感覺凝聚且有意
- 60fps 無可妥協——如果動畫掉幀，簡化或移除它
應用： 編排好的交錯頁面載入揭露（Studio Freight）；clip-path/mask 圖片在滾動進入時揭露（AREA 17）；懸停重量轉換與磁吸按鈕（Dogstudio）。文字行個別向上滑入並交錯——絕不作為區塊淡入；頁面變形而非切換。
道德界限： 動態絕不能阻擋互動或引起暈動——尊重 prefers-reduced-motion，確保所有內容在無動畫時也可存取，並證明任何超過 1.2 秒的動畫是合理的。
實作動態時，請參閱 references/animation-patterns.md——可複製貼上的滾動揭露、交錯載入編排、頁面轉場，以及磁吸/懸停微互動（附程式碼）。
4. 色彩與對比
核心概念： 色彩應感覺是為每個專案發明的——絕不從通用色板產生器提取。三種方法：單色張力（95% 一種顏色，5% 強調色）、大膽簽名色（擁有一個組合）、情境轉換（色板回應內容）。
為何有效： 色彩在閱讀任何文字之前就創造了氛圍。純黑/白感覺數位且無生命；溫暖的變體感覺有質感且經過考慮。克制的強調色能精確引導視線到預期位置。
關鍵見解：
- 絕不使用純黑或純白——#0a0a0a 和 #fafaf9 具有 #000/#fff 所缺乏的物理質感
- 建立功能性層級——text-primary、text-secondary（60% 不透明度）、text-tertiary（40%）、surface、border（10%）以達到一致的深度
- 一個強烈的強調色節制使用（#ff4d00 或類似）勝過複雜的多色板
- 區塊之間的情境色彩轉換創造視覺章節
- 為淺色與深色情境設計系統，而非個別實例
應用： 單色搭配簽名強調色（Locomotive：奶油色 + 黑色 + 橙色火花）；每個案例研究的情境轉換（AREA 17）；深色模式搭配一個鮮豔強調色（Stripe：海軍藍 + 紫色）。一切由 CSS 自訂屬性驅動（--color-dark/-light/-accent 加上功能性 --color-text-primary/-surface）；強調色僅出現在 CTA、連結與單一細節時刻。
當您需要任何支柱的實作範例時，請參閱 references/case-studies.md——逐個代理商的真實色彩系統、字型處理與微互動分解，以便逆向工程。
5. 基於滾動的設計
核心概念： 滾動是網路的主要互動，應感覺是經過設計的，而非預設。將滾動視為敘事裝置——控制節奏、創造揭露、建立張力、傳遞標誌性時刻。
為何有效： 預設滾動是機械式的，將所有內容視為同等重要。當滾動位置驅動揭露與轉場時，瀏覽內容變得參與而非被動。
關鍵見解：
- 平滑滾動是基礎——實作 Lenis 或 Locomotive Scroll，以獲得每個獲獎網站都使用的加權物理感
- 視差必須有目的——節制使用，且僅用於裝飾元素；絕不用於文字或關鍵內容
- 固定區塊創造敘事節奏——鎖定一個區塊，同時內容在其中轉換
- 水平滾動畫廊需要清晰的視覺提示
- 揭露應是漸進的——元素在可見時進入，創造發現感
- 滾動速度可調節動畫速度，以獲得響應式感覺
應用： 固定英雄區搭配滾動驅動轉換（Apple 深度探索）；水平滾動畫廊搭配視覺提示（Studio Freight）；滾動驅動動畫序列（Active Theory）。使用 IntersectionObserver 進行輕量級類別切換；保留 GSAP ScrollTrigger 用於複雜的多步驟序列。
道德界限： 滾動劫持是敵對的 UX——使用者必須始終能夠以自己的速度滾動並到達所有內容。
請參閱 references/technical-stack.md 以設定平滑滾動（Lenis/Locomotive 設定、函式庫取捨），以及 references/animation-patterns.md 以了解固定、水平畫廊與滾動速度序列。
6. 效能與載入
核心概念： 效能從第一天起就是設計限制，而非最佳化步驟。一個掉幀的美麗動畫或一個造成版面位移的驚豔字型，都無法通過工藝測試。
為何有效： 使用者將效能視為品質——即時載入與流暢滾動無論視覺複雜度如何都感覺高級，而一個驚豔但卡頓的網站感覺像壞了。
關鍵見解：
- 子集化並預載字型——僅需要的字形、
font-display: swap或optional、預載關鍵檔案 - 最佳化圖片——WebP/AVIF 搭配備援、響應式
srcset、延遲載入折疊以下內容 - GPU 加速動畫——僅動畫
transform和opacity；絕不width、height、top、left或margin - CLS 接近零——為圖片、字型與動態內容保留空間（容器上的
aspect-ratio） - LCP 低於 2.5 秒——最佳化英雄區的關鍵渲染路徑
- 載入狀態是設計好的元素——自訂骨架與進度指示器，而非事後補救
應用： 子集化/預載/交換字型（<link rel="preload" as="font" crossorigin>）；AVIF/WebP 搭配響應式 srcset（<picture> 備援）；僅 GPU 動畫（transform: translate3d() + opacity）。使用 Lighthouse 審核，目標 90+；程式碼分割並延遲非關鍵 JS。
道德界限： 快速但不可存取不是有效的取捨——絕不為了速度而剝奪無障礙功能或語意 HTML。
選擇函式庫或達到效能預算時，請參閱 references/technical-stack.md——推薦的技術棧與具體的字型/圖片/動畫最佳化技術。
7. 微互動
核心概念： 工藝存在於大多數設計師跳過的 1%：品牌選取顏色、磁吸按鈕、設計過的焦點狀態、考慮過的載入狀態、精心製作的錯誤頁面、正確的微排版。
重要：自訂游標僅為選擇加入。 除非使用者明確要求或確認，否則絕不取代原生游標——誤用的自訂游標會損害可用性並感覺花俏。務必先詢問。
為何有效： 微互動表明每個像素都經過考慮。個別微妙，整體轉化——使用者感受到嵌入在體驗中的用心。
關鍵見解：
- 自訂游標反映品牌個性，在互動元素上有變體（受上述選擇加入規則約束）
- 品牌化的
::selection顏色，在所有背景上都能運作 - 每個連結與卡片都有考慮過的懸停狀態——縮放、覆蓋或有意義的轉換
- 焦點狀態既可見又美觀——鍵盤使用者能清楚看到的品牌化指示器
- 載入、空、404 與錯誤狀態是設計好的、有幫助的時刻
- 微排版正確——智慧引號、en/em 破折號、標題無孤兒、關鍵文字使用
text-wrap: balance
道德界限： 焦點狀態必須滿足鍵盤可見性要求，即使以品牌化方式設計；錯誤/空/404 狀態必須真正有幫助，而非僅裝飾性。
請參閱 references/animation-patterns.md 以取得可複製貼上的磁吸按鈕、游標與 ::selection/懸停微互動程式碼。
設計流程
按此順序工作——順序即是紀律：
- 概念先於程式碼。 先定義四件事：
品牌本質：哪一個詞捕捉了靈魂？
視覺張力：哪些對立力量創造了趣味？
標誌性時刻：人們會截圖並分享什麼？
技術野心：什麼推動了瀏覽器的極限？
- 先設計標誌性時刻——而非頁首。每個 10/10 專案至少有一個讓人們停下來分享的時刻（前所未見的英雄動畫、大膽到足以成為視覺的排版、訴說故事的滾動序列）。透過提問來確定：人們會截圖什麼、向同事描述什麼、嘗試逆向工程什麼，以及什麼讓它 unmistakably 是這個專案？
- 接下來選擇展示字型——它決定了其餘部分（支柱 1）。
- 在視覺設計的同時原型化動態，而非之後——動態不是潤飾（支柱 3）。
- 克制地發布——3 件完美的事勝過 10 件平庸的事。無情地刪減。
實作注意事項
- 以桌面為概念，以行動為建構——大膽夢想，漸進實作
- 使用專案慣例——如果 Tailwind 4+ 和/或 shadcn/ui 可用，擴展它們的設計 token 與元件作為 10/10 工藝的基礎，而非與之對抗
常見錯誤
每個修正指向定義規則的支柱——此處不重新推導數值。
| 錯誤 | 為何失敗 | 修正（參閱） |
|---|---|---|
| Inter、Roboto、Arial 或 system-ui 作為主要字型 | 應用字型表示通用，而非高級 | 高級字型工房或優質 Google 替代方案（支柱 1） |
| 統一字型比例（所有內容在 2 倍以內） | 無層級，無令人屏息的時刻 | 達到展示字型與內文的比例（支柱 1） |
ease、ease-in、ease-out 或 linear 緩動 |
機械、無生命——立即表示業餘 | 禁止——使用自訂 cubic-bezier（支柱 3） |
| 同時動畫所有內容 | 視覺噪音，無層級或敘事 | 按重要性交錯與排序（支柱 3） |
| 全部置中對齊 | 安全但無聊——無張力或能量 | 不對稱、網格偏移、出血元素（支柱 2） |
| 處處等距 | 單調——眼睛無處休息 | 變化密度：密集區塊，然後呼吸空間（支柱 2） |
| 純 #000000 / #ffffff | 無生命且刺眼 | 溫暖變體（支柱 4） |
| 預設瀏覽器滾動 | 機械，將所有內容視為同等重要 | 平滑滾動函式庫（支柱 5） |
| 紫到藍漸變英雄區 | 「AI 漸變」——通用趨勢跟隨 | 專案特定的簽名色方法（支柱 4） |
| 無標誌性時刻 | 合格但令人遺忘 | 先設計值得截圖的時刻（流程步驟 2） |
| 專業介面中的任何表情符號 | 表示 casual/業餘工藝 | 自訂圖示或排版處理 |
| 文字或關鍵內容上的視差 | 暈動、無障礙失敗 | 視差僅用於裝飾背景元素（支柱 5） |
| 動畫阻擋互動 | 敵對 UX | 保持所有動畫非阻擋（支柱 3） |
| 未修改的 Font Awesome 圖示 | 模板等級設計 | 自訂圖示，或大量自訂以符合品牌 |
| 預設表單樣式 | 立即打破工藝幻覺 | 設計每個輸入、選取、核取方塊與按鈕（支柱 7） |
快速診斷
每行回答「是」得 1 分，然後將總分對應到評分量表區間：11-12 -> 9-10，8-10 -> 7-8，5-7 -> 5-6，低於 5 -> 0-4。陳述該分數。
| 問題 | 若否 | 修正（參閱） |
|---|---|---|
| 英雄區排版是否讓人在滾動中暫停？ | 展示字型不夠引人注目 | 支柱 1——比例、獨特字型、填滿視口 |
| 是否有人會截圖任何區塊？ | 無標誌性時刻 | 流程步驟 2——讓一個區塊非凡 |
| 當你模糊眼睛時，設計是否仍可讀？ | 層級太平 | 更大的標題、更多留白、更強的強調色 |
所有緩動曲線是否都是自訂的（無 ease/linear）？ |
動態感覺預設 | 支柱 3——自訂 cubic-bezier |
| 構圖中是否有不對稱張力？ | 版面感覺安全 | 支柱 2——偏移、出血、變化密度 |
| 顏色是否感覺是為這個專案發明的？ | 通用色板 | 支柱 4——單色張力、簽名色或情境 |
| 頁面載入是否經過編排？ | 元素同時彈出 | 支柱 3——交錯揭露序列 |
| 滾動是否感覺自訂且有重量？ | 預設瀏覽器滾動 | 支柱 5——平滑滾動函式庫 |
| 微細節是否被考慮（選取、焦點、游標）？ | 預設瀏覽器行為仍存在 | 支柱 7——品牌選取、設計過的焦點（游標選擇加入） |
| CLS 是否接近零且 LCP 低於 2.5 秒？ | 效能削弱品質 | 支柱 6——子集化字型、WebP/AVIF、僅 transform/opacity |
| 每個動畫是否回答「為什麼這個會動？」 | 裝飾性動態 | 支柱 3——刪除無敘事或引導的動態 |
| 焦點狀態是否既美觀又可存取？ | 一個犧牲了另一個 | 支柱 7——符合 WCAG 可見性的品牌化指示器 |
延伸閱讀
- Designing with Type by James Craig——排版原則與層級的基礎文本
- Grid Systems in Graphic Design by Josef Muller-Brockmann——網格構圖的權威著作
- The Elements of Typographic Style by Robert Bringhurst——排版師的節奏、比例與工藝聖經
- Interaction of Color by Josef Albers——色彩感知與對比的必讀之作
- Layout Essentials: 100 Design Principles for Using Grids by Beth Tondreau——實用的網格版面原則
- Awwwards Annual: The Best 365 Websites Around the World——10/10 工藝的年度基準收藏
關於作者
此技能綜合了世界上獲獎最多的數位代理商技術：Locomotive（蒙特婁——Locomotive Scroll 的創造者，單色張力與大膽排練的大師）、Studio Freight（紐約——磁吸互動與簽名色板）、AREA 17（紐約/巴黎——情境設計系統與編輯版面）、Active Theory（洛杉磯——WebGL 與沉浸式 3D 敘事），以及 Hello Monday（哥本哈根/紐約——為 Spotify、Adidas、Google 打造趣味互動）。其他靈感來自 Dogstudio、Tonik、Instrument、Resn 以及更廣泛的 Awwwards、FWA、CSS Design Awards 與 Webby 獲獎者社群。
