文件 / 08

App 模式：導儀表板與管理後台

Cinematic UI 2.8 用「任務即播放頭」、一個招牌畫面與八種設計過的狀態來導儀表板、管理後台與控制台，並以 app-screening.mjs 試片。

Cinematic UI 也導 App，只是預算較小。當 brief 是儀表板、管理後台、控制台、內部工具，或 SaaS 產品登入後的那一側，agent 就切換到 App 模式。播放頭不再是捲軸，而是任務。 一個畫面是一個鏡頭，在畫面之間切換是一次剪接，團隊正在處理的那筆紀錄就是主角。

這裡的觀眾不是看一次就走的訪客，而是每天回來、常常一整個班次都在裡面工作的團隊，同樣幾件事要做上數百次。電影感只佔畫面約十分之一，其餘是安靜、緊湊、用鍵盤操作的儀器。行銷網站和它的產品 App，是兩次不同的製作。

網站模式與 App 模式

	網站	App
播放頭	捲動（以及訪客的其他觸發）	任務：路由、選取、篩選、紀錄的狀態
產出	讓人造訪的網站	團隊整天都在裡面工作的儀表板、後台、控制台或登入後的產品
節奏由誰決定	訪客的手	班次：同樣幾件事，重複數百次
景別	依區塊	依工作：遠景是總覽，中景是列表或佇列，特寫是單筆紀錄，插入鏡頭是一個欄位或一個事件
開場	載入畫面就是第一個鏡頭	沒有載入畫面。首次繪製就能讀，資料在自己的畫格裡載入
強調色	一個強調色，省著用	一個強調色，意義是「這裡需要人處理」，另有獨立的狀態系統

references/app-mode.md 會取代第 1、6、7、9 階段、得獎檢查、載入畫面與偷懶版，並改變其餘部分的適用方式。

為什麼要獨立一個模式

三場盲測（SaaS 分析後台、訂單管理後台、值班控制台）只用網站模式去做，結果都稱職卻彼此雷同：三位不同的導演，同一種長相，底色低調、一個強調色、方框面板，頂端是四個等大的 KPI 格。電影只落到了色票，沒有落到結構。Kit 與試片流程不適用於 App，沒有人設計空白、載入或錯誤狀態，而單一強調色也承載不了狀態。

App 模式多了什麼

班次取代 logline。 Agent 寫下誰在這個 App 裡工作、工作多久、被什麼打斷、最糟的一分鐘是什麼樣子，再列出三件最頻繁的工作和一件罕見但風險高的工作。不服務這些工作的畫面就刪掉。
招牌畫面取代 KPI 列。 每個 App 都要從自己的資料裡找出只有它才有的畫面。
照明計畫。 注意力打在團隊該看的地方，其他部分保持安靜。
八種狀態。 每個畫面都在它能到達的每一種狀態下設計並試片。
強調色與狀態分開。 強調色代表「這裡需要人處理」，只標出例外；狀態由獨立的系統承載，絕不只靠顏色。
依頻率決定動態。 一天用五十次的東西不做動畫。
資料選角。 替身資料要有真實的形狀：長尾分佈、帶事件的雜訊序列、混合語系的名稱、邊界資料列。
鍵盤與復原。 快捷鍵與說明表、列間導航、命令面板、可復原的提示。

八種狀態

狀態	規則
預設	真實的資料量、真實又難看的數值
載入中	骨架大小與最終內容一致；外框不會消失；資料進來時版面不位移
空白：尚未有資料	說明這裡之後會出現什麼，以及唯一能建立它的動作
空白：篩選後為零	說明是哪些篩選條件造成的，並提供清除；絕不放建立按鈕
空白：全部完成	清空的佇列。平靜、簡短、是掙來的
錯誤	發生了什麼、可以怎麼試、可複製的請求編號；顯示在出錯的區域內
無權限	說明誰能授權
超大量	一萬列、六十字元的名稱、七位數的金額：什麼都不會溢出

工具

kit/app.js：以 hash 為基礎的路由，篩選、排序與選取都存在 URL 裡；強制試片狀態（?state=）、凍結時鐘（?now=）、含組合序列與快捷鍵說明表的鍵盤快捷鍵、j/k 列間導航、側邊預覽或對話抽屜、命令面板，以及可復原的提示。它本身沒有任何長相。
kit/fixtures.js：有真實形狀的種子替身資料。
kit/app-shell.html：App 的灰階 animatic，包含外框、總覽、列表、側邊預覽中的單筆紀錄，以及所有狀態。
scripts/app-screening.mjs：每個路由 × 狀態 × 視窗 × 主題，輸出聯絡表，並標記非等寬數字、靠左的數字、被截斷的文字、載入前後的版面位移、低對比、過小的點擊目標、看不見的焦點和空白狀態。

複測的結果

同樣三份 brief 在這個版本上再盲測一次，三個成品裡都沒有 KPI 列。每一個都從自己的資料找到了招牌畫面（三個月的橋、只點亮偏差、整個車隊畫成固定的平面圖、當天的收貨閘門畫成寬銀幕比例的貨場）。畫面上的列表從 8–15 列增加到 20 列以上，每個路由都在八種狀態下試片。複測也把更多規則寫回文件，例如第一輪六個 App 中有四個出現的「橄欖綠或灰褐搭配琥珀色」這種沒選過角的 App 調色。