故事導向網站概念
目的
將已充分理解的商業問題，轉化為以意義、轉變、敘事和證據為核心的獨特網站概念，而非一系列通用的功能與介面區塊。
此技能主要處理文字層面的工作，優先於視覺。
它決定：
- 網站應該傳達什麼根本訊息
- 哪個故事或敘事鏡頭能夠傳達它
- 訪客的理解應該如何逐步推進
- 有哪些證據支持這個推進過程
- 概念該如何從方向層面影響內容、語調、圖像、佈局、動態與互動
- 敘事如何支援使用者的下一步行動
結果是一組可供評估的概念方向，為後續的視覺系統開發做好準備。
此技能不會產出最終文案、最終佈局、詳細線框圖、設計系統或實作程式碼。
核心原則
一個強大的網站概念連結：
商業問題
→ 受眾需求
→ 有意義的轉變
→ 核心想法
→ 敘事推進
→ 支持證據
→ 使用者行動
後續的視覺決策應強化這條鏈結。
避免：
有趣的審美
→ 巧妙的標題
→ 任意區塊
→ 裝飾性互動
概念應在解釋體驗「為何存在」之後，才解釋它「看起來像什麼」。
故事不是裝飾
「故事導向」並不意味每個網站都需要：
- 一個戲劇性的主角
- 一個電影感的滾動序列
- 一則創辦人傳記
- 一則感人的見證
- 一個起承轉合的劇本
- 一個虛構的敘事
故事可以僅僅意味著資訊被刻意地結構化，使訪客從一個有意義的理解狀態，移動到另一個。
有效的敘事結構範例包括：
問題
→ 後果
→ 解決方案
→ 證據
→ 行動
原材料
→ 過程
→ 最終成果
→ 能力
舊方法
→ 緊張感
→ 新方法
→ 證據
客戶情境
→ 挑戰
→ 體驗
→ 結果
使命
→ 障礙
→ 方法
→ 影響
問題
→ 調查
→ 啟示
→ 意涵
合適的敘事強度取決於專案本身。
何時使用這個技能
在以下情況使用這個技能：
- 網站簡報已充分理解。
- 使用者要求提供網站概念、創意方向概念、核心想法、敘事方向、故事結構或故事導向的登陸頁面。
- 頁面目前感覺像一本數位型錄或一連串不相關的功能區塊。
- 首頁有資訊，但缺乏清晰的推進脈絡或觀點。
- 多個訊息互相競爭優先級，需要圍繞一個核心意義進行組織。
- 品牌擁有強大的創辦人、客戶、流程、產品、使命或轉變素材，可以用來結構化體驗。
- 已有圖像宇宙研究，需要將其與實際的網站想法連結。
- 使用者在選擇視覺方向之前，想要幾個真正不同的創意概念。
- 產品需要透過使用、轉變或證據來展示價值，而非僅僅列出功能。
- 設計團隊總是在還沒就網站要傳達的核心訊息達成一致前，就急著進行視覺實作。
- 一個概念需要將標題、圖像、內容結構、行動呼籲和最終的互動，連結成一個連貫的方向。
不要在以下情況使用這個技能：
- 商業問題或受眾仍不明確。
- 使用者只需要視覺靈感或圖像研究。
- 使用者已有成熟的概念，只需要從中選擇。
- 任務是最終的文案撰寫。
- 任務是複雜應用程式的詳細資訊架構。
- 任務是 UI 元件設計。
- 任務是最終的佈局構成。
- 任務是設計系統規格。
- 任務是實作或程式碼。
- 介面主要是一個實用或操作工具，在其中加入敘事框架會增加不必要的摩擦。
如果專案尚未充分理解，請先執行問題框架化工作流程。
要檢視的輸入
盡可能檢視以下可取得的資料。
策略素材
- 商業問題
- 專案簡報
- 商業目標
- 受眾
- 待辦任務
- 使用者需求
- 期望行動
- 定位
- 價值主張
- 差異化因素
- 競爭背景
- 限制條件
轉變證據
- 客戶成果
- 前後狀態變化
- 已解決的問題
- 節省的時間
- 降低的風險
- 獲得的技能
- 改善的體驗
- 情感結果
- 營運改善
- 社會或文化影響
故事素材
- 創辦人故事
- 公司起源
- 客戶故事
- 見證
- 案例研究
- 產品使用案例
- 幕後素材
- 製造或服務流程
- 歷史里程碑
- 使命
- 研究
- 數據
- 結果
- 產品創造
品牌素材
- 品牌策略
- 語調
- 現有訊息
- 活動語言
- 命名
- 術語
- 現有視覺識別
- 攝影
- 檔案素材
內容素材
- 現有頁面文案
- 網站地圖
- 區塊清單
- 產品描述
- 服務
- 常見問題
- 評論
- 統計數據
- 行動呼籲
上游設計研究
如果有的話，檢視從以下工具的輸出：
design-problem-framergraphic-universe-builder
有用的圖像宇宙輸入包括：
- 專案詞彙
- 研究集群
- 專案專有的機會
- 視覺原子
- 隱喻候選
- 候選圖像宇宙
- 分類陳腔濫調
如果專案已包含強烈的概念素材，則不需要強制要求圖像宇宙研究。
前提條件
在概念生成之前，確認以下問題能否被回答：
這個組織提供什麼？
誰是主要受眾？
那個受眾需要、想要、害怕或掙扎於什麼？
這個提供物創造了什麼有意義的改變？
為什麼這個組織應該被相信？
訪客應該理解什麼？
如果情感相關，訪客應該感受到什麼？
訪客應該做什麼？
這個專案與顯而易見的替代方案有什麼不同？
如果幾個答案未知，將它們標記為開放問題。
不要為了讓概念看起來完整而編造策略事實。
工作流程
1. 重述設計問題
將簡報濃縮成一個概念就緒的陳述。
使用：
這個網站需要幫助 <受眾>
理解/相信/體驗 <意義>
以便他們能 <期望的行動或結果>，
同時克服 <關鍵障礙>。
範例結構：
這個網站需要幫助技術買家理解，該公司
不僅僅是製造零件：它控制從原材料到
最終精密零件的完整流程，從而使買家信任
其承擔高風險生產工作的能力。
在能夠清晰表達問題之前，不要開始概念化。
2. 定義核心意義
提問：
如果訪客只從這個體驗中記得一個想法，它應該是什麼？
寫一句話。
這不是：
- 一個標語
- 一個標題
- 一個功能列表
- 一種視覺風格
它是這個概念必須傳達的意義。
範例：
這家公司將一個不可預測的工業流程轉變為
精確、可見且可靠的東西。
測試這個陳述：
- 對受眾有意義嗎？
- 與業務相關嗎？
- 比「我們很創新」更具體嗎？
- 有可用的證據支持它嗎？
- 它能引導內容決策嗎？
3. 定義受眾轉變
描述期望的轉變。
使用：
之前：
訪客的想法/感受/信念是...
之後：
訪客的想法/感受/信念是...
行動：
訪客現在準備好...
可能的轉變包括：
不確定 → 自信
不知道 → 知情
懷疑 → 被說服
不知所措 → 清晰
好奇 → 投入
疏離 → 情感連結
問題認知 → 解決方案認知
功能導向 → 成果導向
一般認知 → 獨特認知
在單純的理解轉變就足夠的情況下，不要製造情感轉變。
4. 建立證據清單
將可用的故事素材與假設分開。
使用：
| 證據 | 類型 | 證明了什麼 | 強度 |
|---|---|---|---|
| ... | 客戶 / 創辦人 / 流程 / 數據 / 產品 / 歷史 | ... | 高 / 中 / 低 |
將素材分類為：
已驗證
直接由提供的素材支持。
推斷
一種合理的解釋，但仍需驗證。
缺失
目前不存在但有用的證據。
一個概念不應依賴於虛構的見證、捏造的歷史、以事實呈現的假設性客戶成果，或是不存在的生產素材。
5. 識別可能的敘事鏡頭
評估哪個鏡頭能自然地展現專案的意義。
可能的鏡頭包括：
轉變
展示為客戶創造的有意義改變。
之前
→ 介入
→ 之後
當成果是最強的差異化因素時最佳。
產品使用中
透過實際情境而非孤立的功能來展示提供物。
情境
→ 使用
→ 結果
當看到產品運作能建立信任時最佳。
流程
揭露事物如何被創造、交付、轉變或解決。
輸入
→ 階段
→ 輸出
當流程、工藝、透明度或專業知識是組織的差異化因素時最佳。
創辦人或起源
以組織存在的原因作為組織敘事主軸。
挫折
→ 決定
→ 新方法
→ 當前使命
僅當起源能有意義地解釋產品或品牌時使用。
不要僅僅因為有創辦人素材就使用創辦人敘事。
客戶故事
用真實客戶的情境來展示相關性。
情境
→ 問題
→ 體驗
→ 結果
當社會證明和生活經驗比產品聲明更強大時最佳。
使命與影響
圍繞組織想要產生的改變來結構化體驗。
現狀
→ 挑戰
→ 介入
→ 影響證據
適用於慈善機構、文化機構、使命驅動的組織以及公共利益工作。
對比
透過揭露傳統替代方案的弱點來定義提供物。
舊假設
→ 矛盾
→ 更好模式
當類別中存在根深蒂固的預設選項時有用。
旅程
帶領訪客經歷一個有意義的序列。
階段 1
→ 階段 2
→ 階段 3
→ 目的地
當推進本身至關重要時有用。
系統
揭示表面上獨立的各個部分如何協同工作。
部分
→ 關係
→ 系統
→ 成果
適用於平台、基礎設施、複雜服務和生態系統。
調查
從一個問題開始，逐步揭示答案。
問題
→ 證據
→ 發現
→ 結論
適用於編輯、研究、文化或說明性體驗。
示範
圍繞證明一個主張來建構網站。
主張
→ 示範
→ 證據
→ 邀請
當需要快速贏得信任時有用。
多個鏡頭可能共存，但每個概念應有一個主導的敘事機制。
6. 選擇合適的故事強度
並非每個專案都應變成一個沉浸式的敘事體驗。
將候選概念分類為：
輕度敘事
敘事主要影響：
- 訊息順序
- 區塊推進
- 標題
- 證據放置
介面保持傳統且高效。
適用於：
- SaaS
- 專業服務
- B2B
- 產品頁面
- 轉換導向的網站
整合敘事
敘事影響：
- 頁面推進
- 內容節奏
- 圖像
- 重複出現的語言
- 選擇性互動
- 區塊轉場
適用於：
- 品牌網站
- 作品集
- 新品發表
- 差異化服務公司
- 編輯型商業
沉浸式敘事
體驗本身像一個故事。
敘事可能影響：
- 滾動推進
- 媒體排序
- 場景變化
- 互動
- 章節結構
- 豐富動態
適用於：
- 活動
- 文化體驗
- 產品發佈
- 故事型專案
- 體驗式品牌網站
只有在以下情況才應提出沉浸式敘事：
- 內容支持它
- 價值證明了它
- 製作預算可能支持它
- 敘事在沒有精細互動的情況下仍能被理解
7. 在視覺領域之前先產生語言領域
從語言開始概念探索。
產生與以下相關的詞彙和短語：
- 轉變
- 客戶語言
- 專案詞彙
- 流程
- 物件
- 領域術語
- 對比
- 成果
- 文化聯想
- 圖像宇宙發現
可能的構思方法包括：
短語組合
以出乎意料但可被辯護的方式組合專案語言。
慣用語
探索相關的慣用語作為靈感火花。
不要將慣用語強加於最終概念。
拒絕那些：
- 陳腔濫調
- 令人困惑
- 文化上不合適
- 過於聰明
- 與實際業務無關
領域語言
重新解讀受眾已在使用的術語。
雙關
探索同時具有功能性與情感性意義的詞彙。
對比陳述
範例：
不是 X。是 Y。
從 X 到 Y。
超越 X。
如果 X 變成 Y 呢？
轉變語言
使用描述移動或變化的動詞。
提問
用一個有意義但未解決的問題來創造張力。
專案專有的短語
偏好競爭對手不易聲稱的術語或語言。
在此階段不要撰寫最終的網站文案。
目的是概念生成。
8. 先發散再收斂
產生多個不同的概念方向，再評估和聚焦。
目標是提出 2-4 個概念，每個概念在敘事機制或核心意義上應該有本質上的不同。
每個概念應包含：
概念標題
一個簡短的、令人難忘的名稱。
意義
核心意義（來自步驟 2）。
轉變弧線
受眾的移動（來自步驟 3）。
敘事鏡頭
選定的主導敘事方法（來自步驟 5）。
結構
一個大致的區塊或章節序列，說明訪客將如何逐步獲得理解。
使用：
1. <章節/區塊>
<意圖>
2. <章節/區塊>
<意圖>
3. <章節/區塊>
<意圖>
4. <章節/區塊>
<意圖>
5. <章節/區塊>
<意圖>
範例：
1. 問題
使隱形的問題可見。
2. 後果
加劇賭注。
3. 解決方案
將提供物定位為回應。
4. 在行動中
透過使用展示可信度。
5. 邀請
提出一個清晰的下一步。
關鍵意象提示
對支配性圖像、攝影風格或視覺類別的簡短描述。
例如：
對比的人類與機器，緊密的細節鏡頭，
工業環境中的自然光。
語調
用 1-2 個詞描述聲音。
例如：
冷靜、精確
互動概念
一些與敘事連結的互動想法。僅在合理時提出。
證據使用
哪些關鍵證據支持這個具體概念？
優勢
這個概念比替代方案好在哪裡？
風險
這個概念的弱點或潛在問題是什麼？
開放問題
為了使概念可行，需要解決哪些問題？
9. 評估概念
在一組候選概念中進行選擇或優先排序時：
對每個概念提問：
- 它是否忠於簡報的核心？
- 它是否有意義？
- 它是否與受眾相關？
- 它是否透過證據連結具體業務？
- 它是否可持續？它能否在網站其餘部分累加？
- 它是否可執行？團隊能否在預算和時間內完成？
- 它是否可測試？我們能否判斷它是否有效？
- 它是否獨特？它與預設或通用的解決方案是否有明顯不同？
- 它是否與可用的品牌或視覺素材相容？
比較概念時，使用一個簡單的矩陣：
| 標準 | 概念 A | 概念 B | 概念 C |
|---|---|---|---|
| 忠於簡報 | |||
| 意義 | |||
| 相關性 | |||
| 證據支持 | |||
| 可持續性 | |||
| 可執行性 | |||
| 可測試性 | |||
| 獨特性 | |||
| 品牌相容性 |
不要僅透過投票來選擇。使用框架。
輸出
對於每個概念，提供：
概念摘要
名稱、核心意義、轉變、主導敘事鏡頭。
結構
階段與意圖的大致序列。
方向
語調、關鍵意象類別、主要互動概念（如果有的話）。
證據
什麼支持這個方向？
理由
為什麼這個方向有效？
風險與開放問題
需要解決什麼？如果適用，需要從客戶或利益相關者那裡獲得什麼確認？
設計師補充說明
這些概念是「方向」，不是「規格」。它們為以下工作提供共同基礎：
- 視覺探索
- 內容策略
- 線框圖
- 文案撰寫
- 互動設計
- 原型設計
在開發視覺系統時，設計師應自由地：
- 重新解釋意象
- 調整結構
- 檢測限制
- 用新的輸入豐富方向
- 在保持核心意義和敘事的同時提出更好的方法