perception-design-system

A perception-driven product experience design methodology: 四层感知强度 × 四维度矩阵 + MustBe/NotToBe 约束 + 认知心理学底座. 适用于金融、电商、SaaS、工具类等任何软件产品的体验设计.

Zeprium

@fanleod

Install

$ openclaw skills install @fanleod/perception-design-system

感知体系(Perception System)

作者:张培霖(Zeppelin) 「γνώθι σεαυτόν — 认识你自己」

Overview

感知体系是一套产品体验设计的方法论框架,指导如何通过设计语言建立用户对产品的信任感知、安全感知、透明感知和品质感知。它不是UI组件库,而是"用户如何感知你的产品"的顶层设计思维。

核心哲学:轻运营,重感知。信息秩序清晰,节奏舒缓,不堆砌,不压迫。

体系价值:将商业目标(安全、信任、风控、服务)通过感知设计转化为用户目标(感知→影响→激励→抉择),形成最佳实践的标准链路。

When to Use

  • 设计金融/信贷/保险/安全类产品(高决策压力场景)——核心领域
  • 任何软件产品的体验设计(电商、SaaS、工具类、内容类、健康类)
  • 需要建立用户信任感的产品体验设计
  • 产品从"工具感"转向"托管感"的体验升级
  • 评估现有产品的用户体验感知质量
  • 设计团队需要统一的设计哲学框架

普适性:感知体系的底层命题是「用户在什么心理状态下,我该怎么设计」——这个命题对所有软件产品通用。金融是它诞生的土壤,但不是边界。


一、体系架构(完整闭环)

┌─────────────────────────────────────────────┐
│  用户目标(最佳实践标准链路:感知类型→感知强度) │
└──────────────────┬──────────────────────────┘
                   ↕
┌─────────────────────────────────────────────┐
│            感知体系(核心)                    │
│  ┌─────────┐  ┌─────────┐                  │
│  │感知类型  │→│感知强度  │                   │
│  │权益/营销 │  │轻度/中度 │                  │
│  │安全/功能 │  │深度/强烈 │                  │
│  │品牌/教育 │  └────┬────┘                  │
│  └─────────┘       ↓                        │
│  ┌─────────────────────────────────────┐   │
│  │ 三大支撑支柱                          │   │
│  │ ①视觉感知:颜色/亮度/对比度/形状/运动/  │   │
│  │   深度/空间/物体/语义                  │   │
│  │ ②基础理论:简明/相似/接近/连续/闭合/整体/│   │
│  │   对比/设计规范(格式塔)              │   │
│  │ ③认知心理:知觉/语言/记忆/知识/思考/    │   │
│  │   注意力/跨文化认知/决策与判断          │   │
│  └─────────────────────────────────────┘   │
└──────────────────┬──────────────────────────┘
                   ↕
┌─────────────────────────────────────────────┐
│  底层能力(核心价值)                         │
│  安全(KYC/防欺诈/数据加密)                    │
│  信任(隐私/透明/合规/品牌/信誉)               │
│  风控(风险告知/评估/管理)                     │
│  服务(质量/个性化/支持/创新/布道)             │
└──────────────────┬──────────────────────────┘
                   ↕
┌─────────────────────────────────────────────┐
│  商业目标(from 项目/需求)                   │
└─────────────────────────────────────────────┘

解读:底层能力(安全/信任/风控/服务)是商业根基,通过感知体系(类型×强度×三大支柱)转化为用户可感知的价值(权益/营销/安全/功能/品牌/教育),最终达成用户目标与商业目标的双向对齐。


二、感知强度矩阵(核心工具)

结构:4感知强度 × 4维度 × MustBe/NotToBe

横轴:感知强度(用户心理状态)

阶段名称用户状态设计策略
1轻度感知(感知)浅层关注品牌温度+基础信息,不打扰、轻量化
2中度感知(影响)被引导辅助信息+品牌调性影响判断,避免迷失
3深度感知(激励)情感卷入情感连接+利益驱动,成就/激励强化行为
4强感知(抉择)决策时刻信息优先级+紧迫感+明确行动路径

纵轴:四维度 × 双列约束

维度MustBe(必须做)NotToBe(禁止做)
运营有温度的品牌感知、关键信息突出不产生焦虑、不制造重复性关注
视觉信息层级清晰、视觉引导正确不挑战用户、不制造视觉噪音
产品利益反馈、成就展示、路径明确不隐藏关键决策信息、不增加决策负担
体验流畅、可预期、有安全感不打断、不惩罚、不强迫

每个单元格落到三级可执行项:

┌──────────────┐
│ 感知强度×维度  │
│ ├ 文案:具体怎么写(用词方向)│
│ ├ 动作:交互如何设计(正向/被动)│
│ └ 组件:用什么UI元素(卡片/按钮/图表)│
└──────────────┘

底部坐标轴:感性(Sensibility)→ 理性(Rationality)

随感知强度增加,设计策略从感性引导转向理性决策。

矩阵使用流程

① 定位:当前交互处于哪个感知强度?(轻/中/深/强)
② 选维:从运营/视觉/产品/体验哪个维度切入?
③ 查列:看 MustBe 该做什么 + NotToBe 禁止做什么
④ 落地:具体到文案/动作/组件三级
⑤ 校验:对照坐标轴,感性引导还是理性决策?

📎 完整矩阵原件(4维度×4深度×MustBe/NotToBe 全文,含组件分类表、流程×强度应用表)见:references/核心矩阵原件.md


三、设计哲学(十则)

  1. 轻运营,重感知 — 用户感受到的比功能数量更重要
  2. 信息秩序清晰,节奏舒缓 — 不堆砌,不压迫
  3. 弱化工具感,强化托管感 — 让用户觉得被照顾,而不是在操作机器
  4. 数据是为了安抚,不是为了震慑 — 展示关键状态即可,不做复杂仪表盘
  5. 动作要有呼吸感,界面要有松弛感 — 给用户的每一步操作留出心理空间
  6. 用词决定感知方向 — 例:「保养」vs「检查」:保养是日常主动动作,检查带有问题怀疑感
  7. 紧急功能降级但不隐藏 — 低频但可预期,增强品牌安全感
  8. 内容存在的意义不是流量 — 是为了让用户确认品牌专业度
  9. 让高净值用户获得"我选对了"的心理确认 — 每一次浏览都是一次品牌信任加固
  10. 做产品是为了让人与物之间的关系更柔软

四、感知强度与底层能力映射

感知强度等级(业务→视觉/认知的桥梁):

强度适用场景视觉表达倾向
轻度账户查询、状态查看低对比、轻卡片、留白多
中度产品浏览、信息阅读层级分明、辅助信息
深度权益领取、激励任务色彩强化、成就反馈
强烈放款确认、风险告知高对比、明确CTA、紧迫感

底层能力 → 感知类型映射:

底层能力用户感知类型
安全(KYC/防欺诈/加密)安全感知
信任(隐私/透明/合规/品牌)信任感知
风控(风险告知/评估/管理)风险感知(透明+克制)
服务(质量/个性化/支持)服务感知(被照顾感)

五、设计动作库

Storyboard 方法

关注用户目标与产品设计,可通过 AIGC 辅助完成图形化表现,让设计师注重故事本身而不是表现力。

关键决策清单

□ 默认动作是正向的还是被动的?
  例:「预约保养」→ 正向、「预约梯检」→ 被动怀疑

□ 紧急功能是否降级到了合理位置?
  例:紧急救援降级到"联系我们"区域,故障报修保留为主按钮

□ 信息层级是否符合用户的感知节奏?
  三个轻量卡片 ≤ 轮播或横滑 → 保持节奏感

□ 当前场景处于哪个感知强度?用了对应策略吗?
  轻度→不打扰 / 中度→引导 / 深度→激励 / 强烈→明确抉择

□ 这个设计有没有踩 NotToBe 的红线?
  有没有制造焦虑?有没有隐藏关键信息?有没有挑战用户?

□ 数据呈现是在安抚还是在制造焦虑?
  总感知 > 细节焦虑

□ 文案/动作/组件三级是否都对齐了?
  用词方向、交互正负、组件选择一致

六、案例:设备维保小程序

关键决策

  1. 预约保养 vs 预约检查 → 选择"保养"(日常正向动作)
  2. 故障报修 vs 紧急救援 → 故障报修主按钮,紧急救援降级
  3. 不做传统数据看板 → 三张轻量卡片:运行状态、维护周期、剩余保养次数
  4. 不是堆叠SKU的电商 → 首页分"整机专区"和"品牌定制/风格专区"
  5. 内容运营不是为流量 → 误区讲解、安全知识、每日Tips → 品牌专业度确认

用矩阵复盘这个案例

场景感知强度MustBe 落地NotToBe 规避
首页浏览轻度三张轻卡片,品牌温度不做仪表盘(不制造焦虑)
预约保养中度"保养"正向用词+主按钮不用"检查/检测"(被动怀疑)
故障报修深度报修主按钮+明确路径紧急救援不喧宾夺主
决策确认强烈信息优先级清晰不隐藏关键信息

七、评估与校验

感知质量检查清单

  • 目标用户是否感知到安全与信任?
  • 界面节奏是否舒缓、有呼吸感?
  • 数据展示是否在安抚而非震慑?
  • 核心动作的用词是否正向?
  • 紧急功能是否降级到合理位置?
  • 视觉风格是否传达了"托管感"而非"工具感"?
  • 是否明确当前交互的感知强度(轻/中/深/强)?
  • 是否用 MustBe/NotToBe 双列校验过设计?
  • 文案/动作/组件三级是否全部落地?
  • 是否完成底层能力→感知类型的映射?

Common Pitfalls

  1. 功能堆砌:追求功能完整性而忽略感知密度
  2. 过度可视化:把所有数据都做成图表,造成"细节焦虑"
  3. 紧急功能过度突出:低频高风险的紧急功能占据视觉重心,反而给用户造成焦虑感
  4. 用词不当:用"检查""检测"等被动怀疑性的词,降低安全感知
  5. 忽略目标用户差异:高净值用户和普通用户的感知敏感度完全不同
  6. 感知强度错位:轻度场景用强感知策略(过度营销)或强决策场景用轻度策略(信息不足)
  7. 只做MustBe忽略NotToBe:只堆"该做的",不检查"禁止做的",踩了红线
  8. 三级脱节:文案说"轻松",动作却要填3个表单,组件又很拥挤

Verification Checklist

  • 设计决策符合感知体系的核心哲学
  • 已定位交互的感知强度(轻/中/深/强)
  • MustBe 与 NotToBe 均已对照
  • 文案/动作/组件三级已对齐
  • 底层能力→感知类型映射完成
  • 紧急功能已合理降级
  • 数据展示以安抚为目标
  • 用词已确认方向(正向 vs 被动)

附:与经典理论的关系

经典理论关系差异
Norman 情感化三层被覆盖本体系多一层"抉择",更贴商业转化
Fogg 行为模型 B=MAP互补Fogg从行为切入,本体系从感知切入
Hook 上瘾模型克制版NotToBe 防过度刺激,不做上瘾设计
格式塔原则吸收为基础理论作为视觉支柱而非全部
认知心理学研究底座知觉/记忆/决策全链路

Top skills in this category

Wechat Article Search

@wuchubuzai2018

搜索微信公众号文章技能。通过微信搜索获取文章列表,覆盖科技/AI、社会热点、财经、教育、职场等各类中文资讯;可按关键词检索并返回标题、概要、发布时间、来源公众号与链接。当用户需要查找微信公众号文章、整理参考资料或快速获取文章信息时使用此技能。

3317k

Figma

@hith3sh

Read files, manage comments, extract design tokens, download images, and create webhooks in Figma via the Figma REST API. Use this skill when users want to i...

327.1k

Social Media Scheduler

@1kalin

Plan, draft, and organize social media content across platforms. Create content calendars, write platform-optimized posts, and maintain consistent posting schedules.

1414k

Alexa CLI

@buddyh

Control Amazon Alexa devices and smart home via the `alexacli` CLI. Use when a user asks to speak/announce on Echo devices, control lights/thermostats/locks, send voice commands, or query Alexa.

145.4k

Cinematic Script Writer

@praveenspeaks

Create professional cinematic scripts for AI video generation with character consistency and cinematography knowledge. Use when the user wants to write a cinematic script, create story contexts with characters, generate image prompts for AI video tools (Midjourney, Sora, Veo), or needs cinematography guidance (camera angles, lighting, color grading). Also use for character consistency sheets, voice profiles, anachronism detection, and saving scripts to Google Drive.

97.4k