[译] 在 Sketch 中使用一个设计体系创做：第一部分[教程]

时间 2019-11-21

标签 sketch 使用一个设计体系第一部分教程繁體版

原文原文链接

原文地址：Creating with a Design System in Sketch: Part One [Tutorial]

原文做者：Marc Andrew

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：pmwangyang

校对者：Zheng7426

在 Sketch 中创建一个设计体系并使用它工做

🎁 想用个人优质 Sketch 设计体系大幅优化你的工做流程吗？你能够点击这里获取 Cabana。

使用推广码 MEDIUM25 购买可享 75 折优惠。前端

我看到过许多介绍创建 Sketch 设计体系元素的教程，可是不多有教程会实际上教你在练习中建立新的、特别好的设计体系。android

这就是我这一系列教程想要作的 —— 不只仅是教你建立设计体系的元素，还有如何用你建立的体系设计一个适配多个设备的 iOS App，而且告诉你我如何构建本身的体系以及背后的思考过程和决策。ios

系列导航

设计体系总览

好，在咱们埋头开始设计咱们这很是华丽且风格相似 Medium 的 iOS 应用以前（谁说山寨来着？），咱们对一会教程中将要用到的设计体系（基于 Cabana-Lite）的 Sketch 文件进行一个快速概览。git

在设计版式（开始）文件中有三个页面……github

Design System (Setup) 设计体系（设置）
Symbols 组件
Format 格式

让咱们按顺序说……后端

设计体系（设置）

这就是见证奇迹的地方！这里能够管理你的项目中至少 90% 的样式。app

设置这些元素为基准颜色或文字样例，这样你调整它们的时候，你的全部设计都会自动适应变化。布局

你在这里的全部改动会映射到组件页面（一会咱们会涉及），固然，也会自动适应到你当前的画板上。post

在这个页面上有 2 个画板……学习

Colors + Overlays + Duotone （译者注：画板名比较小，注意左上角>_<）
Typography (咱们会在第二部分涉及到这个画板)

Colors + Overlays + Duotone （颜色 + 覆盖色 + 双色调）

经过这个画板你能够看到，我将全部的颜色资源组织到了一块儿。如基准色（Base Colors），叠加色（Color Overlays）和图片效果（在这个例子里是双色调效果 “Duotone Image”）。

其实在我我的的 Cabana 设计体系里我作了一点分割，将基准色、叠加色添加到了 Colors 画板，像双色调图之类的添加到另外一个名为 Various 的画板，这个画板还包含渐变、边框阴影等。但我想让你感受这个教程更紧凑些，因此采起这样的布局方式，还能够吧？

Base Colors（基准颜色）

在这个系列教程里，设计咱们的 iOS App 只须要 4 种基准色。若是你建立你本身的体系，须要在一个大型项目中覆盖全部的基准色，建立像下面这些基准色是一个明智的选择（固然这只是建议）……

Primary （原色，译者注：或者能够称为“主题色”）
Secondary （二次色）
Tertiary （第三色）
Black （黑色）
Grey （灰色）
Light Grey （淡灰色）
Success （成功色）
Warning （警告色）
Error （错误色）

你能够把上面的列表替换成本身想要的内容，好比移除第三色、添加另外一种深度的灰色，以得到一些自定义元素，来完成适合本身设计体系的一些项目。

好，让咱们回头看看这些基准色，我给你一些在我本身的设计体系中设置基础颜色的秘诀 —— 使用 图层样式。

咱们首先设置一下原色描边，建立一个 200x200 的矩形（快捷键“R”），移除填充色，用我选定的十六进制颜色设置 1px 的描边，并设置圆角半径为 4。

而后建立一个新的图层样式（在 Prototyping 栏中选择 Create new Layer Style）……

并把它命名为 Border/Primary （描边/原色）……

再设置一个原色填充矩形，建立一个200x200 的矩形（快捷键“R”），选择我选定的十六进制颜色，并设置圆角半径为 4。

而后建立一个新的图层样式并命名为 Fill/Primary （填充/原色）。

而后我将这两个矩形重叠，你可能要问，为何这么作？

这容许咱们使用这样的设计体系时，仅仅选择一次就能很容易的修改图层样式，从而改变描边和填充色。

这样占据的屏幕更小，而且最重要的是，比这儿放一个 A 元素那儿放一个 B 元素改动起来快多了。

接下来，我在合适的位置设置好全部的基准色和对应的图层样式后，给它们设置好名称（好比 Primary、Black、Grey 等等）。

如今我有了方便的参考点，而且鼠标点几下就能调整。好比，若是须要改变原色，选中它，再选择图层样式，就所有搞定了不是吗？不须要任何多余操做，也不用忍受“不不不，我不是要选中这个元素”这种使人抓狂的事。

接下来重复这个过程，将我上文提到过的全部其余基准色（黑色、灰色等等）设置好图层样式，命名为和 Border/Primary 和 Fill/Primary 一样的格式。

Color Overlays （颜色叠加层）

在这个教程里，我只在叠加颜色中创建了一个名为 Black（黑色）的叠加层。

把 Black 层叠加到图片上来调整对比度很容易，它的十六进制色统一地取自基准色 Black（黑色）。

就像我提到的基准色同样，触类旁通，在你的设计体系中，实际上只要让叠加层来匹配如下几个基准色……

Primary 原色
Secondary 二次色
Black（刚刚这个例子中使用的）

我来给你一些指引，告诉你如何建立颜色叠加层，固然，在个人设计体系里，仍是使用图层样式。

如今我主要讲解下面教程里将要用到的黑色叠加层。

建立一个 432x248 （这个尺寸是我随便选的，你能够设置其余尺寸）的矩形（快捷键“R”）并设置圆角半径为 4（我的喜爱，这样看起来更漂亮一些），粘贴以前建立的 Black 基准色的十六进制色值，而后设置不透明度为 60%。

而后建立一个新的名为 Overlay/Black**（叠加层/黑色）**的图层样式。

这就完成了，可是考虑到这个叠加层 99% 的状况是覆盖在一个图片上，我想如今最明智的事，是在新的叠加图层样式旁边添加一个小小的预览。就像我刚刚提到的，它在个人设计中位于图片的顶部，这意味着我能够更好的预览叠加层的效果，而且容许我调整它的不透明度，直到我对结果满意为止。

让我来教你怎么作……

首先建立一个和前面建立过的颜色叠加层尺寸一致的矩形（R），而且用图片填充它。

接下来建立一个一样尺寸的矩形（R），覆盖在图片上，而后套用刚刚建立的 Overlay/Black**（叠加层/黑色）**图层样式。

就像我刚才说的同样，如今我有一个实时的预览，能够观察叠加层添加到图像时的外观，并能够相应地调整，直到我对结果满意为止。

Duotone （双色调图）

最后，让咱们来学习双色调图片，咱们在教程中只展现了一种双色调图片样式，可是在 Cabana 设计体系中我建立了 9 种之多。

是的，像双色调图片或者渐变的存在只是为了好看，并非你本身设计体系里像基准色和阴影（译者注：也可译为“图层阴影”）同样的必要元素。但我为何提到它们呢？由于你永远不会知道你的项目中会包含什么玩意儿。

好，在咱们完成这部分教程以前，让我告诉你如何用我本身的体设计系和设计版式（开始）文件快速建立双色调图片，咱们能够称之为“奖励关卡” ^_^

像我刚刚作叠加层图像预览同样，建立一个矩形（R），用图像填充它。

而后只须要在元素中添加几个额外的填充颜色，并调整混合模式，直到有一些颜色能够透过来，就像文件中包含的示例那样，这就叫“双色调”（当当当当！过关~）……

#041674 & Lighten 光照
#1EDE81 & Multiply 正片叠底

咱们来优化一下，在检查器中拖拽来从新排列填充样式，直到以下图所示

如今给这个预览起个酷炫狂拽吊炸天的名字（好比：哥布林），机智如我！

好了，这一系列教程的第一部分就圆满结束了，记得回来和我一块儿学习第二部分哦。第二部分会涉及设计体系中的文字排版，还有我如何整合这一部分到设计体系中的重要的提示和建议。

跳转到第二部分点击这里…

🎁 想用个人优质 Sketch 设计体系大幅优化你的工做流程吗？你能够点击这里获取 Cabana。

使用推广码 MEDIUM25 购买可享 75 折优惠。

感谢阅读

马克

设计师、做家、父亲以及哈什·布朗斯的爱人

若是发现译文存在错误或其余须要改进的地方，欢迎到掘金翻译计划对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。