網站圖像藝術指導
概述
網站圖像的失敗往往是整組的問題，而非單張圖片。三張互不相關的好照片，看起來比三張共享光線、色調與主題的普通照片更糟糕。而一張美麗但無法證明其旁側敘述的圖片，充其量只是裝飾。
核心原則：在生成任何單張圖像之前，先決定整組圖片的共同常數，並讓每一張圖片都能證明其旁側的宣稱。
引擎與藝術指導
頁面上的圖像來自引擎，由藝術指導主導，絕不來自圖庫或舊頁面的裁切。
在我們的技術棧中，引擎是 Botika，我們自行開發的模特兒上渲染引擎，而藝術指導則是一個建構於其上的技能：它掌握簡報的常數，為每張圖片選擇模特兒、姿勢、服裝搭配與背景，執行渲染批次，並針對要求的風格進行品管檢查。該技能驅動一個私有流程，不屬於此儲存庫。它所履行的合約，正是此技能對任何引擎的需求：
| 輸入 | 輸出 |
|---|---|
| 簡報的常數（色板、光線、環境、裁切、連續性、變化性） | 以原生解析度、按位置命名的圖像集 |
| 每件服飾或主題的單一來源資產 | 用於比對保真度的來源與渲染對照表 |
| 位置清單：每個區塊的宣稱及其方框的長寬比 | 品管日誌：檢查了什麼、哪些被重做 |
如果您的引擎無法接受這些常數作為輸入，那麼藝術指導步驟就是由人按照檢查清單執行，而這份檢查清單就是此技能。
預算規則
渲染耗費點數與時間。每個不同的工作只進行一次渲染。在製作新資產之前，優先重複使用現有資產。任何超過約六張的批次都需要先詢問人員。不要進行「以防萬一」的投機批次。同一張渲染圖通常可以服務兩個區塊：重複使用它。
先確定常數
將這些寫下來。之後每張圖片都會以此為標準進行檢驗，任何不符的圖片都必須重新生成，而非接受。
| 常數 | 決定內容 |
|---|---|
| 色板 | 三種中性色，最多一個強調色，使用十六進位色碼 |
| 光線 | 一種光線語言：柔和的日光、強烈的方向光或陰天 |
| 環境 | 攝影棚、真實地點，或兩者的宣告比例 |
| 裁切 | 從全身 / 中景 / 特寫中選擇兩種，絕不選三種 |
| 連續性 | 整組圖片中保持不變的一件事 |
| 變化性 | 整組圖片中改變的一件事 |
對產品系列而言，最強的連續性手法是同一件服飾穿在不同模特兒身上與不同場景中。它能展現多樣性，同時證明一致性，這通常正是頁面所要傳達的宣稱。較弱的版本是同一模特兒穿著不同服飾：這證明不了什麼，而且看起來像型錄。
圖像證明文案
在處理佈局之前，先為每個區塊寫下其文案所做的單一宣稱，以及能證明該宣稱的圖片。在「場景」標題下放一張臉部特寫，或在「印花與標誌」下放一件素面洋裝，只會裝飾卡片，而非展示其功能。
| 區塊宣稱 | 圖片內容 |
|---|---|
| 印花保持對齊 | 縫線處對齊的條紋 |
| 標誌位置固定 | 胸口上的徽章，每個模特兒都在相同位置 |
| 適用於型錄 | 同一個攝影棚中的多種不同產品，附有狀態清單 |
| 一件服飾，多種場景 | 同一件服飾與模特兒出現在多個地點，控制條件變化 |
| 包容性 | 同一件服飾穿在不同模特兒身上 |
如果某個區塊有宣稱，但沒有能證明它的圖片，那就是一份渲染需求簡報。
配對現有圖集
在為既有的圖像增添新內容時，請先從現有圖像中推導出常數，再進行任何生成。測量而非目測：取樣現有畫面的背景亮度與主色調，並記錄每張圖片的裁切與光線。
如果既有圖集是四張亮色調和一張暗色調，那麼新圖集也應該是四張亮色調和一張暗色調。比例本身就是視覺風格的一部分。
主題來源
- 使用影像模型從搭配照中提取每件服飾，並以搭配照作為參考。每件服飾渲染一個產品，每次渲染一個造型。
- 絕不使用帶有第三方文字商標或標誌的來源圖像。
- 根據故事選擇姿勢。上衣採用上半身姿勢。洋裝、牛仔褲、裙子與長褲採用全身姿勢。手放在臀部可展示口袋與對齊的條紋。
- 背景保持中性。透過選角與造型傳達氛圍，而非透過暖色背景。
場景提示
描述場景，絕不描述服飾。服飾作為輸入提供；描述它會與模型衝突並降低保真度。
順序：設定、光線、相機、姿勢與氛圍、色板。
空蕩的城市街道在黃昏時分，旁邊是長長的波紋鐵捲門，冷冷的藍色環境光，一盞溫暖的鈉燈從右側斜射進來，35mm 全身環境構圖，模特兒靜靜站在畫面右側，左側有一大片空白牆壁，雙手放鬆垂在身體兩側，直視鏡頭，電影感且安靜，冷混凝土灰與奶油色調。
針對網頁特別注意：
- **要求主題偏離中心並指明空白的側邊。**英雄區塊需要空間放置文案。
- 全程使用正面表述。說出你不想要的東西會讓它出現在畫面中。
- 場景是一個真實、具體、充滿生活感的地方，充滿了屬於那裡的東西。一個有著模特兒的空洞蒼白房間，讀起來就像一個假裝成真實地點的攝影棚。
- 範本會覆寫提示。如果某個範本一直回傳你未要求的畫面，就棄用它，並完全從提示來驅動場景。
英雄網格
肖像網格在三種情況下會失敗，而且都在第一秒內顯而易見：
- 左右兩張相同的照片
- 頭部被英雄邊緣切斷
- 以滑動而非淡入淡出的方式變化
規則：每個可見的照片都是獨一無二的，沒有照片被英雄邊緣切斷，而且照片更換位置時，是從一個格子淡出並淡入另一個格子。透過連續八秒取樣畫面來測試，如果出現任何重複來源、超出英雄矩形範圍的圖塊、圖塊重疊或圖塊位於文案下方，則判定為失敗。
原生解析度品管
縮圖與聯絡頁表正好會隱藏那些在 27 吋顯示器上才會被注意到的瑕疵。在定位圖上找到手腳的位置，然後從全尺寸檔案中裁切出這些區域，並以 2 倍到 4 倍檢視：
- 腳與鞋：將兩者作為一對進行比較。鞋底厚度、鞋楦形狀、鞋帶、鞋跟。
- 手：數手指數量。如果無法確定數量，那就是失敗，而非通過。
- 肢體連接處：腿連接衣擺到鞋子、肩膀、手肘、膝蓋
- 接觸陰影：在腳下，而非偏移
- 服飾保真度：口袋、縫線、領口、衣擺長度與水洗效果，對照來源
- 文字：畫面中的任何標誌或印刷文字
最便宜的修正方式是構圖。一個結束於大腿中段的畫面，完全消除了鞋子失敗的可能。當下半身不是重點時就使用它。提示防護語句也有效：「畫面結束於大腿中段，且畫面中不可見任何腳、腳踝或鞋子。」
解析度
大約提供該位置最大 CSS 寬度的 2 倍解析度，並透過 srcset 將 1 倍檔案提供給 1 倍螢幕。稽核每張圖片在每個滾動位置的有效比（所需像素除以檔案中的像素；高於 1.0 即為模糊）。將小來源放大只會增加像素，不會增加細節。明確告知這一點，並提議重新渲染。
色彩欄位與圖片上的文字
圖片或色彩欄位上的文字需要經過測量，而非目測判斷。白色文字在大尺寸時需要 3:1 的對比度，在內文尺寸時需要 4.5:1，需從像素中取樣。在欄位內部使用遮罩可以改善可讀性，同時不破壞色彩。放置在色彩欄位上的模擬 UI 需要自己的文字顏色，否則它會從場景繼承白色文字，並在白色卡片上消失。
為位置構圖
生成時寬鬆，裁切時緊湊。使交付的長寬比與 CSS 盒子相符，讓瀏覽器幾乎無需裁切：
- 卡片網格：每張卡片使用一個長寬比，在包裝元素上設定，圖片使用
object-fit: cover - 英雄區塊：在你支援的最寬視口比例約 10% 以內
- 疊加區：當卡片文案位於圖片下方三分之一處時，該區域必須保持單純
- 證明一致性的拼貼：一個大格子加上兩個小格子，三者使用相同的長寬比
檢查清單
- 在生成之前已寫下常數
- 每個區塊都有宣稱與能證明它的圖片
- 每張圖片都與常數比對；不符的重新生成，而非接受
- 亮色調與暗色調畫面的比例與現有圖集相符
- 模特兒在整組圖片中不同；服飾或光線保持不變（而非反過來）
- 手、腳與服飾細節已在原生解析度下檢查
- 任何來源圖像中均無第三方文字商標
- 每個英雄畫面中都有文案空間且位於正確的一側
- 交付的長寬比與 CSS 盒子相符；有效比等於或低於 1.0
- 圖片上的文字已測量對比度
- 優先重複使用，而非重新渲染；任何超過約六張的批次已由人員批准