首先，我将向你展示建立一个强大的设计系统需要的基础。
奠定基础
好。所以最近我试图在Sketch中构建一个Design System。这是非常耗时的。有时候会感觉愉快，有时也令人沮丧，但是我很高兴我做到了。
现在拥有一个设计系统（它被称为Cabana），这个系统已经使我的工作流程提速了十倍，并为我在进行任何项目时积累了深入的基础。
受到我所接触过的其他系统的启发，我喜欢它能够节省时间优点，像系统这种东西可以带入到我的日常工作流程中。在我的最后一篇文章中，我的想法或许听起来天马行空，但实际上它大大提高了我的工作流程的速度，虽然在早期阶段我没有把它带入工作流。 KER-raaazzzy！
现在，就像习惯一样。但也有反对者从屋顶尖叫着“但是你必须改变4个symbol overrides，才能设计一个按钮。我可不觉得那有多酷“，我倾向于同意他们所抱怨的这一点。
当你第一次开始在Sketch中使用一个新的系统的时候，你可能会发现自己（在第一批冒出来的想法里）受到了一些阻碍，因为它是在Sketch中处理一个项目的一种不同的方式，也许跟你已经习惯的有些不同。
但说实话，相信我，一旦你完成了那些设计系统的驾驶培训（我保证你不会花很长时间），你会发现自己正在做自动驾驶，在一个项目中迅速移动，它会看起来像你的第二天性。
我喜欢称之为“Sketch Zen Cruise Control”。
相信我，一旦你在这个圣诞节将一个设计系统带入你的生活，你不会想回到你在Sketch中设计的旧方式。
1.打开Sketch
2.盯着一个空白的屏幕（我称之为“空白屏幕综合征”）
3.从某处抓取一些图标
4.一个又一个不断重复创建Symbol的过程
5.设置一些图层样式，然后再设置几个，然后再设置一些
6.然后这才真的让项目开始！
7.看看时钟，然后走“哦，所有的时间都去了哪里。昏昏欲睡的时间。“
好。让我们来看看吧，让我告诉你开始建立一个名为Sketch Design System的神奇建筑物需要打下的基础。
从那些颜色开始...
随着Cabana，以及您创建的所有的系统，您需要使用尽可能少的颜色。您可以使用色调和阴影，但对于实际的基本颜色保持最少。如果你太疯狂，颜色重复就可能会发生。
首先创建一个设计系统的关键是要有一个精致的元素和样式库，在任何项目上工作时都会使事物更加紧密。一个参考点，使您远离黑暗的一面，使用12种不同的颜色和从一个屏幕到另一个屏幕不断矫正略有不同的字体大小。我曾经吃过这样的亏。我想我们都有。
所以通过Cabana我通常会建立初级，中级和三种特定颜色的结构。不多，也不少，但足够以适应不同的项目。
当然还有必要的黑色，灰色，白色和50％不透明度的白色两种色调，以作为图标等元素的叠加。
然后，成功，警告和错误通知的默认颜色为红色，绿色和黄色，也作为通知标志的背景颜色，表单上的文本或文本字段上的边框的颜色。
我给每个基本颜色填充和边框（1px）颜色设定相同的十六进制值，然后为每个（即;填充/主，然后边框/主）创建单独的共享样式。
然后选中矩形（使用填充共享样式），我复制这个形状，放在原始的顶部，然后应用我以前保存的边界共享样式。
这将便于我将来快速选择两种形状（应用填充和边框样式），并立即更改进行相关的样式。
一旦我有了基本颜色，我可以简单地采取一些颜色，即初级，中级，黑色，并创建一个简单的不透明度为60％颜色遮罩，然后可以应用于项目中的任何图像，这就像从我的基本颜色十六进制值，使用60％的不透明度并创建一个新的共享风格，即遮罩/初级。
好，现在说字体
创建Cabana时，这真的适用于您正在进行的任何项目。坚持最多2字体家族规则。一个用于标题，另一个用于正文拷贝。有时候那个“第三名”的家庭成员可以得到邀请，但是你需要在门边给他们一把椅子。
我选择了Poppins和Open Sans，因为它们作为基础（starter）字体系列相得益彰。
设置这个实际上没有正确或错误的方法，因为你要使印刷版本适应当前的项目，但是例如最初的原型制作对于选定他们所服务的目标（标题，正文）以及其他字族不需要耗费太多的尽力。我感觉如果你开始使用像Merriweather这样的Serif字体，那么如果你的唯一目标是使用像Cabana这样的系统来完成原型设计，那么他们就会消耗一定的注意力。
从Poppins字体家族开始。我从Uber字体样式开始。这不是一种可用的字体，但是我从经验中知道，当我在过去测试过其他的设计系统时，他们最大的字体样式在尺寸上还不够大，特别是当你想要为手机和网络创造产品。这就是为什么我把Uber放在一个相对妥帖的111pt字体大小的地方。
然后，我使用Modular Scaling，通过常见的排版（H1到H5），将我的正文文本大小设置为18pt，并使用1.2的比率。
如果我自己或者其他人决定选择深灰色或类似的文本副本的颜色，那么为了提高易读性，我设置了一个更可靠的字号18pt。
除了标题和正文样式外，我还添加了“铅”，“小”，“标题”和“小”的样式。除了标题之外，采用所有前述的默认字符间距。
我为每个样式（Uber，Hero，H1，H2，Body等等）创建了一个Regular和Bold字重。我之前已经看到了一个系统，在该选择Regular选择了Light（甚至对标题只有Bold，没有Regular的选项），但是并不是每个Font Family都有足够多的大小和字重样式，并且在交换字体系列时依赖Light字体重量可能会在Sketch中为自己带来更多的工作，所以我试图避免只是简单的Regular和Bold。Medium同杨需要考虑在内。
对于Open Sans 字族，我重复相同的过程，并确保两个字体家族，我也创建了左，中，右三种文本对齐样式（是的，我们很少使用右对齐的文本，但我把它作为一个安全选项）。
当我完成了两个字族（Poppins & Open Sans）黑色版本，我开始为每个字族创建颜色变体。
因此，使用我以前设置的十六进制颜色值，我复制这些对象，并应用以下颜色创建新的文本样式...
灰色
浅灰
白色
红色（错误）
绿色（成功）
多样性
投影
在设计系统的各个部分，首先对元素采用了Box Shadows。在Sketch中快速创建形状并在几秒钟内为其分配不同强度的阴影的能力，从而大大减少了在Sketch Inspector中创建阴影所需的时间。
渐变和双色调
好。不可否认的是，在渐变中，你可以看到我正在进行各种各样的趋势分类。让我们不要进入整个渐变的讨论。他们仍然有他们的用途，适度使用可获得非常棒的效果，所以我选择将它们包括在系统中。
插入到系统中的双色调效果也是同样的道理。是的，这两个元素对于设计系统来说可能看起来有点多余，初始阶段可以简单地用颜色和文字样式来创建，但是我补充说他们有一个方便的操作方式，以便在设计过程的后期节省额外的步骤。
8像素栅格系统
8像素栅格系统给了我巨大的启发，之前我一直使用自己系统的各种网格，但是它会因项目的不同而不同。使用8像素网格系统，我能通过8（8、16、24、32等尺寸）的增量设置页面上的大小和控件元素的尺寸。当我在下以阶段开始构建sympol和组件时，之前的8像素网格系统为我提供了良好的时间基础。我会在本系列文章的第二篇里给大家讲解。
在使用类似8pt网格系统之前，我全凭眼睛和好的Sketch measure工具的结合。我当然会保持某种形式的一致性，但最终会在设计的许多页面或屏幕上进行，而且如果没有参考的话，您可能需要一个用于间距测量的参照物。 20px在这里，15px在那里，30px在这里。
屏幕之间的测量值之间的差异很小。在一个屏幕上从Y元素到X元素20px，但在下一个屏幕上从Z元素到Y元素22px。这种不合理现象最终会为用户带来不协调的体验。
我发现在Cabana中添加了像8像素网格后，在整个项目中，可以带来更多的一致性，同时也为开发人员在项目的后期阶段提供了更强的参考依据。
这就是为什么在Cabana我采用8像素网格系统去对齐和测量许多元素的间距，只是为了满足一致性。它让你更加快乐和开心，开发者有一个简单的参考点，最终用户可以下意识地感觉到它。
希望通过这篇简短但内容翔实的文章，您可以了解构成伟大设计系统基础所需的基本元素。
一旦像Color和Type这样的基本元素被锁定到位，那么您就可以创建许多Symbol，内置Symbol和组件来构建一个可靠的设计系统。
第二部分重我将会告诉你如何创建颜色，文本和图标Symbol，这些符号有助于建立我们已有的基础。
原文作者
网友评论