前阵子在公司负责设计规范的制定，主要是根据官方规范以及公司产品需求制定出一套内部guideline,去掉了公司内部资料相关的文档，在这边仅对通用的规范，收集的资料和工具，先做个简单的纪录和分享吧，会持续更新的（也许）！
1. 设计规范
1.1 移动端
移动端分为原生app设计和移动网页设计，原生app遵循苹果和谷歌的官方文档，在设计时尽可能的使用手机系统自带的组件，保证视觉和操作的统一性。
- 移动网页规范
手机上的移动网页，即不是原生开发的页面，我们以微信团队出品的weUI作为规范参考。设计时可以按照weUI所定义的设计元素进行制作。
1.2 PC端
pc端的网页设计，基于bootstrap框架设计响应式的网页，以适配不同尺寸的屏幕。设计时尽量使用bootstrap的默认参数和组件，保证视觉和操作的统一性。
2. 设计流程以及工具
2.1 功能和流程的交互线框图
制定流程的过程中，可以使用线框组件或示例图，快速的组合出页面流程，从而确定页面需求。
2.2 视觉效果图
页面流程确定后开始视觉效果图的设计，PS中我们以7501334px*， 72ppi为设计稿尺寸。
- photoshop cc 2015
- sketch
- illustrator
Photoshop推荐使用cc2014 以上的版本，因为新加入的“画板”功能，以及CC以上版本对于矢量图形的编辑功能加强，都利于了移动页面的开发。（请抛弃CC以下的版本）
跨屏预览:
使用app在手机上实时预览电脑工作稿的效果
-
photoshop内置Device preview
-
sketch内置mirror
以上两款内置功能都需要下载搭配的app，但是adobe preview在中国区苹果商店是搜不到的，只能切换到美区；而sketch到mirror需要30元付费下载。
2.3 标记图
设计稿完成后，需要给前端交付标记图，以保证设计准确呈现。
2.4 资源切图
ios需要切@2x和@3x两种的图
安卓需要hdpi,xhdpi,xxdpi三种尺寸的图
界面中的元素都以矢量图形来绘制
sketch和phtoshop cc 2015都有了快速切图功能，可以直接切图。
- 其它切图插件.
2.5 软件下载
3. 资源网站
3.1 矢量图标资源
3.2 UI Kit 组件模版资源
3.3 无版权大图资源（有些需要翻墙）
3.4 灵感图参考图
3.5 充电网站和行业用户体验团队博客
3.6 配色方案
3.7 图片处理
TBC.. _