『』Axure教程：网易云音乐首页原型设计
作者利用Axure动态面板功能对网易云音乐首页进行了一个简单的原型设计 ， 那如何利用Axure动态面板功能实现轮播效果及交互功能以及隐藏丑陋的滚动条呢？下面来和我一起研究一下~
文章图片
文章图片
制作示例如下：
文章图片
文章图片
网易云音乐发现界面
1.动态面板实现轮播功能
文章图片
文章图片
动态面板实现轮播功能
对网易云音乐界面观察后发现 ， 自用户进入网易云音乐首页后一直有七组图片在进行轮播 ， 同时下方还包括了对图片进行选择的序号 。这个时候 ， 我们需要使用两个动态面板 ， 其中一个设置轮播图片 ， 另一个设置下方序号 。
文章图片
文章图片
轮播图片动态面板
文章图片
文章图片
序号动态面板
序号1
序号2
在轮播图片动态面板的每个状态下增添形状相同内容不同的图片 ， 在序号面板下增添序号标签 ， 选中哪个序号时就将该处原点设置为红色 ， 其它为暗灰色 。接下来 ， 我们在页面载入时设置用例1 ， 设置两个面板状态皆为Next ， 需要注意的是动画效果和循环间隔一定要保持一致呀~
文章图片
文章图片
页面载入时用例1
实现页面载入时的轮播功能后 ， 我们还需要设置当鼠标移入或者单击序号点时 ， 跳转到序号对应的图片中 ， 这个时候就需要利用我们的热区功能 ， 为每个序号点增加热区后设置用例 ， 设置图片动态面板和序号动态面板为一一对应的关系 ， 注意保持动画效果和循环间隔一致呀~现利用序号1进行举例说明 。此时轮播效果及交互功能就设计完毕啦~
文章图片
文章图片
序号1热区用例设置
2 动态面板隐藏滚动条
我们在使用网易云音乐的时候发现 ， 一些模块可以进行左右滑动却没有丑陋的滚动条显示出来 ， 这是为什么呢？现在和我一起做 ， 利用动态面板功能一起来隐藏滚动条！
首先第一步我们需要新建一个动态面板命名为外侧
文章图片
文章图片
外侧动态面板
接下来我们在外侧动态面板状态1中新建一个动态面板命名为内侧 ， 注意其长度大于外侧动态面板 ， 需包含要展示的所有内容
文章图片
文章图片
内侧动态面板
新建完成后 ， 我们在内侧动态面板状态1中填充要展示内容 。
推荐阅读
- 『音乐』原创 QQ音乐玩破壁、网易逆袭社交，谁说神曲才是终极模式？
- @当贝市场首发上线钉钉课堂，无需投屏也能上课，分享详细教程
- 「互联科技热门」当贝市场首发上线钉钉课堂，无需投屏也能上课，分享详细教程
- 「经验教程」外星人笔记本电脑怎么进入BIOS
- 经验教程：电脑系统怎么更新
- 「永不言败365」操作从零开始打造一个赚钱社群的创业项目实操教程
- 「网易手机」3299元起的iPhone SE发布后 iPhone 8系列官网下架
- #网易科技频道#科技与潮流互为表里 荣耀30系列演绎先锋美学
- 「钛媒体APP」玩视频号两个月，有人靠卖教程赚七万块，有人给公号导了三千个粉丝
- [网易科技报道]杨元庆提出联想未来10年目标：服务成核心竞争力