UI设计教程!音乐播放器APP交互动效设计

时间:2023-06-21
B站视频:av740246548
类别:UI设计
水平:入门
观众:1.0w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

免费使用即时设计,请点击右侧链接👉 即时设计

获取海量免费设计资源,请访问👉 资源广场

一、关于教程

动效在 UI 场景中的运用,极大的提升了用户的使用体验,也增加了产品的品质感。对于 UI 设计师来说,会做动效,代表着更强的职场竞争力。本期教程,就教大家 6 种与音乐播放器有关的交互动效,看完就让你的作品动起来~

二、关键步骤提示

详细操作请看文章开头的视频教程演示。

为了让大家能方便地进行操作练习,视频中用到素材源文件,已经上传到即时设计官网的【资源广场】了,在【资源广场】中搜索“案例教程”,获取素材。

01 胶片和歌词

第一个动效,让胶片自动转动、歌词自动滚动。

第一个动效的素材中,有 3 个画板,每个画板胶片旋转的角度和歌词的位置,都进行了调整,先做好版式上的准备,才能开始设置动效。在【原型】面板中,设置从【画板 1】到【画板 2】,再到【画板 3】依次进行跳转。

UI设计教程!音乐播放器APP交互动效设计

UI设计教程!音乐播放器APP交互动效设计

02 蒙版和弹层

第二个动效,点击导航栏上的加号,打开和关闭弹层。

同样先设置好 3 个画板的版式,再从【画板 1】到【画板 2】,再到【画板 3】依次进行跳转。

UI设计教程!音乐播放器APP交互动效设计

UI设计教程!音乐播放器APP交互动效设计

UI设计教程!音乐播放器APP交互动效设计

03 状态切换和弹窗

第三个动效,点击喜欢的音乐类型,会出现一个小弹窗来记录选项。

设置好每个画板上图标的状态,再从【画板 1】到【画板 5】依次跳转。

UI设计教程!音乐播放器APP交互动效设计

UI设计教程!音乐播放器APP交互动效设计

UI设计教程!音乐播放器APP交互动效设计

04 切换专辑封面

第四个动效,点击不同封面,进行专辑切换。

在【 画板 1】里,选中第二张专辑,跳转到【画板 2】,再点击【画板 2】里的第二张,跳转到【画板 3】。

UI设计教程!音乐播放器APP交互动效设计

UI设计教程!音乐播放器APP交互动效设计

UI设计教程!音乐播放器APP交互动效设计

05 删除列表项

第五个动效,拖拽列表,调出删除按钮,点击删除列表。

【画板 1】里,从列表项里的第一组,跳转到【画板 2】,事件类型【拖拽】,智能动画,线性回弹,800ms。【画板 2】面,从【删除】画板,跳转到【画板 3】,事件类型【点击】,没有过渡动画。

UI设计教程!音乐播放器APP交互动效设计

UI设计教程!音乐播放器APP交互动效设计

UI设计教程!音乐播放器APP交互动效设计

06 滑动阅读

第六个动效,点击图标,调出弹窗,滑动,查看弹窗内的更多信息。

在【画板 1】的底部,藏了一个弹层,还有一个黑色半透明的蒙版,在【画板 2】的弹层里,有一个【滑动效果】的画板,这画板要把【超出画板隐藏】,和原型里的【溢出滚动】,都选上,点击【更多】图标,跳转到【画板 2】。

UI设计教程!音乐播放器APP交互动效设计

UI设计教程!音乐播放器APP交互动效设计

UI设计教程!音乐播放器APP交互动效设计

三、获取练习素材

到这里,6 组动效就讲完了,别忘了到即时设计官网的【资源广场】,获取练习素材。

学完这篇教程的人还在学…

6 收藏 15

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 已发布 1

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片