网页设计总监
基于情感意图（温暖/冷静 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）都按视觉风格、行业、平台或颜色分类。ZERO 平台按情感意图组织。这就是空白。一个“极简暗色网站”可能感觉奢华（Cartier）或威胁（CrowdStrike）——视觉风格相同，情感效果相反。没有意图的风格是装饰。没有风格的意图是线框图。
情感象限:
温暖
（接近，信任）
|
温暖+活跃 | 温暖+平静
（能量， | （舒适，
愉悦） | 安全）
|
活跃 --------+-------- 平静
（动力， | （克制，
颠覆） | 权威）
|
冷静+活跃 | 冷静+平静
（创新， | （奢华，
力量） | 排他性）
|
冷静
（距离，精确）
为什么重要: 品牌定位决定了你在哪个象限设计。儿童心理学家属于温暖+平静。开发者工具属于冷静+活跃。用 Vercel 的美学设计儿童心理学家的网站是定位不匹配——无论它看起来多“干净”。
Claude 的作用 vs 你的决定
“Claude 选择参考和模式。你验证情感契合度。”
| Claude 处理 | 你提供 |
|---|---|
| 将品牌定位映射到情感象限 | 品牌价值观、目标受众、竞争替代品 |
| 从库中选择相关参考 | 本能判断：这个参考是否感觉像我的品牌？ |
| 提取设计模式（排版、间距、颜色、动效） | 预算和技术限制 |
| 生成带有理由的设计方向文档 | 在编码前最终批准方向 |
| 标记定位不匹配（温暖品牌 + 冷静设计） | Claude 看不到的客户上下文 |
记住: 参考库是对话的起点，不是处方。最好的设计方向通常来自跨象限组合元素——例如，温暖+平静的配色方案搭配冷静+活跃的排版。
此技能提供什么
- 情感定位 — 将品牌定位映射到正确的情感象限
- 参考选择 — 呈现 3-5 个匹配目标感受的带注释公共网站
- 模式提取 — 识别创建每种情感效果的具体设计机制
- 方向文档 — 生成包含配色方案、排版、间距、动效和布局决策的设计概要
- 不匹配检测 — 标记设计选择与品牌定位矛盾的地方
- 跨象限混合 — 指导有意混合不同象限的元素
如何使用
为新网站获取设计方向
我正在为[品牌/业务类型]设计一个网站。
目标受众：[谁]。
品牌感受：[2-3个情感词]。
竞争替代品：[他们替代此品牌会使用什么]。
加载 web-design-director 技能。
为特定感受寻找参考
我需要感觉[情感描述]的网站参考。
不要[要避免什么]。该品牌属于[行业]。
从库中给我 5 个带注释的参考。
根据品牌定位审计现有设计
这是我们的当前网站：[URL 或截图]。
我们的品牌定位是：[定位声明]。
设计是否匹配情感意图？哪里不匹配？
使用说明
第一步：确定情感象限
提出这些问题来定位品牌：
## 品牌情感映射
**1. 访客在前 3 秒内应感受到什么？**
[ ] 安全、受欢迎、舒适（→ 温暖）
[ ] 印象深刻、好奇、被吸引（→ 冷静）
**2. 网站的精力水平应该是多少？**
[ ] 动态、向前推进、"事情正在发生"（→ 活跃）
[ ] 克制、宽敞、"别急"（→ 平静）
**3. 品牌与访客的关系是什么？**
[ ] 同行/朋友/向导（→ 温暖）
[ ] 专家/权威/机构（→ 冷静）
**4. 竞争替代品——人们会用其他什么？**
（这决定你的视觉领域——你必须看起来与替代品不同）
象限确定:
| 组合 | 象限 | 标志性感受 |
|---|---|---|
| 温暖 + 活跃 | 活力温暖 | “这既令人兴奋又友好” |
| 温暖 + 平静 | 滋养舒适 | “我感到安全且被理解” |
| 冷静 + 活跃 | 创新力量 | “这很前沿且严肃” |
| 冷静 + 平静 | 精致权威 | “这很高级且排他” |
第二步：从库中选择参考
从匹配的象限中选择 3-5 个参考。对于每个参考，注意：
- 什么具体的设计机制创建了情感效果
- 哪个页面/部分最能展示它
- 借用什么 vs 留下什么
跨象限混合规则:
- 从相邻象限借用一个元素作为对比（例如，冷静+活跃的排版搭配温暖+平静的配色方案）
- 永远不要从相反象限借用（在温暖+活跃网站上使用冷静+平静的元素 = 混乱）
- 相邻象限共享一个轴：温暖+平静和温暖+活跃共享温暖；冷静+平静和冷静+活跃共享精确
第三步：提取设计决策
对于每个设计维度，参考库做出具体选择：
## 设计方向文档
**象限**: [温暖+平静 / 温暖+活跃 / 冷静+活跃 / 冷静+平静]
**主要参考**: [库中的 3 个网站]
**跨象限强调**: [如果适用，从相邻象限借用 1 个元素]
### 配色方案
- **背景**: [具体颜色 + 使用它的参考网站]
- **主要强调**: [具体颜色 + 情感理由]
- **文字**: [深色/浅色 + 对比度比率理由]
- **系统**: [单色 / 互补 / 类似]
### 排版
- **标题**: [衬线/无衬线/展示 + 字重 + 具体字体建议]
- **正文**: [字体 + 字号 + 行高 + 参考理由]
- **个性**: [字体对品牌的传达]
### 间距与布局
- **密度**: [宽松/适中/紧凑 + 参考]
- **网格**: [列 + 最大宽度 + 理由]
- **空白**: [激进/平衡/最小]
- **部分节奏**: [交替/一致/渐进]
### 动效与交互
- **动画风格**: [微妙/表现力/无 + 参考]
- **滚动行为**: [平滑/标准/视差]
- **悬停状态**: [变换类型 + 时序]
- **页面过渡**: [类型或无]
### 摄影与图像
- **风格**: [摄影/插图/抽象/混合]
- **情感方向**: [参考 minimalist-image-director 象限]
- **处理**: [全彩色/柔和/双色调/颗粒]
### 布局模式
- **主视觉区**: [全出血/包含/分割/纯文字]
- **卡片**: [有边框/无边框/悬浮/扁平]
- **导航**: [顶部/侧边/最小/隐藏]
第四步：根据定位验证
在最终确定前，运行不匹配检查：
## 定位不匹配检查
- [ ] 色彩温度是否与品牌温暖度匹配？（温暖品牌 = 温暖色彩）
- [ ] 动画级别是否与品牌能量匹配？（平静品牌 ≠ 激进动画）
- [ ] 排版是否与品牌权威级别匹配？（俏皮品牌 ≠ 全大写无衬线）
- [ ] 目标受众的访客会感到受欢迎还是被恐吓？
- [ ] 这与竞争替代品看起来不同吗？
- [ ] 此设计在品牌最糟糕的日子（不仅仅是发布日）也适用吗？
参考库 — 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 | 项目管理 | 鲜艳配色 + 充满活力的网格 + 乐观 UI。投入工作的感觉很好。 | 看板视图 | 色彩过多可能显得杂乱 |
| 7 | Canva | 设计平台 | 温暖渐变 + 创意类型 + 俏皮元素。人人都能设计。 | 编辑器 UI + 模板浏览器 | 可爱可能让专业人士反感 |
| 8 | Duolingo | 教育科技 | 明亮绿色 + 角色吉祥物 + 游戏化 UI。学习的乐趣。 | 课程进度 + 角色商店 | 吉祥物主导的设计限制了严肃内容 |
| 9 | Slack | 团队沟通 | 丰富紫色 + 充满活力的标志 + 清爽文案。有趣但专业。 | 集成页面 + 定价 | 紫色过载稀释了品牌识别度 |
| 10 | Visme | 演示文稿 | 动态颜色 + 干净布局 + 交互元素。关于视觉的视觉。 | 模板 + 编辑器 UI | 动态颜色可能掩盖内容 |
| 11 | Miro | 白板 | 温暖协作 + 无限画布 + 富有表现力的 UI。让想法流动。 | 模板库 + 演示模式 | 无限画布可能让新用户困惑 |
| 12 | Webflow | 网页设计 | 现代渐变 + 动态布局 + 富有能量的排版。设计的动力。 | 大学教程 + 展示案例 | 渐变趋势可能很快过时 |
跨象限模式: 所有温暖+活跃网站共享大胆、高对比度元素、交互式悬停状态、以及叙事驱动的布局。颜色系统通常具有主导的强调色（Notion 的灰色和红色 50 黑色，Mailchimp 的黄色）。排版混合了用于情感标题的粗大胆字体和用于界面主体的更简单字体。
冷静 + 活跃 — 创新力量
“这很前沿且严肃”
此象限的网站使用：深色模式或高对比度浅色、锐利几何形状、精确排版、微妙动画、以及强调性能而非装饰。它们感觉像即将发生的突破。
| # | 网站 | 行业 | 关键设计机制 | 最佳学习页面 | 反模式警告 |
|---|---|---|---|---|---|
| 1 | Vercel | 开发者工具 | 深色模式 + 精确排版 + 清洁几何形状。速度的视觉化。 | 主页 + 定价页面 | 深色模式可能对某些品牌显得恐吓 |
| 2 | Stripe | 支付 | 梯度网格 + 无衬线字体 + 宏伟布局。动力的架构。 | 文档 + 主页英雄区 | 梯度网格已成为标志，不可模仿 |
| 3 | Linear | 项目管理 | 极简深色 UI + 键盘结合模式 + 精确动画。适合制造者。 | 产品 UI + 发布笔记 | 极简主义可能对非技术用户显得冷酷 |
| 4 | Raycast | 开发者工具 | 干净深色 UI + 丰富字体 + 清晰模式。工具感觉愉悦。 | 扩展商店 + 设置 | 深色 UI 可能显得复制粘贴的开发者美学 |
| 5 | Notion（企业视图） | 生产力 | 结构化布局 + 最小颜色 + 清洁排版。数据优先。 | 数据库视图 + 文档 | 企业视图失去个性，成为通用 B2B SaaS |
| 6 | WorkOS | 企业 API | 高对比度布局 + 技术精确 + 白色空间。专业。 | 仪表盘 + API 参考 | 白色空间可能感觉空洞而非目的性 |
| 7 | Auth0 | 身份认证 | 清洁 UI + 高对比度排版 + 精确网格。安全友好。 | 文档 + 定价 | 清洁设计可能显得太通用 |
| 8 | Retool | 内部工具 | 实用布局 + 精确排版 + 清晰信息层级。实用主义。 | 编辑器 + 模板库 | 实用主义可能感觉不太精致 |
| 9 | PlanetScale | 数据库 | 深色模式 + 字体 + 科技摄影。质量的数据。 | 文档 + 博客 | 品牌摄影在科技网站中脱颖而出 |
| 10 | Supabase | 后端服务 | 深色模式 + 绿色强调 + 清洁 UI。开源的精确。 | 仪表盘 + 文档 | 绿色强调可能分裂受众 |
| 11 | Railway | 开发者平台 | 深色 UI + 微妙的颜色强调 + 极简品牌。只是工作。 | 部署流程 + 仪表盘 | 极简品牌可能显得缺乏人情味 |
| 12 | Fly.io | 云基础设施 | 深色模式 + 动态插图 + 清洁排版。关于距离的对话。 | 文档 + 博客帖子 | 动态插图风格可能分散核心产品 |
跨象限模式: 所有冷静+活跃网站共享深色模式作为默认或明显选项、技术/开发者导向的排版（Inter, JetBrains Mono）、以及强调速度、精确和工具。颜色系统通常低调，具有计算机化或科技相关的单一强调色。
冷静 + 平静 — 精致权威
“这很高级且排他”
此象限的网站使用：大量空白、干净但严肃的排版、有限颜色、最小动画、以及精确布局。它们感觉像权威、奢华和成熟。
| # | 网站 | 行业 | 关键设计机制 | 最佳学习页面 | 反模式警告 |
|---|---|---|---|---|---|
| 1 | Apple | 科技消费品 | 无边缘产品 + 排版 + 大量空白。精确定义的奢华。 | 产品页面 + 配件浏览 | 无边缘产品需要完美产品，非通用 |
| 2 | Hermès | 奢侈品 | 将产品如艺术呈现 + 排版 + 最小环境。安静奢华。 | 产品分类 + 遗产页面 | 排版导向的设计可能削弱产品展示 |
| 3 | Bottega Veneta | 时尚 | 单色 + 空间 + 品牌标志。自信安静。 | 系列页面 | 单色可能显得单调而非精致 |
| 4 | Mies van der Rohe | 建筑 | 排版 + 网格 + 限制颜色。空间的建筑师。 | 项目 + 博客 | 可及性风险与过小文本和低对比度 |
| 5 | Dezeen | 设计杂志 | 清洁网格 + 严肃排版 + 编辑照片。权威。 | 文章列表 + 特色 | 严肃排版可能感觉僵化，而非权威 |
| 6 | Wallpaper（编辑部分） | 设计杂志 | 布局 + 排版 + 可旋转拉页。设计的舒适。 | 封面包 + 长篇文章 | 布局可能覆盖内容 |
| 7 | Google Ventures | 风险投资 | 大规模排版 + 清洁布局 + 最小颜色。自信在说什么。 | 投资组合 + 文章 | 大规模排版可能降低可读性 |
| 8 | André Wang（设计师） | 作品集 | 排版 + 布局 + 干净导航。对话的优雅。 | 项目案例研究 | 取决于内容是文字还是视觉 |
| 9 | MoMA | 博物馆 | 展示物体 + 干净的网格 + 中性的气候。艺术在说话。 | 展览页面 + 在线收藏 | 展示环境可能感觉博物馆状，而非行为 |
| 10 | V&A Museum | 博物馆 | 强势的排版 + 收藏 + 清洁布局。设计历史。 | 在线收藏 + 展览 | 强势排版与艺术竞争 |
| 11 | Aesop 店面位置页面（室内门店位置） | 护肤 | 图像 + 清洁布局 + 纯粹的简洁。永恒。 | 门店位置页面 | 纯粹简洁可能感觉太简单，而非精致 |
| 12 | IDEO | 设计咨询 | 排版 + 布局 + 清洁视觉层次。设计师思维。 | 案例研究 + 项目 | 排版导向可能显得设计师的 ego，而非结果 |
跨象限模式: 所有冷静+平静网站共享排版作为主导元素，有限颜色（通常为单色），大量空白，以及产品/内容以权威方式呈现。动画极其微妙或不存在。导航安静。感觉是完全控制的。
设计维度的跨象限模式
排版
| 象限 | 典型标题字体 | 典型正文字体 | 线高 | 关键要素 |
|---|---|---|---|---|
| 温暖+平静 | 柔和衬线 / 圆润无衬线 | 标准无衬线（Inter, System） | 1.6-1.8 | 平易近人且友好 |
| 温暖+活跃 | 大胆无衬线 / 显示字体 | 功能性无衬线 | 1.4-1.6 | 能量与个性 |
| 冷静+活跃 | 中等无衬线 / 技术字体 | 技术字体（Inter, SF Mono） | 1.4-1.5 | 精确与速度 |
| 冷静+平静 | 轻/常规无衬线或衬线 | 精细无衬线 | 1.6-1.9 | 权威与空间 |
间距
| 象限 | 空白类型 | 网格密度 | 最大内容宽度 |
|---|---|---|---|
| 温暖+平静 | 大（1.6-1.8 行高） | 松散 | 中等（800-1000px） |
| 温暖+活跃 | 紧凑（1.4-1.5 行高） | 密集 | 宽（1200px+） |
| 冷静+活跃 | 中等（1.4-1.5 行高） | 中等 | 宽（1100px+） |
| 冷静+平静 | 大（1.6-1.9 行高） | 松散 | 中等（800-960px） |
颜色
| 象限 | 背景 | 强调色 | 文字 | 系统 |
|---|---|---|---|---|
| 温暖+平静 | 柔和温暖 (#FFF8F0) | 浅暖色 (#E8A87C) | 深/高对比 | 类似 |
| 温暖+活跃 | 亮白 (#FFFFFF) | 饱和明亮 (#FF6B6B) | 深/高对比 | 互补 |
| 冷静+活跃 | 深色 (#1A1A2E) 或白色 | 科技/冷 (#00D2FF) | 浅/深对比 | 单色或强调 |
| 冷静+平静 | 极亮白 (#FFFFFF) | 有限 | 浅灰/高对比 | 单色 |
动效
| 象限 | 水平 | 鼠标悬停触发 | 滚动行为 | 页面加载 |
|---|---|---|---|---|
| 温暖+平静 | 微妙 | 缓慢淡入 | 平滑 | 淡入 |
| 温暖+活跃 | 表现力 | 缩放/移动 | 视差 | 载入动画 |
| 冷静+活跃 | 微妙 | 颜色闪 / 镶框 | 平滑 | 即时 |
| 冷静+平静 | 最小 | 无或优雅 | 标准 | 无 |
使用模式
模式 A：新网站设计方向（完整）
我需要为[ brand ]设计方向。
品牌：
- 产品/服务：[什么]
- 目标：销售/ lead gen / 信息
- 他们：如果选择替代品会选择什么
- 品牌角色：[友好向导 / 权威专家 / 创意同行] — 如果不知道，我帮你定义
受众：
- 受众：[谁访问网站]
- 他们要做什么：[动作]
- 他们当前用：[行为]
感受：
- 他们离开时应该觉得：[感受]
- 不要觉得：[要避免什么]
加载 web-design-director。提供:
1. 推荐象限
2. 库中 5 个参考
3. 每个设计维度的方向
4. 定位不匹配检查
模式 B：检查现有设计
这是[品牌]网站：[URL 或描述]
我们的定位是：[品牌应该感觉] 但实际上是：[网站感觉如何]
加载 web-design-director。检查:
1. 它当前属于哪个象限
2. 它应该属于哪个象限
3. 前 3 需要改变项目来对齐
模式 C：快速参考选择
品牌：[名称]
行业：[字段]
感觉：[感受]（例如，温暖+平静“滋养舒适”或冷静+活跃“创新力量”）
给我 3 个匹配的参考，每个带一段简短的“为什么这与你品牌相关”的理由。
高级：跨象限混合
设计方向通常来自有意混合相邻象限的元素。具体的混合技术：
技术 1：
从“核心象限”中获取整体布局 + 间距。从“强调象限”中获取一项设计元素（排版、颜色、动效）来提供对比。
- 示例：使用冷静+平静布局（大量空间，权威间距），应用温暖+活跃颜色（饱和强调色，动态渐变）。创造“友好奢华”——像将 Dior 的冷静+平静与 Duolingo 的温暖+活跃混合。
- 当品牌需要：专业但不冷，高质量但平易近人。
技术 2：突出显示关键象限
从不同象限中获得完全不同的布局模式，但在不同页面或部分中有明确分隔。
- 主页：一个象限（通常为冷静+活跃或冷静+平静）
- 博客/内容：另一个象限（通常为温暖+平静或温暖+活跃）
- 确保过渡感觉有意，非随机。
技术 3：
在相同布局内，混合不同象限的排版：一个标题使用温暖+平静排版，正文使用冷静+活跃排版。只要间距和颜色和谐，就可以工作。
跨象限混合规则
- 禁止从不相同轴上混合：从不混合温暖+平静的元素与冷静+活跃的相同元素（例如，温暖+平静排版 + 冷酷+活跃排版 = 冲突消息）
- 坚持一个象限为 80%：20% 来自相邻象限。80/20 规则。
- 为一个象限进行间距，为另一个进行颜色：有效。
- 不要混合动效风格：温暖+平静的微妙的动画 + 冷静+活跃的快速变形 = 用心。
常见错误
-
为功能而非情感设计：
- “这网站需要很多信息” → 设计信息层级
- “这网站需要销售” → 设计信任和紧迫性
- 功能需求从不等于情感象限。总是从感受开始，然后表单和按钮跟上。
-
复制美学而不是感觉：
- 复制 Stripe 的梯度网格？检查：你的品牌是想要动力感和规模（可能好）还是动力感和专业感（可能好）？如果你是一个小服务提供商，Stripe 的梯度网格可能阅读为“缺乏能力而非创新”。
-
忽视竞争替代品：
- 快乐健康品牌：替代品 = MyFitnessPal, Noom
- 如果你设计如 MyFitnessPal 的温暖+活跃，可能失败（太活泼健康）。如果你想与之区别，走向温暖+平静（平静健康）。
-
过度设计：
- 每个设计维度都应该支持情感位置。不需要为每个页面使用独特的布局模式，如果这会创造一般式而非温暖和平静的熟悉度。
伦理注释
黑暗模式
此框架可用于有伦理地说服或透明地体验。
- 温暖+活跃设计可创建紧迫感的黑暗模式（“快乐地倒计时，只剩 3 张鼠标垫！”）
- 冷静+平静设计可创建稀缺性的黑暗模式（“仅剩下 2 个单位 — 某某已抢购 31 分钟前”）
- 使用此框架增加信任，而非减少。具体：
- 永远不要设计“忏悔模式”UI（减少退出的阻力）
- 永远不要设计“黑暗模式”来降低风险，以提高任何依赖 web-design-director 的访客的售罄。
可及性
情感设计应补充可及性，而非替代它。
- 温暖+平静：低对比度是常见陷阱。文本 4.5:1，即使感觉更宽松。
- 温暖+活跃：高对比度 + 动画触发。建设总是提供 prefers-reduced-motion 覆盖。
- 冷静+活跃：深色模式 + 小字体。提供切换和缩放。
- 冷静+平静：高对比度文本 + 替代导航。不要依赖仅视觉交互。
提示和技巧
- 情感目录总是：首先决定情感目录，然后决定具体设计。
- 使用参考库的跨象限模式表（排版、颜色、间距、动效）作为快速指南，然后查看具体示例。
- 如果混合象限，请始终锚定一个为主要（80%）。混合两个 50/50 通常创建不连贯的体验。
- 垂直目录不是死的。再次确认：相同的视觉可能对不信任品牌意味着不同。
- 设计工具总是有正确的意图：提供更好的设计，而非更多的设计。
- 此框架从曼陀罗系统延伸出来，自然可用于编辑和内容策略。
关于 48 个参考网站的注释
48 个网站被选择为每个象限中每个关键设计维度的顶级示例。它们不是每个行业的最“标志性”或“获奖最多”网站，而是最能展示此系统在情感意图方面比视觉风格更重要的网站。
- 48 个示例形成核心，易于在内扩展。
- 一些网站（如 Notion, Aesop）出现在多个象限由于其不同的区域或模式——它根据需要定义了它们。
- 该库定期新增和移除，以反映网络设计趋势的变化。
- 每个网站使用情况：分析特定象限、具体移动用展示情绪。
选择流程：
- 鉴定了 200+ 个广泛引用的高设计网站
- 按情绪温度（温暖 vs 冷静）和能量水平（活跃 vs 平静）分类
- 在每个象限中，寻找视觉差异——放弃复制流行美学的网站（如复制 Stripe 网格的众多网站）
- 优先展示独特情感机制的网站
- 验证：“这是否真正感觉温暖+平静，或只是看起来有点暖色？”
结果是一个同时展示独特情绪、四象限和值得注意的 UI/UX 模式的库。