Clerkcode02/app-screenshot-showcase

應用程式截圖展示

真實截圖是事實的來源。切勿捏造、重繪、修圖或「美化」應用程式 UI。切勿修改截圖內部的文字。

兩種裝置類型。 回報、審查與解決是市民行動應用程式的畫面 （device: "mobile"，以直向 PhoneFrame 呈現）。指派與回應則發生在 營運中心的 網頁檢視 中，而非行動應用程式（device: "web"，以橫向 BrowserFrame 呈現）——請參閱 sos-content-accuracy「已驗證的產品事實」。 請在接收時就正確區分：強行將網頁儀表板截圖放入手機框中會錯誤呈現產品。

檔案存放位置

內容	放置位置（使用者）	輸出位置（產生）
應用程式截圖（PNG/JPG，全解析度）	assets/screenshots-raw/	public/screenshots/<id>.webp（+ .avif）
標誌、應用程式圖示、品牌標記	assets/brand-raw/	public/brand/
Open Graph 圖片（1200×630）	assets/brand-raw/og-image.png	public/brand/og-image.jpg

assets/ 不會部署。只有 public/ 中的最佳化檔案才會上線。

命名慣例

<順序>-<畫面用途>.png，全小寫，短橫線分隔，例如 01-home.png、02-category-select.png、03-report-form.png、04-report-submitted.png、06-welcome.png、07-register.png、08-verify.png、09-login.png。 若使用者的檔案命名隨意，請逐一檢查並根據用途重新命名。

目前清單 ID 及其應包含的內容：

id（檔名基底）	裝置	畫面
hero-primary	mobile	首頁
hero-secondary	mobile	類別選擇畫面
how-report	mobile	回報表單（記錄/提交事件）
how-review	mobile	提交後的確認畫面
how-assign	web	營運中心網頁檢視——正在指派回報
how-respond	web	營運中心網頁檢視——回應者路線指引/位置
how-resolve	mobile	顯示已解決回報的狀態畫面
register-welcome	mobile	歡迎/首次開啟畫面
register-form	mobile	註冊詳細資訊畫面
register-verify	mobile	驗證畫面（若應用程式無此畫面則省略）
register-home	mobile	登入畫面

行動裝置截圖：直向，直接從手機取得，不裁剪。網頁截圖 （how-assign、how-respond）：營運中心檢視的橫向瀏覽器擷取畫面，不裁剪。

接收工作流程（每批新檔案）

1. 檢查每張圖片（開啟它）。識別用途：歡迎、註冊、驗證、登入、首頁、類別選擇器、回報表單、相機/擷取、確認、狀態/追蹤、通知、回應者檢視、地圖/路線、其他。
2. 隱私審查——尋找真實姓名、電話號碼、電子郵件、地址、人臉、車牌號碼、精確住家位置、ID、令牌。若發現：停止並要求使用者提供清理後的版本。除非使用者明確要求，否則請勿自行模糊/編輯；若使用者要求，則僅模糊處理，絕不修改 UI。
3. 記錄尺寸與長寬比。切勿裁剪掉 UI 或拉伸。狀態列可保持原樣。
4. 最佳化： npm run optimize:screenshots（sharp）：輸出 WebP q≈82 與 AVIF q≈60，最大寬度 1080px，保留原始長寬比，移除中繼資料（EXIF/GPS）。壓縮後請放大檢查小型 UI 文字，確保仍可讀。
5. 註冊至 src/config/screenshots.ts（參見下方結構）。
6. 放置使用對應表；若不明確，向使用者提出一份簡短的放置建議清單。
7. 驗證版面在 320/768/1440 寬度下的顯示，確保無 CLS、alt 文字存在、僅 hero 使用 priority。
8. 更新 docs/assets-guide.md 的接收記錄。

清單結構

// src/config/screenshots.ts
export type ScreenPurpose =
  | "welcome" | "register" | "verify" | "login" | "home"
  | "category" | "report-form" | "capture" | "submitted"
  | "status" | "notifications" | "responder" | "map" | "other";

export type Slot =
  | "hero-primary" | "hero-secondary"
  | "how-report" | "how-review" | "how-assign" | "how-respond" | "how-resolve"
  | "showcase" | "register-welcome" | "register-form" | "register-verify" | "register-home"
  | "tracking";

export type Device = "mobile" | "web"; // mobile → PhoneFrame, web → BrowserFrame

export interface Screenshot {
  id: string;                 // "03-report-form"
  src: string | null;         // "/screenshots/03-report-form.webp"；null = 佔位符
  width: number; height: number; // 最佳化檔案的內建像素
  alt: string;                // 事實性地描述畫面內容
  purpose: ScreenPurpose;
  slots: Slot[];
  device: Device;
  caption?: string;
  privacyChecked: boolean;    // 在生產環境中，src 非 null 前必須為 true
}
export const screenshots: Screenshot[] = [ /* ... */ ];
export const bySlot = (slot: Slot) => screenshots.filter(s => s.slots.includes(slot));

• 預設佔位符比例：device: "mobile" 為 1179×2556（≈ 9:19.5）；device: "web" 為 1600×1000 （≈ 16:10）——直到得知真實尺寸。
• 若截圖有 src 但 privacyChecked: false，建置時應發出警告（在開發環境的終端機中）。

放置對應表

畫面用途	插槽	裝置
home	hero-primary, register-home, showcase	mobile
category	hero-secondary, how-report, showcase	mobile
report-form / capture	how-report, showcase	mobile
submitted	how-review, showcase	mobile
status	tracking, how-resolve, showcase	mobile
notifications (assign)	how-assign	web
map/route (respond)	how-respond	web
welcome	register-welcome	mobile
register	register-form	mobile
verify	register-verify（若無此畫面則完全省略此步驟）	mobile
login	register-home	mobile

showcase 僅容納行動應用程式畫面（回報、審查、解決）——它是市民應用程式的展示區， 而非放置營運中心網頁檢視的地方。

Alt 文字規則

描述可見的內容，而非行銷說詞。良好範例：「類別選擇畫面，列出救援、警察、消防及其他回報類型。」 糟糕範例：「快速、輕鬆的回報！」裝飾性的重複元素（例如倒影）請使用 alt=""。

PhoneFrame / BrowserFrame / DeviceFrame 元件

• PhoneFrame：純 CSS 框架，圓角矩形（ink-raised），1px 內緣高光，薄螢幕內縮，可選的動態島膠囊。無 PNG 裝置模型。
• BrowserFrame：純 CSS 瀏覽器視窗框架（相同表面語言），三個簡單的 Chrome 圓點，無偽造的 URL 列或瀏覽器 UI。用於 device: "web" 畫面（指派、回應）。
• DeviceFrame：根據 screenshot.device 選擇 PhoneFrame 或 BrowserFrame——在通用渲染階段/插槽（如運作方式）的呼叫點應使用此元件，而非硬編碼一種框架類型。
• 子元素：使用 next/image，需從清單指定明確的 width/height，設定 sizes（例如 (min-width:1024px) 320px, 70vw），使用 loading="lazy"，但 hero-primary 除外（使用 priority，fetchPriority="high"）。
• 佔位符模式（src === null）：中性漸層背景，小型標籤「截圖插槽：——等待真實應用程式畫面」，正確長寬比。無偽造 UI 元素、無偽造按鈕或文字。
• 畫面內容必須保持直立且可讀：最大 rotateY 18°，絕不鏡像翻轉。
• 行動裝置（< 1024px）：無 3D 旋轉；平面手機，原生水平滾動吸附畫廊（snap-x snap-mandatory，scroll-padding），可見的滾動提示，可使用鍵盤聚焦的區域，附帶 aria-label。

每批檢查清單

• 每張圖片均已檢查並識別用途
• 無可見的個人資料（或使用者確認其為假資料）
• 最佳化檔案各 < ~180KB，文字仍可讀
• 清單條目完整：尺寸、alt、用途、插槽、裝置、privacyChecked
• 頁面上僅一張 priority 圖片
• 無佈局偏移；長寬比完整
• 未使用的佔位符插槽仍誠實地顯示標籤
• 整合後在行動裝置上重新執行 Lighthouse