Humain
AI 驱动的户外空间行为分析平台
Humain 是沙特主权基金 PIF 旗下的国家级 AI 企业，Monitor 是其核心产品，通过摄像头与 AI 模型将物理空间中的人群行为转化为实时可操作的运营洞察，服务零售、商业地产与大型活动场馆的运营决策者。
我作为 Lead UX Designer，在 6 个月内主导了产品的信息架构、从零搭建 Token 化设计系统（Shadcn + Tailwind CSS），并完成 256+ 屏全状态 UI 设计与开发走查。MVP 于 2025 年 9 月按时上线商用。
国家级 AI 企业的首款空间智能产品，从零定义设计体系
HUMAIN 是什么
Humain 是沙特主权基金 PIF 于 2025 年成立的国家级 AI 企业，由王储穆罕默德·本·萨勒曼直接推动，承担 Vision 2030 中 AI 领域的基础能力建设与行业落地。在 NEOM、Red Sea、Qiddiya、Riyadh Season 等超大型项目的推动下，公共空间的智能化管理成为刚需，crowd analytics 市场预计从 $912M 增长至 $5.7B（2030）。
产品生态
Humain 已有姊妹产品 Motion 专注交通场景分析。现在需要推出 Monitor，将 AI 能力延伸到人群行为领域，为零售、商业地产与大型场馆提供实时行为洞察。两款产品共享基础设计语言，但各自面对完全不同的数据域和交互场景。
Motion
交通场景 AI 分析，车辆识别、车牌检测、拥堵预警
Monitor
人群行为实时分析，客流密度、停留参与度、旅程追踪
设计挑战
Monitor 并非在已有设计体系上迭代。团队需要从旧版 SCAI 界面全面切换到全新的 HUMAIN 品牌系统，在不拖慢交付节奏的前提下从零建立 Token 化的设计系统。我作为 Lead UX Designer 加入，需要在 6 个月内同时完成信息架构定义、跨产品设计系统搭建，以及覆盖全状态的完整 UI 交付。
信息架构
定义产品模块分层、导航结构与任务流
设计系统
从零搭建 Token 体系，对齐 Tailwind，跨产品复用
全状态 UI
256+ 屏交付，覆盖 resting、loading、error、empty
前期调研
由于项目交付节奏紧凑，没有时间做大规模用户研究，我们的研究策略是多线并行：与产品组织和行业分析师调研相关发现，对 Quividi、AdMobilize 等竞争工具做竞品分析，审查现有 Motion 平台设计以识别可复用的模式，并与 AI 工程团队协作，理解 Engagement Mode、环境渲染模型的实际输出能力和技术限制。
竞品矩阵
竞品分析中，我们对比了 FootfallCam、RetailNext、Quividi 等产品，发现大部分工具均做到"有效记录"但缺失对"发生了什么"的解读能力，缺乏主动智能能力。基于这个空白，我们为 Monitor Phase 2 确立了智能助理、多行业架构、环境感知自动化三个竞争差异化方向。
核心差异化优势
智能告警系统
不只是数据展示，基于阈值和异常 pattern 自动触发告警，让运营团队实时响应而非事后回溯。
环境适应性架构
从室内零售到大型活动场馆，支持不同分辨率、视角和行为类型的数据采集与分析。
跨行业可复用性
组件和数据模型不绑定特定行业，便于快速复制部署到新的垂直场景。
VALUE PROPOSITION
通过格局梳理，我们从用户、痛点、解决方案、竞品和差异化五个维度梳理了 Monitor 的产品价值定位。
划定 MVP 边界
我和团队一起，用信息架构梳理产品全貌，用 User Story 拆解每个页面要承载的任务和优先级，确保 MVP 的每一个设计决策都有清晰的依据，而不是凭感觉做加减法。
MVP 覆盖的产品场景
完整产品涵盖 8 大功能域，MVP 聚焦核心链路，验证产品价值后逐步扩展。
实时人流监测
- 实时客流计数
- 人群模式仪表盘
- 摄像头热力图
- 历史趋势分析
- 可筛选热力洞察
排队与等待优化
- 排队长度检测
- 等待时间检测
- 容量阈值告警
- 拥堵瓶颈识别
人群画像分类
- 性别分类
- 年龄段分类
- 停留时间分析
- 参与度时长
旅程与访问管理
- 客户旅程映射
- 用户角色管理
- 多站点访问控制
行为与情绪分析
- 情绪检测仪表盘
- 满意度预测
- 群体/个体行为区分
访客身份识别
- 人脸识别（Opt-in）
- VIP / 回头客识别
个性化营销引擎
- 实时行为推荐
- 旅程路径建议
- 动态内容投放
智能人力优化
- 服务员工监测
- AI 排班建议
- 人效分析
信息架构
基于功能模块和用户操作路径，我们梳理了 Monitor 平台的整体信息架构，涵盖 Dashboard、Reports、Asset Management 等核心模块，并区分了 MVP 范围和 Phase 2 扩展方向。
USER STORIES
基于 PM 提供的产品需求，我们将 User Story 拆解为用户旅程、使用场景、验收标准三个层面，确保设计方向和开发交付对齐。
将每条 Story 拆解为用户旅程，梳理用户的操作步骤，明确从哪里来、到哪里去
梳理主流程和边界情况，覆盖正常使用、异常状态、空数据等场景
在拆解过程中记录需要和 PM 澄清的疑点，推动需求澄清
定义每个 Story 的完成标准，作为设计走查和开发验收的依据
设计与迭代
MVP 的范围一旦确定，真正的考验就从「做什么」变成了「怎么在不断变化的需求下正确做出什么」。这一章记录了 Humain Monitor Dashboard 的第一版设计，以及在各功能模块与研发协作过程中的渐进式优化，直至真实交付前的最终打磨。
INITIAL CONCEPT
我们从「运营人员需要知道当天发生了什么」这个核心认知问题出发，搭建了 Dashboard 的第一版骨架。整个页面被切成三道纵向层级：顶部用 KPI 卡片组聚焦核心指标，中部提供 3D Zone Viewer 的实景密度视图，底部展示多维度数据对比，让用户通过纵向扫描完成整体感知。
KPI + Global Controls
顶部承载最关键的实时指标，包括访客数、占用率、平均停留时长、VIP 计数和系统健康状态。
Viewers
中段是两个核心入口。Live Viewer 用 2D 轮廓实时显示人次密度，Camera Viewer 则把 AI 识别框叠加在原始画面上。
Statistical Analysis
底部聚合了多个分析维度，包括人流量、停留时间、年龄与性别分布、排队情况，为运营决策提供趋势回播与比较依据。
CHALLENGE 01 — PRIVACY CONSTRAINT
Privacy Constraint
第一版方案里最直接的呈现是 Camera Viewer 上的实时影像，但这恰恰也是最大的合规风险。我们需要在不暴露真实画面的前提下，保留「看见现场」这层信息价值，这成了整个 MVP 阶段最棘手的设计约束。
如何在没有实时摄像头画面的情况下，传达现场人员的在场感与移动状态，支撑运营决策？
EXPLORATION
围绕这个问题，我快速发散出四种可视化方向，分别对应不同的抽象层级和实时性需求，然后用合规风险、技术可行性、信息密度三条标准做横向评估。
Silhouette-based rendering
用剪影替代真实人像，既能保留人体的姿态、位置和移动方向，又剥离了面部与身份特征，视觉上最接近原始画面。
逐帧处理对边缘算力和带宽的压力过大，无法在 MVP 阶段稳定上线。
Point-based rendering
把每个识别到的人简化成 3D 空间里的一个发光点。运营人员能用最少画面元素直接感知人流动态。
MVP 阶段无法保证多摄像头之间的标定与追踪稳定性，点位会出现漂移和跳变。
Live heatmap updates
用实时刷新的热力图把人流密度直接叠在 3D 场景上，适合观察趋势的判断。
MVP 的数据链路只能输出处理后时间窗的密度结果，无法支撑一张持续流动的热力面。
Aggregated density for a time window
把一个时间窗的密度数据叠加进来，以柔和的色块投射在静态的 3D 灰场景上，并在悬浮卡里给出该 zone 在该时段的 visitor count 以及峰值时间。
符合 privacy by design 的视线，以及与现有 batch + time window 数据管线完全匹配的工程可行性，是 MVP 阶段合理的取舍。
SOLUTION
最终的方案是一个 privacy safe 3D Zone Viewer，把“现场”和“行为”两层信息解耦，既守住了合规底线，也匹配了 MVP 阶段工程能交付的真实数据形态，同时为下一个 scope 留出了清晰的升级路径。
Aggregated density for a time window
MVP 方案。灰度 3D 场景 + 时间窗聚合密度，无画面、无人脸、无轨迹。
Future Version
下一阶段方案。真实画面做人脸模糊处理，叠加年龄与性别标签，兼顾隐私合规与现场可读性。
CHALLENGE 02 — PRIORITY SHIFT
Priority Shift
MVP 重新聚焦到一家户外广告运营方。所有 viewer 与数据可视化都需要围绕广告位表现的决策来重新排布优先级。
从室内监控到户外广告投放
Viewer 从室内 2D 分层场景替换为户外 3D Zone Viewer。KPI 精简到平均停留与峰值时段。新增 Journeys 桑基图呈现跨 zone 动线，Age Group Distribution 提升至主视图，直接服务广告位、人群、时段三层决策。
After 
Before MVP设计方案
面向户外广告运营方的 dashboard，把摄像头采集的原始信号聚合为可以直接用于广告位定价和投放决策的指标。整屏由顶部 KPI、两个 viewer 和下方的 Statistical Analysis 三层信息构成，覆盖从现场感知到效果归因的完整链路，所有组件共享同一套 filter 语境。
DASHBOARD
组件标题栏
组件左上角统一由组件名和一行上下文信息构成。明确告诉用户这份数据来自哪个时间窗和哪个 zone 范围。
Filter 控件
Viewer 和 Statistical Analysis 有独立 filter，分别控制自己的数据范围。两组 filter 独立运作，允许用户在同一屏里进行交叉对比。
Hover Tooltip
所有可交互元素在悬停时都会出现一个浮层，格式统一，按 key value 对齐列关键指标，浮层内容随组件类型变化，但排版规则相同。
Legend
Live Viewer 在右下角提供可折叠的 Legend，说明图标语义和颜色梯度。可折叠为一行标题，点击展开。
Viewer 指标切换
Live Viewer 和 3D Zone Viewer 共享同一组行为与人群维度。用户点击左侧任一指标时，两个 viewer 会同时切换到对应的可视化状态，保持并排比较的语境一致。
BEHAVIOR
DEMOGRAPHIC
STATISTICAL ANALYSIS 可视化图表
五个组件是户外广告投放的完整决策链：从人群构成、情绪反馈，到时段分布、停留质量，再到跨 zone 的动线走向。每个组件都支持 All Zones 的全局对比和 Single Zone 的下钻诊断，同一组件承担两种视角。
每个 zone 一张卡片，pill 条按四档参与度填充。
交互 Global Selector All zones视角下每个 zone 一张卡片，pill 条按四种情绪比例填充，悬停展开细节，切换单 zone 后替换为 treemap，面积直接呈现情绪占比。
显示选择时段的人流量曲线，Total 主线下面叠加性别和年龄段分线。
交互 悬停曲线时垂直 guideline 同步所有线的数值，绿色游标可拖动。右上角 Behavior 下拉可切到 Dwell Time 模式。
All Zones 视图下每根柱子按停留时长堆叠。
交互 悬停可查看分段细节，跨 zone 横向比较深度停留。切至单 zone 后替换为 treemap，顶部补充 Avg. Dwell Time 指标。
Sankey 图呈现人群跨 zone 的完整动线，流量带宽代表人数。
交互 悬停高亮单条路径并显示占比，切至单 zone 后以该 zone 为起点重绘。
Demographic 组件用环形图呈现 Age Group / Gender 的人群构成占比。
交互 支持 All Zones 的整体分布和 Single Zone 下钻，悬停查看具体人数与占比，用于判断当前投放人群是否匹配广告目标。
为 Humain 重建一套设计语言
品牌从 Scai 升级到 Humain，工程侧同步迁移到 Tailwind，旧的组件库在命名、结构和实现上都无法沿用。我从审计旧系统开始，重新定义了 Token 架构、基础组件和文档规范，让设计和工程在同一套语言上工作。
AUDIT & PREPARATION
重建的第一步是理清旧系统和新输入之间的差距。我把旧版 SCAI 组件库按使用频率、视觉一致性和 token 绑定情况做了一轮审计，筛出能复用的和要替换的。同时拿到了 Humain 的 brand guideline，作为新设计系统在色彩、字体和品牌气质上的起点。
Tailwind对齐
工程侧确定迁移到 Tailwind 后，它的技术框架直接限制了设计端的选择空间。我在动手之前先把这些约束理清楚，从 token、布局、组件三个层面分别和前端对齐，让后续所有设计决策都在同一个边界内做。
TOKEN LAYER
Figma variables 完全对齐 Tailwind config
参照 tailwind.config.js 的结构，Spacing 沿用 4px baseline，颜色抽出 semantic token 再映射到 Tailwind palette scale。
LAYOUT LAYER
沿用 Tailwind 默认断点
采用 sm、md、lg、xl、2xl、Container 宽度、max-width、gap 对齐 Tailwind 默认 scale。
COMPONENT LAYER
Tailwind 的 utility-first
只有同时影响结构和可访问性的属性才做 prop，variant、size、disabled 留在组件内。
FOUNDATIONS
Foundations 是整个系统的底层，所有组件都从这里取值。我把它拆成 Color、Typography、Spacing、Radius，每一组以 token 为核心。Token 分为 Primitive 和 Semantic 两层，组件只引用 semantic token，主题切换只需要改中间一层映射。
Variable 映射
Variable 的分组结构直接对齐 tailwind.config.js，设计端和代码端共享同一套命名。
COMPONENTS & MODULES
Foundations 确定之后，先从原子级组件开始搭建。每个组件按 variant 和 state 展开。组件稳定之后，开始向上组装 Modules。数据可视化模块是重点，每种都覆盖了 Default、Loading、Error 三态。其余页面级模块按各自的业务场景单独封装。
DOCUMENTATION
每个组件在 Figma 里都配有一份使用文档，覆盖使用场景、可用 props、状态说明和 do/don't 对照。
STORYBOOK
组件的代码实现通过 Storybook 承载，开发者可以直接查看每个 variant 和 state 的渲染效果，调整参数，查阅 props API。Figma 文档和 Storybook 互相链接，设计和工程共享同一份 source of truth。
成果
作为团队唯一的设计师，我端到端完成了 Humain Monitor 从竞品调研、信息架构、设计系统搭建到页面交付的全流程，产品按计划进入商业化阶段。设计系统基于 Shadcn + Tailwind 从零搭建，三层 Token 架构让 Figma variables 和 tailwind.config.js 一一对齐，设计与开发之间不再需要翻译，并通过 Storybook 建立了可交互的组件文档。
最直接的 impact：产品在面向沙特 Vision 2030 市场的商业化推广中，帮助团队签下了沙特头部户外广告运营商的首个商业合同，覆盖其在利雅得多个大型商业综合体的部署。这验证了我们把“可执行的 AI 洞察”而非“被动数据展示”作为核心差异点的产品策略是对的。
REFLECTION
这个项目最大的流程收获是跑通了设计领先一个 Sprint 的双轨协作模式。这种节奏迫使我在每个迭代前就把方案和 User Story 交付到位，学会了区分“必须现在定”和“可以下轮优化”，而不是试图一次做到完美。
Tailwind 作为工程栈的选择，一开始对我来说是一个约束，但后来变成了一种设计方法。为了和代码对齐，我把 Figma variables 的结构直接照搬 tailwind.config.js，和前端 lead 一起逐字段决定哪些保留默认、哪些扩展、哪些替换。这个过程让我意识到，设计系统的可维护性不取决于它多漂亮，而取决于它和工程的距离有多近。
如果重来，我会在 IA 阶段就引入轻量原型测试，让真实用户（场馆运营经理、安保负责人）参与验证，而不是只靠团队内部推演。另外会更早在 Token 层预留 Dark Mode 和 Accessibility 的扩展能力，让系统从一开始就具备这些基础，而不是事后补救。
期待新机会 有好项目？
你好，我叫 ，你可以通过邮箱联系我 。我想和你聊聊 。
请使用另一台设备扫码
