前阵子在公司负责设计规范的制定，主要是根据官方规范以及公司产品需求制定出一套内部guideline,去掉了公司内部资料相关的文档，在这边仅对通用的规范，收集的资料和工具，先做个简单的纪录和分享吧，会持续更新的（也许）！
1. 设计规范
1.1 移动端
移动端分为原生app设计和移动网页设计，原生app遵循苹果和谷歌的官方文档，在设计时尽可能的使用手机系统自带的组件，保证视觉和操作的统一性。
-
官方设计规范英文版 （Google的要梯子）
iOS Human Interface Guidelines
Google Material Design -
官方设计规范中文翻译版
ios9 人机交互指南
Material Design 中文版
- 移动网页规范
手机上的移动网页，即不是原生开发的页面，我们以微信团队出品的weUI作为规范参考。设计时可以按照weUI所定义的设计元素进行制作。
weUI组件
weUI视觉标准 sketch
weUI实例页面
1.2 PC端
pc端的网页设计，基于bootstrap框架设计响应式的网页，以适配不同尺寸的屏幕。设计时尽量使用bootstrap的默认参数和组件，保证视觉和操作的统一性。
-
bootstrap3 中文文档
bootstrap的文档中介绍了页面的CSS属性以及各组件的基准样式，在设计时尽量以此为标准。 -
antdesign
当有一些特殊的界面或交互样式bootstrap里没有提及的，可以参照antdesign.
2. 设计流程以及工具
2.1 功能和流程的交互线框图
制定流程的过程中，可以使用线框组件或示例图，快速的组合出页面流程，从而确定页面需求。
墨刀 (推荐)
操作方便快速，适合跳转逻辑比较简单的交互，基本上可以满足移动端的交互和效果预览。
Axure
功能全面，适合比较复杂的页面，以及详细的交互说明。
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元付费下载。 -
PS play (推荐)
推荐使用腾讯出品的免费app PS play. -
ICON STRIKE!
专门用于预览app icon在手机桌面上的效果。
2.3 标记图
设计稿完成后，需要给前端交付标记图，以保证设计准确呈现。
标你妹啊 (推荐)
在线自动标注工具，简便。上传psd至网站，分享链接给前端人员，即可自行查看标记信息。
Assistor PS
辅助手动标记工具，ps外挂软件，单独运行，可在图层上生成标记图层。
Zeplin
zeplin和标你妹啊类似，导入文档自动标记，除此之外Zeplin还会生成一份当前文件字体和颜色的style guide，同时可以添加文字评论，并包含切图资源。不过由于Zeplin为境外服务器，注册时需要梯子，注册后使用不需要梯子。
2.4 资源切图
ios需要切@2x和@3x两种的图
安卓需要hdpi,xhdpi,xxdpi三种尺寸的图
界面中的元素都以矢量图形来绘制
sketch和phtoshop cc 2015都有了快速切图功能，可以直接切图。
-
切图插件cutterman (推荐)
windows下的Photoshop切图插件，快速一键导出安卓和ios所需尺寸的资源图片。 -
web图标可以使用icon font文件，将图形以类似字体的形式嵌入到页面中. 图标来源如阿里巴巴矢量图标库，fontawesome.
-
也可以导出svg或pdf格式的矢量图片，程序可以基于一套资源自动适配大小。AI和sketch都可以生成矢量图标，PS则需要借助插件zeick,将ps的文件导出成svg格式.
- 其它切图插件LayerCraft.
2.5 软件下载
-
adobe cc2015全家桶 下载
http://pan.baidu.com/s/1qYPCEU4
（感谢@vposy）
下载后为ISO格式，win7系统安装虚拟光驱软件deamon tools后打开；
win10系统使用右键“资源管理器”打开;
解压密码@vposy
该全家桶已自动破解，安装完成即可使用. -
更新adobe cc 2017版网盘（独立下载）
链接: https://pan.baidu.com/s/1miyPQOC 密码: 9fcg
3. 资源网站
3.1 矢量图标资源
阿里巴巴矢量图标库 (推荐)
fontawesome (推荐)
ico moon
Material icons
3.2 UI Kit 组件模版资源
iOS9 ui组件
Android L ui组件
Material Design
Sketch APP sources
3.3 无版权大图资源（有些需要翻墙）
Gratisography
时尚风格的图片，免费个人，商用
http://jaymantri.com/
每周更新七张图片，可以随意使用。
picjumbo
图片，插画，矢量。免费使用
life of pix
免费高清图片，多为欧洲景观
pixbay
综合免费图片库
3.4 灵感图参考图
花瓣网 综合图片搜索
behance 图形，交互，整套设计
dribbble 图形，动效设计
90设计 电商 banner
shutterstock 矢量插图，图标
Pinterest 综合图片搜索
365psd 免费psd，矢量UI素材
→→ 更多关于图库的集中整理
3.5 充电网站和行业用户体验团队博客
UI中国
优设
腾讯社交用户体验设计团队IXUI
腾讯移动互联网团队
阿里巴巴国际用户体验团队
网易用户体验中心
3.6 配色方案
MD 配色
https://www.materialui.co/colors
color favs
http://www.colorfavs.com/ 基于图片生成配色板
Brand Colors
https://brandcolors.net/ 大品牌们的配色参考
3.7 图片处理
TinyPNG 高质量的在先PNG压缩网站
智图 腾讯出品的在先压缩PNG，JPG，转化webP网站
Super Tools 在线识别图片上的文字的软件，可以将图片上的文字转换为PDF、Word进行复制粘贴
TBC.. _
网友评论