第5章 Flutter 如何促进 L+R 设计师与开发者的协作
第5章：Flutter 如何促进 L+R 设计师与开发者之间的协作
了解 L+R 如何利用 Flutter 在构建 Global Citizen 应用时，改善设计师与开发者之间的协作。
Ivan Leider 2024年2月19日 · 6 分钟阅读
rss_feed
Share on X Share on Bluesky Share on LinkedIn
你可能听说过 Global Citizen（GC），这是一个致力于消除世界贫困和帮助地球的组织。当 GC 希望重写一款移动应用以支持这一事业时，他们联系了我们的工作室 L+R，合作在 Android 和 iOS 上同时设计、构建并上线该应用。
Flutter 的灵活性、预置组件目录以及强大的动画能力，使 L+R 团队得以实施以设计为导向的开发流程。使用 Flutter 时，开发者拥有一张“画布”，可以将自定义设计变为现实。对 L+R 而言，这意味着我们的设计团队可以充分发挥创造力，打造既美观又触感极佳、以用户为中心的应用。
以下是 Global Citizen 应用的一些截图：
设计流程
开始新的客户项目时，设计师会先在 Figma 中创建一个设计系统。这包括品牌指南——如配色方案和字体——以及小型可复用组件。
在开始重写 Global Citizen 应用时，设计团队在现有指南的基础上进行了扩展，通过引入更高对比度的元素，赋予应用全新的视觉外观。这不仅有助于引导用户注意力，也提升了无障碍体验。
UI 元素在 Figma 中以组件形式创建。每个组件可能根据其类型或状态拥有不同的变体。例如，下图展示了多种按钮变体：
开发新组件时，设计团队会参考 Figma 中的 Material 和 iOS 设计套件以获取灵感。由于这些 Figma 组件与 Material 和 Cupertino 库中可用的 widget 高度对应，因此有助于将设计转化为代码。
在整个设计过程中，团队将小型可复用组件组合成较大的、针对特定功能的组件，进而组合成完整的页面。这使得 Global Citizen 的产品团队能够扩展应用的新功能，同时保持与最初愿景的一致性和真实性。
项目模板
在 L+R，我们的团队自 Flutter 首次公开发布起就开始使用它。为了让团队更快地构建 Flutter 应用，我们创建了一个开源仓库，作为项目模板，为我们构建的所有 Flutter 应用奠定基础。
这个基础项目包含一组可定制并用于客户应用的 widget。例如，在 Figma 设计文件（上文所示）中展示的按钮，可以使用项目模板中的 _BaseButton 类来构建。该类接受不同的颜色、文本样式和内边距，以最佳匹配为该项目设定的设计系统。
为了让基于品牌指南的风格化设计更容易，我们使用 ThemeData 类。开发者从 Figma 中提取配色方案和文本样式，并将其映射到相应的主题属性。
我们的团队尽可能利用 ThemeData 中的现有属性，然后使用 ThemeExtension 功能完成其余配置。
Flutter 的 widget 库
如上所述，项目模板包含一组可复用的 widget。在开发这些组件时，我们尽量使用 Material 和 Cupertino 库中已有的 widget。在 Global Citizen 应用中，约有一半的组件源自 Material 或 Cupertino widget。
例如，Material 中的 TextField 和 TextFormField widget 包含了匹配设计所需的所有定制化功能和特性。Material 中的 TextButton 也被用于实现 _BaseButton widget。在这种情况下，我们利用了 TextButton 现有的高亮功能，但将其封装进一个具有扩展功能的新 widget，以更好地满足需求。
这些开箱即用的 UI 组件易于样式化，使我们的 widget 构建和维护更加容易。然而，有时设计师会创建无法使用 Flutter 的 Material 或 Cupertino widget 复现的自定义组件。在这些情况下，开发团队会使用底层 Flutter widget 创建我们自己的自定义 widget。
Global Citizen 应用中的一个例子是进度指示器。为此应用，我们的设计师创建了下图 GIF 中所示的自定义进度指示器。现有的 Material 和 Cupertino 进度指示器无法适应此设计。但是，我们的开发者可以轻松创建完全新的 widget，仅使用 container、row、column 和内在动画。
社区库对于更复杂和灵活的组件也非常有用。例如，我们使用了一个社区构建的 flushbar 来在 Global Citizen 应用内显示警报通知。
热重载
在将 Figma 设计转化为 Flutter 代码时，设计师和开发者的协作至关重要。设计师通常会提出反馈，导致样式、布局或动画的细微调整。热重载使这种协作更加高效。
使用热重载，开发者可以在与设计团队屏幕共享时（无论是在 UX 阶段、UI 概念阶段、前端实现阶段，甚至设计 QA 阶段）调整代码。在屏幕共享过程中，设计师可以立即看到更改的结果。这使调试和迭代速度大大加快。
平滑的动画
让应用感觉精致的一个关键是添加深思熟虑的动画。Flutter 的动画框架灵活且强大，但对设计师来说可能难以理解。帮助团队的一件事是参考开源应用中美观的动画。具体来说，我们查看了 Wonderous 应用的代码库。我们随后利用了驱动 Wonderous 的开源库 flutter_animate，为关键功能添加简单但丰富的动画。
以下链接中的视频突出了“Take Action”流程的一部分，用户通过一系列信息屏幕了解更多有关该问题的信息。
查看 action_learn_animations 视频。
使用 flutter_animate，我们实现了以下功能：
当用户前进时，动画化步骤指示器 在页面之间添加轻微的淡入淡出转换 在观看视频后，将 Play Video 按钮转换为成功对勾
总体而言，Flutter 为设计和开发提供了灵活的方法。Flutter 的预置 widget 使创建可复用的 UI 组件变得更容易，这些组件可以样式化以匹配客户的品牌。Flutter 社区在技术成熟过程中发挥着重要作用，提供高质量的库并扩展可用资源。如热重载等关键 Flutter 功能支持设计师与开发者之间的更好协作。所有这些结合在一起，创造出一个既美观又功能强大的应用！
有关该应用的更多信息，请查看 The New Global Citizen App: Daily Activism & Measurable Impact in Your Pocket。你還可以 将 Global Citizen 应用下载到你的移动设备。
L+R 是一家国际策略、设计和移动技术工作室。我们提供众多服务，如 UX 设计、移动开发以及策略咨询。
来自 Flutter 的更多
Vibe once, run anywhere with Antigravity and Flutter Flutter 和 Antigravity 如何帮助构建和上线一款小行星着陆游戏。
Craig Labenz, Rody Davis 2026年6月29日 · 8 分钟阅读
How we built a Flutter-powered AI coffee shop 如果你开始免费赠送咖啡，人们就会来。
Craig Labenz 2026年6月22日 · 9 分钟阅读
