通过样式指南驱动的开发设计模块化 UI 系统

使用风格指南来推动开发是一种在前端开发中获得很大吸引力的做法——而且有充分的理由。 开发人员将从样式指南开始，添加新代码或更新现有代码，从而为稍后集成到应用程序中的模块化 UI 系统做出贡献。 但是为了实现模块化的 UI 系统，我们必须以模块化的方式进行设计。

模块化设计鼓励我们以模式思考和设计 UI 和 UX。 例如，我们不会设计一系列页面或视图来让用户完成任务，而是通过了解 UI 系统的结构以及如何使用其组件来创建用户流程来开始设计过程。

关于 SmashingMag 的进一步阅读：

• 如何制作有效的风格指南
• 生活方式指南工具的深入概述
• 自动化风格指南驱动的开发
• 作家和编辑的免费风格指南图标集

在这篇文章中，我将解释模块化在 UI 设计中的价值，以及它如何与样式指南驱动的开发过程联系起来，从而改进灵活和用户友好的应用程序的实现，同时帮助设计人员和开发人员更高效地协作。

UI中的模块化设计

模块化设计是将设计分解为小部分（模块），独立创建它们，然后将它们组合成一个更大的系统。 如果我们环顾四周，我们会发现很多模块化设计的例子：汽车、电脑和家具都是模块化的。 由于它们的模块化，这些系统的某些部分可以进行交换、添加、删除和重新排列。 这对消费者来说非常有用，因为他们可以定制系统以满足他们的需求。 您想要天窗、更强劲的马达、真皮座椅吗？ 你说对了！ 汽车的模块化设计允许进行这些类型的定制等等。

另一个很好的例子是宜家家具。 在下面的插图中，您可以看到设计的模块化不仅在于书柜的形状，这使得它可以设置在不同的方向，或者您可以在其开口处添加插入物，而且非常构成作品本身的部分，它们是不同大小的矩形，重复相同的图案。

从制造的角度来看，模块化设计也具有成本效益。 其中一个重要方面是，构建可以稍后连接的小型简单部件比一次构建一个大型复杂部件更容易且更便宜。 此外，该解决方案可以反复重复使用，从而最大限度地提高生产力。

创建 UI 设计的目标是相似的。 作为设计师，我们希望创建一个在构建和操作上都高效的 UI 系统。 当我们找到问题的解决方案时，我们希望能够在许多地方重用该解决方案。 这不仅节省了时间，而且建立了用户可以学习一次并在应用程序的其他领域重新应用的模式。 我们还希望能够针对某些场景定制系统，而无需重新构建所有内容。

这正是模块化给 UI 设计带来的东西：它带来了一个灵活、可扩展、经济高效、可定制、可重用和一致的系统。

模块化设计示例

在响应式网格、平铺窗口设计和卡片设计等模式中可以看到模块化 UI 设计的一些示例。 在所有这些中，模块被重复使用以提供灵活的布局，可以轻松适应不同的屏幕尺寸。 此外，这些模块充当组件的容器，使我们能够插入不同类型的内容和功能，就像可以添加到宜家橱柜的插件一样。

这是同质的吗？

如果模块化设计是关于设计一个系统，而 UI 系统大多包含相同的部分（按钮、字体、图标、网格等），那么您可能想知道：

• 模块化设计不是看起来都一样吗？
• 这将如何影响品牌识别？
• 如何使产品的 UI 独一无二？

这些问题虽然有效，但也引发了一个潜在的问题：产品设计的创新和独特性在哪里？ 这场争论最近有所抬头（参见“无法忍受的设计同质性”和“为同质化设计辩护”），但我想说，因为视觉设计是我们首先看到的，我们倾向于认为创新和独特性在于设计的外观。 然而，视觉设计只是其中的一部分。 产品设计的创新性和独特性需要在整个产品中体现出来：它提供的内在价值以及人们体验它的方式，包括它的外观。 坐一把椅子。 它必须是一把椅子，但并非所有椅子设计的外观、感觉或工作方式都相同。 事实上，椅子设计在历史上一直是设计和材料创新的领域。 同样，UI 也有自己的要求，使用被证明有效的模式并不意味着牺牲创新和独特性。 相反，解决客户遇到的特定问题需要创新和独特性。 模块化设计的美妙之处在于它鼓励我们将这些解决方案视为一个相互连接的系统，而不是为了与众不同而以孤立的方式寻找原始解决方案。 换句话说，应用到 UI 控件的创新设计不会只停留在应用程序中的某个位置，而是会渗透到整个系统中，保持凝聚力并提高可用性。

风格指南驱动开发的模块化

从实现方面来看，风格指南驱动的开发也是非常模块化的。 对于初学者，该过程从发现阶段开始：了解需要解决的问题、收集需求并迭代设计解决方案。 虽然设计解决方案通常作为一个完整的包或功能呈现，但它们实际上应该是样式指南中记录的系统的许多部分的组合。 设计的某些部分可能是新的，但仍应将它们创建为模块。 重点是使用样式指南来确定 UI 系统中哪些模块可以重用或扩展以创建设计。

（如果没有样式指南怎么办？别担心！我将在下一节向您展示如何以模块化方式进行设计，即使您没有使用样式指南。）

风格指南驱动开发的下一步是抽象阶段，这基本上是将设计解决方案分解为更小的部分的练习。 在此阶段，设计人员和开发人员一起工作，以识别提议的设计并确定将使用或增强的元素和组件（即模块），或者需要为实现而创建的元素和组件（即模块）。

抽象阶段也用于跟踪下一步的计划：实施和文档。 在此阶段，模块要么独立于现有模块的其余部分构建或增强。 在 Web 开发中，这意味着构建组件或为独立于应用程序的元素定义样式。 这是模块化的一个重要方面，因为它可以帮助您在流程的早期识别任何问题，防止与系统其他部分发生不可预见的依赖关系。 结果是更稳定的部分更容易集成到整体中。

样式指南驱动开发的独特之处在于，在实施过程中，文档也会发生，而不是事后才想到。 这是可能的，因为当使用风格指南生成器时，文档变成了生活风格指南，既可以作为框架，也可以作为实现的沙箱：

• 生活方式指南作为 UI 元素（如标题、列表、链接、输入控件等）的定义框架和组件库（如导航系统、工具栏、搜索工具、网格表等）。 ) 可供使用。 这意味着开发不是每次都从头开始。 相反，它建立在 UI 系统中的现有定义之上并为其做出贡献。
• 它也是一个沙箱，因为它用作构建和测试实现的演示空间。 这正是在将其集成到应用程序之前进行开发的地方。

样式指南驱动开发的最后一步，即集成阶段，类似于模块化设计中的组装步骤。 所需的 UI 元素或组件已开发并准备好集成到应用程序中。 剩下的就是配置和定制它们。 在集成过程中，样式指南就像任何用于组装物理模块化设计的优秀说明手册。

现在我们已经确定了模块化设计和样式指南驱动开发的基本概念，让我们来使用它们。

以模块化方式设计

想象一下：你提出了一个很棒的用户流程，将模型和原型放在一起来说明交互，并记录每个部分。 很有可能您的设计已经遵循样式指南，这可以使您处于极大的优势。 （如果没有，不要担心！）只需退后一步，开始在高层次上绘制设计解决方案的主要部分。 这些部分可能是完成某些事情的交互点。 例如，结帐流程可能如下所示：

但是拿着你的枪！ 这些还不是模块。 要到达那里，我们需要识别在流程中持久存在的 UI 元素，例如：

• 结帐步骤指示器，
• 用于输入信息的表单元素，
• 购物车中产品的表示，
• 其他人购买的相关产品的代表，
• 关于购买的政策，
• 帮助文本，
• 消息和警报。

再深入一点，我们还会发现样式和交互模式：

• 款式：

• 用于表示的颜色：

  • 错误、成功、警告和信息消息；
  • 主要行动与次要行动；
  • 非活动与选定与禁用状态；
  • 链接与常规文本；
  • 品牌推广；

• 用于表示不同类型内容的排版：

  • 用于分层排列信息的字体大小；
  • 用于突出显示消息或提供附加信息的字体类型；
  • 汇总信息的列表；

• 图像传达视觉意义和快速参考常见动作。

• 交互模式：

  • 显示即将执行的步骤（已禁用）；
  • 显示以前的步骤（启用以便可以编辑信息）；
  • 显示可编辑的摘要；
  • 用户点击离开该字段后验证信息；
  • 提供关于翻转的帮助文本；
  • 做出选择后更新购物车。

一旦设计被分解成所有这些较小的部分，我们最终将拥有我们的模块。 在这一点上，很容易看到它们中的许多不仅适用于结帐过程，而且适用于应用程序的许多其他领域。 通过模块化设计方法，可以创建这些模块，以便它们可用于此特定设计以及未来的设计。

原子设计值得一提，它是一种可以加速创建模块化设计过程的方法。 该方法使用化学作为类比分析系统不同部分之间的关​​系以及它们之间的相互关系。 完成这些步骤几乎与我们之前的练习相反：

1. 我们从atom开始，它们是系统中最小的模块（在我们的示例中，是按钮、排版和图标）。
2. 这些模块变得越来越复杂，结合在一起形成分子，提供更多功能（在我们的示例中，结帐步骤指示器和相关产品模块）。
3. 然后是有机体，它们是在应用程序中组合在一起的分子（在我们的示例中，是应用程序的标题和各种形式）。
4. 离开化学类比，下一个层次是模板，它们是放置生物体的预定义结构。
5. 最后，还有pages ，它们是模板的实例。

这里缺少的部分是一种记录已识别模块的方法。 这不仅是创建规范文档以捕获模块需要如何构建的问题，或者是编写捕获高级定义的指南，例如品牌颜色和字体系列（这是任何标准样式指南的典型）。 相反，文档需要更加复杂和动态，以便当这些模块发生变化时（你知道它们会发生变化！），文档不会过时。 这正是生活方式指南填补空白的地方！

使用生活方式指南

生活方式指南在设计过程中非常有用，因为它提供了几件事。

工作的基线

样式指南不是每次都从头开始，而是提供视觉方向和您应该用来创建设计的模块。

因为生活方式指南是从实际代码生成的，所以它反映了实施设计的最新和最好的版本。

设计解决方案的文档

为解决特定 UI 或 UX 问题而获得的知识可以委托以后使用。

这有助于保持实施的一致性，鼓励您将任何新解决方案融入当前设计的一部分。

您将开发用户可以熟悉的模式，从而提高可用性。

易于沟通

该指南通过提供最新的 UI 表示来帮助传达设计（不像静态模型，它很快就会过时）。

开发了一种通用的 UI 语言，因为您必须在样式指南中命名各种元素。 这不仅需要 UI 设计人员之间的协作，还需要设计人员和开发人员之间的协作，当您必须就如何实现设计进行沟通时，这是一个很大的优势。

无论您有现有的样式指南还是计划创建一个，自动化流程都会让您朝着正确的方向前进，以模块化的方式推动设计流程。 因此，如果您准备购买生活方式指南生成器，那么我推荐以下资源：

• “生活方式指南工具的深入概述”，罗伯特·哈里托诺夫，Smashing Magazine
• “模式库生成器概述”，David Hund，GitHub
• “风格指南生成器综述”，Susan Robertson，A List Apart

不要把它带到极端！

既然我们已经了解了如何微调设计过程以结合模块化以及生活方式指南的优势，那么让我们来探讨一下您在此过程中可能遇到的一些常见陷阱。

风格指南不能取代设计工作

经常听到经理说，一旦生活方式指南到位，大部分设计工作就完成了。 虽然完成了许多重复和琐碎的工作（例如一遍又一遍地对按钮的不同状态进行原型设计），但请考虑：

• 新功能将不断需要构建，
• 寻找解决方案涉及做出设计决策。

所以，是的，拥有一个生活风格指南并遵循风格指南驱动的开发改进了开发工作流程，但它并没有让设计师脱离这个等式。 拥有一个可以加快工作流程并促进沟通的工具对设计师和开发人员都是有利的。 但这种方法的优点在于它为自定义 UI 提供了很大的空间，从而增强了用户体验——并且认为这是设计师角色的一部分。

不要遵循极端的模式

我们应该始终努力在应用程序中使用模式。 例如，一致地使用颜色和字体大小可以快速向用户指示 UI 中可以与之交互的元素。 但是，避免仅仅因为它已经实现过就使用它； 相反，使用它，因为它确实解决了手头的问题。

例如，如果您已经建立了在屏幕顶部显示工具栏的模式，这种模式在大多数情况下都可以使用，但有时会在更靠近用户执行操作的位置呈现上下文工具栏时更有意义. 因此，总是质疑模式的重用是否优先于用户体验的易用性。

不要忽视设计迭代

这与前一点有点联系。 在尝试新模式和寻找设计界面的方法时不要忽视迭代和创新的价值，即使乍一看他们没有遵循风格指南。 风格指南不应成为您努力创造最佳用户体验的束缚。 相反，顾名思义，它应该是一个指南，一个帮助您通过利用以前的工作和经验来解决问题的起点。 设计阶段的迭代应该继续像以往一样重要，并且应该促使您改进已建立的模式。

维护负担

在你的工作涉及的无数事情中，维护风格指南应该是最后一件让人感觉像负担的事情。 为了克服这个问题，我发现以下做法很有帮助：

• 查找易于安装且易于定期交互的文档系统。
• 让文档更新成为您工作流程的一部分，而不是在实施完成后才考虑。 随手记录！
• 建立指导方针，使每个人都可以轻松地为文档做出贡献。 这将分配工作量并增加主人翁感。

设计模块化构建模块化

创建一个一致且易于定制、可扩展且具有成本效益的灵活 UI 系统不仅取决于它的构建方式，还取决于它的设计方式。 如果每个新设计都是独立创建的，而忽略了既定的标准和模式，那么组件库的价值就很小。

另一方面，它不是要制作千篇一律的界面来重用相同的样式和模式，因为它很方便。 一个好的设计之所以有效，不是因为它的独特性，而是因为它结合了形式和功能，创造了一种很棒的体验。 这个目标应该始终放在首位，并且使用诸如样式指南驱动的开发之类的方法来为设计和开发带来模块化应该可以帮助您创建一个有凝聚力的 UI 系统来实现这个目标。