品味与风格适配

同样一句"帮我做个网页"，为什么有的出来像玩具，有的像正经产品？因为没有"万能好看"。好看是对场景的适配。这张卡先教你判断"这是个什么产品"，再决定圆角多大、颜色多艳、动画多少。你不用写代码，但要能把这些判断准确地讲给你的 Agent（智能体，听你指挥干活的 AI）听，让它比"随手生成"更对味。

第 0 步：先做场景画像

动手做任何设计之前，先在心里给产品定位四个维度。它们决定后面所有选择：颜色、圆角、动画、信息密度。

放到我们的命题 Steve's Repair（电脑修理店）上：它是给街坊邻居看的官网，受众偏大众，语气可以亲切但要让人信得过，交互不必花哨，一页就把"能修什么、怎么预约"讲清楚。所以它该偏"友好但可信"，而不是冷冰冰的企业后台风，也不是花里胡哨的游戏风。

1. 面向大众（B2C） vs 面向企业（B2B）

面向大众的消费产品（"多邻国 Duolingo" 那种）

视觉特征：高饱和度、圆润形状、有吉祥物/角色、游戏化元素、用颜色调动情绪。

多邻国（Duolingo，语言学习 App）案例里的几个做法：

• 游戏化界面：进度条、连续打卡天数、成就徽章、经验值（XP）系统。用大胆的强调色配高对比。完成状态给视觉奖励，金色或闪光代表"传奇"，紫色代表普通完成。
• 用吉祥物传递个性：那只猫头鹰 Duo 会对用户每个动作做出反应，引导时"在听"，完成时"在庆祝"。这种"对话式设计"把一个表单变成了一段对话。
• 反向免费试用：先解锁高级功能，让用户尝到甜头，降级时产生"失去"的舍不得。把"你本来有、现在被锁了"的状态用视觉对比做出来（变灰，加锁图标，背后淡淡的紫色光晕）。
• 付费墙要贴合场景：不同入口展示不同的好处排序。从"红心用完"进来的付费墙强调"无限练习"，从"复习"进来的强调"纠正错题"。付费墙内容要贴合用户此刻的痛点。
• 把引导做成聊天：2024 年多邻国把引导时长缩短了 3 分钟，却加了更多屏。每屏更轻，像在和 Duo 聊天而不是填表。用"承诺结果"的文案（"这周你将学会 X 个单词"）取代"罗列功能"的文案（"6700 个单词、61400 个句子"）。
• 多巴胺循环：完成，给奖励，下一个任务清晰可见，再完成。主屏本身就是一张清单。两种完成模式（普通紫 vs 传奇金）制造向往感。

B2C 大众风的"长相"，下面是真实渲染的对照（同一家 Steve's Repair，换成消费友好风格的卡片）：

给 B2C 大众风的"品味参数"（讲给 Agent 用）：

面向企业的产品（"Otter.ai / SaaS" 那种）

视觉特征：较低饱和度、更多留白、该密的地方数据密集、有信任信号（客户 logo、合规徽章、案例研究）、内容服务多方角色。

来自 B2B 研究（NNGroup，尼尔森·诺曼集团，知名用户体验研究机构）的几个做法：

• 支持漫长的决策周期：提供对比表、案例研究（按"挑战，方案，结果"格式）、可分享内容（PDF 导出、"分享给团队"按钮）。B2B 买家会研究好几个月才决定。
• 内容要服务两类人："拍板者"（决策者）关心投资回报、可靠性、成本；"使用者"（实际操作的人）关心体验、集成、支持。页面要同时服务两者，给使用者功能概览，给拍板者投资回报测算。
• 价格透明建立信任：哪怕价格浮动，也要给出有代表性的价格。用"常见场景"表格、价格计算器降低销售摩擦。藏起价格，就会被默认"太贵"。
• 把集成信息放在显眼处：B2B 买家需要兼容性信息摆在最前面。列出集成项（配 logo）、版本支持、API 文档链接。它常常是能不能成交的关键，不是次要信息。
• 信息渐进加深：先给高层价值主张，往下滚或点击看技术细节，再深入给专家级内容。分层给，别一股脑倒出来。

Otter.ai 的引导流程（B2B SaaS 范例）：

• 整个设置 5 分钟，每一步只做一件事。
• 深蓝是唯一的强调色，只用在：主行动按钮、当前导航项、重要横幅、清单按钮。这种克制能造出清晰的视觉层级。
• "开始上手"清单渐进展开任务（不是一次全摆出来）。完成一项，看到下一项。已完成的显示对勾、删除线、灰字。
• 用 GIF 或动画在用户投入前先演示集成（让你看到日历同步真的在动，而不是只用文字描述）。
• 首页分 6 个区，层级清晰：主标题用大号深色字，次要信息用灰色，深蓝只给可操作元素。

B2B 企业风的"长相"，同一家 Steve's Repair，换成"接企业批量维修"的后台风：

给 B2B 企业风的"品味参数"：

适配速查：用户这样说，你就往这边靠

2. 动画与过渡的品味

"动效预算"这个概念

每个产品都有一份"动效预算"：多少动效是合适的，超了就变干扰。这取决于产品语气和用户使用的频率。

Material Design 动效数值（直接用这些值）

来自 Google Material Design 3（谷歌的设计规范）的缓动配对：

几条原则：

• 退出动画要比进入动画更短（用户注意力已经移走了）。
• 小范围的过渡用更短时长（约 200ms），大范围的用更长（约 500ms）。
• 临时进入的元素用"强调"缓动（平滑停下），永久离开用"加速"缓动（快速离场）。

把鼠标移到下面两个按钮上，亲手感受"300ms 平滑"和"快进慢出回弹"的差别：

常用动画的 CSS（讲给 Agent 时可以直接抄这些值）：

/* 悬停/聚焦的标准过渡 */
transition: all 300ms cubic-bezier(0.2, 0, 0, 1);

/* 重大过渡用"强调" */
transition: all 500ms cubic-bezier(0.2, 0, 0, 1);

/* 快速退出 */
transition: all 200ms cubic-bezier(0.3, 0, 1, 1);

/* 弹性回弹（只在 B2C 活泼风用） */
transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

/* 骨架屏脉冲 */
@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:.8} }
animation: pulse 1.5s ease-in-out infinite;

/* 列表错位进入：每个子项 animation-delay: calc(var(--index) * 60ms); */
animation: fadeSlideUp 400ms cubic-bezier(0.2, 0, 0, 1) backwards;
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

要在原型里说清楚的几种过渡模式

• 容器变形（Container Transform）：卡片展开成详情页，这张卡片本身就是会变形的容器。
• 前进/后退（Forward/Backward）：有层级的导航。新内容从右滑入，旧内容向左淡出或滑走。
• 平级（Lateral）：同级内容（标签、轮播）。简单平滑滑动，动作同步。
• 进入/退出（Enter/Exit）：组件出现或消失。方向匹配来源（顶部菜单往下落、底部抽屉往上滑）。
• 骨架屏（Skeleton loaders）：加载时脉冲动画，就绪后内容淡入。

3. 引导流程与上手设计

"到魔法时刻有多快"原则

从多邻国的演进看：他们把引导从 7 分钟缩到 4 分钟，却加了更多屏。这里有个反常的地方：步骤更多反而可能感觉更快，只要每一步更轻、更像对话。

任何引导流程的规则：

1. 一屏一个动作。不在一页问 3 件事。
2. 先给价值，再要承诺。多邻国让你先试一课再注册；Otter 先放日历同步的 GIF，再让你连接。
3. 任务渐进展开。别一上来摆 6 个设置任务。先摆 2 个，做完了再露出下 2 个。
4. 文案承诺结果，不罗列功能。"这周你将学会 15 个新词"胜过"可访问 6700 个词汇"。
5. 加载时机放社会认同。"300 万人正在学意大利语"替代一个转圈圈的加载图标。
6. 完成的任务要有视觉变化：对勾、删除线、灰字，甚至轻微缩小。

规则 6 的真实对照，已完成任务该有明显视觉变化：

B2C vs B2B 引导套路对比

4. 情绪设计光谱

把"语气"翻译成具体样式变量

这张表最好用：想要什么"感觉"，就照着把变量讲给 Agent。

光"圆角加饱和度"两项就能让同一个按钮感觉天差地别（真实渲染）：

性格配方（可组合微调）

下面每个配方都是一整套"成品风格"，给 Agent 一个名字加这套参数，它就能稳定复现：

5. 让成品看起来更高级（"10 个细节"规则）

做任何网页原型时，至少加入下面这些"微细节"里的 10 个。它们是"随手生成"会跳过、而专业作品都有的地方。你不必自己实现，可以照单点名让 Agent 加上：

同一张维修单卡片，加了"悬停抬起、药丸徽章、柔和边框、千分位"几个细节后（把鼠标移上去看）：

输出任何原型前，先自问 5 个问题

1. 专业设计师看一眼，会不会说"这做得挺讲究"？
2. 动画是有意为之，还是多余？
3. 配色是协调的（不是随手凑的一堆色值）吗？
4. 在 1 米外看，层级是否还成立？
5. 我愿不愿意把它拿给多邻国或 Stripe 的设计团队看？

拿不准该走哪种风，就把产品一句话描述 + 目标用户发给你的 AI 老师（Agent），问："按受众/语气/交互/复杂度四个维度，这个产品该往哪种风格靠？给我具体的圆角、饱和度、动画数值。"