ProtoPie 6.0 于 2021 年 10 月发布，带来了一些令用户欣喜的重大变化。除了仪表板和标签页等提升生产力的功能之外，我们还实施了许多视觉层面的改动，我们相信这极大地提升了 ProtoPie 的整体观感。这些都源于全新的 ProtoPie Design System，其创建目的是提供更强健的品牌与用户体验。让我们深入了解这些变化背后的故事。
ProtoPie 6.0——我们在 2021 年的重要更新，带来了焕然一新的外观与体验。
直面现实的时刻
ProtoPie 生态由多个产品组成：用于实际原型制作的 ProtoPie Studio、用于在智能设备上试用原型的 ProtoPie Player，以及用于协作与分享的 ProtoPie Cloud。用户在进行原型项目时，会频繁在这些产品之间来回切换。
如你所见，构成 ProtoPie 生态的各个产品过去在视觉上彼此差异很大。
然而，这些产品过去基本各自为政。它们有各自的视觉元素（如图标和颜色）以及各自的用户体验。因此，我们在整个生态中提供的是一种不一致的体验。比如，网站和 ProtoPie Player 使用珊瑚色作为主色，而 ProtoPie Studio 和 ProtoPie Cloud 使用不同深浅的靛蓝色。这种不匹配给用户带来了困惑。为了解决这个问题，我们必须直面现实，为整个 ProtoPie 生态建立一套统一的设计系统。
首要任务：设计原则
我们召集了 ProtoPie 所有品牌与产品设计师，共同思考两个问题：
ProtoPie 希望传达的核心设计价值是什么？
ProtoPie 自身应遵循怎样的设计原则？
为了决定合适的下一步，我们意识到首先需要建立一个环境，让持有不同观点的设计师能够聚在一起并找到共识。
我们把所有想法汇集在一起，以寻找共同点。
我们先汇总了所有能想到的相关关键词。随后，我们进一步探索了我们希望 ProtoPie 成为什么样的品牌，以及希望为用户提供怎样的价值。
这一过程帮助我们收敛到上图所示的三个关键词。最终，我们发现每个关键词共有的价值是 你（用户） 和 你的想法（用户的想法）。由于 ProtoPie 是一款生产力工具，对我们来说最重要的是打造能够让用户想法发光、提高其生产力并让用户更满意的产品。
设计基础
我们首先遵循了原子设计方法论。该方法论指出，设计过程应从尽可能小的元素开始，再通过尝试不同元素组合逐步扩展。因此，我们先定义了将作为整体设计基础的最小设计元素。
我们尝试将产品原则以直接和间接的方式融入每一个元素。接下来，我们将更详细地介绍这些决策背后的思考过程。先来看看构成 ProtoPie Design System 的 4 个元素：颜色、图标系统、字体和布局。
颜色
我们的第一步是将珊瑚色与靛蓝色整合为一种主色。这听起来可能很简单——但实际上相当复杂。
如果我们继续在产品中使用最初的品牌色珊瑚色，品牌会更突出。然而，珊瑚色通常与警告甚至危险相关联。因此，从 UI 角度来看，将珊瑚色作为主色可能会适得其反。
我们决定将紫色作为新的主色。它与我们现有品牌色较为接近，同时又被认为相对中性。我们还将产品色从蓝灰改为中性灰，以体现我们的目标：在不造成干扰的前提下，让用户的想法更突出。
基于这一思路，我们还引入了两种新主题：浅色和深色。用户可以根据希望营造的工作环境类型，或自己最舒适的使用习惯，选择相应主题。
我们通过将同一颜色设置为细微差异的成对色阶，尽可能提升每个主题的可读性。例如，你可能会注意到，与浅色主题相比，深色主题中的紫色略深且饱和度更高。
数字环境中，产品与用户之间存在双向交互，因此清晰呈现状态变化非常重要。过去，ProtoPie 各产品在状态变化规则上并不一致，而在这次更新中，我们确保将其标准化并统一整合。
图标系统
我们建立了一套与品牌字标相配的新图标系统。正如你所见，这套图标既大胆、几何化，又统一了各产品中不同的风格。我们尤其重视打造一种可被直观理解的通用形态，以服务于跨多种产品领域（不仅仅是移动应用设计，如汽车和可穿戴设备）的多元用户群体。
我们为每个图标都设计了清晰的轮廓，以确保无论尺寸大小都能被明确区分。ProtoPie 图标经常需要传达复杂隐喻。为便于直观传达其含义，我们采用了双色风格，通过不同色调区分主要部分与辅助部分。
我们将那些形状不同但含义相同的图标整合为一种。随后，我们创建了图标形态变体来表示不同状态，并直观传达各状态的含义。
字体
Gilroy 作为 ProtoPie 的品牌字体，是一款契合品牌识别、美观且高品质的字体。然而，它具有较强且装饰性的特征。因此，我们希望找到另一款辅助字体，它不会吸引不必要的注意力，而是能更好地衬托用户的原型内容。
因此，我们采用 Inter 作为次要字体。它由 Rasmus Andersson 创作，可读性高、更加标准，并且是专为电脑屏幕精心打造的字体。除标题区域（我们仍希望突出品牌识别）外，我们将 Inter 应用于整个生态。总的来说，我们在 ProtoPie 中共使用三种字体。这些都基于我们的设计系统规范，包括代码片段所使用的字体。
此外，为确保一定程度的可读性，我们对全局字体的最大与最小字号都设定了限制。
布局
在布局方面，我们制定了一系列规范，以确保沉浸式的用户体验。我们考虑了每行项目数量以及每个项目的理想尺寸，以最大化用户参与度。
我们还建立了所有产品可共享的断点，使整个 ProtoPie 生态呈现为连续一致的体验。我们将同样的响应式设计应用于网站、ProtoPie Cloud 以及 ProtoPie Studio。
达成共识
我们持续向所有参与设计系统更新的团队（从设计师到工程师）解释这些规范与变更。每当他们提出问题或疑问时，我们都会投入必要时间阐释思路，并沟通这些变化将如何为用户带来积极影响。
这些规范——从基础元素及每种风格背后的原理，到进一步扩展设计系统的步骤——帮助团队之间形成共识，并巩固了我们先前确立的设计原则。
接下来是什么？
ProtoPie 6.0 的推出，为用户在整个 ProtoPie 生态中带来了更好、更一致且更具辨识度的体验。我们致力于确保希望在产品中传达的设计价值，能够与 ProtoPie 用户产生共鸣。
但在生态中建立一致性只是开始。建立 ProtoPie Design System 消除了不必要的决策，让我们能够以更高敏捷性聚焦更重要的事务。换句话说，这些变化为我们持续改进注入了动能。敬请期待更多功能与优化，让 ProtoPie 成为你团队更高效、更愉悦的原型设计工具。
