Home
Webalo 平台整合
Webalo 平台整合
将 Webalo 原本分离的管理端与终端用户平台整合为一个统一、可扩展的平台，
确保桌面端与移动端体验的一致性，并提升数千名企业用户的整体使用体验。
将 Webalo 原本分离的管理端与终端用户平台整合为一个统一、可扩展的平台，确保桌面端与移动端体验的一致性，并提升数千名企业用户的整体使用体验。
时间
Mar 2025 - Sep 2025
职位
交互设计师
工具
Figma, Lovable, Figma Make
团队
Webalo 产品团队
该项目为 Webalo 打造了一个现代化、跨平台统一的产品体验
该项目为 Webalo 打造了一个现代化、跨平台统一的产品体验
挑战 1
导航与结构
挑战 1
导航与结构
原有系统分布在两个彼此独立的网站中，界面样式和导航方式并不统一，部分页面也缺乏响应式支持。这种割裂的体验让用户很难判断该从哪里开始、如何顺利完成任务。我们的目标是将这些分散的体验整合起来，打造一个统一、清晰且连贯的平台结构。
原有系统分布在两个彼此独立的网站中，界面样式和导航方式并不统一，部分页面也缺乏响应式支持。这种割裂的体验让用户很难判断该从哪里开始、如何顺利完成任务。我们的目标是将这些分散的体验整合起来，打造一个统一、清晰且连贯的平台结构。
原管理平台 (左), 原工作流设计器 (中), 原执行站点 (右)
原管理平台 (左), 原工作流设计器 (中), 原执行站点 (右)
整合的框架设计
整合的框架设计
为实现体验上的统一，我设计了一套灵活的布局框架，能够稳定承载不同的组件与工作流程，在提供清晰结构的同时，保持整体视觉与交互体验的一致性。
为实现体验上的统一，我设计了一套灵活的布局框架，能够稳定承载不同的组件与工作流程，在提供清晰结构的同时，保持整体视觉与交互体验的一致性。
布局框架
布局框架
菜单设计
菜单设计
Webalo 是一个为制造业用户提供强大管理工具的复杂平台。随着产品不断发展，功能持续增加，导航结构也变得愈发复杂，用户在探索功能时往往难以判断下一步该去哪里，整体使用流程不够直观。
为此，我探索了多种菜单设计方案，测试不同的折叠与分组方式，以减少不必要的页面跳转并降低交互成本。设计目标是在保留平台功能深度与专业性的同时，让导航结构更加清晰、简洁且易于理解。
Webalo 是一个为制造业用户提供强大管理工具的复杂平台。随着产品不断发展，功能持续增加，导航结构也变得愈发复杂，用户在探索功能时往往难以判断下一步该去哪里，整体使用流程不够直观。
为此，我探索了多种菜单设计方案，测试不同的折叠与分组方式，以减少不必要的页面跳转并降低交互成本。设计目标是在保留平台功能深度与专业性的同时，让导航结构更加清晰、简洁且易于理解。
重新设计菜单样式以提升清晰度与使用效率
重新设计菜单样式以提升清晰度与使用效率
菜单结构重构
菜单结构重构
我与产品经理和工程团队紧密合作，对导航结构进行了系统性的梳理与重构。具体工作包括移除使用率较低的功能、解决功能重叠问题、重新命名菜单项、优化图标设计，并围绕用户任务重新组织导航结构，从而帮助用户在统一的平台中更高效地找到所需功能。
我与产品经理和工程团队紧密合作，对导航结构进行了系统性的梳理与重构。具体工作包括移除使用率较低的功能、解决功能重叠问题、重新命名菜单项、优化图标设计，并围绕用户任务重新组织导航结构，从而帮助用户在统一的平台中更高效地找到所需功能。
菜单项目重构
角色权限
角色权限
通过权限机制，使统一后的界面能够根据不同用户角色动态呈现相应内容：管理员拥有完整的功能访问权限，而终端用户仅看到与自身任务相关的内容，从而在功能扩展过程中降低页面设计的复杂度。
通过权限机制，使统一后的界面能够根据不同用户角色动态呈现相应内容：管理员拥有完整的功能访问权限，而终端用户仅看到与自身任务相关的内容，从而在功能扩展过程中降低页面设计的复杂度。
基于用户权限显示内容
基于用户权限显示内容
挑战 2
视觉一致性与设计系统
两个平台在长期分开设计开发的过程中，逐渐形成了分裂的视觉风格与交互方式。来自两个产品的历史设计决策不断累积，最终使整体体验呈现出由多种设计语言构成的碎片化状态。
两个平台在长期分开设计开发的过程中，逐渐形成了分裂的视觉风格与交互方式。来自两个产品的历史设计决策不断累积，最终使整体体验呈现出由多种设计语言构成的碎片化状态。
不同平台界面设计不一致
不同平台界面设计不一致
混乱的图标使用
混乱的图标使用
多年发展下来，Webalo 在不同阶段、为不同需求逐步积累了多套图标体系。由于缺乏统一的图标系统，界面在视觉上显得不够一致，用户也更难以快速识别操作含义并高效地在产品中进行导航。
多年发展下来，Webalo 在不同阶段、为不同需求逐步积累了多套图标体系。由于缺乏统一的图标系统，界面在视觉上显得不够一致，用户也更难以快速识别操作含义并高效地在产品中进行导航。
同时存在多套图标
同时存在多套图标
重新设计图标
重新设计图标
我构建了一套新的图标体系，以 Google Material 图标库为基础，并针对特定需求设计定制图标，从而在保证一致性与清晰度的同时，实现对整个平台使用场景的全面覆盖，并得以在较短时间内高效完成整体设计与落地。
我构建了一套新的图标体系，以 Google Material 图标库为基础，并针对特定需求设计定制图标，从而在保证一致性与清晰度的同时，实现对整个平台使用场景的全面覆盖，并得以在较短时间内高效完成整体设计与落地。
重新设计了图标
重新设计了图标
表单设计器图标对比: 之前和现在
表单设计器图标对比: 之前和现在
建立设计系统
建立设计系统
在这个项目中我们遇到的一个关键挑战在于，Webalo 一直缺乏一套持续维护、及时更新的设计系统，这导致了视觉不一致、设计理解偏差以及落地实现上的问题。
在设计全新界面与重构图标体系的基础上，我进一步建立了一套新的设计系统，用于统一团队在设计模式上的共识。这不仅支持了组件的快速复用，也显著提升了团队整体的设计一致性，并为产品的长期扩展提供了可持续的基础。
在具体实践中，我通过令牌（Design Tokens）与 Figma 组件来确保设计阶段的视觉一致性，同时降低前端工程实现的复杂度，使设计与开发之间的协作更加顺畅。
在这个项目中我们遇到的一个关键挑战在于，Webalo 一直缺乏一套持续维护、及时更新的设计系统，这导致了视觉不一致、设计理解偏差以及落地实现上的问题。
在设计全新界面与重构图标体系的基础上，我进一步建立了一套新的设计系统，用于统一团队在设计模式上的共识。这不仅支持了组件的快速复用，也显著提升了团队整体的设计一致性，并为产品的长期扩展提供了可持续的基础。
在具体实践中，我通过令牌（Design Tokens）与 Figma 组件来确保设计阶段的视觉一致性，同时降低前端工程实现的复杂度，使设计与开发之间的协作更加顺畅。
定义令牌
定义令牌
设计可复用的组件
设计可复用的组件
组件的重新设计
组件的重新设计
我与团队合作一起对所有核心组件进行了重新设计，在更新视觉语言的同时，确保新的设计系统能够被准确、一致地应用到整个平台之中，从而打造连贯统一的产品体验。
我与团队合作一起对所有核心组件进行了重新设计，在更新视觉语言的同时，确保新的设计系统能够被准确、一致地应用到整个平台之中，从而打造连贯统一的产品体验。
表单设计器
表单设计器
工作流设计器
工作流设计器
AI 整合
审核与部署页面
审核与部署页面
技术约束下的表单管理页面设计
技术约束下的表单管理页面设计
面向后续阶段的探索
洞察面板与移动端应用
面向后续阶段的探索
洞察面板与移动端应用
在推进平台整合工作的同时，我们也同步探索了面向后续阶段的早期概念设计，包括基于同一设计基础构建的洞察面板以及移动端应用，为产品未来的扩展方向提前做好设计验证与准备。
在推进平台整合工作的同时，我们也同步探索了面向后续阶段的早期概念设计，包括基于同一设计基础构建的洞察面板以及移动端应用，为产品未来的扩展方向提前做好设计验证与准备。
洞察面板的设计探索（桌面端视图）
洞察面板的设计探索（桌面端视图）
洞察面板的设计探索（平板端视图）
洞察面板的设计探索（平板端视图）
洞察面板的设计探索（移动端视图）
将生成式 AI引入设计过程
使用AI加速功能构想与交互原型构建流程
将生成式 AI引入设计过程
使用AI加速功能构想与交互原型构建流程
我探索使用如 Lovable 等生成式 AI 工具，将设计想法快速转化为可交互的原型，使早期概念更直观、易于理解和讨论。这些探索帮助团队在无需投入大量时间制作高保真稿的情况下，与非设计背景的成员清晰地传达功能构想和设计思路，从而提升了早期沟通与共识建立的效率。
我探索使用如 Lovable 等生成式 AI 工具，将设计想法快速转化为可交互的原型，使早期概念更直观、易于理解和讨论。这些探索帮助团队在无需投入大量时间制作高保真稿的情况下，与非设计背景的成员清晰地传达功能构想和设计思路，从而提升了早期沟通与共识建立的效率。
用 Lovable 生成的早期功能探索可交互原型
用 Lovable 生成的早期功能探索可交互原型
成果
成果
我们成功将两个割裂的工具整合为一个连贯统一的平台体系，显著改善了整体用户体验。全新的设计系统使团队能够以更一致、更高效的方式开展工作，并通过可复用的组件与共享的设计令牌，搭建设计与代码之间的桥梁。
第一阶段的工作重点在于统一核心 Web 端体验，同时建立了一套具备可扩展性的基础，使产品在开发资源允许的情况下能够自然延伸至移动端。
我们成功将两个割裂的工具整合为一个连贯统一的平台体系，显著改善了整体用户体验。全新的设计系统使团队能够以更一致、更高效的方式开展工作，并通过可复用的组件与共享的设计令牌，搭建设计与代码之间的桥梁。
第一阶段的工作重点在于统一核心 Web 端体验，同时建立了一套具备可扩展性的基础，使产品在开发资源允许的情况下能够自然延伸至移动端。
反思
反思
该项目促使我从单纯的执行角色，逐步转向主导设计讨论与关键决策。通过从零开始构建设计系统，并与工程与产品团队紧密协作，我对设计作为一种平台级、协作性的实践有了更深入的理解——它并非理想化的表达，而是在真实约束条件下不断权衡与推进的过程。
该项目促使我从单纯的执行角色，逐步转向主导设计讨论与关键决策。通过从零开始构建设计系统，并与工程与产品团队紧密协作，我对设计作为一种平台级、协作性的实践有了更深入的理解——它并非理想化的表达，而是在真实约束条件下不断权衡与推进的过程。
©2026 Dake Cui
©2026 Dake Cui