- 一台 Mac
- Sketch ：自行下载
- Zeplin ：https://zeplin.io/ 每个免费帐号可以建一个项目，这个主要目的是导出切图
- Skala Preview：方便在手机上实时预览
- ICON 库：sketch 支持导入 SVG/EPS 格式的矢量图
- PS AI 等 ： 辅助，如何在4小时内学会 AI
当然，把这些都装上，你需要先熟悉下 MAC 系统的基本使用。
手机端的设计，必定要遵循一定的规范，比如屏幕就这么大，你要怎么合理展示你的内容？ 关于这方面，请看：
- 移动设计指南！如何利用视觉元素有效传达信息？
- iOS 和 Android 也有相关的设计规范：
- 全程参与需求确认
- 与产品合作，制作原型，构思交互
- 沟通多用能演示的，比如草图
- 原型设计基本定型，产品、设计、技术、运营达成一致
- 风格探索
- 定制界面风格、设计规范（充分利用 Sketch Symbol 和 Shared Style 功能）
- 关键界面设计，先拿给开发用
- 细节优化
- 对设计评审，修改 bug
- 对开发实现程度进行评审，注意「和善度」，切不可把开发打倒踩着他的头问他麻不麻烦！
-
使用指南、插件安装：Sketch 中文网，装一个 Sketch toolbox，安装插件非常方便
-
不许出现 位置 和 尺寸 上的「半个像素」，否则会有毛边，或者尺寸计算错误，这种情况一般出现在整体放大、缩小某个元素时。
-
Sketch 能导入 svg 或者 eps，对位图处理能力比较一般
- UI设计师不可不知的安卓屏幕知识(原创)
- 如果多客户端只出一套设计，设置 Artboard 大小为720*1280（再次改成720，因为标注插件的大小并没有随着 Resolution 变化，结果一个字体标注能占满整个宽度）（Sketch 里的都是 px）
360*640（720*1280 虽然看起来比较好，但是一方面网络上的资源基本都是 360*640，另一方面小点 Sketch 能不那么卡），使用 Measure 插件标注的时候选择 xhdpi（2px=1dp） - iOS 启动图片尺寸，iOS App图标和启动画面尺寸：
- 640x960
- 640x1136
- 750x1134
- 1242x2208
-
每个 app 建一个 Sketch 文件
-
每个 app 的页面是一个 Artboard，根据顶层导航，设置不同的 page
比如我这个分组方式，在 app 里的表现是这样：
很显然地，整个 app 有五大板块，所以分为五个 page，每个 page 里面再来做单个页面。
所以，用英文来命名所有需要展示出来的东西
另外，还需要建一个 page 来建立「规范」：
- 每个 page 里面，按照应用逻辑来组织 Artboard 布局
以该模块（page）第一个页面为原点：
1.同一页面的交互，横向排列，每个 Artboard 之间间距为 100
2.有页面跳转的，纵向扩展，间距同样为 100
3.在最前面还应该设置一个 Artboard，来放置 icons，切图
这要求你作为一个设计师，要懂开发一个 app 的接本实现原理，比如一个列表是由一个个 item 组成的：
应该这么做：
而不是这么做：
关于这个可以看看 Sketch 预设的一些模板是怎么做的，比如这个背景页，尽管它只有部分露出来，但是页面逻辑上还是做成了全屏幕大小
- App 的 Logo 使用 Sketch 的模板
在这个里面设计，然后使用插件 Icon Stamper 扩展到每一个尺寸的 Artboard
- 使用插件 Sketch Measure 对每个页面进行标注，标注信息可以快捷键隐藏
- icon 上使用 Slice 划分切图区域，保证同一层级的 icon 图大小是一样的：
比如这四个图本身大小是不一样的，但是全部切成 64*64 的 icon
每次导出必须检查有没有误选不想导出的东西
使用一开始说的 Zeplin，新建安卓项目，将每个 page 里面的 icons Artboard 导出到 Zeplin，它能直接把 icons 生成各个尺寸的图：
看效果：
- 先了解下什么是 android 9patch
- 其实用 Sketch 做 9patch 也可以，手动画 1px 粗的黑线即可：
- 项目根目录存放所有的 Sketch 文件
- UI 文件（只放 app 界面相关）
- Logo 文件
- 引导页 文件(启动页面也放里边)
把这些分开，一是防止单个 Sketch 文件过大导致 Sketch 卡顿，二是方便团队协作分工
- 每个 page 建立一个目录，另外视情况新建这些目录：
Boot page(引导页面)Start page(启动页面)Logo- 按需添加其他目录
- 每个 page 的目录下，有一个 icons 目录，存放该页面所有的 icons
每个页面文件导出两份：原图 和 标注版，命名后面加 measure 以示区分
1.新建项目
本地建立项目目录
去我们的 Gitlab（跟 Github 类似的一个东西，但是我们私有的） 上新建一个项目
根据提示，显然我们这已经有了一个文件夹，现在需要进行一些设置
2.初始化项目
用命令行做这些操作，图形界面太难用，命令行并没有设计师们想象的那么恐怖
cd UI_Git_Test //进入项目文件夹
git init //初始化项目仓库
git remote add origin http://****/****/UI-Git-Test.git //添加远程仓库然后开始做一些基本工作，比如新建一个 sketch 文件保存到这里，再建一些必要的目录，现在目录下有这些东西
绿色表示文件夹，.开头的是隐藏文件，.git 是 git init命令自动生成的，.gitignore 是我们手动生成的，内容如下：
*.sketch
*.pixate
*.psd
*.ai
*.esp
这个文件是用来描述哪些文件可以被 git 忽视掉，不把它加到版本库。我们只需要把图片资源放到版本管理里就行了，所以让 git 把一些源文件忽视掉。
3.上传到 Gitlab 上
- 先需要添加到缓冲区
git add . //强行添加所有的就行- 然后 commit （提交)，
-m参数是指定提交日志，比如我们第一次提交是初始化项目。
git commit -m "初始化项目"这个要跟你所做的修改一致，比如你刚导出页面1的图，add 之后，commit 日志就应该写成 "页面1"。再比如修改了某个 icon 的颜色，应该写 "修改 xxx 颜色"，甚至可以写的更细致，把颜色值写出来
- 上传到远程 Gitlab 上
git push origin master
- 我们去 Gitlab 项目主页去看看，这里是你的提交日志
看文件目录
纳尼！！！怎么只有这一个？ Sketch 文件被忽略了没错，其他的都去哪里了？ 原来，Git 是只认文件不认目录的，我们的目录里面是空的所有直接被忽视了。
不信你在某个目录下建一个文件，再 add commit push 看看。
- 我们忘了一件事
在初始化项目的时候还应该新建一个 README.md 文件，.md文件是 markdown 文件，有一个在线编辑器 作业部落，左右对照，很快你就能知道什么是 markdown 。
然后我们在项目根目录下建一个 README.md，方便开发快速了解你的设计，内容为：
# xxx 项目 UI 开发指南
--------------
## 项目结构
每个目录是对应的功能模块，里面包括 页面视觉图、页面标注图、icons
开发不听话要多打
然后我们再去 Gitlab 看看，根目录下的 README.md 文件能直接预览
最后，本文引用了大量互联网上的文章链接，特别感谢这些文章的作者们。