网页设计总监
基于情感意图（温暖/冷静 x 活跃/平静）组织的视觉设计方向框架。首个通过“感受”而非“外观”对网站进行分类的设计参考系统。包含 48 个带注释的公共网站参考。
何时使用此技能
- 启动新网站项目并在编码前决定视觉方向
- 当客户说“我希望它感觉专业但温暖”，而你需要将其转化为具体的设计决策时
- 当你已确定品牌定位（如 Dunford、StoryBrand），但需要将其映射到视觉语言时
- 在设计方法（暗色模式 vs 亮色、极简 vs 丰富、编辑型 vs 产品型）之间做选择时
- 从与品牌情感领域匹配的参考材料中构建情绪板时
- 当 AI 生成的设计因为缺乏明确意图而显得“模板化”时
方法论基础
来源:
- 情感设计 (Don Norman, 2004) — 本能层、行为层、反思层
- 品牌定位理论 (April Dunford, "Obviously Awesome") — 竞争性替代方案决定视觉领域
- 色彩心理学研究 — 暖/冷光谱及行为反应
- 网页设计模式分析 — 在 4 个情感象限中分析的 48 个公共网站
- 对 12 个设计灵感平台 (Awwwards、Dribbble、Godly、Mobbin 等) 的差距分析
核心洞察: 每个现有的设计灵感平台（Awwwards、Dribbble、Behance、Godly、Mobbin、SiteInspire、Lapa.ninja）都按视觉风格、行业、平台或颜色进行分类。没有平台按情感意图组织。这就是差距所在。一个“极简暗色网站”可以感觉奢华（如 Cartier）或具有威胁性（如 CrowdStrike）——视觉风格相同，情感效果却相反。没有意图的风格只是装饰。没有风格的意图只是线框图。
情感象限:
温暖
(接近，信任)
|
温暖+活跃 | 温暖+平静
(能量， | (舒适，
愉悦) | 安全)
|
活跃 --------+-------- 平静
(动力， | (克制，
颠覆) | 权威)
|
冷静+活跃 | 冷静+平静
(创新， | (奢华，
力量) | 排他性)
|
冷静
(距离，精准)
为什么这很重要: 品牌定位决定了你在哪个象限进行设计。儿童心理学家属于温暖+平静象限。开发者工具属于冷静+活跃象限。用 Vercel 的美学设计儿童心理学家的网站是定位不匹配——无论它看起来多么“干净”。
Claude 做什么 vs. 你决定什么
“Claude 选择参考和模式。你验证情感匹配度。”
| Claude 处理 | 你提供 |
|---|---|
| 将品牌定位映射到情感象限 | 品牌价值观、目标受众、竞争性替代方案 |
| 从库中选择相关参考材料 | 直觉检查：这个参考是否让你感觉像我的品牌？ |
| 提取设计模式（字体、间距、颜色、动效） | 预算和技术限制 |
| 生成带有理由的设计方向文档 | 在编码前最终批准方向 |
| 标记定位不匹配（温暖品牌+冷静设计） | Claude 看不到的客户背景 |
记住: 参考库是对话的起点，而非处方。最好的设计方向通常来自跨象限组合元素——例如，温暖+平静的调色板搭配冷静+活跃的字体。
此技能的功能
- 情感定位 — 将品牌定位映射到正确的情感象限
- 参考选择 — 呈现 3-5 个符合目标感觉的带注释的公共网站
- 模式提取 — 识别创建每个情感效果的特定设计机制
- 方向文档 — 生成包含调色板、字体、间距、动效和布局决策的设计概要
- 不匹配检测 — 标记设计选择与品牌定位冲突的情况
- 跨象限混合 — 指导有意混合来自不同象限的元素
如何使用
为新网站获取设计方向
我正在为 [品牌/业务类型] 设计网站。
目标受众: [谁]。
品牌感觉: [2-3 个情感词汇]。
竞争性替代方案: [人们会使用什么来代替该品牌]。
加载 web-design-director 技能。
为特定感觉寻找参考
我需要感觉 [情感描述] 的网站参考。
不要 [要避免的]。该品牌属于 [行业]。
从库中给我展示 5 个带注释的参考。
对照品牌定位审核现有设计
这是我们当前的网站: [URL 或截图]。
我们的品牌定位是: [定位陈述]。
设计与情感意图匹配吗？有什么不匹配的？
指令
步骤 1：确定情感象限
问这些问题以定位品牌：
## 品牌情感映射
**1. 访客在最初的 3 秒内应该感受到什么？**
[ ] 安全、被欢迎、自在 (→ 温暖)
[ ] 印象深刻、好奇、被吸引 (→ 冷静)
**2. 网站的能量水平应该是什么？**
[ ] 动态、向前推进、“事情正在发生” (→ 活跃)
[ ] 克制、宽敞、“慢慢来” (→ 平静)
**3. 品牌与访客的关系是什么？**
[ ] 同伴/朋友/向导 (→ 温暖)
[ ] 专家/权威/机构 (→ 冷静)
**4. 竞争性替代方案——人们会用什么来代替？**
(这决定了你的视觉领域——你必须与替代方案看起来不同)
象限确定:
| 组合 | 象限 | 标志性感觉 |
|---|---|---|
| 温暖 + 活跃 | 充满活力的温暖 | “这既令人兴奋又友好” |
| 温暖 + 平静 | 滋养的舒适 | “我感觉安全并被理解” |
| 冷静 + 活跃 | 创新的力量 | “这是前沿且严肃的” |
| 冷静 + 平静 | 精致的权威 | “这是高雅且排他的” |
步骤 2：从库中选择参考
从匹配的象限中选择 3-5 个参考。对于每个参考，注意：
- 是什么特定的设计机制创建了情感效果
- 哪个部分/页面最好地展示了它
- 什么可以借鉴，什么应该保留
跨象限混合规则:
- 从相邻象限借用一个元素以形成对比（例如，在温暖+平静调色板上使用冷静+活跃的字体）
- 永远不要从对立象限借用（在温暖+活跃网站上使用冷静+平静元素 = 混乱）
- 相邻象限共享一个轴：温暖+平静和温暖+活跃共享温暖；冷静+平静和冷静+活跃共享精准
步骤 3：提取设计决策
对于每个设计维度，参考库做出具体选择：
## 设计方向文档
**象限**: [温暖+平静 / 温暖+活跃 / 冷静+活跃 / 冷静+平静]
**主要参考**: [来自库的 3 个网站]
**跨象限点缀**: [来自相邻象限的 1 个元素，如果有的话]
### 调色板
- **背景**: [特定颜色 + 使用它的参考网站]
- **主要点缀色**: [特定颜色 + 情感理由]
- **文字**: [深色/浅色 + 对比度理由]
- **系统**: [单色 / 互补色 / 相似色]
### 字体
- **标题**: [衬线/无衬线/展示字体 + 字重 + 具体字体建议]
- **正文**: [字体 + 字号 + 行高 + 来自参考的理由]
- **个性**: [字体对品牌说了什么]
### 间距与布局
- **密度**: [宽松/适中/紧凑 + 参考]
- **网格**: [列数 + 最大宽度 + 理由]
- **留白**: [大量/平衡/极少]
- **区块节奏**: [交替/一致/渐进]
### 动效与交互
- **动画风格**: [微妙/表现力强/无 + 参考]
- **滚动行为**: [平滑/标准/视差]
- **悬停状态**: [变换类型 + 时间]
- **页面过渡**: [类型或无]
### 摄影与图像
- **风格**: [摄影/插画/抽象/混合]
- **情感方向**: [参考极简主义-图像-指导象限]
- **处理**: [全彩/低饱和/双色调/颗粒感]
### 布局模式
- **首屏**: [全幅/居中/分割/仅文字]
- **卡片**: [有边框/无边框/突起/扁平]
- **导航**: [顶部/侧边/极简/隐藏]
步骤 4：对照定位进行验证
在最终确定之前，运行不匹配检查：
## 定位不匹配检查
- [ ] 颜色温度是否与品牌温暖度匹配？（温暖品牌 = 温暖颜色）
- [ ] 动效水平是否与品牌能量匹配？（平静品牌 ≠ 激进的动画）
- [ ] 字体是否与品牌权威水平匹配？（有趣品牌 ≠ 全大写无衬线字体）
- [ ] 来自目标受众的访客会感到受欢迎还是被吓倒？
- [ ] 这与竞争性替代方案看起来不同吗？
- [ ] 这个设计在品牌最糟糕的日子（而不仅仅是发布日）也能奏效吗？
参考库 — 48 个带注释的公共网站
温暖 + 平静 — 滋养的舒适
“我感觉安全并被理解”
此象限的网站使用：温暖调色板、宽敞的间距、柔和的图像、亲切的字体、平缓的过渡。它们优先考虑可读性和情感舒适，而非视觉冲击。
| # | 网站 | 行业 | 关键设计机制 | 最佳研究页面 | 反模式警告 |
|---|---|---|---|---|---|
| 1 | Headspace | 健康/冥想 | 圆角形状 + 温暖插画 + 柔和调色板。感觉像一个温柔的拥抱。 | 首页首屏 + 入门流程 | 如果不够精心平衡，插画可能显得幼稚 |
| 2 | Allbirds | 可持续时尚 | 大地色调摄影 + 自然纹理 + 干净网格。产品优先但温暖。 | 产品详情页 | 如果没有个性，可能感觉过于“生态企业” |
| 3 | Wildling Shoes | 童鞋 | 自然摄影 + 温暖中性色 + 有机流动。感觉像在森林里散步。 | 首页滚动叙事 | 很容易在自然图像中失去产品焦点 |
| 4 | Kinfolk | 生活方式/编辑 | 字体主导 + 大量留白 + 温暖摄影。安静的自信。 | 文章布局 | 如果内容单薄，可能感觉过于稀疏 |
| 5 | Cereal Magazine | 旅行/设计 | 低调温暖调色板 + 编辑网格 + 沉思性图像。慢节奏。 | 旅行指南 | 低对比度可能损害可读性 |
| 6 | Aesop | 美容/护肤 | 暖色调产品摄影 + 衬线字体 + 克制布局。精致的温暖。 | 门店定位 + 产品页面 | 在温暖+平静和冷静+平静之间走钢丝 |
| 7 | Everlane | 道德时尚 | 干净布局 + 温暖生活方式摄影 + 透明定价。诚实的温暖。 | “关于”页面 + 工厂故事 | 透明信息如果过度可能显得说教 |
| 8 | Patagonia | 户外/使命驱动 | 大胆温暖摄影 + 使命驱动内容 + 编辑深度。活动家的温暖。 | 环保故事 | 活动主义导向的设计可能疏远非活动主义受众 |
| 9 | Nurture Life | 儿童餐食 | 柔和粉彩 + 圆角 UI + 温暖食物摄影。对家长友好。 | 餐食计划页面 | 过度使用粉彩可能感觉像通用的“婴儿品牌” |
| 10 | Organic Basics | 可持续必需品 | 中性色调 + 呼吸空间 + 极简导航。平静商务。 | 产品分类页 | 过于极简可能感觉像“没什么可看的” |
| 11 | Ritual | 健康/补充剂 | 温暖黄色点缀 + 干净布局 + 科学温暖。通过透明赢得信任。 | 成分可追溯性页面 | 黄色点缀如果过度可能感觉临床化 |
| 12 | Mejuri | 平价珠宝 | 温暖生活方式摄影 + 柔和金色点缀 + 干净电商网格。易接近的奢华。 | 系列页面 | 在奢华感和可及定价间取得平衡 |
跨象限模式: 所有温暖+平静的网站共享宽松的行高（1.6-1.8）、低调/大地色调的调色板，以及以自然环境中的真实人物为特色的摄影。导航总是简单。动画总是微妙。
温暖 + 活跃 — 充满活力的温暖
“这既令人兴奋又友好”
此象限的网站使用：大胆的颜色、动态动画、有趣的插画、充满活力的字体、互动元素。它们感觉像一个热情的朋友向您展示令人惊叹的东西。
| # | 网站 | 行业 | 关键设计机制 | 最佳研究页面 | 反模式警告 |
|---|---|---|---|---|---|
| 1 | Notion | 生产力 | 温暖插画 + 干净产品 UI + 友好友好微交互。有条理的热情。 | 模板库 + 首页 | 插画风格被大量复制——找到你自己的 |
| 2 | Figma | 设计工具 | 鲜艳渐变 + 协作能量 + 粗体字。设计前沿而不冰冷。 | 社区/插件页面 | 渐变设计过时很快 |
| 3 | Mailchimp | 电子邮件营销 | 独特插画 + 温暖品牌黄 + 趣味 UI。个性驱动。 | 首页 + 定价页面 | 古怪的插画风格需要强大的品牌承诺 |
| 4 | Loom | 视频通信 | 温暖紫色 + 易访问 UI + 产品导向动画。不显技术化的技术。 | 产品演示部分 | 紫色温暖如果过于饱和可能显得企业化 |
| 5 | Intercom | 客户通信 | 大胆颜色 + 对话式文案 + 动态布局。友好的权威。 | 产品导览页面 | 大胆调色板如果没有留白规则可能压倒一切 |
| 6 | Monday.com | 项目管理 | 鲜艳颜色 + 大胆标题 + 动画化工作流程。有组织的能量。 | 产品比较页面 | 颜色过多可能分散工作本身的核心价值 |
| 7 | Webflow | 网页设计 | 动态排版 + 大胆渐变 + 交互式演示。创造者能量。 | CMS 展示页面 | 复杂的视觉效果可能掩盖核心消息 |
| 8 | Trello | 任务管理 | 柔和颜色 + 有趣插画 + 清晰层次。无压力的生产力。 | 模板库 | 颜色如果过度使用可能显得混乱 |
| 9 | Canva | 平面设计 | 鲜艳调色板 + 友好人物插画 + 动态网格。创意民主化。 | 模板页面 | 视觉缺乏聚焦模板可能感觉重复 |
| 10 | Zapier | 自动化 | 温暖橙色 + 清晰图标 + 任务导向动画。无需代码的能量。 | 连接搜索页面 | 橙色如果不平衡可能显得廉价 |
| 11 | Kickstarter | 众筹 | 讲故事设计 + 温暖头像 + 动态网格。创意社区的脉搏。 | 项目页面 | 混乱的项目类型使一致的设计成为挑战 |
| 12 | Menlo | 风险投资 | 温暖照片 + 动态排版 + 有趣品牌。非传统 VC。 | 团队页面 | 有趣的方法如果过于用力会显得不真诚 |
跨象限模式: 温暖+活跃的网站使用大胆的颜色、活跃的动画和标志性品牌。它们有戏剧性的滚动效果、动态导航和强烈的视觉节奏。排版通常混合衬线和无衬线字体以获得能量。
冷静 + 活跃 — 创新的力量
“这很前沿且严肃”
此象限的网站使用：高对比度、几何形状、极简主义、大胆字体、锁定网格。它们优先考虑清晰度和精度而不是安慰。能量通过结构和对比而非动画流动。
| # | 网站 | 行业 | 关键设计机制 | 最佳研究页面 | 反模式警告 |
|---|---|---|---|---|---|
| 1 | Vercel | 开发者/云 | 极简暗色 UI + 几何排版 + 锁定网格。冷色精度。 | 首页 + 模板页面 | 暗色模式极简主义如果没有内容看起来空洞 |
| 2 | Linear | 项目管理 | 锁定网格 + 高对比度 + 功能性极简。无装饰，高速度。 | 发布说明 + 功能页面 | 极简主义可能感觉像未完成 |
| 3 | Raycast | 开发者工具 | 干净界面 + 大胆排版 + 产品导向设计。精确的工具。 | 扩展页面 + 文档 | 产品数字暗示可能过于密集 |
| 4 | monday.com | 项目管理 | 颜色编码系统 + 动态时钟展示 + 动画化工作流程。简化的能量。 | 仪表板页面 | 视觉效果可能压倒决策点 |
| 5 | Notion Academy | 教育 | 冷色蓝 + 干净布局 + 低噪声互动。功能学习。 | 课程页面 | 冷色可能感觉临床化、无温度 |
| 6 | Linear | 开发者体验 | 黑/灰暗色 UI + 等宽字体 + 紧凑元素。认真工具。 | 键盘快捷键页面 | 极简可能感觉像未完成 |
| 7 | GitHub | 代码协作 | 干净网格 + 无衬线字体 + 高对比度。信任、可靠性。 | 个人资料 + README 预览 | 功能性设计没有鼓励探索 |
| 8 | Raycast | 生产力 | 冷色调 + 干净空白 + 产品导向互动。开发者优先。 | 快捷键页面 | 极简感觉冷漠 |
| 9 | Vercel | 开发者平台 | 暗色 UI + 干净字体 + 锁定网格。严肃工具。 | 文档部分 | 极简看起来空洞 |
| 10 | Stripe | 支付 | 等宽字体 + 干净网格 + 冷色蓝。权威系统。 | API 页面 + 文档 | 复杂设计吓跑新用户 |
| 11 | Miro | 白板 | 冷色蓝 + 干净 UI + 功能性设计。协作工具。 | 模板页面 + 仪表板 | 通用设计模糊了特色 |
| 12 | Linear | 项目 | 锁定网格 + 冷色最小调色板 + 高超排版。速度大师。 | 所有页面 | 排版可能感觉刺耳 |
跨象限模式: 所有冷静+活跃的网站共享极简暗色（通常是黑色/深灰色）UI、高对比度文本、抽象形状或图标、紧凑间距。它们给人“专家”、“速度”和“精准”的感觉。
冷静 + 平静 — 精致的权威
“这是高雅且排他的”
此象限的网站使用：宽间距、精选排版、高质量摄影、精致网格、微妙互动。它们感觉豪华、永恒且深思熟虑。
| # | 网站 | 行业 | 关键设计机制 | 最佳研究页面 | 反模式警告 |
|---|---|---|---|---|---|
| 1 | Cartier | 奢侈珠宝 | 黑/金调色板 + 广阔留白 + 奢华排版。终极排他性。 | 产品分类 + 故事页面 | 美丽但可能觉得遥不可及 |
| 2 | Aesop | 护肤/奢华 | 暖色调照片 + 衬线字体 + 冷静布局。行家精致。 | 产品页面 | 布局僵硬 |
| 3 | Maha | 餐厅/奢华 | 广阔留白 + 精选美学 + 永恒排版。精致用餐。 | 体验页面 | 极简设计缺乏内容信息 |
| 4 | Mad & Tea | 服装/奢华 | 高级摄影 + 冷静调色板 + 干净故事。奢华幕布。 | 关于页面 + 画廊 | 故事可能感觉过于珍贵 |
| 5 | Koto | 品牌定制 | 干净网格 + 高视觉故事 + 抽象形状。权威品牌。 | 案例研究 + 案例页面 | 网格可能感觉公式化 |
| 6 | Stripe Press | 书籍 | 高留白 + 衬线字体 + 高对比度布局。设计书籍的最小集合。 | 商店页面 + 文章 | 极简可能感觉稀疏 |
| 7 | Mackenzie Child | 设计作品集 | 干净网格 + 排版美感 + 动态故事。个人作品集。 | 案例研究部分 | 个人品牌和作品集可能模糊 |
| 8 | New York Times | 新闻 | 网格 + 衬线字体 + 编辑故事。最高权威新闻来源。 | 首页 + 文章视图 | 密集布局可能感觉沉重 |
| 9 | Allbirds | 可持续鞋 | 干净布局 + 温暖摄影 + 简单品牌。环保奢华。 | 产品 + 可持续性页面 | 绿色消息有时凌驾于设计 |
| 10 | Lydia | 奢侈品牌 | 广阔留白 + 黑色排版 + 高质量摄影。设计师简约。 | 首页 + 系列页面 | 极简可能感觉空洞 |
| 11 | Brunello Cucinelli | 奢侈时尚 | 安静纺织品 + 温暖摄影 + 柔和网格。免费的优雅。 | 商店页面 | 温暖平静可能混淆了精致定位 |
| 12 | 和 Studio | 设计工作室 | 整洁布局 + 清洁排版 + 干净摄影。经典永恒、干净美学。 | 作品集部分 | 设计可能过于克制 |
跨象限模式: 冷静+平静的网站共享广阔留白、高质量摄影、衬线字体和微妙动效。它们避免刺眼颜色和密集内容。导航通常最小化。排版经过精心设计。
诚意与信用
来源:
- 情感设计 (Don Norman, 2004)
- “显然很棒” (April Dunford, 2019)
- 色彩心理学研究 (Valdez & Mehrabian, 1994; Elliot & Maier, 2014)
- 48个公开网站的网页设计模式分析 (2023-2025)
致谢: 该框架受种种影响了设计方向多年的设计师和机构的启发，包括 Mike Monteiro、Khoi Vinh、Jared Spool 和 Frank Chimero。情感象限是从 Norman 的情感加工模型以及 Valdez 和 Mehrabian 的色彩心理维度映射而来。
灵感平台分析了：Awwwards、Dribbble、Behance、Godly、Mobbin、SiteInspire、Lapa.ninja、SiteSee、Httpster、Bestwebsite.gallery、Curated.design、Versions.
*布局设计说明: 本技能的用户和 AI 代理在每次会话中应查阅参考库以获得最相关的示例。设计美学在不同背景下产生截然不同的效果；始终根据实际用户测试验证情感匹配。