術語辭典

響應式網頁設計，指網站能根據不同裝置（手機、平板、桌機）的螢幕尺寸自動調整版面配置，提供最佳瀏覽體驗。實作上主要透過 CSS Media Query、Fluid Grid 和彈性圖片來達成。

使用者介面，指使用者與數位產品互動的視覺元素，包括按鈕、表單、導覽列、色彩、字型等所有可見的介面組成元素。UI 設計師負責讓介面視覺上美觀且清晰易用。

使用者體驗，指使用者與產品互動的整體感受與過程，涵蓋可用性、可及性、功能性和情感面向。UX 設計師關注的是解決使用者的問題，而非僅止於視覺美感。

行動裝置優先策略，設計時先考慮手機版的介面，再逐步擴展到平板和桌機。由 Luke Wroblewski 提出，是現代 RWD 設計的主流方法，有助於聚焦核心功能。

CSS 彈性盒模型，一維佈局系統，適合在一個軸向（橫向或縱向）排列元素。常用於導覽列、卡片排列、表單群組等單軸向的介面布局。

CSS 格線佈局，二維佈局系統，可同時控制橫向和縱向的元素排列。適合整頁版面規劃、複雜的內容佈局，是 Flexbox 的最佳搭配。

Google 定義的三項核心網頁體驗指標：LCP（最大內容繪製）、FID/INP（互動延遲）、CLS（累積版面位移）。這些指標直接影響 Google 搜尋排名，是網站效能優化的重要目標。

最大內容繪製，衡量頁面主要內容（通常是大圖或標題）載入完成的時間。Google 建議 LCP 應在 2.5 秒內完成。

累積版面位移，衡量頁面載入過程中元素意外移動的程度。常見原因包括圖片未設定尺寸、動態插入內容等。Google 建議 CLS 應低於 0.1。

設計系統，一套包含元件庫、設計原則、樣式指南的完整設計規範集合。幫助團隊維持產品視覺一致性，提升設計與開發效率。知名案例包括 Google Material Design、Apple HIG。

Brad Frost 提出的設計方法論，將介面元素按複雜度分為五層：原子（基礎元素）、分子（元素組合）、生物體（功能區塊）、模板（頁面結構）、頁面（實際內容）。

排版學，研究字型選擇、字型大小、行高、字距、段落間距等文字排版的藝術與技術。良好的排版能顯著提升閱讀體驗和視覺美感。

線框稿，低擬真度的介面草圖，用於規劃頁面結構和元素位置，不包含視覺設計細節。是設計流程初期的重要產出，便於快速迭代和溝通。

互動原型，模擬產品功能和流程的可互動版本，用於使用者測試和利害關係人展示。可以是低擬真的紙本原型，或高擬真的 Figma 互動設計。

無障礙設計，確保網站對所有使用者（包括視覺、聽覺、運動或認知障礙者）都能正常使用。WCAG 是主要的可及性標準指南，分為 A、AA、AAA 三個等級。

CSS 自定義屬性（CSS 變數），使用 --variable-name 語法定義，可在整個樣式表中重用。是實作主題切換、Design Token 的關鍵技術。

原生瀏覽器 API，允許開發者建立可重用的自定義 HTML 元素。包含 Custom Elements、Shadow DOM 和 HTML Templates 三個主要技術。

現代網頁架構，以 JavaScript、API 和 Markup 為核心，透過預先渲染靜態頁面並搭配 CDN 部署，達到高效能、高安全性的網站。Astro、Next.js 都是常見的 JAMstack 工具。

靜態網站生成，在建置時預先生成所有 HTML 頁面，而非在使用者請求時動態渲染。具有最佳載入效能和安全性，適合內容型網站。

可縮放向量圖形，基於 XML 的向量圖形格式，在任何尺寸下都保持清晰不失真。適合 LOGO、圖示、插圖，可直接嵌入 HTML 進行操控和動畫。

深色模式，以深色背景為主的 UI 設計方案，可降低螢幕亮度、減少眼睛疲勞，並在 OLED 螢幕上節省電力。透過 CSS @media (prefers-color-scheme: dark) 實作。

CSS 容器查詢，允許元素根據其父容器的大小（而非視窗大小）來調整樣式。是 Media Query 的強力補充，使元件真正具備自適應能力。