Home
Webalo 全新AI驱动工作平台
Webalo 全新AI驱动工作平台
一个AI驱动的数据工作平台, 帮助一线员工和工厂负责人把运营数据转化为可理解的洞察、可执行的行动，以及标准化的日常作业。
一个AI驱动的数据工作平台, 帮助一线员工和工厂负责人把运营数据转化为可理解的洞察、可执行的行动，以及标准化的日常作业。
时间
Oct 2025 - Dec 2025
职位
交互设计师
工具
Figma, Figma Make, Lovable
团队
Webalo 产品团队
通过自然语言将原始数据转化为可视化图表和可以执行的任务
通过自然语言将原始数据转化为可视化图表和可以执行的任务
挑战 1
让新用户无压力的开始探索
挑战 1
让新用户无压力的开始探索
用户在初次使用时需要创建账户、接入运营数据，并摸索如何在陌生的工作空间中展开工作。核心挑战在于减少初期的认知压力，为用户提供清晰且有引导性的进入方式，以顺利上手这一复杂系统。
用户在初次使用时需要创建账户、接入运营数据，并摸索如何在陌生的工作空间中展开工作。核心挑战在于减少初期的认知压力，为用户提供清晰且有引导性的进入方式，以顺利上手这一复杂系统。
我做了什么
我做了什么
通过设计更具亲和力的上手引导体验，降低了复杂工作空间带来的心理负担；同时借助筛选与分类机制，使用户能够快速找到所需的数据源并顺畅推进操作流程。
通过设计更具亲和力的上手引导体验，降低了复杂工作空间带来的心理负担；同时借助筛选与分类机制，使用户能够快速找到所需的数据源并顺畅推进操作流程。
欢迎界面
欢迎界面
连接数据源对话框
完整的初始化面板
完整的初始化面板
邀请新用户对话框
邀请新用户对话框
通过生成式AI工具辅助加速探索
通过生成式AI工具辅助加速探索
在早期探索阶段，我借助 Figma Make 与 Google Stitch 等生成式 AI 工具快速生成界面与交互原型，用于探索想法、与团队讨论设计方向并验证交互方式，从而实现更快的迭代和更有依据的设计决策。
在早期探索阶段，我借助 Figma Make 与 Google Stitch 等生成式 AI 工具快速生成界面与交互原型，用于探索想法、与团队讨论设计方向并验证交互方式，从而实现更快的迭代和更有依据的设计决策。
使用 Figma Make 快速生成不同界面样式
使用 Figma Make 快速生成不同界面样式
使用AI工具(Figma Make)生成邀请用户对话框的动态背景
使用AI工具(Figma Make)生成邀请用户对话框的动态背景
挑战 2
无干扰地将 AI 融入核心工作流程
挑战 2
无干扰地将 AI 融入核心工作流程
AI功能根植在产品中，但关键挑战在于让 AI 助手自然融入工作流程，既不分散用户对图表、仪表盘和日常运营任务的注意力，也避免将产品体验简化为“聊天机器人式”的交互。
AI功能根植在产品中，但关键挑战在于让 AI 助手自然融入工作流程，既不分散用户对图表、仪表盘和日常运营任务的注意力，也避免将产品体验简化为“聊天机器人式”的交互。
What I did
What I did
我将设计重点放在把 AI 助手塑造成一种“非侵入式”的协作伙伴。通过采用可折叠的抽屉式交互模式，用户可以自主控制屏幕空间：在需要深入分析时展开面板，在专注当前工作时将其收起。该用户体验在对话与行动之间建立起有效衔接，使用户能够直观、顺畅地将 AI 的建议转化为可视化图表或可执行任务，而不会产生额外阻力。
我将设计重点放在把 AI 助手塑造成一种“非侵入式”的协作伙伴。通过采用可折叠的抽屉式交互模式，用户可以自主控制屏幕空间：在需要深入分析时展开面板，在专注当前工作时将其收起。该用户体验在对话与行动之间建立起有效衔接，使用户能够直观、顺畅地将 AI 的建议转化为可视化图表或可执行任务，而不会产生额外阻力。
将AI生成的信息固定到仪表版里以进行持续追踪
将AI生成的信息固定到仪表版里以进行持续追踪
可折叠的菜单和AI面板以确保内容的显示空间
可折叠的菜单和AI面板以确保内容的显示空间
设计过程
设计过程
我探索了多种 AI 助手的空间布局方案，包括左侧边栏集成、悬浮式叠层以及右侧停靠面板等形式。设计目标在于避免产生割裂的“插件式”体验，而是实现一种无缝、原生的整合方式，使 AI 能够作为一个非侵入式的协作副驾，自然地融入核心产品体验之中。
我探索了多种 AI 助手的空间布局方案，包括左侧边栏集成、悬浮式叠层以及右侧停靠面板等形式。设计目标在于避免产生割裂的“插件式”体验，而是实现一种无缝、原生的整合方式，使 AI 能够作为一个非侵入式的协作副驾，自然地融入核心产品体验之中。
界面设计探索
界面设计探索
挑战 3
在多变环境中实现可扩展性的设计
挑战 3
在多变环境中实现可扩展性的设计
用户所处的工作环境高度多样——从光线昏暗的控制室到明亮的后台办公空间——这要求界面能够适应不同的光照条件。与此同时，随着产品路线图逐步指向更复杂的任务执行能力，界面还需要具备可扩展的基础，以确保未来功能的引入不会割裂整体体验。
用户所处的工作环境高度多样——从光线昏暗的控制室到明亮的后台办公空间——这要求界面能够适应不同的光照条件。与此同时，随着产品路线图逐步指向更复杂的任务执行能力，界面还需要具备可扩展的基础，以确保未来功能的引入不会割裂整体体验。
我做了什么
我做了什么
我设计了一套支持深色与浅色模式的多主题设计系统，通过定义语义化的颜色令牌（semantic color tokens）与标准化的组件状态，确保界面在不同环境光照条件下都具备良好的可读性，以及设计时的快速调用。通过在早期建立这一灵活的主题化基础，我既回应了当下的环境适配需求，也为界面在未来引入以任务为导向的功能做好准备，而不破坏整体视觉一致性。
我设计了一套支持深色与浅色模式的多主题设计系统，通过定义语义化的颜色令牌（semantic color tokens）与标准化的组件状态，确保界面在不同环境光照条件下都具备良好的可读性，以及设计时的快速调用。通过在早期建立这一灵活的主题化基础，我既回应了当下的环境适配需求，也为界面在未来引入以任务为导向的功能做好准备，而不破坏整体视觉一致性。
暗色和浅色模式下，界面保持一致性
暗色和浅色模式下，界面保持一致性
建立支主题，状态及未来拓展的设计系统
建立支主题，状态及未来拓展的设计系统
可访问性验证
可访问性验证
在设计之初便将可访问性作为基础性原则加以考虑。我依据 WCAG AA 标准对颜色令牌进行了验证，并针对浅色模式对色值进行了适当加深的调整，以优化文本与界面的可读性，从而确保可访问性成为系统内建的设计规范。
在设计之初便将可访问性作为基础性原则加以考虑。我依据 WCAG AA 标准对颜色令牌进行了验证，并针对浅色模式对色值进行了适当加深的调整，以优化文本与界面的可读性，从而确保可访问性成为系统内建的设计规范。
确保深色/浅色模式颜色都通过 WCAG AA 测试
确保深色/浅色模式颜色都通过 WCAG AA 测试
成果
成果
该项目为在复杂工作空间中整合 AI 能力奠定了可扩展的基础。全新的引导式上手流程与 AI 导航机制，使用户能够更有信心地掌控和使用自身的数据。对团队而言，这套新的设计系统也显著提升了设计一致性，并帮助我们更高效地推进功能开发。
该项目为在复杂工作空间中整合 AI 能力奠定了可扩展的基础。全新的引导式上手流程与 AI 导航机制，使用户能够更有信心地掌控和使用自身的数据。对团队而言，这套新的设计系统也显著提升了设计一致性，并帮助我们更高效地推进功能开发。
反思
反思
在设计过程中，我始终将构建一个面向未来的灵活系统作为核心目标，以支持后续诸如高级任务执行等功能的扩展。在项目周期较为紧张的情况下，我与产品和工程团队保持紧密协作，在设计质量与技术约束之间寻求平衡，最终确保交付的解决方案在可用性与可实现性之间取得了良好统一。
在设计过程中，我始终将构建一个面向未来的灵活系统作为核心目标，以支持后续诸如高级任务执行等功能的扩展。在项目周期较为紧张的情况下，我与产品和工程团队保持紧密协作，在设计质量与技术约束之间寻求平衡，最终确保交付的解决方案在可用性与可实现性之间取得了良好统一。
©2025 Dake Cui
©2025 Dake Cui