设计槽点
交互包装说明
交互包装教程
本期结尾
一.良好的开头
2020年的余量剩余不多了,年末又是每个设计师开始统计作品,复盘,改版的时候,而实际上这些过程全部做完是需要花费很多时间，多则半年少则一个季节,并不是零时抱佛脚几天就搞定。
每个项目作品的精细程度都需要长时间去打磨，如视觉方面，业务功能方面，数据方面，体验方面，品牌方面，全方面的去更新自己的作品
一份作品从0到1越细，越代表你对项目越来越熟，这更能体现的是你的专业性。
市面上的作品同质化很严重，整篇下来都是在堆界面，或者是大量的文字说明，又或者是在作品封面上花了很多时间去做特效，让整个作品集看起来不仅花哨，而且像一个项目汇报文档。
设计师们平常接触交互的东西都比较少，大部分都是为了快速做项目出界面就行，所以我们出一期干货的分享，快速的帮大家建立动态交互作品展示
三.交互包装说明
大家在花瓣，Droidddle找灵感的时候上都能看到动态的样机交互作品，除了美之外会给人感觉既正式又有品质，想拥有有木有.
这些交互都是通过GIF/视频交互稿生成的包装交互，而市面上的主流交互软件，Principle，Flinto，Ae，而这些配合做界面交互非常的棒，特别是还没有掌握的童鞋显然不太现实，我们需要提升效率更快的出一些交互稿.
那么少年机会来了，本次会用到PS和XD来组合去做快速样机交互稿
XD这款软件相信大家不会陌生，但有些童鞋可能用到很少，大部分都会用Sketch或者Figma，而XD是Adobe家族软件出品，经过一些版本的升级现在成熟了不少，且可以和PS，AI进行配合大大提升了设计效率.
五.交互包装教程
1.做好设计稿
如果是熟练掌握XD的童鞋可以不用看这一步，如果是第一次接触XD也非常简单，会Sketch就基本会了.
XD导航上的设计和原型两个Tab可以切换工作，原型就是可以去做简单的交互方式.
打开界面在设计区域建立画板然后开始逐个页面设计，操作就参考Sketch这里挑选自己项目中的主要功能去做，我们也要控制页面和时间.
2.做交互流程
切换到原型区域，开始把界面之间的逻辑关系链接起来，走完一边流程.
连接页面的方式简单，选择一个界面或者该界面里面的某个板块，点击后出现蓝色箭头，拖动蓝色箭头链接其他页面即可完成一道交互.
3.录制交互视频
制作完交互流程之后，点击导航上的三角按钮出现录制界面
点击录制界面上的小圆点开始录制，然后在录制界面上开始操作之前设定的交互流程，操作完之后再点击一次小圆点即可结束录制，保存视频到本地
4.使用PS包装交互
准备一份样机文件并创建时间轴,如果样机文件过大就需要裁切一下尺寸,这样导出来的GIF图就不会太大,建议裁剪800X800像素
双击样机上图层上的智能对象封面进入编辑
在智能对象页面也要创建一次时间轴
拖入我们录好的交互视频调整好时间长度(依照视频录制时间),然后保存
回到主样机界面调整所有图层的长度,避免输出的GIF突然翻车
设完成后开始导出选择GIF格式,如果觉得太大这里可以设置品质和图像大小
最终成品(比较吃电脑配置)如果还是很大可以通过第三方在线平台压缩.(公众号限制大小,真的我压到了最低画质)
三.结尾
本期的交互样机包装教程到这里就结束了,难度不高重点是弄清楚交互流程和细节,用在视觉演示,项目PPT,作品集推广上很实用,同时这种方案能够快速包装项目的想法跑通流程.
以上就是本期的分享.
关注介绍 「YABI设计志」
网友评论