来源：Medium网站

作者：Jonathan Saring

翻译：奥创

阅读时长：10min

了解Uber，Pinterest，Shopify和Airbnb如何利用组件构建一致的UI / UX 设计系统。

Airbnb通过react-sketchapp将设计人员与开发人员组件协作提升到了一个新的水平

在产品的每个部分创建和维护一致的UI和UX可帮助您的用户直观地导航并成功地与应用程序的不同部分进行交互，而不会产生混淆。

在您的产品的多个部分和应用之间保持用户界面的一致性可以创造更有价值的东西：您的品牌。品牌化用户体验和用户界面是让用户在与新产品互动时“有宾至如归”的关键，提高他们的忠诚度和满意度。

视觉和功能一致性

Airbnb的组件设计系统

功能一致性使您的产品更具可预测性。用户知道元素的行为方式，因此即使在他们第一次访问的页面/屏幕上也能更安全地与其进行交互。

视觉一致性包括UI的颜色，字体，大小，位置和其他视觉方面，帮助您的用户认知识别和分类UI元素。例如，某种字体颜色可以策略性地用于帮助您的用户了解他们按下特定按钮时会得到什么。

在当今的生态系统中，UI组件也可以作为UX组件， 结合功能来创建功能和视觉一致性。

基于组件的设计系统可以为您的应用程序提供可视和功能一致性，帮助您的用户感到宾至如归，并轻松导航以完成与您的产品的所需交互。

为什么我需要一个组件设计系统？

组件是使用更小，可重用的部件设计和开发UI的好方法，具有更好的一致性。

Netflix通过组件保持一致的UI

公司如Uber，Pinterest的，制作的Airbnb，沃尔玛，Atlasssian和更多通过基于组件的设计，系统实现了人机界面的一致性。

请参阅：“ 共享（组件）是关怀 ”

Airbnb的设计工作室在构建他们的设计系统时使用了这种方法：“ 我们的设计应该是通过明确定义和可重复使用的组件提高效率的统一平台 ”。

以下是基于组件的设计系统的一些关键优势。

可重用性鼓励UI和UX的一致性，因为组件可以在任何使用它们的地方创建一致的体验。

可以利用原子设计实现更好的一致性，因为较大的组件由较小的组件组成，从而减少意外和不相交的体验。

组件在设计和开发之间提供更好的协作，允许您的设计语言随着时间的推移而发展。理想情况下，您在Sketch上看到的是使用React构建的内容。

设计方面如字体，排版，主要和次要颜色仍然可以指定为组件设计系统的一部分。

建立一致的设计系统

蓝图反应组件

到现在为止还挺好。但是，您如何实际创建基于组件的设计系统，UI / UX设计人员和开发人员可以在其上进行协作？

UI设计系统不仅仅是一个组件库。它不仅仅是组件的颜色。对于构成整个产品体验的基本部件而言，这是一个不断发展且不断发展的真实来源。

因此，在实现第一个组件之前，您必须设置用于控制这些组件的样式指南和设计语言。这是一个好的开始。

然后，这些设计原则应该转换为组件的代码实现，从较小的Atoms到较大的组合。

理想情况下，所有组件都应该组织在一个地方，设计人员和开发人员都可以访问。这样，设计人员可以随着时间的推移计划和监控设计语言，而开发人员可以选择和使用正确的组件，因为他们知道它们不会破坏一致性。

共享UI组件集合

Bit（GitHub）可以帮助您的团队组织和共享组件，以便您可以在不同的应用程序中使用它们并更快地一起构建。

每个组件都共享到UI目录中，可以在实际操场中在线发现和播放，然后再选择使用它们。

使用Bit组件不仅可以被发现：开发人员还可以使用NPM和Yarn在不同的项目中即时安装组件。

为了协作，可以从使用它们的任何项目开发Bit组件，并且可以跨项目管理和同步更改，以确保您的UI保持一致而不会影响dev-velocity。

Bit是开源的，并且被许多组织用于建立基于共享目录的组件设计系统，该目录既可视又可用。Bit是开源的，免费提供3个系列，所以请随意跳转并尝试一下。

UI组件库

Shopify使用Polaris，这是一个设计系统，其中包含一个内部反应组件库，用于为使用Shopify的商家创建更一致的体验。Airbnb的组件库带来了生产力的巨大飞跃。

Pinterest使用Gestalt，一个React UI组件库 ，“ 强制执行Pinterest的设计语言。通过强制执行一堆基本的UI组件，简化设计人员和开发人员之间的沟通......”。

共享组件库是一种有效的工具，可以在UI中实施一致性。在我看来，一致性不应该强制执行，而是实现。

组件库基本上是一种在团队正在构建的每个应用程序或应用程序部分中强制执行大量UI组件的方法。但是，开发人员不仅限于图书馆的视觉语言，还限于其正在进行的开发。

Pinterest的Gestalt React 搜索提交组件

当特定应用程序的特定部分需要某个组件时，可能需要进行一些调整和修改。设计人员和开发人员应该在灵活性和一致性之间找到适当的平衡点。

共享库经常打破这种平衡并减慢开发速度，这反过来又会削弱开发团队对库本身的采用。在任何需要单个组件的地方强制执行一个庞大的重型库也是没有意义的（让我们不要进入一场发生争议的辩论）。

为了实现设计人员与开发人员之间的协作，您还必须为组件维护一个实时文档站点，并以某种方式使其可供设计人员和开发人员编辑（Airbnb的react-sketchapp和Figma等工具可以提供帮助）。

如果您选择此选项，这里有23个流行的React UI库，您可以立即使用它们。如果您实现自己的库，请记住留出足够的设计空间供开发人员玩，而不会违反规则。

UI库中的组件也可以与Bit共享，以统一组件的可发现性，游乐场和消费，或者添加StoryBook等工具，为组件创建可发现的门户。

平衡一致性和灵活性

丘吉尔曾经说过“改变就是改善”，“要完美就是经常改变”。如果我们执行过于严格的一致性，我们将停止创新。

 优步的主要灵活组件示例

当我们建立新事物时，我们必须将规则扩展到足以允许增长的空间，但不要让事情陷入混乱。

虽然这里没有什么神奇之处，但正确的理念，方法和工具可以帮助您在UI一致性和创新之间实现这种平衡。这里有一些有用的提示。

从设计的角度来看，并非每种风格都应该重新定义和预先定义。

例如，某个组件（导航栏，项目等）与应用程序的其余部分相比可能具有相对大小或边距。在不同的情况下，这些变量可能会发生变化，因此可以留出一些空间来玩。

Uber和其他团队使用的另一种有用方法是将基本/全局/基础组件与“辅助”组件分开。

例如，Uber使用具有超过22种不同颜色和22种值的主要和次要组件，总共484种独特色调。创建了70多种独特模式 - 每个Uber服务的国家都有一种模式。

设计人员与开发人员的协作是实现这种平衡的关键。一些团队（如沃尔玛实验室）努力提高UI组件本身的可重用性，从而缩小与开发人员端的差距。

 Uber的数据可视化 React组件库

正确的工具和工作流程也可以为您的UI提供很长的路要走。像Bit和Storybook这样的工具可以帮助促进这种平衡。

除了打破一致性别无选择之外，模式，视觉效果和文字是一种很好的方式，可以给用户一种熟悉的感觉并减少混乱。一致的模式，可识别的视觉效果和一致的语音可以帮助您的用户安全，直观地与您的产品互动。

概括

• UI和UX一致性可帮助用户成功与您的产品进行交互。

• 设计系统是UI / UX不断发展的主体。基于组件的设计系统具有视觉和功能一致性。

• Uber，Airbnb，Pinterest，Netflix和其他优秀团队使用基于组件的设计系统来创建和发展他们的视觉语言。

• 要构建组件设计系统，您可以创建一个库，使用Bit并利用不同的工具和方法来随着时间的推移进行扩展。

• 通过为变革留出空间，使用有用的工具和鼓励协作文化来平衡一致性和灵活性非常重要。

• 记住：平衡和协作就是一切。这不是一次性努力，而是设计师和开发人员共同进行的持续旅程。