coastdigitalgroup/coastai-skills

圖像與媒體系統

目的

圖像與媒體系統提供了一套將視覺資產整合到網站設計中的方法論。它確保圖像、插圖和影片不僅是「裝飾」，而是使用者體驗中具有功能性的部分。此系統建立了寬高比、響應式藝術指導和文字可讀性（疊加層）的規則，確保媒體無論螢幕大小或內容複雜度如何，都能保持高衝擊力且易於存取。

使用案例

• 為新網站建立藝術指導與視覺風格標準。
• 為 UI 元件庫（例如卡片、主視覺區）定義一致的寬高比矩陣。
• 設計背景圖像與影片的高對比文字疊加層。
• 管理「藝術導向」媒體的響應式裁切與焦點點保留。
• 標準化媒體密集型區塊（如畫廊、功能亮點與案例研究）的構圖。

何時不該使用

• 技術性資產最佳化： 請使用 website-development 中的 responsive-images 來處理壓縮、檔案格式與延遲載入等技術問題。
• 標誌與品牌設計： 主要品牌識別本身（商標、標誌）的設計通常不在網頁設計的範疇內。
• 圖示系統： 請使用 iconography-system 處理小型、功能性的 UI 符號。
• 純裝飾性圖案： 純粹抽象、非語意的背景紋理，且不與內容互動。

輸入

1. 品牌藝術指導： 預期的視覺「語調」（例如：隨興、技術感、高對比、極簡）。
2. 內容清單： 所需的媒體類型（例如：產品照、人像、抽象背景）。
3. 響應式網格系統： 媒體所處的佈局環境。
4. 字體系統： 會與媒體互動或疊加在媒體上的文字樣式。

輸出

1. 寬高比矩陣： 一組定義好的比例（例如 16:9、1:1、4:3），並對應到特定的元件類型。
2. 疊加層可讀性規範： 遮罩、漸層與模糊處理的標準，以確保文字對比度。
3. 藝術指導對應圖： 針對手機、平板與桌機定義的焦點點規則與裁切策略。
4. 構圖藍圖： 媒體如何與相鄰內容（例如 50/50 分割、內嵌媒體、滿版出血）關聯的規則。

工作流程

1. 定義視覺語言

為所有媒體建立一致的「濾鏡」或風格，以確保凝聚力：

• 處理方式： 定義飽和度、色溫與對比度的規則。
• 密度： 決定圖像應保持豐富/細節或簡約/留白。
• 構圖： 設定圖像內「留白」的標準（例如：「所有產品照必須有 10% 的負空間邊距」）。

2. 建立寬高比標準

使用一組一致的比例來防止佈局「跳動」並維持節奏感：

• 電影比例（16:9 / 21:9）： 最適合主視覺區與沉浸式影片。
• 標準比例（4:3 / 3:2）： 最適合文章預覽與一般攝影。
• 正方形（1:1）： 最適合產品列表、大頭貼與社交網格。
• 直立比例（3:4 / 9:16）： 最適合行動優先內容與高挑的功能亮點。

3. 設計文字可讀性（疊加層）

當文字放置在媒體上方時，使用「可讀性圖層」：

• 遮罩： 一種微妙的半透明黑色或白色疊加層（通常透明度 10-40%）。
• 漸層： 一種方向性淡出（例如由下往上），使文字背後的區域變暗，同時保持圖像其他部分清晰。
• 模糊： 對文字後方的區域套用 backdrop-filter 模糊效果，以減少視覺噪點。
• 文字位置： 將文字對齊到圖像中「最安靜」的區域。

4. 設定響應式藝術指導

圖像必須改變其「裁切」以適應不同的螢幕形狀：

• 焦點點保留： 辨識圖像的「主體」，並確保在容器形狀改變時（例如 object-position 設定）主體仍保持可見。
• 行動裝置轉向： 在行動裝置上，從水平桌面裁切（16:9）切換為正方形或直立裁切（1:1 或 4:5），以最大化視口利用率。
• 縮放而非拉伸： 絕不允許圖像失去其寬高比；使用 object-fit: cover 在填滿容器的同時保持比例，並利用 CSS aspect-ratio 屬性保留空間，以避免在資產載入前佈局發生位移。
• 藝術導向裁切： 當需要根據視口進行不同的裁切（而非僅不同尺寸）時，使用包含多個 <source> 中斷點的 <picture> 元素；如果僅解析度改變而構圖不變，則在單一 <img> 上使用 srcset/sizes。

5. 定義構圖模式

決定媒體如何與周圍佈局互動：

• 滿版出血： 媒體延伸到視口邊緣。最適合高衝擊力的介紹區塊。
• 內嵌 / 包含： 媒體保持在網格欄位內。最適合輔助性圖像。
• 分層效果： 媒體與其他元素（如卡片或文字）重疊，以創造深度。

決策規則

• 可讀性規則： 如果文字放置在圖像上，必須符合 WCAG AA 對比度（4.5:1）。若不符合，則套用更暗的遮罩或移動文字。
• 比例一致性： 同一行或同一網格中的所有卡片必須使用相同的寬高比，以確保對齊。
• 主體優先裁切： 當寬高比因行動裝置而改變時，始終優先保留圖像主體（例如人物的臉或產品）。
• 空狀態降級方案： 當圖像載入失敗或未提供時，定義一個「佔位樣式」，使用品牌色彩的品牌中性圖形。
• 影片互動： 始終提供「播放/暫停」控制，且切勿自動播放含聲音的影片。
• 保留空間： 每個媒體容器必須定義 aspect-ratio 或明確的 width/height，以便瀏覽器能在資產下載前保留佈局空間。

限制條件

• 可及性： 圖像上的文字必須能被螢幕閱讀器讀取（不可扁平化到圖像中）。所有語意圖像必須有 alt 文字。
• 效能（設計面）： 避免對只會以較小尺寸顯示的元素（如大頭貼）要求超高解析度。
• 響應性： 媒體絕不可導致水平滾動。寬高比應保持穩定，以防止版面位移（CLS）。

常見失敗模式

• 「對比度失敗」： 在淺色/複雜的圖像上使用白色文字，且無遮罩，導致文字無法閱讀。
• 「斬首」： 不當的響應式裁切，在行動裝置上切掉頭部或主要主體。
• 比例混亂： 在同一頁面上使用 5 種不同的寬高比，造成破碎且凌亂的視覺節奏。
• 資產不符： 將高品質攝影與「剪貼畫」風格的插圖混合，破壞品牌一致性。
• 「拉伸」： 將圖像強行放入不符合其比例的容器中，導致變形。

驗證標準

• 每個帶有文字疊加層的圖像均符合 WCAG AA（4.5:1）對比度。
• 相似元件類型內的寬高比一致（例如所有部落格卡片均為 4:3）。
• 在行動裝置、平板與桌面視口中均保留了焦點點。
• 所有語意圖像都已定義描述性的 alt 文字。
• 媒體不會造成水平溢出或佈局變形。
• 所有資產維持清晰的視覺風格（藝術指導）。
• 每個媒體容器都透過 aspect-ratio 或明確尺寸保留空間，以防止累積版面位移（CLS）。