3 步快速为设计系统创建组件

建立模块和式样是商品构筑强悍的结构设计控制系统的关键性。责任编辑深入细致回收了模块的构架，展现出了从建立单纯到繁杂模块的形式。

UI KitView on Dribbble →by Justin Rey

甚么是结构设计控制系统？

结构设计控制系统是结构雕塑家和开发者采用的，两个动态且分散的文件格式，能在当中找出大部份的结构设计式样和模块误以为商品构筑新介面。结构设计控制系统的目地是为每一人，不光是为采用者缔造一类完全一致的新体验。

甚么是模块？

模块是两个技术标准的 UI 原素，在商品的数个介面中多次重复再次出现。最轻微粒度的模块在氢原子结构设计基本概念中被称作氢原子，而最繁杂的被称作介面。

为甚么他们须要模块？

结构设计模块和结构设计控制系统是几项繁杂的辅助工具，除非在大部份项目组核心成员中展开共享资源，结构设计组织工作就会已经开始显得更为成功。模块能避免景丰纯，提升管理效率，不光是对结构雕塑家和开发者。

完全一致性和个性

每一商品都是独一无二的，有自己的个性；结构设计项目组须要了解并在大部份结构设计中复制同样的个性，以保持完全一致性，使商品在任何地方都具有相同的外观和感觉。

节省时间

模块能帮助项目组节省时间；首先，结构雕塑家不须要多次重复结构设计原素，其次，结构雕塑家能从一组模块中挑选出最适合需求的。

代码风格指南

前端项目组必须致力于建立可扩展、易读且可维护的代码。如果不强制执行代码完全一致性，很容易分崩离析，让每一人都为自己而不是团体编写代码。

独特的语言

有很多人参与并致力于商品；从利益相关者到开发者、项目经理、结构雕塑家或客户服务代理。结构设计模块作为共同语言将有助于在整个公司内轻松沟通。

测试

将应用程序或网站的大部份原素模块化有助于测试在不同页面上再次出现的相似故障。每一页面的页脚都出故障了吗？你只须要修复两个模块，问题就解决了。

模块基础知识

模块类型

正如我之前提到的，我喜欢采用 Brad Frost 的氢原子结构设计基本概念，因为它可扩展且定义明确。建议将模块分为三类：

1.单纯模块:

无法进一步分解的 UI 原素，它们能作为结构设计控制系统的构筑块。图标或按钮就是很好的例子。

2.复合模块:

两个或数个单纯原素组合在一起的集合。搜索栏就是两个例子，两个模块是搜索栏，第二个模块是搜索按钮。

3.繁杂模块:

由两个或数个复合原素构成的繁杂模块，这些复合原素共同形成介面的某些离散部分。页脚、页眉或弹出窗口是繁杂模块的示例。

三种类型的模块

模块的变体

我发现了模块的三种主要变体。第两个变体是指两个模块的数个状态；第二个变体是根据显示模块的终端而改变的模块；第三种是根据其原素数量而变化的变体。

1.模块的状态：

模块由于人机交互而具有的不同状态。比如具有默认状态、按下或悬停状态的按钮。

模块的状态

2.移动设备与台式机（或其他设备）：

如果模块显示在移动设备、台式机上，或者是用于打印，它的外观也会发生变化。举个例子，两个带有图像、按钮和一些文本的卡片模块，如果它显示在移动设备或桌面上，它的外观会发生变化。主意查看下图模块的顶部。

左边是手机，右边是台式机

3.数量：

两个模块会由于原素数量的变化产生不同的变化。举个例子，一张只有两个图标的卡片，和有两个或三个图标的卡片。

数量的变体

模块的构架

当建立两个模块的时候，他们能把它分成三个不同的步骤。我喜欢用人体来比喻；他们已经开始建立模块的器官，他们继续创建骨骼，最后添加皮肤以使其美观。

3 步建立模块

1.器官：

就像建筑师用单纯的线条和数字建立初稿一样，他们也会这样做，他们采用线条、形状和数字来勾勒出模块的粗略基本概念。这将帮助他们和他们的开发伙伴了解模块的结构。

模块的器官

此示例展示了在模块中采用的间距。我采用八像素网格将小模块放置在大模块中。以助于帮助开发者了解原素的结构。

2.骨骼：

除非他们有了模块的基本形状和尺寸基本概念图，就能在里面绘制内容了，此时不采用式样。

骨骼

在此示例中，步骤1中单纯的形状已转换为更明确的图形原素，并且 Lore Ipsum（假字）文本被添加到模块中。此时，尚未添加最终式样。

3.皮肤：

将式样应用到步骤2中的模块上，并添加颜色、排版和其他效果（例如阴影）。

皮肤

到这一步，你就能看到最终的模块的模样，比如，一组进度条圆圈，里面有两个图标，下面有两个描述性文本，已应用颜色和效果。

模块的价值

模块是整个商品中采用的结构设计原素的清单，这种模块化的形式让我想起了乐高的积木，一块积木不能建造一座城堡，但更多一些积木就能建造一座漂亮的小屋。

要建立模块，我建议采用以上三步来尽可能地减少遗漏任何原素的风险。首先，放置大部份原素，注意尺寸和间距，然后建立图形，最后应用式样使其美观。

作者 Oriol Banus

译者 采用者新体验结构设计UX