项目信息
类型
设计系统（DS）
客户
Too Good To Go (Unofficial)
职责
UX设计师
时间线
2025年10月至2025年12月
工具
Figma & Zeroheight
团队
Carol B, Wendy L, Shreya L, Rohini R
Bagel 设计系统：打造 Too Good To Go iOS 应用的可扩展与可持续设计体系
03 解决方案：Bagel 设计系统如何提供帮助？
在没有设计系统的情况下，每个功能都需要重复构建 UI 模式；而统一的设计系统通过复用与标准化，显著提升设计与开发效率。
降低功能迭代的单位成本
组件的不一致直接导致用户体验的割裂；设计系统通过统一规则，让界面更加可预测、一致且可信。
提升界面的稳定性与一致性
04 设计过程：我们是如何建立Bagel设计系统的？
步骤 1/3
建立统一设计规则，确保每个 Bagel 的一致性。
为避免组件各自为政、缺乏统一性，我们先确立了一组核心设计原则，用以指导整体设计方向。
步骤 2/3
构建 Bagel：从基础体系到设计模式的构建
在确立设计原则后，我们开始构建 Bagel 设计系统的核心：从基础（Foundations）出发，逐步扩展到组件（Components），并通过设计模式（Patterns）将整体连接起来。
🥯 基础体系 (Foundation)
我们从定义设计系统的基础层开始：包括色彩、字体、间距与网格系统。
在色彩上，以绿色作为主色，强化 Too Good To Go 可持续发展的品牌定位
我们继续使用 Tenon 字体以保持品牌一致性，并通过统一的网格与间距系统，建立共享的结构基础。
在图标方面，我们使用 Microsoft 的设计系统 Fluent，以统一图标风格。
我的贡献：定义了间距和网格体系，并对设计token进行了命名。
🥯 组件
在基础体系之上，我们对核心 UI 组件（按钮、卡片、标签等）进行了系统化构建，通过定义灵活的属性与多种变体，以支持不同使用场景。
我的贡献：设计卡片组件（Card）、设计底部导航（Bottom Navigation）、设计搜索栏（Search Bar）、构建分割线组件（Divider）
🥯 设计模式 (Patterns)
在单个组件之上，我们进一步构建了设计模式（Patterns），作为可复用的页面级构建单元，支持跨页面的统一应用。这些预构建的模式减少了从零开始设计的需求，提升设计效率，并加快产品实现速度。
我的贡献：构建页面头部模式（Header Pattern）、设计轮播模块模式（Carousel Pattern）
🥯 用户测试（验证系统有效性🙂↕️）
为了验证设计系统的可用性，我们开展了一轮小规模用户测试，邀请设计师使用 Bagel UI Kit 进行界面设计。
基于反馈，我们对 UI Kit 进行了迭代优化，包括提升组件的灵活性、完善文档内容，以及减少配置与使用过程中的阻力。
步骤 3/3
设计系统的价值，不在组件本身，而在其被清晰表达与共享的能力。
为了让设计系统能够在团队之外被有效使用，我们将 Bagel 设计系统整理并发布在 Zeroheight 上。文档结构注重可读性与可扫描性，使设计师能够快速理解各组件的使用方式。 同时，我们补充了字体、图标及组件库的配置说明，降低使用门槛，帮助新用户更顺畅地上手。
为每个组件设定清晰的规则
针对每个组件，我们明确了结构（anatomy）、使用方式、设计规范以及可访问性指引，在保证一致性的同时保留灵活性。这一体系使组件能够在不同使用场景中灵活适配，同时仍遵循统一且清晰的设计规则。
