本文由设计大舌头 翻译

就如同厨师在大展厨艺之前得去备菜那般，产品设计师于做设计之前，同样应当把所需的材料都给准备妥当，如此设计才会顺利且快速。它是当下UI设计师极为喜爱的绘图软体当中的一种，在开始着手绘制画面以及展开工作流程之前，要进入“可持续设计”的状态是相当重要的。在这儿，设计师Jon Moore向读者分享5个绘制之前需要去做的事情，以此协助你进入到这个状态里面：

用 设计前要做的五件事

1. 设定字体格式

做这件事虽枯燥无比，但实际上后来也必定得做，难道不是这样吗？文字乃用户了解产品最为直接的途径，如此一来这一步将会是至关重要的。我喜好于所有的设定当中挑选字体的尺寸以及风格，因而我的字体格式页呈现出如下模样：（我通常还会创建一个暗色主题）

倘若我们一开始就拥有这样的字体设定页面，后续要是打算变更字体，那将会是极为迅速便捷的：

1）全选，2）更改字体，3）同步风格。搞定！

每个主题下包含四种字体格式：

预设（通常设定 80-100% 透明度）

次级（50-70% 透明度）

不可用（20-40% 透明度）

强调（常使用品牌色）

为什么我不是改变颜色值而是设定透明度呢？

就是这样一个小技巧，它能够使得文字，在任意的背景颜色之上，看上去皆会觉得舒服。于下图之中，第二行进行了透明度的设定，其看上去相较于单纯的灰色，自然程度要高出许多，这是由于它将背景的颜色予以了融合。并且我们并非是逐个去挑选不一样的颜色，仅仅是通过设定透明度，让它们看上去好似不同的颜色，这是多么方便呀～

最后，不要忘记，把你设定好的字体格式，在其中创建为Text Style。要是你日后打算将“不可用格式”的透明度，从25%改到30%，你只需改变字体格式里的样式，如此一来sketch修改画板颜色，文件里所有套用相同样式的文字，都会跟着改变。

进阶技巧：在字体格式的命名之中使用斜线，看上图，将能够在，Text，的下拉选单里创建次级的选项：

2. 设定颜色以及风格

决定其他东西之前，你要选定 5 种基准色：

基准色

品牌色：如标题，就是品牌的主色。

将一种你会于设计里运用的标准黑色选定，我会避开纯黑，而是采用融入少量品牌色的黑色或者加入互补色进行替代，看如下的图，

给你的品牌色上面覆盖黑色，黑色需要有80 - 90%的透明度。把这个颜色选出来当作你的基准黑。这是个小细节，不过会产生奇妙的效果。

状态颜色

状态错误呈现为红色系，这个颜色向使用者提示有东西出现了出错的状况，纯红色有可能会显得有点过于抢眼，加入少许黄色或者蓝色能够让这个红色看上去更加舒服 。

处于警告状态，其色系为黄色系，这个颜色会致使使用者警觉，可能会出现错误发生的情况，不要选择太过浓烈的黄，我通常选择带有一些橙色的黄，如此这般在白色背景之上的辨识度也是不错的。

成功状态呈现为绿色系 ，这个颜色对使用者操作进展预示着顺利 ，我倾向于 app 里的颜色偏向于清冷 ，所以我会于绿色之中增添上一点蓝色 。

从左到右：品牌色、黑色、错误状态、警告状态、成功状态

选取颜色为何仅这般限定成为五种情形存在什么个缘故呢，鉴于产品之内颜色选用之时需要特别慎重，不可毫无缘由就运用某一种颜色，于我的设计范畴里，要是我并非想着让用户留意什么事物，不然的话我就会去采用数量众多的黑色以及白色，额外的那些颜色适宜凭借表格或者图片来呈现，不过要挑选基准颜色以外的颜色 。

风格

未来修改所需要的时长会因设定风格而得以省下 ，这些元件涵盖 app 里的所有事物 ，含有卡片 以及背景 ，还有列表背景等等 ，下图呈现的是我所拥有的一些风格组成的内容 ：

倘若我设计对象之际，便会调用这些，要是打算更新基准样式，仅仅回到此页面内，即可同步我之中，所有页面处的样式，这着实节省用时！

3. 创建页面（Pages）和画板（Art ）

这般步骤是相当简要的，然则它能够促使你将思路梳理清晰，于正式着手进行设计之前，需要先行确定究竟怎样去架构你的设计：

按照功能来看，于食物app当中，或许你会需要完全占满一整页的用来放置“食谱”的画板，另外还 占到一整个单独空白页面而专门用于放置“个人资讯”的画板 。(原句中“另一叶怎么定义不准确且影响改写，这里按理解补充为‘另外还需要占到一整个单独空白页面’，你可根据实际情况调整) 。

依据使用者的角色，在阅读 app 里面，你有可能需要有一页用来存放 “读者” 的画板，并且还要有另一个不同的页用来存放 “投稿者” 的画板。

按照工作流的规定，在Uber的app里面，你有可能会使用一个单独的页面去存放“叫车”这一工作流程，并且用另外的一个页面来存储“增加信用卡”这一工作流程。

皆能用上面提到的方式展开，但要尽早决定，并坚持使用一种。

4. 建立你的网格系统和布局

网格系统真的很重要。

把网格系统设定好，会使得布局以及摆放元素变简单，你甚至无需去考虑元素之间的摆放距离，因为网格系统已然设定好了，只需依照它的规范 。

使用最多的一种网格是12列的那种，这是由于它能够被多个数整除，这些数有1、2、3、4、6还有12 。

下图是一个以 8 px 为基准的网格系统设置案例：

这是个 app，它有着全宽度，还有悬浮内容区域，当浏览器宽度增加之时，这12列网格依旧会待在内容区域的中间 。

当设置网格系统之际，要考虑介面布局情况，此介面布局或是沿着边缘移动所谓edge-to-edge的那种，又或是浮动的那种，你有可能需要为有着不同布局的页面，各自去设定网格系统。

内容部分随着网格浮动变形，且网格设有最大宽度并置中。

此外存在的益处是，从事开发工作的人员sketch修改画板颜色，将会对你怀有极为深厚的喜爱之情，这是由于在众多的前端架构当中，均采用了网格系统 。

小提示 ，通常情况下 ，我不会去设定网格结构里的行 ，因为每一页的行都是处于变换状态下的　。不过要是你有这样的需求 ，那也是能够实现的 。

5. 导入品牌相关要素

最终所要去做的，是把所有跟品牌相关的要素导入进来，或许是一个Logo，或许是一系列的 icon，关键在于，你得把它们全都转化为 。

为什么？

不用几分钟就能全部替换这些没用的宣传语。

至此，所有的准备工作就完成，开始你的设计吧！

你提供的内容似乎存在错误或不完整，我不太明确准确意图，无法按照要求进行改写。请检查并提供正确完整的句子 。

如有侵权请联系删除！