作者：Jon Moore
我十分支持在工作中让配合透明化，所以在我们开始之前，我欠你们以下这个东西：贴出了部分是我个人建立的设计框架，其余的部分用来出售。这就是说，尽管你没打算去购买它但这些指南仍然会对你有帮助。
开始一项设计项目是艰巨的
无论你是一名自由职业设计师，为一个知名的产品机构工作，或者为一家大企业公司的设计组提供帮助支持...这都是一份艰巨的事情的。
我在一家设计机构工作，在这了每个月都会受雇于不一样的顾客。我非正式的标题有点像概念产品设计师，这些基本上正好意味着每当我们每接触一个新的顾客时，我们就获得了一份令人兴奋的工作，通过创造想象中的概念屏幕去帮助激发他们一年后的产品路线图（或许是2年或者3年以后）。
这些概念来伴随着紧紧的交稿期限和需要快速的转变，所以我整个世界是围绕着效率和准确率转；我的线框图必须能决问题，提供视觉，顺利转变到产品设计。
正如我能描述的，我现在变得相当的高效率，而且我认为其他的设计师在看到我如何开始新的项目时，也许也会发现一些帮助。
注释：我现在不是为你展示如何去制作整个一顿饭...只是告诉你如何切好食材和打开火候👨🍳。
. . .
内容／删节版本／“我不在阅读所有的内容”
1.创建文件夹（是的，非常严肃）
2.挑选颜色
3.选择字体
4.配置网格
5.建立一个“框架”
6.转换为高保证
. . .
1.建立文件夹
原因：保证我的设计文件和资产清晰有条理
我使用的工具：Finder+Automation
如果没有正确的方法，你将会浪费很多时间。我的文件夹结构管理将会帮我保持文件的条理有序，而且会给我一个与许多其他设计师（销售、开发者等等）共享设计资源方法。
-assets： 这个文件夹通常是和内部和外部研发组共享的，它通常包括开发建立App所需要的所有东西（模拟图片／图片，字体，图标，切图，和logo）.
-exports: 每次当我需要屏幕导出为PNG格式时，都会把它们保存在这个文件夹。这个文件夹会和市场营销共享，所以他常常会把最近手头上的屏幕放置到许多不同的营销资料中（像装饰、网页页面、社交媒体）
UI-design：这里面都是我的源文件。一般都只有一个文件夹，但是一般当我创建了个新的文件时候，都会把它们存放在这里。
2.选取颜色
原因：为我的项目创建一个基本的设计调色板
个人使用的工具：coolors.co
选取颜色是准备开始时最简单的方法。如果你工作的项目已经存在一个设计规范的话，这些东西也许已经被是被确定好了的，在这种情况下，可以去问营销或者视觉设计的小伙伴了。
我的设计系统总是建立在5个主要的颜色上
1.品牌
2.黑色
3.强调1（成功）
4.强调2（提醒）
5.前调3（危险警告）
我通过使用Fabrizio Bianchi 开发的Coolors应用来帮助我来建立调色盘。当你按住空格键，它会随机的为你挑选一种颜色。当你找到一种你喜欢的颜色，就可以锁定它，然后继续按空格键去挑选你需要的其它颜色。如果你的品牌主色调已经确定了，你可以输入颜色十六进制码锁定主色调，然后点击空格键去获取剩余的颜色。
一旦我确定了我所有的主要颜色，我将会把它们全部插入到我的Sketch 设计模版文件里，这些模版文件已经是被定义了图层样式的，所以我只需用我在coolors中获取的颜色去更新下就好了。
一旦我确认了我所有的主色调，我将会将它们加载到我Sketch中的设计模板文件中，这个设计模板已经存在图层样式，所以我只需要将原来模板中我新生成的颜色更新一次就可以了。
3.如何选取字体类型
原因：给我的app一些字体
字体在设计中和颜色有着同等的重要性，所以需要花一些时间去挑选适合的字体。因为你在设计一个供给人们使用的应用，所以挑选一个很棒的字体对你来说尤为重要。
嘿，Jon，在APP设计中如何选择好的字体
嘿，我非常高兴你能够问到😊在我挑选字体的时候我会问自己下面几个问题：
1.易读性：在你长时间的阅读时，字体是否易读？
2.可扩展性：当字体放大和缩小是是否易读？
3.可变性：是否至少有2种不同的粗细的字体？
谷歌字体最近一年他们更新了一次，他们确实很出色值得去使用。我总是务必会在白色和黑色上去测试，以确保一切在2种情况下都可以有用。
如果你喜欢使用多种字体，也就是说，一种用于头部，一种用于内容，这时候你就需要使用字体匹配了。它将会替你完成麻烦的工作步骤而且也会在右行显示两种字体进行对比。这使得选择一个很棒的字体匹配显得非常简单！另外，它的字体来源全部来自谷歌字体，所以你不需要担心为字体版权付费的事情。
总是测试用字母、数字、标点来测试字体. 有时候你会发现一个字体像9一样奇怪样式，或者像奇怪感叹号一样的漂亮字体。
当你挑选好了你的字体后，在Sketch内创立用在头部的文本样式，文字内部的文本样式和链接的文本样式。你应该从不需要在设计添加文本，除非它与一个文本样式关联了起来。如果你今后决定改变字体和一些未指定的字体，当你在同步你的字体改变时，它们将不会被更新。
4.配置栅格
原因：为了配置整个app中对齐的一致性。
个人使用工具：Sketch和计算器
为什么是8？
嗯，许多证明，许多主流的屏幕分辨率中是可以被8整除的，在下面的表格中，这列测试长度和宽度是否能够被8px整除：
通过这些信息，你可以开始决定你的栅格大小，开始决定你的App 该如何出现：
全部宽度：一个全宽度的App是无边框设计。如果是个网页版的App,你的设计将会伸匹配到浏览器的每个边。
我喜欢把我的装订线至少设置为24px。上面这个案例中装订线可以被8整除。但列宽一般不能被8整除，不是个好主意。
浮点：一个浮点类的app 添加了固定宽度的网格，通常在窗口的中心。
对于可浮动的App中，我喜欢我的装订线宽度和列宽都是可以被8整除的。下面有个简单的等式：12 * 列的宽度 + 11 * 装订线宽度 = 整个布局的宽度
混合类：混合类的app是指由混合了全宽度和浮动元件组成。中等形网站是个混合型的网站，因为顶部是全宽度，但内容区域却填充到740px。
最后补充一句。在Sketch中按住Shift+默认的距离是10px。这将会是个令人十分麻烦的问题当你在使用8px 网格的时候。幸运的是，Anthony Collurafici开发的Nudg.it的应用可以让你改变这些。
5.建立个框架
理由：快速的迭代app的布局和交互流程
我使用的工具：矩形
在我讨论线框图的时候，我喜欢创建被自己称为“框架”的东西，它能把我的布局建立成多个区域。这个想法是为了让你感觉到你自己所定义的线框，和快速地定位到你布局图中重要的部分。
下面的图是我设计聊天软件时建立的框架
这个框架的建立大概花了我90秒，但是这是我以后开始设计这个界面时候需要的所有基准指导；我更喜欢这种完整的线框图，因为我慢慢陷入了当自己转换为高保真图的时候，当我尝试让所有的元素都在界面上；也许我是个比较差劲的设计师，我只是在看过许多细节比较成熟完整的框架图，然后第一次也和他们在全视觉保真完成一样。这些仅仅都只是我的个人观点！
6.转化为高保真
所以，我不给你们留下悬念了......
但是这里是你要使用魔法的地地方！
在高保真设计的阶段最重要的一件事是遵守我们在1-5步骤中建立的所有东西
1.把文件保存到正确的文件夹中；
2.只使用你调色板中的颜色；
3.统一你的文本内容格式；
4.经常遵守你的网格；
5.在做高保真之前，将你的布局框架化。
