Install
openclaw skills install @fanleod/perception-design-systemA perception-driven product experience design methodology: 四层感知强度 × 四维度矩阵 + MustBe/NotToBe 约束 + 认知心理学底座. 适用于金融、电商、SaaS、工具类等任何软件产品的体验设计.
openclaw skills install @fanleod/perception-design-system作者:张培霖(Zeppelin) 「γνώθι σεαυτόν — 认识你自己」
感知体系是一套产品体验设计的方法论框架,指导如何通过设计语言建立用户对产品的信任感知、安全感知、透明感知和品质感知。它不是UI组件库,而是"用户如何感知你的产品"的顶层设计思维。
核心哲学:轻运营,重感知。信息秩序清晰,节奏舒缓,不堆砌,不压迫。
体系价值:将商业目标(安全、信任、风控、服务)通过感知设计转化为用户目标(感知→影响→激励→抉择),形成最佳实践的标准链路。
普适性:感知体系的底层命题是「用户在什么心理状态下,我该怎么设计」——这个命题对所有软件产品通用。金融是它诞生的土壤,但不是边界。
┌─────────────────────────────────────────────┐
│ 用户目标(最佳实践标准链路:感知类型→感知强度) │
└──────────────────┬──────────────────────────┘
↕
┌─────────────────────────────────────────────┐
│ 感知体系(核心) │
│ ┌─────────┐ ┌─────────┐ │
│ │感知类型 │→│感知强度 │ │
│ │权益/营销 │ │轻度/中度 │ │
│ │安全/功能 │ │深度/强烈 │ │
│ │品牌/教育 │ └────┬────┘ │
│ └─────────┘ ↓ │
│ ┌─────────────────────────────────────┐ │
│ │ 三大支撑支柱 │ │
│ │ ①视觉感知:颜色/亮度/对比度/形状/运动/ │ │
│ │ 深度/空间/物体/语义 │ │
│ │ ②基础理论:简明/相似/接近/连续/闭合/整体/│ │
│ │ 对比/设计规范(格式塔) │ │
│ │ ③认知心理:知觉/语言/记忆/知识/思考/ │ │
│ │ 注意力/跨文化认知/决策与判断 │ │
│ └─────────────────────────────────────┘ │
└──────────────────┬──────────────────────────┘
↕
┌─────────────────────────────────────────────┐
│ 底层能力(核心价值) │
│ 安全(KYC/防欺诈/数据加密) │
│ 信任(隐私/透明/合规/品牌/信誉) │
│ 风控(风险告知/评估/管理) │
│ 服务(质量/个性化/支持/创新/布道) │
└──────────────────┬──────────────────────────┘
↕
┌─────────────────────────────────────────────┐
│ 商业目标(from 项目/需求) │
└─────────────────────────────────────────────┘
解读:底层能力(安全/信任/风控/服务)是商业根基,通过感知体系(类型×强度×三大支柱)转化为用户可感知的价值(权益/营销/安全/功能/品牌/教育),最终达成用户目标与商业目标的双向对齐。
横轴:感知强度(用户心理状态)
| 阶段 | 名称 | 用户状态 | 设计策略 |
|---|---|---|---|
| 1 | 轻度感知(感知) | 浅层关注 | 品牌温度+基础信息,不打扰、轻量化 |
| 2 | 中度感知(影响) | 被引导 | 辅助信息+品牌调性影响判断,避免迷失 |
| 3 | 深度感知(激励) | 情感卷入 | 情感连接+利益驱动,成就/激励强化行为 |
| 4 | 强感知(抉择) | 决策时刻 | 信息优先级+紧迫感+明确行动路径 |
纵轴:四维度 × 双列约束
| 维度 | MustBe(必须做) | NotToBe(禁止做) |
|---|---|---|
| 运营 | 有温度的品牌感知、关键信息突出 | 不产生焦虑、不制造重复性关注 |
| 视觉 | 信息层级清晰、视觉引导正确 | 不挑战用户、不制造视觉噪音 |
| 产品 | 利益反馈、成就展示、路径明确 | 不隐藏关键决策信息、不增加决策负担 |
| 体验 | 流畅、可预期、有安全感 | 不打断、不惩罚、不强迫 |
每个单元格落到三级可执行项:
┌──────────────┐
│ 感知强度×维度 │
│ ├ 文案:具体怎么写(用词方向)│
│ ├ 动作:交互如何设计(正向/被动)│
│ └ 组件:用什么UI元素(卡片/按钮/图表)│
└──────────────┘
底部坐标轴:感性(Sensibility)→ 理性(Rationality)
随感知强度增加,设计策略从感性引导转向理性决策。
① 定位:当前交互处于哪个感知强度?(轻/中/深/强)
② 选维:从运营/视觉/产品/体验哪个维度切入?
③ 查列:看 MustBe 该做什么 + NotToBe 禁止做什么
④ 落地:具体到文案/动作/组件三级
⑤ 校验:对照坐标轴,感性引导还是理性决策?
📎 完整矩阵原件(4维度×4深度×MustBe/NotToBe 全文,含组件分类表、流程×强度应用表)见:
references/核心矩阵原件.md
感知强度等级(业务→视觉/认知的桥梁):
| 强度 | 适用场景 | 视觉表达倾向 |
|---|---|---|
| 轻度 | 账户查询、状态查看 | 低对比、轻卡片、留白多 |
| 中度 | 产品浏览、信息阅读 | 层级分明、辅助信息 |
| 深度 | 权益领取、激励任务 | 色彩强化、成就反馈 |
| 强烈 | 放款确认、风险告知 | 高对比、明确CTA、紧迫感 |
底层能力 → 感知类型映射:
| 底层能力 | 用户感知类型 |
|---|---|
| 安全(KYC/防欺诈/加密) | 安全感知 |
| 信任(隐私/透明/合规/品牌) | 信任感知 |
| 风控(风险告知/评估/管理) | 风险感知(透明+克制) |
| 服务(质量/个性化/支持) | 服务感知(被照顾感) |
关注用户目标与产品设计,可通过 AIGC 辅助完成图形化表现,让设计师注重故事本身而不是表现力。
□ 默认动作是正向的还是被动的?
例:「预约保养」→ 正向、「预约梯检」→ 被动怀疑
□ 紧急功能是否降级到了合理位置?
例:紧急救援降级到"联系我们"区域,故障报修保留为主按钮
□ 信息层级是否符合用户的感知节奏?
三个轻量卡片 ≤ 轮播或横滑 → 保持节奏感
□ 当前场景处于哪个感知强度?用了对应策略吗?
轻度→不打扰 / 中度→引导 / 深度→激励 / 强烈→明确抉择
□ 这个设计有没有踩 NotToBe 的红线?
有没有制造焦虑?有没有隐藏关键信息?有没有挑战用户?
□ 数据呈现是在安抚还是在制造焦虑?
总感知 > 细节焦虑
□ 文案/动作/组件三级是否都对齐了?
用词方向、交互正负、组件选择一致
| 场景 | 感知强度 | MustBe 落地 | NotToBe 规避 |
|---|---|---|---|
| 首页浏览 | 轻度 | 三张轻卡片,品牌温度 | 不做仪表盘(不制造焦虑) |
| 预约保养 | 中度 | "保养"正向用词+主按钮 | 不用"检查/检测"(被动怀疑) |
| 故障报修 | 深度 | 报修主按钮+明确路径 | 紧急救援不喧宾夺主 |
| 决策确认 | 强烈 | 信息优先级清晰 | 不隐藏关键信息 |
| 经典理论 | 关系 | 差异 |
|---|---|---|
| Norman 情感化三层 | 被覆盖 | 本体系多一层"抉择",更贴商业转化 |
| Fogg 行为模型 B=MAP | 互补 | Fogg从行为切入,本体系从感知切入 |
| Hook 上瘾模型 | 克制版 | NotToBe 防过度刺激,不做上瘾设计 |
| 格式塔原则 | 吸收为基础理论 | 作为视觉支柱而非全部 |
| 认知心理学 | 研究底座 | 知觉/记忆/决策全链路 |