圖片畫廊與燈箱系統 是做什麼的？
目的
圖片畫廊與燈箱系統提供了一套嚴謹的設計方法，用於在網頁上展示媒體收藏。它規範了如何以靜態網格（畫廊）呈現一組圖片或影片，以及如何將這些素材過渡到高衝擊力、無干擾的全螢幕覆蓋層（燈箱）。此系統確保視覺作品集、電子商務產品縮放與案例研究能夠保持高度響應性、符合深入的無障礙規範（WCAG AA），並透過觸控滑動手勢、鍵盤控制與焦點陷阱支援實體裝置。
使用案例
- 作品集網站：展示攝影、藝術作品、建築設計或案例研究。
- 電子商務產品詳細頁面（PDP）：需要大規模細節影像探索。
- 內容豐富的媒體網站：文章內含互動式照片畫廊。
- 活動頁面與行銷著陸頁：展示活動攝影或推薦記錄。
- 房地產網站：以高解析度內部與外部導覽呈現物件。
何時不應使用
- 單張背景或內嵌媒體：對於獨立、非群組的背景圖像或簡單的內嵌文章圖表，這類不需縮放或輪播互動的情境。
- 資料量大的儀表板檢視：當主要任務是排序或分析結構化資料點（例如表格或圖表）時，全螢幕覆蓋層會中斷工作流程。請改用
data-table-ui-system。 - 複雜文件或 PDF：當使用者需要閱讀多頁文字文件時；燈箱最佳化於視覺媒體，而非閱讀密集型素材。
- 獨立上下文模態框：當對話框包含表單輸入、設定或豐富的互動應用程式，而非結構化媒體時。請改用
overlay-and-dialog-system或settings-interface-system。
輸入
- 媒體庫存： 高解析度原始素材與對應的低解析度或壓縮縮圖變體。
- 上下文元資料： 標題、描述、版權資訊、說明文字與必要的無障礙替代（
alt）文字。 - 響應式間距規則： 基於網站已建立的
responsive-grid-system與fluid-spacing-system的目標網格間距、邊距與佈局欄位規則。 - 互動對比色板： 符合無障礙標準的文字與圖示顏色規格（滿足 WCAG 4.5:1 最小對比度），用於控制覆蓋層、關閉按鈕與分頁點。
輸出
- 畫廊網格規格： 定義欄位佈局、圖片長寬比、懸停狀態與焦點保留規則。
- 燈箱結構藍圖： 全螢幕覆蓋層的結構，詳細說明控制項（上一張、下一張、關閉）、說明文字位置與縮圖條佈局。
- 手勢與鍵盤規格： 完整的互動對應矩陣，對應鍵盤事件、點擊/觸控區域與拖曳/滑動行為。
- 無障礙地標圖： 邏輯角色（
dialog、group）、標籤（aria-label）、焦點陷阱規則與即時狀態宣告。
工作流程
1. 建立畫廊網格基礎
從建構主要頁面畫廊開始，以平衡掃描效果與螢幕空間：
- 長寬比標準化： 使用統一的長寬比（例如 1:1 正方形或 4:3 標準）對畫廊縮圖進行分組，以建立有序的節奏。使用 CSS
aspect-ratio屬性防止佈局跳動。 - 間距與邊距： 使用
fluid-spacing-system的記號（通常為--space-s或--space-m）作為網格間距。 - 懸停/焦點提示： 套用
interactive-state-system的慣例。當使用者懸停或聚焦於縮圖時，觸發微妙的視覺變化（例如縮放、柔和覆蓋層對比、自訂搜尋/縮放游標），以提示該項目可點擊。 - 語意化 HTML： 使用列表包裝器（
<ul>/<li>）建構畫廊，並將縮圖標記為button元素（或連結，如果需要索引/深層連結），以確保鍵盤可達性。
2. 設計全螢幕燈箱背景
燈箱背景必須將觀看者與頁面其他部分區隔開：
- 遮罩層： 覆蓋一層實色或半透明背景（例如
#0a0a0a搭配 95% 不透明度或深色背景模糊），以消除周邊干擾。 - 長寬比保留： 將活動圖片置於視窗正中央。確保容器使用
max-width: 90vw和max-height: 80vh動態縮放，以適應任何視窗而不裁剪或切掉原始長寬比。 - 載入狀態： 建立一個置中的視覺指示器（旋轉圖示、載入骨架或進度環），並具備 aria 感知能力（
aria-busy="true"），確保使用者知道高解析度素材正在下載。
3. 建立導航控制項與說明覆蓋層
定位並設定覆蓋層元素的樣式，以最佳化桌面與行動裝置的人體工學：
- 關閉目標： 將關閉按鈕置於右上角。它必須有清晰的視覺邊界，滿足最小觸控目標尺寸 48x48px（或依照 WCAG 的 44x44px），並保持清晰的鍵盤焦點環。
- 上一張與下一張箭頭： 將導航箭頭垂直置中於左右邊緣。在行動裝置上，隱藏這些箭頭或將其稍微內縮，以將焦點完全保留給觸控滑動手勢。
- 說明文字與索引指示器： 在容器底部放置語意化的說明文字與索引（例如「第 3 張，共 12 張」）。使用
aria-live容器在索引更新時通知螢幕閱讀程式變更事件。 - 縮圖條： 在主圖片下方，顯示一行可滾動的小縮圖。使用粗的高對比邊框與明顯的
:focus輪廓來突出顯示活動項目。
4. 配置鍵盤與手勢機制
燈箱必須以同等優雅的方式處理桌面周邊裝置與行動手勢互動：
- 鍵盤對應： 確保立即支援按鍵控制：
Escape關閉燈箱，ArrowRight/ArrowDown觸發「下一張」，ArrowLeft/ArrowUp觸發「上一張」。 - 焦點陷阱： 燈箱開啟時，將鍵盤焦點限制在燈箱內。使用者不得跳轉回背景頁面。第一個聚焦的元素應為主對話框容器或關閉按鈕。
- 焦點還原： 燈箱關閉時，立即將焦點還原到觸發它的特定縮圖按鈕。
- 滑動導航： 支援流暢的向左與向右觸控螢幕滑動手勢。
- 滑動關閉： 允許垂直（向上或向下）拖曳或滑動以快速關閉燈箱，複製原生行動作業系統的模式。
5. 最終完成無障礙宣告與文件大綱
套用進階 ARIA 宣告，以確保符合 WCAG AA 標準的螢幕閱讀程式體驗：
- 角色與標籤： 將燈箱包裝器標記為
role="dialog"、aria-modal="true"，並使用aria-label或參照標題/說明的aria-labelledby來標記它。 - 背景遮蔽： 燈箱啟用時，對主要頁面包裝器（
<main>或#app-root）套用aria-hidden="true"，以確保螢幕閱讀程式的掃描範圍僅限於覆蓋層內。 - 即時更新： 確保圖片標題/說明的變更透過將其置於
aria-live="polite"區域內或透過該區域參照來進行宣告。
決策規則
- 解析度分割： 畫廊網格中的縮圖必須經過重度壓縮並設定適當尺寸（例如最大寬度 600px）。燈箱必須載入主高解析度變體，但僅在需要時（延遲載入前一張與下一張投影片）以節省行動頻寬。
- 鍵盤與觸控優先順序： 在行動裝置視窗（寬度 < 768px）上，優先為圖片保留螢幕空間。隱藏桌面 UI 控制項（上一張/下一張箭頭），改用觸控滑動手勢，但始終保留一個高度可見的「關閉」按鈕。
- 無限循環與硬停止：
- 使用無限循環（輪播在最後一項後循環回第一項）：適用於創意作品集、推薦或產品，這類流暢掃描較佳的情境。
- 使用硬停止（最後一項時停用下一張箭頭）：適用於逐步教學、說明集或按時間順序的時間軸，這類方向性至關重要的情境。
- 說明文字與覆蓋空間： 如果圖片有較長的描述，請勿將其覆蓋在圖片上方。將其放置在圖片邊界下方的專屬底部欄位中，允許文字在超出垂直螢幕空間時獨立滾動。
- 桌面游標提示： 動態變更桌面游標：
- 懸停畫廊縮圖：
cursor: zoom-in - 活動燈箱圖片（可縮放）：
cursor: zoom-in（點擊可展開至全解析度，並將游標變更為cursor: zoom-out以進行平移）。 - 懸停燈箱背景：
cursor: pointer（點擊關閉覆蓋層）。
- 懸停畫廊縮圖：
約束條件
- 響應式設計： 圖片不得在燈箱內扭曲或失去其長寬比。容器必須使用彈性視窗單位（
vw/vh）與 CSSobject-fit: contain，以在所有裝置方向上嚴格保持在螢幕邊界內。 - 對比度比率： 關閉、導航與縮圖互動控制項必須與背景及圖片覆蓋層達到至少 4.5:1 的對比度。
- 焦點狀態： 每個活動導航元素必須具有可見的
:focus-visible環。焦點指示器不得被邊界框或相鄰元素裁剪。 - 觸控目標： 行動裝置上的點擊目標必須符合 WCAG 2.2 SC 2.5.8（至少 24x24px，但主要操作如關閉與導航強烈建議使用 44x44px）。
常見失敗模式
- 「無限分頁陷阱」： 分頁跳出開啟的燈箱進入背景頁面，導致螢幕閱讀程式讀取不可見內容並破壞鍵盤導航。
- 「圖片溢出」： 高聳的直向圖片超出行動視窗的頂部或底部，使導航箭頭或關閉按鈕完全無法點擊。
- 焦點遺失： 靜態畫廊中的縮圖因絕對置中裁剪而切掉核心主體（例如人物的頭部）。使用
object-position或自訂響應式裁剪解決。 - 「逃脫失效」： 忘記配置
Escape鍵，導致僅使用鍵盤的使用者被困在模態覆蓋層內，沒有直觀的方式關閉它。 - 開啟時佈局偏移： 燈箱開啟時瀏覽器滾動條消失，導致整個背景頁面佈局抖動或橫向偏移。透過增加匹配的邊距或滾動鎖定內距解決。
- 無焦點還原： 關閉燈箱後，焦點重置回網站地圖頂部或 body，迫使鍵盤使用者再次分頁瀏覽整個標題導覽才能回到原本的位置。
驗證標準
- 畫廊縮圖使用標準化的長寬比，並具有清晰的懸停/焦點指示器。
- 活動燈箱圖片保持其長寬比，並完美適應視窗限制（
max-width: 90vw和max-height: 80vh）。 - 關閉按鈕與箭頭相對於背景層滿足至少 4.5:1 的對比度。
- 鍵盤導航已啟用：
Escape關閉，ArrowRight前進，ArrowLeft後退。 - 燈箱開啟時焦點被限制在燈箱內，關閉時完美還原到觸發它的畫廊元素。
- 觸控手勢已啟用：向左/向右滑動可導航，在行動視窗上向上/向下滑動可關閉。
- 燈箱模態框啟用時，主要頁面包裝器標記為
aria-hidden="true"。 - 載入高解析度素材時，載入狀態旋轉圖示可見並標記為
aria-busy="true"。