高效简单，UI设计师必备工具

先介绍一些工具

 

一、动效工具：Principle

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

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

下图是案例：

二、Hype

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

注意事项：

1、做好适配布局；

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

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

下面是视频演示的网站案例：

http://www.tudou.com/programs/view/N65WC0Fuxzc/

 

三、原型软件：墨刀

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

具体干嘛：

1、制作原型；

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

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

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

http://www.tudou.com/programs/view/T-78rcduBc0/

上面的视频是一个比较草的原型，墨刀制作。在此说明下墨刀能做成什么样子。

下图是演示原型，可以点击查看交互，因为多次复制的缘故，可能一些链接并不完整。

也可以点击项目1 项目2查看，右边有页面列表：

下图界面均为墨刀制作，当然也有PSD的版本，前文有UI Kit下载的，可以自行去下载。

注意事项：
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   这个我知道很多人下载不到了，附链接：http://pan.baidu.com/s/1bsyjU2 提取84nd 
安装方法：http://jingyan.baidu.com/article/9f7e7ec0bcf3b76f28155404.html

色彩管理：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、如设计中不想制作头像或假内容，可使用相应插件生成。

适配：
ios使用单位为pt，同时有@1x、@2x、@3x等；
android为sp/dp，有hdpi、xhdpi、xxhdpi、xxxhdpi等。
因此，在设计稿件中，我们使用的单位为pt（点），ppi为72；在iphone6尺寸，即750*1334px的情况下，经过转化：12sp＝24px＝24pt。
经过计算，iphone6与xhdpi有5%的物理尺寸差异；iphone6plus与xxhdpi相同。在此，我们将5%的差异忽略。
那么适配方案为：在物理尺寸标注的情况下：@2x=xhdpi＝@3x=xxhdpi；
故，除@1x需要额外考虑，我们设计基于375pt*667pt为尺寸进行，适配全平台。
关于@1x的适配，设计时不需要考虑高度，只要考虑好宽度的适应。保证所有元素能够在宽度320的情况下排列合适即可。

 

讲讲工作流

请等待本宝更新吧～