Axure-原型图设计：网易云音乐首页原型设计.pdfVIP

模拟网易云音乐首页原型图 目录 模拟网易云音乐首页原型图 1 网易云音乐发现界面 2 1.动态面板实现轮播功能 2 动态面板实现轮播功能 3 轮播图片动态面板 4 序号动态面板 4 序号 1 4 序号 2 4 页面载入时用例 1 5 序号 1 热区用例设置 6 2 动态面板隐藏滚动条 6 外侧动态面板 6 内侧动态面板 7 内侧动态面板状态 1 7 拖动时用例设置 8 动态面板无滚动条实现水平滚动 9 制作示例如下： 网易云音乐发现界面 1.动态面板实现轮播功能 动态面板实现轮播功能 对网易云音乐界面观察后发现， 自用户进入网易云音乐首页后一直有七 组图片在进行轮播， 同时下方还包括了对图片进行选择的序号。这个时 候，我们需要使用两个动态面板，其中一个设置轮播图片，另一个设置 下方序号。 轮播图片动态面板 序号动态面板 序号 1 序号 2 在轮播图片动态面板的每个状态下增添形状相同内容不同的图片， 在序 号面板下增添序号标签， 选中哪个序号时就将该处原点设置为红色，其 它为暗灰色。接下来，我们在页面载入时设置用例 1 ，设置两个面板状 态皆为 Next ，需要注意的是动画效果和循环间隔一定要保持一致呀 ~ 页面载入时用例 1 实现页面载入时的轮播功能后， 我们还需要设置当鼠标移入或者单击序 号点时， 跳转到序号对应的图片中，这个时候就需要利用我们的热区功 能，为每个序号点增加热区后设置用例， 设置图片动态面板和序号动态 面板为一一对应的关系，注意保持动画效果和循环间隔一致呀 ~ 现利用 序号 1 进行举例说明。此时轮播效果及交互功能就设计完毕啦 ~ 序号 1 热区用例设置 2 动态面板隐藏滚动条 我们在使用网易云音乐的时候发现， 一些模块可以进行左右滑动却没有 丑陋的滚动条显示出来， 这是为什么呢？现在和我一起做， 利用动态面 板功能一起来隐藏滚动条！ 首先第一步我们需要新建一个动态面板命名为外侧 外侧动态面板 接下来我们在外侧动态面板状态