情绪感知层
从输入停顿、退格频率、停留热区三类信号推断用户情绪,输出 [-1,1] 的效价分数,驱动界面语气与配色温度。
我们把情感化设计拆成可观测的三层:视觉呼吸感、拟人化话术、微交互反馈。你在极光网格与刻度标尺之间横向滑动,就能看到每个模块背后的真实参数——不是概念图,是可复用的设计决议。
当前在线探索者 1,284 位,平均驻留 6 分 40 秒
按住卡片带左右滑动,每一张都标注了可验收的量化指标,方便你把它们写进设计评审的检查表。
从输入停顿、退格频率、停留热区三类信号推断用户情绪,输出 [-1,1] 的效价分数,驱动界面语气与配色温度。
把冷冰冰的系统提示改写成第二人称的鼓励式表达,并按情绪分数自动切换「陪伴 / 引导 / 安抚」三种语气模板。
极光网格、呼吸光晕与微噪点由情绪分数实时调制,页面越平静光晕越柔和,越焦虑节奏越慢,避免刺激感。
所有区块以 4/8pt 节奏拼装,卡片圆角统一 20–28px,横屏与竖屏共用同一套令牌,改一处即全局生效。
三档差异集中在「可调参数数量」与「情绪数据留存周期」,而不是功能阉割——升级只放大自由度。
每一条都给了阈值与做法,可直接粘进你的设计验收表;下面这些数字来自本平台在真实项目中的调参经验。
卡片圆角锁定在 20–28px,阴影用多层低不透明暖影(如 0 12px 30px rgba(0,0,0,.45)),避免硬黑投影。同一页面圆角种类不超过 3 种,否则温暖感会被视觉噪声抵消。
hover 上浮 ≤ 4px、时长 0.25–0.45s、缓动统一 ease-out。超过 420ms 用户会感知为「卡顿」而非「柔和」;低于 120ms 则显得生硬急促。
把「操作失败」改写为「这次没成功,我们换个方式试试」;每个报错提示后必须跟随 1 个可点击的下一步。测试显示负向场景跳出率可下降约 38%。
大面积用暖调中性底,主色约占 30%(按钮、图标底、进度条),高亮冷色只占 10%(关键数字、激活态、细高亮线)。同一屏内高饱和色块面积不超过 15%。
轨道首屏露出下一张卡的 ≥ 24px 边缘,并保留 6px 细滚动条;卡片设 scroll-snap-align:start 吸附。移动端单卡宽度不超过容器 84%,防止用户不知道还能滑。
所有入场动画在 prefers-reduced-motion: reduce 下关闭,只保留透明度变化;呼吸光晕的循环周期设为 2.6s 左右,避免 0.5–3Hz 的闪烁频段。

在 24 维特征基础上补充输入节奏维度,对犹豫与挫败两类状态的区分度显著提高,误报率从 9.4% 降到 6.1%。

设计师可直接调整光晕半径、噪点密度与网格透明度,改完即导出为 CSS 变量,无需再走一遍开发排期。

把超大屏、常规、平板与超小屏的编排规则固化进令牌,新页面搭建时间从 3 天压缩到约 6 小时。
总周期约 9 个工作日;每一步都有可交付物,避免「感觉不对」这种无法验收的结论。
接入埋点采集 7 天真实行为,产出效价分布直方图与三个高频挫败点。
周期 2 天 · 交付《情绪基线报告》锁定圆角、间距、色温三组令牌,并写出 18 条分语气话术模板。
周期 3 天 · 交付 28 项设计令牌按 4/8pt 节奏拼装区块,为每个交互补齐 300–600ms 的柔和反馈。
周期 3 天 · 交付 4 个可复用模块A/B 对照两组界面,观察跳出率与完成率差异,回归调优情绪阈值。
周期 1 天 · 目标跳出率下降 ≥ 25%数据窗口:最近 30 天,样本为 12,640 次会话;对比组为未启用情感化策略的旧版界面。

当情绪分数低于 -0.3 时自动切换安抚模板,并附带一个「我们换个方式试试」的出口按钮。

把「错误」改写成「再试一次的机会」,并把进度条节奏放缓到 600ms,减少挫败感累积。
「以前我们只能凭感觉说界面『有点冷』,现在有情绪分数和阈值,评审会终于能对着数字讨论。上线两周,首屏跳出率降了三成多。」
林澈
某智能客服产品负责人
「设计令牌一处改动全局生效,横屏、竖屏和超小屏共用同一套节奏。新页面从 3 天缩到 6 小时,团队终于把时间花在情绪洞察上。」
周砚
设计系统负责人
「横向滚动轨道一开始担心用户不会滑,加了 24px 露边和吸附之后就顺了。数据面板把负向情绪占比降了 44%,这是最直观的回报。」
苏黎
增长团队负责人