一、动效工具：Principle

用途：动效制作，可用于APP内的 复杂元素切换、转场与其他动效。
注意事项：下一页的元素必须在上一页准备好。注意使用时间轴的时间差与曲线。下图是界面图：

可输出：gif、mov，输入大小质量可选，最大在于你建的画布大小。

下图是案例：

以上作品，有需要的话，可以发源文件，后续可以出创作过程和教程。

二、Hype

制作网页和动态效果，功能强大。可用与h5页面、复杂或简单的动效。我用他来做一些元素的动效，比如loading、比如启动页、比如banner 动画等；也用来做一些网页，比如简单的产品介绍、app内的需要用web显示的页面，还可以用他来把单个单个的ui界面做成可点击切换的。这是目前我认为 的，完整度最高的软件，他可以用来做一个项目，而不是某一个单一的东西。

hype制作的网站文件下载：链接: http://pan.baidu.com/s/1mhjOPuS 密码: gj5w

注意事项：

1、做好适配布局；

2、做网站以及h5页面，略微复杂加载速度会很慢。

3、做网站只能是静态的，不能有后台，不能二次编码修改。

三、原型软件：墨刀

简单、直观、高效。可以完成UI外观、app页面交互、以及一些简单动效，多花时间精力也可以做出高度仿真的APP。

具体干嘛：

1、制作原型；

2、利用PS配合制作界面；

3、UED团队保持原型沟通，修改同一份原型，持续改进产品；

4、产品交互和细节定型后，可以复制一份到开发团队，共享给工程师，可以高效沟通产品，如页面交互、逻辑、展示内容、色值、位置等等。

下面是演示原型，可以点击查看交互，因为多次复制的缘故，可能一些链接并不完整,右边有页面列表.

 https://modao.cc/app/cbc81a06be82ba9570bff4df5102baff6360aa53

https://modao.cc/app/30907f04065bbbd58f92f15038fde596bd8b65fa

上图界面均为墨刀制作，当然也有PSD的版本。

项目说明原文链接：http://www.xdraw.cc/blog/index.php/2016/02/15/text4/ 里面有源文件下载。

注意事项：
1、制作过程中，按照UI标准制作，给出位置、色值、大小尺寸；（可以直接给前端查看，实现免标注）

2、注意状态和页面；

3、注意链接完整性；

4、注意一些内容表述细节；

5、建议下载客户端使用

6、管理好产品，归档、版本、团队等。

四、高效Photoshop

1、使用Adobe Creative Cloud（创意云）

下图就是Adobe Creative Cloud；好处很多，装一个等于安装Adobe全家桶，再也不用费心费力的去找下载源了。

Adobe Creative Cloud下载链接（mac）：http://pan.baidu.com/share/link?uk=283477&shareid=1890948843&third=0&adapt=pc&fr=ftwwin版请到百度网盘搜索引擎搜索下载。

安装开始后保证网络顺畅。安装完成后请登录adobe账号，没有就去注册，后面有很多的用途。安装软件，点击试用对应的，等待下载安装即可，更新点击更新即可。

需要破解的，你之前怎么破解，更新或下载后，依旧用此前的方法破解。

Photoshop CC 2015对ui有很多支持，按command（ctrl）键，用光标查看元素的尺寸与距离，和ai类似的多画布支持。注意使用云和库，可以帮你寻找丢失的字体，管理素材等等……更多功能自己去发掘。

上传到库以后，Adobe全家都可以调用里面的元素：字体、颜色、图层样式、制作的通用素材等等（上图第三个），是不是非常强大？

上图是PS更新之后的界面，已经非常不同了，更加的方便。

2、使用其他插件
切片：Cutterman
标注：Parker
其他切片与标注工具：像素大厨/标你妹啊
icon制作：IconTemplate
参考线：GuideGuide
色彩管理：Colorkit
色轮工具：Colorus
黄金比例：GoldenCurve
头像插件：avatar

说明：
1、使用PS时，尽量使用矢量绘制，如需位图，保证最大情况下清晰且转化为智能图层。素材图层太多时转化为智能图层；
2、最高效率为使用375*667px（像素）/pt（点）进行设计，保证对象为矢量或智能图层，可正常输出无误；
3、APP内的icon建议用AI绘制，或下载.ai、.eps格式后用AI修改绘制，下载建议在iconfont.cn；（ai文件复制直接粘贴在ps中做智能图层使用）
4、一套APP的色值，请用色彩工具做好管理；
5、标注与切片时，请设置好单位与当前基准；
6、如设计中不想制作头像或假内容，可使用相应插件生成。

ok，以上讲述一些比较好的工具。反响好的话，后续讲如何利用这些工具工作的流程，以及一些案例。

本屌刚离职，需要的请联系。

最后，原文链接，本人博客：http://www.xdraw.cc/blog/index.php/2016/02/15/text5/