文件 / 07

導演的十三條規則與要拒絕的偷懶版

Cinematic UI 導演時遵守的 13 條規則，以及它拒絕的完整偷懶版清單：沒人導演的頁面長什麼樣，為什麼那一場要重拍。

兩份清單讓 agent 保持誠實。導演的規則說明每個決定必須滿足什麼；偷懶版則描述沒人導演的頁面長什麼樣。只要分鏡表裡出現第二份清單中的任何一項，那一場就重拍。

導演的規則

機制，不是氛圍。 企劃書裡每一句風格主張，都要指出畫面上看得到的東西。
媒材、調色與世界觀是選出來的，不是預設的。 畫面由什麼構成、光是什麼顏色、世界由什麼蓋成，全都來自電影，經過調研，並從它的影格量測。沒有任何東西（3D、顆粒、光暈、鏡頭漂移、色偏）是因為 kit 剛好開著才出現在畫面上。一旦選定，調色就做到底。
一位主角，一條弧線。 視線永遠知道該跟著誰，而且結尾時它已經不一樣了。
改變和重複都是選擇。 新的景別、重複的畫格、同樣的剪接用了兩次，每一個都有理由。沒人選擇的相同，是幻燈片；沒人選擇的變化，是雜訊。
動態來自鏡頭或表演。 東西會動，是因為鏡頭動了，或演員做了什麼。莫名其妙淡入的東西，兩者都不是。
留住。 一個構圖完整且靜止的畫格就是一個鏡頭。對比才有能量，持續動只是雜訊。
特寫是掙來的。 鏡頭不會比素材撐得住的程度更近。弱的素材留在遠景、剪影或畫面之外。
做不出來的，就開口要。 真實的產品、人物與品牌是要來的，不是編的。
觀眾有戲份。 除了捲動，訪客要做一件有意義的事。
畫格靜止時也是設計過的，每一種螢幕都一樣。 在任何時刻、任何視窗大小暫停，看到的都應該是有人選過的構圖。
文字就是文字。 文案、連結與控制項在任何時刻、任何裝置上，都是真的 DOM 文字：可讀、可選取、可聚焦、可被索引。
兩個版本一起交付。 戲院版，以及無障礙版（prefers-reduced-motion、小螢幕、沒有 WebGL），後者每一場仍然構圖完整、每個字都還在。
看過才算數。 關於畫面長相的說法，必須來自算出來的畫格。

偷懶版

版面與動態

置中標題、副標、兩顆按鈕，後面一團發光的色塊。
一排三張等寬卡片，或用 bento 網格頂替一個想法。
所有東西進入視窗時都淡入上移 24 px，永遠如此。
驚豔的首屏之後，接上普通的功能、見證和 FAQ 區塊。
捲動綁架：把讀者困在一個沒有任何發展的區塊裡。
每個區塊之間都用淡入淡出銜接，或不管內容是什麼都用同一種 clip-path 擦除。
每一段表演都由捲動驅動：沒有東西自己播放，沒有東西等待點擊、懸停或手勢。
置中、中等大小（48–72 px）的標題，只因為沒人選擇過極端的字級。

媒材與 3D

只因 kit 有舞台就用擬真 3D，而電影本來就不是實體亮面。
hero 裡一個飄浮旋轉的 3D 物件，之後再也沒出現。
用程式碼基本元件的特寫假裝成產品。
在泛用幾何體上套濾鏡，稱它為手繪；用毛筆字體，稱它為水墨。
紫藍漸層、玻璃擬態和 Inter，沒人選擇，卻都出現了。

電影參考、調色與世界觀

電影參考只剩下一組色票和幾個形容詞。
選定電影的色彩根本沒落到頁面：白底上整齊的 hex token、圖片沒有調色、「復古」只是一層褐色濾鏡、「霓虹」只是白字後面的粉紅青色漸層。
兩種沒選過角的調色：暖紙色加朱紅加深墨色，以及冷灰加一個藍或綠的強調色。
把電影的調色放在樣板的世界裡（王家衛的光線下卻是圓角卡片、膠囊按鈕和四欄頁尾），或者反過來，只把道具當裝飾貼上去：雨傘、蠍子、全像投影、一間粉紅旅館。
一個飄浮人頭的 hero，或直接複製電影海報：借海報的構圖語法，不借它的美術與字體。
「憑記憶」而不是調研的電影：演職員、色票和陳設細節憑記憶寫，卻被當成事實。
整個照抄得獎作品的招牌動作（票券按鈕、條碼溶解）：該研究的是機制，再找出這個產品自己的物件。

字體、強調色與外框

每顆按鈕和每個標題都用強調色，卻什麼都不代表；在一個根本不講究精密的產品上放等寬字的「[01]」標籤。
字體永遠只會遮罩上升：沒有字體部門，kit 的字體動畫庫被擱在架上。
有主題的 hero 後面接著現成的 UI 元件：世界從未抵達按鈕、進度標記或頁尾。
用轉圈圈或單獨一個百分比當載入畫面；載入畫面和第一個鏡頭毫無關係。

手機

把桌機頁面直接擠成一欄，就當作手機版。

儀表板和後台另有一套自己的偷懶版，詳見App 模式。