方向作為風格磁磚
原因: 情緒板太模糊,無法據以建構;完整頁面模型又太過具體:人們會開始討論已經在步驟 4 決定好的結構。風格磁磚(Samantha Warren)與元素拼貼(Dan Mall)介於兩者之間:它們展示色彩、字體與介面元素,但不包含頁面佈局,因此討論能專注在外觀與感覺上。有了 AI,製作變體幾乎零成本,所以選擇本身成了瓶頸。因此,本步驟刻意拉開方向之間的差異,並為選擇提供一個衡量標準。
需有: brand.md、taste-profile.md、anti-defaults.md、sitemap.md 與一個線框圖(用於文案)、personas.md。
產出: 06-directions/tiles/r<round>/*.html、06-directions/direction.md。
1. 選擇軸線
根據品味輪廓中仍未決定的部分,命名兩到三條軸線,讓方向沿著這些軸線產生差異。範例:平靜 ↔ 引人注目、密集 ↔ 通透、溫暖 ↔ 冷冽、編輯感 ↔ 技術感、平面 ↔ 紋理。將每個方向放置在軸線上不同的位置。如果三個方向只在強調色上有所不同,那它們其實只是一個方向。
如果情緒板的階段 A 產生了不同的情緒板,請從那些板子開始。
2. 建立三個磁磚
每個方向一個自含式 HTML 檔案。每個磁磚需展示:
- 名稱與一句話說明其背後的理念(來自品牌,而非來自趨勢)
- 色彩調色盤:色票搭配角色(背景、文字、強調色、行動按鈕),以及文字與按鈕的對比度(WCAG AA:文字需達 4.5:1)
- 字體:展示字體與內文字體,並附上幾種尺寸、來自文案草稿的真實標題與段落
- 介面元素:主要與次要按鈕、連結、輸入欄位、導覽列、一張卡片
- 英雄區片段(非完整英雄區塊)與一個其他特色元素:引言、數字、清單、定價列
- 圖像:風格樣本,或說明照片、插圖、螢幕畫面處理方式
- 一個只有該品牌才會有的細節(來自 Logo 的形狀、業界術語、測量單位)
規則:
- 先閱讀
anti-defaults.md。字體只能來自擁有可用授權的來源(Google Fonts、OFL、客戶已授權的字型);請註明授權條款與檔案大小。 - 使用專案中的真實文案,絕不使用 lorem ipsum。範例介面文字只能使用來自
facts.md的事實:不得出現虛構的功能、優惠、可用性說明或數字。 - 無完整頁面佈局、無完整導覽樹、無頁尾。
- 在 390 px 與 1440 px 兩種寬度下渲染每個磁磚,並在展示前先檢視過。
3. 評分
在檢視頁面上,將三個磁磚並排顯示(在行動裝置上可逐一顯示)。針對每個磁磚:
- 詞彙測試: 每個磁磚一個問題。使用者(如果可能,也包括同事)從一個混合品牌屬性與其相反極端的列表中,選出三個詞(核取方塊,
data-max="3")。統計哪一方勝出。 - 逐項元素評分: 每個元素一個問題(色彩、字體、按鈕、圖像、細節):該元素應來自哪個磁磚,A、B、C 或皆非,並附上理由欄位。這樣提問數量大約控制在八題。
- 可選的五秒測試: 將一個磁磚展示給專案外的人看五秒鐘,然後問:「這是什麼樣的公司?你腦中浮現哪三個詞?」
4. 合併
根據評分結果,撰寫 direction.md:記錄每個類別中被選中的元素、來自哪個磁磚及其原因,以及哪些部分留給步驟 7。如果合併幅度較大,請建立一個合併後的磁磚,並在第二輪中再次展示。請勿進行超過三輪;如果仍無法收斂,問題通常出在品牌屬性上,此時應返回步驟 3。
完成條件: direction.md 獲得確認,且針對合併後方向的詞彙測試結果指向品牌屬性。