墙外干货：如何通过风格指南驱动模块化交互设计

使用风格指南驱动开发是一个可在前端开发中获得大量牵引力的实践——这背后的原因也是极有道理的。开发人员将在风格指南中加入新的代码或更新现有的代码，从而有助于稍后集成到程序中的模块化的用户界面系统。但是为了实现模块化UI系统，我们必须以模块化的方式进行设计。

 

模块化设计鼓励我们思考并且做到UI和UX模式化设计。例如，我们设计始于了解用户界面系统结构以及如何用它的组件来创建用户流，而不是设计一系列的页面或视图只是使用户完成任务。

 

在这篇文章中，我将说明UI设计模块化的价值以及它是如何灵活、方便地驱动开发执行应用程序

的，从而帮助设计师和开发人员更有成效的合作。

 

UI中的模块化设计

模块化设计就是将一个设计分解成小部件（即模块），并独立地创建它们，然后将它们组合到更大的系统中。如果我们环顾周身，我们会发现许多模块化设计的例子：汽车、电脑和家具都是模块化的。由于它们的模块特性，所以系统内部是可以被交换、添加、删除和重新构建的。这对于消费者是有益的，因为他们可以得到定制系统以满足自身的需求。你想要一个天窗，一个更强大的发动机，真皮座椅？是的！汽车的模块化设计就需要自定义这些类型甚至更多。

 

另一个很好的例子是宜家家具。在下面的插图中，你可以看到模块化设计不仅在于书架的形状（这使得它能够在不同的方向上摆放，或者你可以在其开口添加插口），也在于家具本身的部件（大小不同的矩形，重复着同样的样式）。

 

 

 

 

宜家卡拉克斯书柜的设计是模块化和定制式的一个很好的例子：模块化部件被用于建造书柜，其他部分可以被插入以添加功能。

从制造角度来看，模块化设计也是具有成本效益的。这方面重要的一点是，相比较一次性建立大型而复杂的成品，建立小而简单的部件加以连接是更容易和更便宜的。此外，该解决方案可以被重复使用，最大限度地提高了生产力。

创建用户界面设计的目标是相似的。作为设计人员，我们想要创建一个结构和操作都非常高效的用户界面系统。当我们找到问题的解决方案时，我们希望能够在许多地方重复运用该解决方案。这不仅节省时间，而且还建立了一种模式，用户可以通过一次性学习并应用在其他领域。在某些情况下，我们也希望能够自定义系统，而无需重新调整一切。

这就是模块化带给用户界面设计的：它会建立一个灵活的、可扩展的、节约成本效益的系统，而且也可定制，重复使用并且是一致的。

模块化设计的例子

模块化用户界面设计的一些例子可以在响应式网格，瓦片式设计和卡片式设计中见到。模块被重复使用，以提供一个灵活的布局，很容易适应各种不同的屏幕尺寸。此外，模块作为容器组件，使我们能够插入不同类型的内容及功能，就好像可以被添加到宜家橱柜的小插件一样。

 

NASA uses Bootstrap’s grid todisplay a card layout.

 

The card design used in a masonry layouton Pinterest

 

这会相似么？

如果模块化设计是关于系统设计的，UI系统主要包括相同的部件（按钮、字体、图标、网格等），那么你可能会质疑：

 

模块化设计不都看起来一样么？

它将如何影响品牌形象？

如何才能使产品的用户界面是独特的？

 

这些问题提出一个潜在的问题：产品设计创新和唯一体现在哪里？最近兴起这场辩论（见“难以忍受的同质化设计”和“抵御同质化设计”），但我会说，视觉设计是我们首先看到的，所以会倾向性的认为创新和独特性在于设计的外观。然而，视觉设计只是其中的一部分。产品的创新和独特需要考虑都产品的全部：它提供的内

 

在价值以及给人们带来的体验，也包括它的外观。

 

比如说椅子。它的需求就是一把椅子，但不是所有的椅子从设计外观、感觉或功能都是一样的。事实上，椅子设计一直是设计和材料方面的创新领域。同样，UI也有自己的要求，使用已有的设计模式并不意味着牺牲创新和独特性。

 

相反，创新和特异性同样需要去解决客户特殊的问题。模块化设计的美在是它可以鼓励我们用相互联系的系统部件做解决方案，而不是为了寻求不同而以孤立的方式找到初始的方案。换言之，创新设计应用到用户界面控件中不会只是应用程序中的某一个地方，而是渗透到整个系统，保持凝聚力和提高可用性。

 

风格化开发的模块性

 

从实施方面来看，风格化的开发也很要模块化的。首先，这一过程始于一个发现阶段：了解需要解决的问题，收集需求并且通过设计方案来迭代设计。虽然设计解决方案通常展示为一个完整的包或功能，他们真正是记录在风格指南中许多部分的集合体。设计的某些部分可能是新的，但它们仍应该被建立为模块。重要的是使用样式指南来判断哪些模块在UI系统中可以被重复使用或扩展延伸以创建新的设计。

（要是没有了风格指南呢？不要烦恼！我会在下一节告诉你如何以模块化的方式来设计，即便你没有使用风格指南。）

风格化开发的下一步是抽象阶段，基本上是将设计方案分解成更小的部分。在这一阶段，设计师和开发人员一起工作以识别该设计中的元素和组件（即模块），他们将会被使用、或扩展、或创建实施。

 

 

图解风格化开发

 

抽象阶段为下一步计划提供了良好的溯源：实施及归档。在这个阶段中，模块在现有的模块中被建立或被增强。在Web开发中，这意味着建立组件或定义应用程序中某个元素的样式。这是模块化重要的方面，它可以帮助您在早期发现问题，防止系统其他部分不可预见的依赖关系。其结果是筛选出更加容易整合成整体的稳定的部分。

 

关于风格化开发的独特之处是，实施过程中，文档是需要参考的，而不再是事后的想法。这是可能的，因为当样式指南生成器被使用时，文档成为一个活生生的样式指南，不但可以提供框架还可为开发筛选。

 

风格指南可以作为定义UI元素的框架（如标题、列表、链接、输入控件等）以及可以使用的组件库（如导航系统、工具栏、搜索工具、网格表，等等）。这意味着开发不是每一次都要从零开始。相反，它是建立在用户界面系统中现有的定义中，并有助于它。

 

它也是一个“沙盒”[sandbox]，因为它作为一个示范空间来建立并测试。他们被开发完后集成在应用程序中。

 

风格化开发的最后一步是集成阶段，类似于模块化设计中的装配步骤。需要的UI元素或组件已被开发，并准备集成到应用程序中。还要完成配置和自定义它们。在集成过程中，风格指南就像是用来指导组装物理模块的手册。

 

我们已经明确了模块化设计和风格化开发的基本概念，让我们使用起来。

 

以模块化的方式设计

想象一下：你已经想出了一个用户流程，将草图和原型摆在一起来说明其相互作用，并且记录每一个部分。偶然的，你的设计已经遵循了风格指南，这样可能会让你拥有很大的优势。（如果没有，不要紧张！）退后一步并在一个高的层次开始映射设计方案的主要部分。这些部分可能是完成某些事情的节点。例如，结帐流程可以看起来像这样：

 

图解买单过程

注意！这些还不是模板。要到达那个目的，我们需要确定其中的UI元素，如：

结帐步骤指示器，

用于输入信息的窗体元素，

产品在购物车中的表现，

其他人购买过相关产品的表现，

购买政策，

帮助文本，

消息和警告。

 

Mockup design of the cart page

 

Mockup design of the shipping page

 

Mockup design of the billing page

 

Some of the UIelements that persist in the design

 

坚持设计中的一些用户界面元素

挖掘更深一点，我们也会发现风格样式和交互模式：

 

样式：

用于表示的颜色：

错误提示、成功提示、警告提示及信息提示；

原发性和继发性行为；

无效状态、中状态与禁用状态；

链接与常规文本；

品牌；

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

分层信息的字号；

突出信息或提供附加信息的字体类型；

列表汇总信息；

图像传达的视觉意义和共同行动的快速参考。

 

交互类型：

显示即将发生的步骤（禁用）；

显示上一步骤（启用，以便信息可以被编辑）；

显示可编辑的摘要；

一旦用户单击了字段，则验证信息；

提供帮助文本；

一旦选择便更新购物车。

 

设计中的一些风格

 

一旦设计被分解成这些小的部分，我们最终会得到我们的模块。在这一方面，很容易看到，他们不仅适用于结帐过程，还适用于许多其他领域的应用程序。有了模块化的设计方法，这些模块可以被创建，使他们能够在这个特定的以及未来的设计中使用。

 

原子设计作为方法学是值得一提的，它可以加速模块化设计过程。该方法利用化学作比喻，分析系统的不同部分以及它们之间的联系。

我们从原子开始，系统中的最小模块（在我们的例子中的按钮、字体和图案）。

 

该模块复杂的增长，结合在一起形成分子，提供更多的功能（在我们的例子中的结帐步骤指示及相关产品模块）。

 

然后，应用程序中的分子集聚到一起形成有机体（在我们的例子中各种各样的应用程序）。

 

通过化学类比，下一个层次是模板化，它是一个预定义的结构，在那里放置着生物体。

 

最后，通过模板编写的网页实例。

 

这里缺失的部分是记录已确定模块的途径。这不仅是创建规范文档以掌握模块如何被建立的问题，或书写捕捉高层次定义的指导方针，如品牌的颜色和字体的问题（这是典型的标准样式指南）。相反，文档需要更加复杂和富于热情的，所以当这些模块变化时（你知道他们会！），文档不会过时。这正是风格指南填补空白的地方！

 

使用动态更新的风格指南

动态更新的风格指南在设计过程中是非常有用的，因为它提供下面这些东西：

 

工作的基线

每一次，风格指南提供了视觉方向和你应该使用创建设计的模块，而不用从头开始。

因为样式指南是由实际代码生成的，它反映了实现设计的最新和最好的版本。

 

设计方案文档

解决特定UI和UX问题的方法用于以后的使用。

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

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

 

易沟通 

该指南通过用提供户界面的最新代表来帮助交流（不同于过时很快的静态模型）。

常见用户界面语言的发展源于你必须要在其中为各种元素命名。这不仅需要要UI设计师之间合作，而且需要设计师和开发人员共同合作，当你们沟通如何实施设计时这是很大的优势。

 

无论你已拥有一个风格指南或是计划创建一个，选择自动化过程将是正确的方向，将以模块化的方

式驱动设计过程。所以，如果你准备购买一个风格指南，那么我会建议以下资源：

“风格指南工具的深入概述，”RobertHaritonov，SmashingMagazine

“模式库概述”DavidHund，GitHub

“风格指南发生器”，“SusanRobertson，AList Apart

 

不要太过极端

 

现在我们看如何通过调整设计过程去合并模块，以及样式指南的优点，让我们来探讨一下你可能遇到的陷阱。

 

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

常听管理人员说，一旦有了风格指南，大部分的设计工作就已经完成了。虽然是完成了许多重复和琐碎的工作（如原型中一个按钮的不同状态），但考虑下：

新的功能需要不断被建立，寻求一个涉及到设计决策的解决方案。

因此，是的，拥有一个风格指南和风格驱动的开发，会提高开发工作流程，但它并没有把设计师跑出在外。有一个加快工作流程和促进沟通的工具有利于设计师和开发人员。这种方法的伟大在于，

它给个性化UI设计大量的空间，从而提高用户体验——这是设计师角色的一部分。

 

不要极端地跟随模板

在应用程序中，我们应该始终努力使用模板。例如，使用一致性的颜色和字号的可以很快地传达出在UI中的用户元素是联系的。然而，避免使用一个模式只是因为它之前已经实现了，而是因为用它可以解决手头上的问题。

 

例如，如果你已经建立了在屏幕顶部显示的工具栏模板，这种模板将可以在大多数情况下使用，但有时会呈现一个上下文工具栏，更接近用户行动，更有意义。所以，要去质疑一个模板的重用是否是低成本开发用优先于户体验的实现。

 

不要忽略设计迭代

这与上一点是有联系的。当尝试新模板并寻找设计界面的方法时，不要忽略迭代和创新的价值，即使第一眼看他们没有遵循风格指南。风格指南不应该限制你的努力，以创造最佳的用户体验。确切地说，顾名思义，它应该是一个指南，一个起点，帮助你通过挖掘以前的工作和经验来解决问题。设计阶段的迭代要像以往一样重要，激励你改进既定的模式。

 

维护

工作中涉及到的许多东西中，保持风格指南是感觉负担的最后一件事。为了克服这个问题，我发现以下做法很有帮助：

寻找一个易于安装和易于定期交互的文档系统

使文档更新成为工作流程中的一部分，而不是事后想法的实施。随时记录！

建立指导方针，使每个人都很容易共享文档。这将分配工作量并增加归属感。

 

模块化设计以建立模块

 

创建灵活的、一致的、易于定制的用户界面系统，同时也具有可扩展性和成本效益，不仅取决于它的建立过程，也取决于它是如何设计的。如果每个新的设计都是独立创建的，忽略了既定的标准和模式，那么组件库就变得没有价值了。

 

另一方面，因为它很方便但也不是重用相同样式和模式的千篇一律的界面。好设计的高效不是因为它的独特性，而是因为它结合形式和功能创造了伟大的体验。这个目标应该永远是最高级的，使用风格化开发带来模块化设计和开发，应该可以帮助你创建一个有凝聚力的用户界面系统。

 

                                           ——End——

原文地址：https://www.smashingmagazine.com/2016/06/designing-modular -ui-systems-via-style-guide-driven-development/

译者：马士博，UI设计师 

声明：本文由设计夹翻译小组成员马士博翻译并整理，如需转载，请申请授权并保留译者全部信息，转载合作请添加微信：sezign01。更多精彩内容请关注设计夹