Exploring how to combine product design and interaction experience across web, mobile, and conversational interfaces — applying my design methodology and intelligent-experience practice to create natural human-AI interactions for enterprise products.
The design system I have built is a unified set of principles, patterns, and components that provide a shared foundation for product design and development. A design system is more than a library of UI elements—it is a framework that shifts the focus from page construction to business understanding and interaction mapping. Its value lies in helping designers interpret needs and match them with systemic solutions, ensuring consistency across the conceptual layer (tasks and semantics), the communication layer (grammar and interactions), and the physical layer (devices and spaces). This consistency is the basis of great experiences in complex B2B products, while also driving efficiency and reducing costs for both design and engineering。 了解设计体系构建与演进基本原理 →
统一的视觉语言是品牌认知和用户信任的基础。在AI体验中，以AI图标为核心的符号系统，衍生出色彩、字体、动画等多维度的视觉规范，构建出完整的AI视觉设计体系。这些符号化元素贯穿于用户与智能助理的交互和AI功能的使用过程，形成稳定而独特的记忆锚点。
AI 图标包括会话式 AI 图标和嵌入式 AI 图标。
在用户与智能助理的交互过程中，智能助理的角色设定起着重要的作用。用户在与智能助理交流时，会不自觉地将其人格化，通过智能助理的视觉形象和表达风格来认知它。
色彩能有效地向用户传达 AI 功能和 UI 元素之间的重要性和关联性。AI 色彩只应用于含有 AI 功能的 UI 元素中，一致的色彩能帮助用户建立全局的 AI 功能和交互的认知。
AI 文本用在具有智能属性的标题、描述、按钮、链接文本等中，和 AI 符号一样，是页面中智能功能的视觉标识。你有两种方式增加文字的智能特征：
AI 动画用于指示一个 AI 场景下的忙碌状态，例如智能助理的文本、卡片回复的加载过程、生成式 AI 在生成内容的过程等。
跨 CUI 与 GUI 的统一卡片组件平台，涵盖会话卡片、应用卡片、概览卡片、洞见卡片类型，确保设计一致性与信息高效呈现。
会话卡片用于智能助理与用户的交互过程中，以结构化的方式呈现回复内容。不同于单纯的自然语言回复，会话卡片通过列表、图表、表格、富文本等形式，将复杂信息模块化、可视化地展现，从而提升信息解读效率与操作便捷性。
概览卡片则侧重于将用户最关注的业务信息进行整合和可视化呈现。它汇聚关键指标、趋势与动态，帮助用户在第一时间形成全局判断。概览卡片不仅能作为信息概览和导航入口，还支持筛选、快捷操作等交互方式，使用户能够在复杂的业务环境中快速洞察和处理事务。
应用卡片是用户在首页或工作区中接触应用和业务信息的主要入口。它既可以作为单一应用的展示单元，也可以成组呈现多个应用入口。应用卡片通过不同尺寸承载丰富的内容，从简洁的应用图标到更复杂的指标、趋势和业务描述，并通过色彩和状态提示强化信息传达。
洞见卡片旨在通过自然语言与可视化结合的方式，帮助用户快速理解和决策。它们通常包含文字描述、关键数据、图表和操作按钮，以突出重点信息并提供直接的操作入口。根据用途，洞见卡片可分为预测类（指标与事件预测）、业务类（实时总览与趋势）、风险类（潜在风险与应对）、自动化类（流程执行与异常监控）以及优化类（改进与效率提升）。
