丁香园 F2E

花厂设计招待所

学会在 Sketch 中创建设计系统


前言

我在 Medium 上面看到了一篇关于如何使用 Sketch 制作的设计规范的文章,然后觉得还不错,就顺便翻译了一下。我自己也稍微照着文章的思路做了一下,不过这种设计系统需要团队的同事一起协作才能完成,希望大家看完自己也去尝试一下。

译文

最近,我正试着在 Sketch 中构建一个设计系统 。构建它虽然很耗时,偶尔还会令人沮丧,但我很享受这个过程,我很高兴我做到了。

有了这个设计系统(顺便说一下我称呼它为 Canbana )之后,它已经提升了我十倍的工作效率。当我投身其他任何项目的时候,它成为了我坚强的后盾。

受到我所遇到过的其他系统的启发,我很惊讶的是这种节省时间的方式已经成为了我日常工作中的一套系统。在我的最后一篇文章种虽然只是稍微提到了一些,但是它的确大大提高了我工作效率。令我抓狂的是,我并没有在更早的阶段把它运用到我的工作流程中。

一开始跟大多数人一样,我对那些反对者的所说的,“为了一个按钮竟然用了4个嵌套覆盖样式,我觉得那样的做法并不酷。”这样的话表示极为的赞同。

当你第一次在 Sketch 中使用这个新系统的时候你会感到一些困惑,因为在 Sketch 里面这是一个不同于其他处理项目的方式,它跟你以前所适应的习惯稍微有些不同。

说实话,当你摆脱了那些设计系统的基础训练,你会发现你就像在无人驾驶,敏捷的在项目中穿梭,这一切对你来说就好像本能一样。

让我们开始吧,在搭建一个极棒的高耸结构的设计系统之前,我将告诉你一些基础的搭建工作。


先从这些颜色开始


在 Cabana 和其他你创建的系统中,你都应该尽可能的使用最少的颜色,你可以使用不同的色调,但是在最基本的颜色上你应该让这个颜色的数量降到最低。

首先创建一个设计系统的关键是要有一个精致的元素和样式库,这样可以在任何项目上工作的更加严谨。有了这个参照,就可以让你避免在设计一个页面到下一个页面时使用了 12 种不同的颜色和许多细微变化大小的字体。我对我过去所做的感到愧疚,相信你们也一样。

在 Cabana 中,我使用了三种通用的颜色构成,一级颜色、二级颜色、三级颜色。不多也不少,足够应对不同的项目需求。

当然还有必不可少的黑色,2 种灰色色调,白色,50% 的不透明度的白色(主要是叠加在一些比如图标的元素上)。

还有一些默认的颜色,红色、绿色、黄色,分别表示错误通知,成功,警告。错误通知一般是用在一些通知消息,表单文本和输入文本框的外框。


一旦我有了基本的颜色,我就可以简单的取出一些颜色,即一级,二级,黑色,然后创建一个简单的颜色叠加,60% 的不透明度可以使用在项目中的任何图片中。这个过程非常简单,只需要从基本颜色中提取十六进制的色值,然后使用 60% 的不透明度,并创建共享样式,即 叠加/一级色。




现在再来谈谈字体


当创建 Cabana 时,最多使用 2 个字体家族,一个用在标题,另外一个用在正文文本。这个方法同样适用于你正在工作的其他任何项目。

我选择 Poppins 和 Open Sans 字体因为他们作为基础字体相得益彰。

在一开始选择字体的时候没有对和错,因为当前的文字只是用来构建这个项目而已,但是比如对于最初的原型,他们的作用仅服务于标题和文本,目的是为了减少分心。您的唯一目的是使用像 Cabana 系统进行纯粹的原型设计,假设你使用像 Merriweather 这类字体,他们就会分散你的注意力。

使用 Poppins 字体家族时,我从 Uber 字体样式开始,这种字体样式在大多数的情况下都不适用,但是从我过去测试过其他设计系统时发现,他们的最大的字体样式中的字体大小往往不够大,尤其是当你的产品同时会出现在手机端和电脑端时。这就是为什么在 Uber 上使用了 111pt 的字体大小。

然后我开始使用模块化的缩放方法将字体排版分为 H1 到 H5,我的正文字体设置在 18pt,使用 1.2 倍行间距。

为了提高易读性,我给正文设置了更为健康的 18pt 字体,因为有时候我和其他人一样会选择一些深灰色或者类似的颜色作为正文。

跟标题和正文样式一样,我增加了 Lead,Small,Caption 和 Tiny 的样式。遵循之前的设置好的字符间距除了 Caption 之外。


我给每个样式(Uber,Hero,H1,H2,Body 等)创建了常规和加粗的两种字重。当我看过其他系统后,想用细体替代常规(或者仅仅在标题用粗体,而不使用常规字重),后来知道并不是所有的字体家族都能够有足够的字重和样式,当你的设计依赖细体字重的时,在 Sketch 中替换字体家族时候会给你带来很多工作量,所以我一般都尽量避免。而仅仅使用简单的常规和加粗,我觉得中等也是一个不错的选择。

在 Open Sans font 字体家族我也同样重复操作。确保让这两个字体家族能够使用,我创建了左对齐、中间对齐、右对齐字体样式(虽然我们很少使用右对齐字体样式,为了安全起见,我还是创建了它)


一旦我创建了两个字体家族(Poppins 和 Open Sans font)黑色版本的字体样式,我开始创建其他颜色版本的字体家族样式。



使用之前的我设置的十六进制颜色,我创建了其他的字体样式,灰色,浅灰色,白色,主色,红色,绿色。



多样化

阴影


在设计系统的各个部分,我首先关注了边框阴影。在 Sketch 中快速创建形状并在几秒钟内为其分配不同强度的阴影的能力大大减少了在 Sketch 检查器中创建阴影所需的时间。


渐变色和双色调

不可否认我是根据趋势来整理渐变色的,这里我们不讨论整个渐变色,我把他们放进设计系统时因为他们有自己的用处,适当的使用可以有一些不错的效果。

同样是双色调,我也放进了设计系统里面,渐变和双色调对于设计系统来说好像有点多余,在最初的设计阶段只需创建颜色和排版,我添加他们是为只是为了补充,在设计过程后期阶段可以节约一些多余的步骤。


8pt 栅格系统


我受到了 8pt 网格系统的巨大启发,在过去,我运用在了我自己的系统(各种各样的),但它从项目到项目中仍然可以有较大的差异。在一个拥有 8pt 网格系统的页面中,我能够让元素的大小和间隙增量为 8(8, 16, 24,32等)。当我在下一阶段开始构建符号和组件时,我很好的实践了这个网格系统,我将在本系列文章的第二部分中详细介绍这一点。

先前使用类似的 8pt 网格系统,我依靠眼睛和 Sketch 测量工具的两者结合。我当然会保持某种形式的一致性,但最终在一个设计中有许多页面或屏幕的时,并没有一个参考点,这会产生不同的间距值。这里 20px,那里 15px, 这边 30px.

在屏幕之间,测量值会相差很小。在一个屏幕中 X 元素距离 Y 元素 20px,但是在下一个屏幕 Y 元素距离 Z 元素 22px。这样的情况出现多了,对于用户来说会产生不协调的体验。

我发现在 Cabana 中添加了像 8pt 网格系统这样的工具,在整个项目中,它可以带来更多的一致性,同时也为开发人员在项目的后期阶段提供了更强的参考依据。

这就是为什么在 Cabana 中,依据 8pt 网格系统,在许多元素上进行对齐和内边距的测量,仅仅是为了自始至终保持一致性。它会让你更加快乐,同样你的开发会有一个简单的参考点,终端用户可以潜意识地感觉到它。

希望通过这篇简短但内容翔实的文章,使你了解构成一个伟大的设计系统基础所需的基本元素。

一旦像颜色和样式这样的基本元素确定后,那么您就可以创建许多 Symbols,嵌套覆盖和部件来构建一个可靠的设计系统。

在该系列文章的第二部分,我会让你深入了解关于 Symobl 库的创建,以及我在 Cabana 中使用的的其他创建的组件。

如果你不想自己创建设计系统,打开这个 https://kissmyui.com/cabana/ . 使用这个优惠码 MEDIUM20 可以减免20%。


下一篇:丁香园前端团队需要你