GAME UI/UX REVIEW BRIEF

《封寨之夜》Hold Still · 遊戲 UI/UX 評審材料

本頁面向受託嘅外部 UI/UX 專家。內容包含：產品與玩法循環概述、橫版（設計稿基準）/ 寬屏 / 豎屏三組全量界面截圖（含冷開場、選項、記錄、菜單、影院態等關鍵交互態，均附說明）、我哋已知的觀察點、以及前端實現與工程約束。截圖全部來自真實構建嘅實機渲染（非設計稿），請結合可玩構建實際操作體驗後給出評審意見。

本頁網址（正式）
https://hold-still-review.pages.dev
產品形態
多主角視覺小說（17+ 懸疑）· iOS / Android / 網頁試玩
引擎與 UI 實現
Cocos Creator 3.8.8 · UI 全代碼構建（無編輯器 Prefab）
截圖日期
2026-11-03
截圖視口
橫版 1280×720（設計稿 1:1）· 寬屏 1600×720（20:9）· 豎屏 720×1280

01畀專家嘅題目（任務書）

按優先級排列。三條都做唔到嘅話，做第一條。

題目一（最高優先）：全界面視覺走查＋分級發現清單

對第 03–05 節全部截圖做專業走查：視覺層級、對齊與網格、字體排印（字號／行距／字距層級）、色彩一致性、留白節奏、圖標與控件語義。輸出按 P0（必須改）–P3（錦上添花）分級嘅發現清單，每條附截圖編號（例如 l-07）同具體修改建議。呢個遊戲嘅基調係「1987 九龍城寨·夜」：暗底、單光源、金／翡翠雙強調色（#D6B26A / #549480）——評審時請以「電影感半寫實」為美術基準，唔好建議改成通用手游亮色風。

題目二：關鍵流程可用性評估

冷啟動 → 內容閘下載 → 標題 → 序章（冷開場字卡 → 對話推進 → 選項）→ 菜單／存讀檔 → 退出確認 呢條主鏈路。重點評三件事：①「三態 chrome」（見觀察點 1）同隱藏手勢嘅可發現性風險；②選項兩段式確認（第一擊著色、1.6 秒內第二擊先確認）嘅防誤觸 vs 操作成本；③電影字幕式「單行＋自動分頁」呈現長對白嘅閱讀體驗。

題目三：文字呈現系統同雙語字幕

主字幕＝香港粵語書面語（唔好建議改做標準書面語，呢個係產品定位），副字幕默認英文（透明度 0.72）。請評：一行粵語＋一行英文嘅層疊閱讀負擔、字號對比、旁白行同對白行嘅區分度（旁白無名牌、暗石板色）、章首獨白「全銀專用頁」嘅儀式感是否成立。

02產品係乜：一句話＋玩法循環＋界面清單

一句話：1987 年九龍寨城清拆前最後一夜，六個互不相識嘅人行入同一座迷宮——玩家喺一夜之內輪流扮演六個主角（茶餐廳和事佬彬哥、無牌牙醫根叔、關炳、記者許凱琳、會計歐玉蓮、收租佬林水生），同一夜由六個視角講七種講法，結局收束做七個界＋十三份報紙剪報。

玩法循環：標題 →（內容閘後台下載）→「開始新的一夜」→ 冷開場字卡（全劇情一次）→ 章節內文字推進（點屏／自動／快轉／略過）→ 選項分歧 → 章節尾自動存檔 → 下一冊；壞結局 → 剪報結算層（收錄進「剪報與結局」）；全部通行 → 七界終局。付費模型：免費序章＋一次性買斷完整版（US$9.99，App Store 內購，網頁版只有免費序章）。

界面清單（本頁截圖覆蓋全部）

屏／狀態說明
標題屏Logo＋右欄菜單。菜單兩態：序章態 6 元素（2 可用＋2 鎖項＋設定＋金鍵「解鎖完整版」）；完整態 8 項原樣。鎖項＝lock＋teaser 副標文案。
品牌啟動卡＋序章跟包走啟動序列＝單頁合成標題卡（四枚標識錯峰彈入 2×2 網格＋角色標籤：出品方／發行平台／地域身份／遊戲本體），取代引擎預設 splash；序章內容包已內置（ipa/apk/web 零首啟下載，菜單即刻可用），完整版／DLC 為購後一次下載離線玩。
解鎖面板商品名＋價格＋落單／收起／恢復購買（合規：內購真實明示）。
小說屏（核心）場景圖＋胸像（左右兩角，隨說話人換表情差分）＋對白框（名牌金字＋主字幕單行自動分頁＋副字幕英文＋推進手指）。三態 chrome：沉浸態（默認，零按鈕）／控制態（下滑喚出：頂欄時鐘書名＋框底工具列六掣）／影院態（連對白框都收）。右上角常駐「☰」係唯一不收起嘅 HUD。
旁白行／章首獨白旁白＝無名牌、暗石板色；章首獨白＝全銀專用頁（遮罩 81%＋逐卡推進＋圓點進度）。
選項面板安全帶自適應（頂 292／底 56 設計單位內居中，長項自動折行／降字號）；兩段式確認。
對話記錄最近 60 條，每行帶副字幕，拖動瀏覽，開面板即定位最新一句。
遊戲內菜單（☰）真暫停語義（打字機／自動／快轉凍結＋BGM duck 0.45）；顯示「劇中時間」（三鐘母題）；序章態 3 項／完整態 7 項。
退出確認返標題必過確認（自動存檔已落地，文案講明唔會蝕進度）。
存讀檔自動檔＋手動槽；空槽無噪音佔位。
設定主／副字幕語言、副字幕深淺、文字速度、自動播放停頓、BGM／音效音量、重播序章開場、手勢引導重置。
人物圖鑑／地圖說明codex 兩個分頁；序章態由菜單藏起（empty room problem）。
流程說明（flowmap）三段佈局（六冊 → 零點鐘選擇 → 七界）、節點三態（剪影／解鎖／已通過）、完成度百分比；反劇透：圖上永遠唔顯示數值同界分配條件。
剪報與結局（gallery）十三格報紙版位；未睇過＝空位（標題都唔顯示，反劇透）；點開放大。
旋轉門（豎屏）豎屏唔設游玩：全屏門＋背景 blur＋「請將手機轉做橫版」。

03截圖 · 橫版 1280×720（設計稿基準） 橫版 1280×720

設計稿 1280×720（9:16 豎機旋轉後全屏適配，FIXED_HEIGHT 策略：高度鎖 720、寬度延伸）。以下按玩家旅程排序，編號穩定可引用。點擊圖片可放大。

品牌啟動卡
l-00 · 品牌啟動卡（boot 序列）取代 Cocos 預設 splash 嘅單頁合成標題卡：四枚定稿標識（晶片 X＝出品方、手柄 P＝發行平台、霓虹「香港製造」＝地域身份、翡翠龍封印＝遊戲本體）錯峰彈入 2×2 網格、各帶角色標籤，書名標題喺底層淡入。卡後自動過入標題屏（l-01）。
標題
l-01 · 標題（就緒態）左側 Logo 區：書名「封寨之夜」＋紅色封印「封」＋「1987 九龍城寨·最後一夜」＋一句話定位「二十點到凌晨四點。同一座城，有七種講法。」右欄序章態菜單：主按鈕「開始新的一夜」（金框）、「繼續」（無自動檔時灰置）、兩個鎖項「章節選擇（未解鎖）」「剪報與結局（未解鎖）」、「設定」、金鍵「解鎖完整版」。序章內容包已內置（零首啟下載）——菜單冷啟即刻全部可用；左下角版本行「HOLD STILL 序章 v0.1」（「試玩版」已正名「序章」）。底部一次性首跑提示行「全部操作靠手指：點屏幕推進 · 上滑睇記錄 · 長按快轉」。左上「聲音」＝靜音切換鈕（title 屏常駐，文字隨 BGM 開關互換「聲音／靜音」）。
解鎖面板
l-02 · 解鎖完整版面板標題態點金鍵彈出：商品顯示名「封寨之夜 完整版解鎖」＋價格 US$9.99＋產品 ID＋「落單」主鍵與「收起」。網頁示範版無 StoreKit，面板會講明完整版要喺 App Store 購買；「恢復購買」入口喺卡內（合規要求）。
冷開場字卡
l-03 · 冷開場字卡（第一拍）「開始新的一夜」全新開局先播（僅一次，設定可重播）：全黑底＋大字卡（事實鋪陳零劇透）＋右下「跳過獨白」（Apple HIG 尊重用戶時間：可跳但首見完整）。共兩拍，第二拍交代「六個人·同一座迷宮」。
旁白行
l-04 · 小說屏 · 旁白行（沉浸態）默認 chrome 全收（連工具列都無）：場景圖＋底部對白框。旁白行無名牌，正文暗石板色，副字幕英文跟行。右下推進指示（▶ 手指圖，跟文尾呼吸浮動，打字中隱身）。呢個係玩家 90% 時間見到嘅畫面。
對白行·控制態
l-05 · 小說屏 · 對白行（控制態）下滑喚出控制帶：頂欄（劇中時鐘 20:00＋場景題「洗杯」）＋框底工具列六掣（返回／記錄／自動／快轉／略過／存檔）。對白框：名牌金字說話人「大頭」＋主字幕單行＋副字幕英文＋左下提示「點屏幕繼續」＋推進手指（▶ 呼吸浮動）。胸像坐左下角（說話人靠邊、金框點亮）；首次登場角色彈「圖鑑解鎖：大頭」toast（頂部）。右上「☰」常駐。
自動模式
l-06 · 自動模式（點亮態）撳「自動」後：掣面金底金字点亮（撳咗都知自己開咗自動——之前只靠左下提示字，玩家睇唔到），左下提示行同步切字。自動停頓可喺設定調。
對話記錄
l-07 · 對話記錄面板上滑或「記錄」喚出：全屏遮罩＋大卡（panel-frame 金線皮膚）＋「對話記錄」標題＋「收起」。每行＝「說話人：正文」＋英文副行（灰色小字），拖動瀏覽最近 60 條，開面板即刻定位最新一句（回看舊嘅要往上碌）。
選項面板
l-08 · 選項面板分歧點：兩條選項（「› 追問大頭：嗰個女仔，問津區啲咩？」／「› 唔追問」）垂直居中於「安全帶」（頂 292／底 56 設計單位之間，唔會啃住對白框／工具列）。半透明 pill 底、入場由下向上逐條滑入。長項自動折行、三長項自動降字號（自適應回歸用例 A–D 已收口）。
選項兩段式確認
l-09 · 選項兩段式確認（armed 態）重點交互第一擊只「arm」：掣面轉金、微放大（1.6 秒內唔撳第二擊會自動退返）；第二擊先真正落選。設計意圖＝防誤觸，代價＝每次選擇兩擊。請專家評呢個 trade-off。
章首獨白
l-10 · 章首獨白「全銀專用頁」mono 行（主角第一人稱獨白）唔入普通對白框：全屏遮罩（81% 不透明，場景圖透一啖氣）＋全銀大字逐卡推進＋底部圓點進度。配音讀完／點擊都會收卡，收卡後獨白補返落對白框。呢個係本作「旁白系統」嘅儀式感層。
遊戲內菜單
l-11 · 遊戲內菜單（☰ 常駐鍵喚出）右側滑入 460 寬卡：頂部「劇中時間 20:00」（三鐘母題——沉浸態頂欄時鐘收咗，呢度係暫停後嘅資訊面）＋序章態 3 項（存檔／讀檔、設定、返標題）。打開＝真暫停：打字機即刻補全、自動停拍、BGM duck 0.45。mask 點擊 350ms 同手勢豁免（防「開完即收」死鍵）。
退出確認
l-12 · 返標題確認框「返標題」必過確認（防誤觸）。自動存檔已每行落地，文案講明「進度已存，返去唔會蝕」，唔再用「未存檔會唔見」嚟嚇玩家。
影院態
l-13 · 影院態（收起 UI）菜單「收起 UI」後：連對白框、常駐「☰」一併全隱，全淨場景（截圖為雨夜街景）。任何一下點擊先叫返 UI——「收咗出唔返＝死局」有專門 guard。呢個狀態係「睇風景／截圖」模式，也係美術資產最完整嘅呈現。
存讀檔
l-14 · 存讀檔save 模式：自動檔（每推一行去重寫一次，帶時間戳＋對白預覽行）＋11 個手動槽。空槽無「（空）」噪音佔位；自動槽有「×」清除鈕、底部講明「自動槽由系統寫，唔可以手動覆蓋」。load 模式同構。
設定
l-15 · 設定九行五排：主字幕語言／副字幕語言／副字幕深淺／文字速度／自動播放停頓／環境·配樂音量／音效音量／重播序章開場／手勢引導重置。冇「人聲音量」——本作終局裁定冇人物語音（五波終判）。panel-frame 金線皮膚＋行內即時生效。
人物圖鑑
l-16 · 人物圖鑑（codex）左欄人物卡（胸像＋名＋一句定位；未登場＝？？？反劇透），右欄詳情＝稱呼＋meta 行（主要視點／真相類型／義界）＋簡介正文。仲有「用語」分頁（街語詞表）。序章態由菜單藏起（免費面包內 codex 數據只覆蓋序章面，避免 empty room problem）。
地圖說明
l-17 · 地圖說明（codex·places 分頁）區位說明卡：每個地點答三條問題（呢個係邊個區、幾樓、呢個時候邊個會喺路上）——世界觀查閱面。
流程說明
l-18 · 流程說明（flowmap）遊戲地圖兼完成度：三段佈局（第一段六冊 → 第二段零點鐘頭嘅選擇 → 第三段七界），節點三態（剪影＝未解鎖／亮起＝可跳入／已通過），頭部完成度百分比＋節點計數。反劇透紀律：圖上永遠唔顯示餵養數值同界分配條件。
剪報與結局
l-19 · 剪報與結局（gallery）十三份報紙（壞結局結算層收藏）：網格版位＋「已收 n/13」計數；未睇過嘅剪報＝空位（標題亦唔顯示，反劇透）。版位／標題真源＝settlements.json（唔硬編）。點開有放大層。

04截圖 · 寬屏 20:9 1600×720 寬屏 1600×720

FIXED_HEIGHT 策略：高度鎖 720 設計單位，寬屏（20:9 機）兩側各多出 160 設計單位可視區——排版唔係縮放，係真延伸（菜單欄、對白框寬度、胸像落位全部跟 viewWidth 動態重算）。

另註：完整版／DLC 內容包係「購後一次下載離線玩」，下載閘只剩付費面會見到——本頁截圖全部屬免費序章面，唔包含嗰個狀態。

寬屏首啟即玩
w-01 · 冷啟動 · 首啟即玩（20:9）序章跟包走（之二百零六 拍板）：內容包內置，冷啟零下載、菜單即刻全部可用（對比 2026-10 月初版嘅「18MB 首啟下載閘」已收皮）。20:9 下 Logo 區與右欄菜單之間嘅留白拉闊——請對比 l-01（1280）審兩端排版一致性。
寬屏對白·控制態
w-02 · 對白行（控制態，20:9）同一個對白場景喺 1600 寬下：場景圖向兩側真延伸、對白框加闊、工具列同提示行跟框走、胸像落位外擴、頂欄時鐘＋場景題照舊。對比 l-05（1280）可審兩端排版一致性。

05截圖 · 豎屏 720×1280（旋轉門） 豎屏 720×1280

本作全篇橫版，豎屏唔設游玩（設計定案，唔係漏做）：豎屏時全屏門遮罩＋背景 blur 6px 壓暗＋旋轉動畫圖標＋「請將手機轉做橫版／《封寨之夜》全篇橫版·豎屏唔設游玩」。首次盡力鎖橫屏（Android 需手勢授權，唔支援內核靜默降級）。

豎屏旋轉門
t-01 · 豎屏旋轉門720×1280 豎屏實拍。請評：呢個處理對手機玩家（宣傳頁點入、橫屏鎖用戶）係咪足夠友善；旋轉門文案語氣、blur 程度、有冇必要做「豎屏也能睇的落地頁」。

06我哋已知的觀察點（供聚焦，歡迎推翻）

以下係開發組自查嘅風險點同已收口嘅決策。專家可以：「確認冇問題」／「升級嚴重性」／「推翻」。

  1. 三態 chrome 嘅可發現性（最擔心）。沉浸態（默認）連工具列都收埋，全屏唯一常駐 HUD 係右上 60% 透明度嘅「☰」；控制帶靠下滑喚出、推進一下又自動收回。隱藏手勢（上滑＝記錄、下滑＝控制帶、長按＝快轉）按 Apple HIG／NN/g 嘅講法可發現性趨近零。現有緩解＝首跑一次性提示行（l-01 底部）＋「聲音」級別嘅引導重置。請評：夠唔夠。
  2. 電影字幕式單行分頁。主字幕單行不折行（SHRINK 兜底），超長句由 derivePages 按語義切頁、頁尾停等。風險＝切頁位置生硬、長句上下文斷裂、玩家連續點擊節奏感。呢個係 2026-10-25 由「多行框」改過來嘅定案（Life is Strange / Citizen Sleeper 口徑），請獨立評估得失。
  3. 選項兩段式確認。第一擊 arm（轉金＋微放大）＋1.6 秒窗口＋第二擊確認。防誤觸 vs 每次選擇兩擊；同埋 armed 態只有色彩＋輕微縮放反饋，夠唔夠清晰（l-09）。
  4. 雙語字幕層疊。主粵語＋副英文（默認開、透明度 0.72、19pt vs 26pt）。閱讀負擔、層級對比、以及「副字幕深淺」呢個設定項嘅必要性。
  5. 胸像鏡像規則。立繪坐左右兩角、朝向（facing）唔符槽位時出鏡像；兩個不對稱角色（m3／s15）喺 LOCK 名單永不鏡像。請抽查截圖入面嘅朝向合理性。
  6. 品牌啟動卡嘅節奏。啟動序列由「Cocos 預設 splash」換成自製標題卡（l-00，約 4 秒）：四枚標識錯峰彈入嘅節奏、角色標籤嘅資訊量、以及「每次冷啟都睇一次」定「二周目縮短／可跳過」，請專家評。
  7. 豎屏完全唔設游玩。旋轉門（t-01）係有意定案。請評：對移動端獲客轉化係咪過於強硬。
  8. 序章菜單鎖區（lock＋teaser）。兩個鎖項帶副標 teaser 文案、金鍵常駐；圖鑑／地圖／流程三個系統工具喺序章態直接唔顯示（empty room problem）。請評鎖項文案同視覺（鎖標＋壓暗）係咪「乞嗨」定「鉤得住」。
  9. 旁白 vs 對白嘅區分度。旁行無名牌＋暗石板色＋歷史面「旁白」牌；獨白另有全銀頁。三層文字呈現（對白／旁白／獨白）喺實機嘅區分是否足夠（l-04 vs l-05 vs l-10）。
  10. 反劇透紀律嘅視覺代價。剪報未收＝空位、流程圖未解鎖＝剪影、圖鑑未登場＝剪影——收藏頁大量「空位」會唔會顯得內容少（l-18／l-19 開局態）。
  11. 寬屏兩側延伸嘅安全區。20:9 時兩側各＋160 設計單位全部入畫（w-02）——極寬屏（21:9）下胸像會唔會太貼邊、對白框會唔會過闊（一行字太長）。

07前端實現與工程約束（供代碼層面評估）

08交付期望

  1. 分級發現清單（必需）：P0–P3 四級，每條附截圖編號＋問題描述＋建議做法。歡迎直接挑戰第 06 節任何一條「已定案」。
  2. 標注稿（強烈建議）：挑 3–5 張關鍵截圖（建議 l-01 標題、l-05 對白控制態、l-08 選項、l-04 旁白、w-03 寬屏）做視覺标注（間距／層級／字級標尺）。標注稿可以直接喺我哋提供嘅原始截圖上畫。
  3. 參數級建議（強烈建議）：因為 UI 全代碼構建，建議畀到「具體數值級」講法（尺寸／透明度／間距／字級／色值），我哋按 ui.ts 調色板與布局常量直接落。大改（例如豎屏佈局方案）畀結構方案即可。
  4. 不需要：可運行原型、HTML/CSS demo——本作 UI 唔係 Web 棧，代碼級落地方我哋自己負責。