故事驱动的网站概念设计 是做什么的？
目的
将充分理解的商业问题转化为独特的网站概念，这些概念围绕意义、转变、叙事和证据构建，而不是一系列通用功能和界面区块。
此技能主要在视觉之前使用文字。
它确定：
- 网站应传达什么核心信息
- 何种故事或叙事视角可以传达该信息
- 访客的理解应如何递进
- 何种证据支持该递进过程
- 概念应在方向层面如何影响内容、语调、图像、布局、动效和交互
- 叙事如何支持用户的下一个行动
结果是一组可供评估和后续视觉系统开发的概念方向。
此技能不产生最终文案、最终布局、详细线框图、设计系统或实施代码。
核心原则
一个强大的网站概念连接：
商业问题
→ 受众需求
→ 有意义的转变
→ 中心思想
→ 叙事递进
→ 支持证据
→ 用户行动
视觉决策应在此链条之后。
避免：
有趣的美学
→ 聪明的标题
→ 随意划分的区块
→ 装饰性交互
概念应解释体验为何存在，然后才解释它看起来像什么。
故事不是装饰
“故事驱动”并不意味着每个网站都需要：
- 一个戏剧性的主角
- 电影般的滚动序列
- 创始人传记
- 情绪化的推荐
- 起承转合的剧本
- 虚构叙事
故事可以简单地意味着信息被有意地结构化，使访客从一种有意义的理解状态过渡到另一种状态。
有效叙事结构的示例包括：
问题
→ 后果
→ 解决方案
→ 证明
→ 行动
原材料
→ 流程
→ 成品
→ 能力
旧方式
→ 矛盾
→ 新方式
→ 证据
客户情境
→ 挑战
→ 体验
→ 结果
使命
→ 障碍
→ 方法
→ 影响
问题
→ 探究
→ 发现
→ 启示
适当的叙事强度取决于项目本身。
何时使用此技能
在以下情况使用此技能：
- 网站简报已被充分理解。
- 用户请求网站概念、创意方向概念、核心创意、叙事方向、故事结构或故事驱动的落地页。
- 页面目前感觉像数字手册或一系列无关的功能区块。
- 主页有信息但缺乏清晰的递进或观点。
- 多个信息片段相互竞争优先级，需要围绕一个核心意义进行组织。
- 品牌拥有强大的创始人、客户、流程、产品、使命或转变素材，可以构建体验。
- 存在图形宇宙研究，需要与实际的网站创意关联起来。
- 用户希望在确定视觉方向之前获得几个真正不同的创意概念。
- 产品需要通过使用、转变或证据来展示价值，而不仅仅是列出功能。
- 设计团队在就网站的传达内容达成一致之前，一直在追求视觉执行力。
- 概念必须将标题、图像、内容结构、行动号召以及最终交互连接成一个连贯的方向。
在以下情况不使用此技能：
- 商业问题或受众仍不明确。
- 用户仅需要视觉灵感或图形研究。
- 用户已有成熟概念，仅需要从中选择。
- 任务是最终文案撰写。
- 任务是针对复杂应用的详细信息架构。
- 任务是 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. 在收敛之前先发散
生成几个不同的概念方向。
目标是质量上不同的选项，而非相同想法的轻微变体。
在最后一个概念之后，生成一个完全对立的概念。
如果与现有线索无关的概念没有出现，继续探索。
旨在生成 3-5 个候选概念。
每个候选概念应回答：
中心思想？
叙事视角？
故事强度？
主要信息来源？
对内容、语调、图像、布局和交互的影响？
在此阶段不要自我审查。
9. 收敛为候选概念
审查候选概念：
这是否传达了基本意义？
从可用证据中，是否支持所述转变？
它是否足够不同以提供真正的选择？
它是否避免了陈词滥调或通用网站模式？
它是否暗示了一个连贯的视觉方向，抑或只是一个文案策略？
它如何引导用户行动？
保留至少两个候选概念。
如果一个概念在语法上连贯但缺乏深度，请将其替换。
10. 记录概念摘要
对于每个幸存的概念，创建一个简洁的摘要。
格式：
## 概念名称
### 问题
[基于简报重述的问题]
### 基本意义
[一句话意义]
### 受众转变
转变前 → 转变后
### 叙事视角
[转变 / 产品使用 / 流程 / 创始人 / 客户故事 / 使命 / 对比 / 旅程 / 系统 / 探究 / 证明]
### 故事强度
[轻度 / 融合 / 沉浸式]
### 关键证据
- 证据 1（高）
- 证据 2（中）
- 证据 3（弱）
### 概念工作原理
[2-4 句话描述访客体验的可能路径]
### 对设计的影响
- 语调：
- 图像：
- 布局：
- 交互：
- 动效：
### 开放性问题
- 需要明确的假设
- 尚未发现的有用证据
如果项目包含图形宇宙研究，请明确指出概念如何与宇宙交互：
### 图形宇宙连接
[此概念如何利用或调整选定的宇宙；
它采用何种视觉隐喻；
它如何为宇宙添加或修改约束；
哪些视觉原子需要优先开发]
完成此技能
此技能的预期输出是：
- 设计问题的清晰重述（如果尚不清楚则作为待解决问题）
- 定义的基本意义
- 受众转变定义
- 证据清单显示已验证、推断和缺失的证据
- 至少两个、理想情况下三个到五个候选概念，每个作为自己的概念摘要。
通常，每个概念摘要应为 10-20 句话。
每个概念摘要应可独立评估。
此技能不产生：
- 最终文案
- 最终布局
- 视觉设计
- 线框图或原型
- 交互规范
- 代码
- 单一“正确”答案