影片用 UI（以及簡單頁面）
日期：2026-10-22 · 類型：指南 · 狀態：現行
摘要：「有質感」的畫面是讓動畫可信的關鍵。這項技能彙整了通用的介面規則（層級、空間、排版、色彩、狀態），以及當畫面要放入影片時需要調整的地方：在手機上清晰可讀、以圖層方式重建、每個元件可獨立動畫。也適用於簡單頁面（登陸頁、個人簡介連結頁）。數字與範例請見 references/regras-detalhadas.md。
兩種使用方式：
- 建立： 繪製新畫面，或為影片重建真實產品的畫面。
- 審核： 檢查現有畫面，指出哪些部分違反了規則，並在需求涵蓋時進行修正。
1. 開始繪製前的背景
- 找到專案或主題品牌的視覺系統：Token（色彩、字型、間距、圓角半徑）與元件。對於第三方品牌，從其官方網站取得（方法請見 video-referencias 第 3 節）。下列規則用於調整執行方式，而非取代品牌。
- 定義畫面類型：登陸頁/網站（排版幅度較大）或 應用程式/儀表板（密度高，文字最大 24 px）。
- 列出每個區塊需要傳達的訊息，以及每個區塊中最重要的元素。在影片中：則與該段旁白的內容對應。
2. 開始繪製前的參考
| 需要 | 來源 |
|---|---|
| 應用程式或網站畫面、登陸頁區塊（英雄區、價格、常見問題、推薦）、儀表板、流程（引導註冊、結帳） | Mobbin（如可使用；MCP 搭配 search_sections、search_screens、search_flows） |
| 沒有 Mobbin，或 Mobbin 沒有 | Dribbble 與 Pinterest（英文簡短關鍵字）以及產品的實際截圖 |
| 動態、動畫效果、美學、照片、環境 | |
| 影片中提到的實際產品 | 該產品本身：錄製畫面或擷取官方截圖 |
| 現成的轉場、變形圖示、微互動、AI 代理畫面 | 元件庫：references/motion-e-componentes.md |
如何搜尋與儲存：references/referencias.md。每個畫面收集 3 到 6 張參考，並記錄從每張參考中借鑑的模式。參考用於結構、層級、間距與行為；不得抄襲第三方品牌、文字或圖片。
3. 規則（摘要）
- 符號指引： 畫面能自我說明。使用容器分組，凸顯選取中的項目，使未啟用的項目變灰。可點擊元素需顯示懸停、按壓與啟用狀態；無文字的圖示需有工具提示。
- 視覺層級： 透過大小、位置與色彩建立。最重要的項目放在頂部、更大且加粗；次要的較小且為灰色。每個區塊只能有一個色彩重點。使用圖片、標誌與圖示取代標籤（例如「從：」、「餐廳：」）。所有項目都使用「標籤：值」的列表是試算表，而非設計。
- 空間： 白色空間優先於網格。使用 4 的倍數（4 到 40 px）。區塊之間使用基本間距（例如 32 px），緊密相關的項目之間使用一半（16 px）。
- 排版： 使用一種無襯線字型。大字型字母間距 −2% 至 −3%，行高 110% 至 120%。登陸頁最多使用 6 種字型大小。儀表板文字最大 24 px。
- 色彩： 一種主色，搭配淺色版本用於背景，深色版本用於文字（50–950 漸層）。其他顏色僅用於功能：藍色表示焦點，紅色表示錯誤，黃色表示警告，綠色表示成功。
- 深色模式： 邊框淺色且近乎消失；深度透過比背景更淺的表面來表現；標籤使用低飽和度深色背景與同色系的淺色文字。
- 陰影： 低不透明度，高模糊。如果陰影是最先被注意到的，那就錯了。
- 圖示與按鈕： 圖示大小與文字行高相同，並靠近文字。水平內邊距 = 2 倍垂直內邊距。成對的 CTA：主要採用實心，次要採用外框。
- 回饋： 按鈕需包含：一般、懸停、按壓、停用與載入中狀態。輸入框需有：焦點、錯誤（含訊息）與警告。每個動作都應有回應。
- 圖文搭配： 在文字後方使用局部漸層，而非在整張照片上壓一層深色。
- 全介面中的細微動畫： 卡片在懸停時上升約 2 px 並帶有寬而淡的陰影，點擊時有輕微波紋效果，區塊以由下往上淡入方式進入，載入中的骨架螢幕有閃爍效果。簡短且低調：除了載入外，沒有任何東西會自行移動。
- 昂貴的設計是讓人容易做決定，而不只是看起來乾淨： 銷售用的圖片是卡片中最大的元素；文字分三層，決策關鍵數據以粗體或色彩強調；按鈕顯示結果（「查看 41 間房產」、「支付 R$ 239.90」）；每個畫面僅有一個徽章；導覽比內容更安靜；使用一種統一的圓角半徑比例。表格請見 references/design-caro.md。
- 可掃視的畫面： 沒有人會閱讀畫面，他們在尋找答案。每個元素應接觸兩條或更多邊（文字靠左，數值與時間靠右；只有不需閱讀的內容才置中）。密度是透過區分（大頭貼、含標題的群組、含圖示的標籤）來解決，而非增加間距。強調是藉由與相鄰元素的對比：要凸顯某項，就讓周圍保持中性。避免盒子內有盒子。
4. 影片中的畫面
- 在手機上可讀： 在 1080 寬的畫面中，介面主體文字至少約 22 px；具衝擊力的標題則需更大。測試：在手機尺寸上暫停畫面 1 秒鐘。首先看到的內容是否就是旁白正在說明的？
- 以圖層重建，絕不貼上螢幕截圖： 每個按鈕、文字、圖示與對話框都是一個獨立的圖層，以便獨立動畫（彈性進入、點亮、被點擊）。螢幕截圖僅作為證據使用（新聞、真實貼文）。
- 忠於實際產品： 使用與受眾熟悉的應用程式（WhatsApp、Gmail、銀行）相同的顏色、字型、圓角、圖示與元件。使用官方圖示（SF Symbols、Material Symbols 或品牌的 SVG）。
- 動態中的真實狀態： 打字時，真實的系統鍵盤應彈出且按鍵亮起，絕對不要使用遮罩讓文字「拉伸」；點擊時按鈕會按壓；載入時顯示載入中；通知以平台的真實格式呈現。
- 合理的範例資料： 名稱、數值與時間應符合該領域的邏輯；不要使用「Lorem ipsum」，且畫面上不得出現任何真實的個人資料、電子郵件或憑證。
- 一個畫面只傳達一個想法： 如果畫面有 10 項資訊，但旁白只提到其中一項，則其他項目保持中性，鏡頭應拉近到相關的項目。
5. 審核模式
- 渲染畫面（瀏覽器、引擎預覽或影片畫面），並截取桌上型電腦與手機版本，或影片中手機尺寸的畫面。
- 逐步檢查核對清單，記錄每個問題：位置、違反的規則、目前的值與建議的修正。
- 按影響程度排序：層級與可讀性優先，其次是空間與排版，最後是打磨（陰影、狀態、微互動）。
- 以小且可驗證的修改進行修正，同時保留品牌與文字。
核對清單（每個項目同時也是「AI 氣味」的指標）
- 是否有任何卡片或列表看起來像試算表（重複的標籤、所有項目大小相同）？
- 每個區塊是否只有一個主導元素？是否有超過一個色彩重點在競爭？
- 間距是否不是 4 的倍數，或是應該分組的項目間距相同？
- 是否使用了超過一種字型？登陸頁字型大小超過 6 種，或儀表板文字大於 24 px？
- 大標題是否使用了預設的字母間距與行高？
- 顏色是否僅用於裝飾，或語意顏色被錯誤使用？
- 陰影是否過重或在內容之前就被注意到？深色模式中邊框是否太亮？標籤是否為霓虹色？
- 圖示是否大於文字行高、離標籤太遠，或在彩色方框中太小且歪斜（圖示應佔據方框約 55%）？
- 按鈕的內邊距是否不成比例，或兩個 CTA 的視覺權重相同？
- 是否缺少狀態（懸停、按壓、焦點、停用、載入中、錯誤）？
- 白色文字是否直接放在照片上，或整張照片被調暗？
- 每個區塊的標題上方是否都有全大寫的標籤，或是否使用了「3 個步驟」搭配置中圖示，而非展示實際內容？
- 是否有廉價設計：小圖片、灰色連續中繼資料、無意義的按鈕文字（「套用」）、超過一個徽章、混合的圓角半徑？
- 是否有元素未接觸兩條邊？是否有卡片內含卡片？
- 是否使用通用的紫藍色漸層、表情符號作為圖示、所有角落與陰影都相同、以及填充文字？
- 在影片中：在手機上是否可讀？是否以圖層重建？是否忠於實際產品？第一個視線是否落在旁白正在說明的內容上？
6. 驗證
- 渲染並查看：桌上型電腦（1440 px）與手機（390 px），如有則檢查淺色與深色模式；在影片中則檢查手機尺寸的畫面。
- 在程式碼中確認規則的數值（大小、行高、間距、陰影）。
- 進行互動：懸停、點擊、焦點與提交應顯示回應。
- 比較前後差異，並列出更改的內容與原因。