恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【骚操作】Principle实现可交互的物品3D展示
0.0°
2019-05-13 原创文章 教程 举报 21781 977 1081 113

随着消费升级,产品3D展示拥有着巨大的应用空间。通过3D展示,对消费者而言,体验得到优化;对于商品而言,展示效果增强;对于商家而言,线上、线下场景展示有效融合。


这篇教程是关于Principle的一个骚操作 - 可交互的3D展示。我将简要分析线上常见的几款APP的3D展示实现方式,后续带领大家使用Principle制作一个简单的3D展示案例,且在文章底部我会附加该案例源文件,供小伙伴们学习交流。


首先阐述一个事实:

Emmmmmmmmm,Principle并 不支持 3D,而可交互的3D就 更别想了,嘻嘻


WTF   WTF   WTF   WTF   WTF ?!?!?!


可能有人看到这就想要锤我了。

"  你他娘的不支持3D,倒是说个卵啊!"


但是就很骚,我还真做到了,想打我不?至于我是怎么做到的呢?


卖个关子,大家可以先欣赏一下我搜集的几个线上APP的可交互3D案例~


针对这四组APP的3D预览,我们来分析一下他们的交互特点(纯属个人意见,如有错误,各为看官老爷请指出,轻喷...)



毒在iOS端v3.5.4版本时(如果没有记错的话)支持了3D展示鞋子的功能,安卓后续也进行了更新跟进。鞋子模型支持手势360度全方位的旋转和缩放查看,交互细腻流畅,首次查看对应鞋子模型时需要小段时间加载,之后再次查看就不需要等待加载了。


缺点是他的模型来源应该为3D扫描,所以精细度不够;且场景与模型没有实时的光照渲染,投影实际为粗糙的平面模拟投影;页面切换时模型与商品静态主图的衔接有错位卡顿的情况。


京东

电商巨头京东专门推出了国内首个3D模型行业标准,旨在优化产品3D展示体验。商家可以通过京东的POP和VC后台方便快捷的上传相关商品的3D模型,经过系统的审核后即可向广大用户提供更佳体验的黑科技3D商品详情页。


京东的3D预览有着完善严格的行业标准,优质的模型,精细的渲染,商品展示精细度与光照渲染均很完美。


缺点是他的商品3D模型行业标准 https://sale.jd.com/act/f38idTSl0RCXuhs.html 异常严苛与繁琐,商家门槛较高;每一次查看模型都需要加载,等待较长时间。



StockX

StockX上的大部分球鞋都可以单轴360度展示,即商品只能围绕Z轴旋转,并不能多方位进行操作。经过观察,当滑动手势缓慢触发时,他的商品旋转有明显的卡顿与跳帧,且可以分辨出商品为摄影实拍,并非模型。


故,StockX的3D展示实际为将商品360度绕一圈拍了数十张照片,通过手势来控制对应图片的切换,来实现伪3D的展示效果。


优点是APP内部不用集成庞大复杂的3D库,仅使用少量序列图片就可以达到3D展示的效果,开发成本低,效率高。缺点也是有的:并非是真正的3D模型,展示角度单一乏味。


汽车之家

汽车之家实际上与StockX的原理几乎一致,也是序列图片跟随手势切换,且只能单轴旋转。


———————————————————————————————————


言归正传,通过上述分析,我们了解了主流的3D商品展示的落地方式,毒和京东的展示模型的方式可以排除,因为前文我已经提到:Principle并不支持3D,所以是否可以模拟StockX的序列图片的实现方式来制作。


初步思路

通过Principle的Scroll(滚动)Drivers(联动),只要可以手势控制序列图片的切换,那么可交互的3D展示Demo就是可以实现的!


但是,Drivers不能控制图片切换啊!

怎么办   怎么办   怎么办   怎么办   怎么办 ?????


不要慌!Drivers是可以控制Opacity(不透明度)的鸭!是否可以通过调整Opacity的变化来达到切换图片的操作呢?


Bingo !!!  我简直太聪明了。


说干就干,当时我就去做了一个小Demo,去验证这个猜想,中途还算顺利,大方向和原理已经想明白,中间出了一些小坑也很顺利的解决,Demo请看下图!后续教程也将以此Demo来复盘演示。



除了像StockX那样的绕Z轴单轴旋转外,还添加了控制商品缩放的手势,以及屏幕方向的平面旋转。


祭出Principle的实机操作,证实确实是可以手势来控制3D展示的,我可不是放视频在播放哦!

至于那些说我手丑的人,都已经被我灭口了


之后我制作了一个较为完整的APP动效,应用到了这个效果,因为视频时间较长,无法导出质量与大小合适的GIF,所以这里就丢一个链接和静态图吧,大家可以点击链接去Dribbble查看详细哦~


https://dribbble.com/shots/6090427-Live-marketplace-for-sneakers-APP


———————————————————————————————————



Emmm,突然发现自己写了这么久,都没有开始教程正题...


那么,现在就开始吧!



———————————————————————————————————


一、准备工作

关于软件:首先,此次教程只是针对3D展示案例思路与操作的梳理总结,至于Principle的一些基础操作可能不会在文中详述,需要读者有一定的软件基础。


Principle 5.3  软件版本其实没有太大关系,但是建议大家尽量使用英文版,很多第三方汉化后的版本或多或少都有某些不可控的奇奇怪怪的BUG。而且Principle是个轻量级的软件,没多少复杂功能,英文版用习惯后也就没多大操作障碍了。


关于素材:案例中需要使用的序列图多达30多张,取自StockX的官网商品详情页,如何快速获得官网对应商品的序列图呢?


通过此Gif的演示,可以获得其中一张序列主图的网址链接,可能会有小伙伴会问,为何不直接右键下载该图,别急,请接着看~


转到上一步复制的链接即可获取到一张高清的鞋子大图,同时请注意图中红圈标记位置,更改此处数值就可直接加载对应的序列图,此商品的序列范围为01-36,然后就可便捷的下载完成需要的36张图片啦~



我们现在获得了36张图(我会在附件里放上这些序列图,大家就不用再一张张手动下载啦~)但是,这些图尺寸有点太大了,宽高比也不是很适合。所以我们对图片进行二次加工,最终输出600*600px的序列图,注意改变尺寸时,不要变动每张图片的相对位置,防止最终效果出现错位穿帮。


Image title

然后,图片就都处理好了,我简化了命名,后续操作时可以更加直观。



二、新建画板

打开Principle,设置好Size Presets(因为有考虑后续在手机上实机操作,所以这里选的是自己手机尺寸的预设,使用其他尺寸在手机预览时,会出现不能占满屏幕的情况),小伙伴可以根据自己实际情况设置。


三、放置图片

将整理好的图片全选拖入画板。之前处理成600*600px的图片是为了最终手机上预览或者生成@2倍视频时能清晰一点,现在在414pt的逻辑尺寸画板上制作时,需要将图片WidthHeight调整为300*300。


置入的图片图层顺序初始是从上到下36-01的顺序排列,需要将顺序倒置过来,01排在最顶部,以此类推。


小技巧:shift + ⌘ + [  或者 shift + ⌘ + ] 可将图层置于最底层或最上层。


四、入场动画

动画第一阶段为鞋子从顶部移动到屏幕中间,图片放大至414,占满屏幕宽度,同时旋转至正面角度。


将画板复制一份Artboard 2,第二个画板上我们将图片放大至414,并下移一段合适的距离。


因为动画第一阶段需要鞋子旋转至正面角度(第10张图),所以将Artboard 2图片01-09的Opacity调整为0%,从而显示出图片10。并给Artboard 1的01图添加Tap手势连接到Artboard 2


默认的动画时长为0.3s,我们可以让他更长一点,先将所有图片的变化属性时间轴拉长至0.6s,以便更好的观察鞋子转动与位移的变化。


因为鞋子的转动需要靠01-09的9张图接连出现,形成伪转动的感觉,所以使用Opacity从100%到0%的变化,并将时间分别按0s-0.02s;0.02s-0.04s;0.04s-0.06s......以此类推,来使他们衔接起来。(注:理论上每张图片透明度变化的时间长度应该为0.6/9 ≈ 0.07s)


但是:时间过长的Opacity变化容易使肉眼可以观察到两张图变化途中的重影或空档,而产生穿帮,所以最终决定让Opacity变化的快一些,选择了0.02s。


实际上时间调整为0.07s,将变化属性的bezier曲线调整为(0,1,0,1)也可以规避穿帮的问题,哈哈哈哈哈哈哈,但我懒的调整了,Sorry。


Image title

OK,现在可以体验一下第一阶段的动画,如上图。多播放几次感受一下动画的节奏,如果节奏上觉得不满意,看官老爷可以自己再做调整哦,不需要完全参照我这个。


五、可交互3D

接下来就是本次案例的重头戏啦!可以手势控制的3D展示~


先复制Artboard 2一份为Artboard 3,需要在Artboard 3上制作可手势联动的3D展示,因为此时的鞋子是第10图为首张,所以需要全选01-09图,将他们的Opacity改为100%,并按shift + ⌘ + [ 将其置于底层。


接着给Artboard 2添加Auto连接到Artboard 3,此时Auto动画里有Opacity的变化,为了保证Artboard 2无缝衔接Artboard 3,需要将时间轴全部压缩为0s。


这一步我们绘制一个矩形,与图片等大并覆盖在上面,降低其不透明度以便后续观察。


给矩形的HorizontalVertical都添加上Scroll,关闭Clip Sublayers以便更好地观察矩形的位移状态。


接下来为每张图片设置由矩形Scroll控制的Drivers,选中第10图,打开Drivers面板,初始的时间轴过于密集不方便细节操作,先将他的预览范围调整至合适区域。


在Scroll X下方添加第10图的Opacity,将光标拖动至5px处再次添加,此时10图在矩形移动5px时Opacity没有发生变化,在第7px时将Opacity改为0%,然后将关键帧光标拖动到第6px。(为什么不在第6px处直接设置呢?因为联动控制可自动识别添加的最小单位为2px,需要手动拖回去)


第11图如法炮制,从第5px至第10px的Opacity不发生变化,第11px变为0%。


以此类推,完成所有图片的Scroll X设置。


Image title

Scroll X全部设置完成后的交互效果如图,虽然挨个设置很累,但是完成后的效果是不是很赞鸭!!!


这里我们只能向左拖拽旋转,如果需要向右旋转,需要在图层最顶部再添加一轮图片,初始Opacity为0%,向右拖拽时,依次变为100%。(这里就不做演示了,原因是我懒)


选所有图片,为它们的Scroll Y添加Scale属性,并在Scroll Y为-200px时将Scale改为2。


如图,这样我们就可以将矩形向下拖拽时控制鞋子的大小变化啦~


同理再为所有图片添加Scroll Y向上移动时Angle从0°变为180°


联动部分完成!!!


接下来将矩形的Opacity改为0%隐藏起来,新建一个画板按照之前的方法作出返回动画~


呼~如果你耐心地看到这里,那么就完成啦~~~


感谢浏览


作者:進擊的皮蛋


转载请私信或微信联系我,谢谢。


WeChat:17310907184

更新:2019-05-13

下载
收藏

977人已收藏

進擊的皮蛋

WeChat: 173 1090 7184(请注明来意)

  • 8

    作品

  • 7304

    粉丝

  • 58

    关注

  • 2019年作品合集 — 進擊の皮蛋
  • 永中优云APP设计提案-安全高效云协作办公神器
  • UI中国APP设计提案 - 专业用户体验设计平台
  • 近期一些动效渣做合集

    猜你喜欢

      2019-05-13 原创文章 教程 举报 21781 977 1081 113

      【骚操作】Principle实现可交互的物品3D展示

      0.0°

      你确定要举报【骚操作】Principle实现可交互的物品3D展示

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年05月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1081
      977
      113

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录