前言

17号@远舟在杭州D2分享了《解构设计，抽象工程》，其中涉及到一个可以让设计师完美与前端结合的工具。这样的工具是不是可以有更多的玩法呢？今天给大家分享掘金翻译项目@瑞曦的翻译。

正文从这里开始~

前端框架

需要考虑的事项：

当我们与一大群设计师一起合作一个项目时，达成共识可能非常困难，尤其是当涉及具有明确美学要求和特定行为和交互的系统项目时。

我们可以用来规范界面的手段之一就是定义一个风格指南（纯粹从视觉角度而言），它可以帮助整个设计团队避免未来可能的变化带来的不必要的工作时间并提高工作效率，让我们能够更好地专注于应用中组件和交互的行为。

一份优秀的风格指南需要被团队所有成员采用，比如开发人员、产品负责人、项目经理，甚至客户。这对各成员之间的沟通和合作大有裨益。我们把这种“升级版”的风格指南称为前端框架（FEF）。

在开始创建样式指南之前，请牢记以下几条原则：

让我们开始构建前端框架

步骤1，定义IA：

第一步，定义内容（根据项目不同，划分如下）：

第二步，创建前端框架内容：

样式——首先需要定义原色、次色和其他辅助色，并指定它们适用的RGB颜色值。

颜色

然后在其中创建样​​式，以优化您未来设计工作的工作流程。

创建新的样式合理的组件命名，会使前端框架中的样式表更加条理化。

这样，当我们想要快速改变某个组件的颜色时，只需要在样式中改变就可以了，而且可以保证不会混入其他颜色。

对于布局，步骤类似：

详细定义设计中将使用的字体，包括主要字体和次要字体。

与颜色类似，在中创建样式。

创建字体和颜色的样式后，添加将要使用的整套图标并将其转换为。这样，如果有人更改它们，所有使用它们的地方都会同时被修改。

提示：创建相同图标的不同状态，并按照组件名/状态/子状态的规则命名。这样我们就可以从主菜单轻松访问所有状态，而不必修改原始图标。

这也适用于具有多个状态的组件，例如复选框。相应的命名约定是：

这些将出现在顶部菜单的插入下。

这样，修改状态就变得简单很多，有效解决了很多设计中的麻烦。

步骤3，创建组件：

定义通用样式并在 中创建样式后，开始处理将在整个应用程序中重复使用的组件（例如主导航、下拉菜单、弹出窗口、数据网格等）。这主要是为了让所有设计师在创建新屏幕时保持一致。

我喜欢用这些组件作为示例：

，如果设计师想要改变背景颜色，只需在样式中选择相应的颜色即可。

表格——提示：通过使用文本框作为 *，无需访问正文即可修改内容。

每个组件必须附带一段描述文字（何时使用以及行为如何）。如有必要，您可以在右侧指定一个部分来描述尺寸、边距和样式。

此规范的重点是向开发团队提供信息，以便他们可以将其添加到同一文档中或作为沟通工具。这样您就可以获取 css 值并下载组件。

第四步，行为表现：

有些组件的大小（宽度和高度）由我们使用的网格的大小决定，例如数据列表或数据网格。对于这种类型的组件图，提供了一系列选项来预定义每个元素的位置，并且表格将具有响应性。

如何实现响应式效果？在V39中新增了4个选项来实现此效果。

选项如下：

要了解有关创建此类表的更多信息，我推荐以下文章：#。

步骤 5，参考

最后，除了在所有应用程序中维护一种设计语言之外，每个元素的结构也可能随着产品需求和要求的变化而变化。

因此建议创建一个最后一章sketch怎么用，展示如何根据功能需求使用组件，以便设计人员可以分析和学习如何在不同的架构中重用样式。

共同的未来

在一个复杂的项目中，将所有团队成员的工作统一到一个样式指南上可以大大提高工作效率。这种协调可以有效避免诸如“某个组件在较小分辨率下的行为是什么样的？”这样的问题。

大多数时候，我们总是专注于尽快推出初始版本，因此在产品生产过程中会出现问题。在这种情况下sketch怎么用，前端框架可以发挥作用并避免一大堆麻烦。

最后，这只是一个工具。如何入门和与设计师合作推广取决于你。我之前分享过类似的文章，你可以回复查看。

关于此

译者：@Ruixi

如何使用

如有侵权请联系删除！