前言
一定要保证你的设计文档规整，以便于保证项目的便于跟团队其他部门对接工作。
1.创建文件夹
所用工具：Finder
我在命名文件时加了_保证这些文件夹始终在列表的上面
_assets: 这个文件夹是与内外部的开发团队共享的。其中包含了开发App所用到的一切资源（比如展位图片和内容，字体，icon，图片和logo等）
_exports：任何时候我导出的PNG都放在这个文件夹里。这是跟市场部共享的，从而保证他们总能拿到各种销售物料，方便工作的进展。
ui-design：这里都是我的源文件。通常这个只有一份，但是如果有新的版本，我也会把之前的保存在这个文件夹里。
我创建了个自动动作帮助我创建所有文件夹。
自动创建文件夹下载链接: https://pan.baidu.com/s/1fni6ZJ7a5PzXpTZFYOTKXw 提取码: yfqq 选取颜色
为什么：为我的设计项目设计一个基础样式
所用工具：Coolors: http://coolors.co/ 在线配色
吸取颜色是最简单的开始方式。如果你正在从事已经开始的设计系统，颜色肯定早已被设定了，这这种情况下问下市场方面的同事或者是视觉负责人。
通常我的项目设定5个主色：
品牌主色
黑色
成功色
警示色
危险色
我是用Fabrizio Bianchi设计的Coolors帮助我制作调色板。你只需点击空格键，他就能为你随机选色。当你找到自己喜欢的颜色，锁定她，然后继续寻找其他你想要的颜色。如果你们的品牌色早已确定，你可以输入十六进制的数值，锁定这个颜色，然后按空格键选择其他颜色。
我确定好每一个主色，就把他们导入sketch的模版文件里。这些模版文件的样式已经被自定义啦。所以我只需要把他们更新为我刚选的颜色就可以啦。
2.选择字体
为什么：定义app里字体
所用工具：Google Fonts和Font Pair
http://www.googlefonts.cn/谷歌字体
对设计而言，字体跟颜色一样重要，一定要花点时间仔细选择一种或几种。因为你设计的app是给人用的，所以选择一款好的字体是非常重要的事情。
那么什么才是app设计中好的字体呢？以下是我选择字体的几个原则：
可读性：是否是长时间阅读？
可伸缩性：放大和缩小后是否还可读？
多样性：是否具有至少两种字重（粗细）？
Google Fonts 去年升级了他的字体库，现在它好用极了。我常会通过黑白背景测试，确保任何时候文字都具有良好的可读性。（谷歌推出过思源黑体和思源宋体）
3.设定网格
为什么：保证整个app的全局对齐
所用工具：sketch和计算器
相对常见的建立8像素网格。
为啥是8？
众所周知，大多数主流屏幕是可以被8整除的。所以在底层，这些测试数值其实在宽度和高度上都可以被8整除
根据这些信息，你可以确定网格的尺寸。首先定下你的app的展示效果：
固定屏幕：全屏宽度是指app的一个边缘到另外一个边缘。如果是web应用，你的设计应该能够被拉伸到浏览器的宽度。
自适应：这类app会在屏幕中心有个固定的网格宽度。
对于自适应app，我希望宽度和间隙都能被8整除。所以这里有个简单公式：
(12 columns * Width) + (11 Gutters * Width) = Total Layout Width
混合app：这种app又有全屏款的元素又有自适应的元素。Medium网站就是个混合应用。因为在标题文字上是全屏宽度，但是内容文字是固定740px的宽度的。
在sketch里shift+→是移动10像素，当你设定的是8像素基准时，工作时你会特别困扰。这里用Nudg.it插件帮你解决这个问题。sketch像素位移插件Nudgit 1.1 官方版 官方地址：http://nudg.it
移动与节点微调整设置的 Sketch 应用程序 - NudgIt 官方地址：http://nudg.it
4.构建框架
为什么：快速生成app布局和UX交互流程
所用工具：矩形
在设计线框图之前，我习惯创建框架，建立多样的页面布局。这个建立在你定义了网格的基础上，快速圈除页面中最重要的部分。这就是我曾经给即时通讯设计的框架：
这个操作只花费了90秒，但是这是我开始设计界面的指导。我更喜欢全局线框，因为当我尝试将屏幕上的元素全部线框化的时候，我更倾向于做高保真。或许，我不是个好设计师？我也看过很多将细节做的很逼真的线框图，但是这个我的意见而已。在UX阶段作出app工作流的框架，确保每个交互都能基于用户正向的反馈。
遵循下面的原则你就能创造奇迹～做高保真的诀窍就是把下面的1-5件事儿做好：
1.把正确的内容保存到正确的文件里；
2.只是用你调色板里的颜色；
3.不要背离文本样式；
4. 贴合网格；
5.在做高保真前重新布局框架。
