快好知 kuaihz

Axure教程:网易云音乐首页原型设计

作者利用Axure动态面板功能对网易云音乐首页进行了一个简单的原型设计,那如何利用Axure动态面板功能实现轮播效果及交互功能以及隐藏丑陋的滚动条呢?下面来和我一起研究一下~

制作示例如下:

网易云音乐发现界面

1.动态面板实现轮播功能

动态面板实现轮播功能

对网易云音乐界面观察后发现,自用户进入网易云音乐首页后一直有七组图片在进行轮播,同时下方还包括了对图片进行选择的序号。这个时候,我们需要使用两个动态面板,其中一个设置轮播图片,另一个设置下方序号。

轮播图片动态面板

序号动态面板

序号1

序号2

在轮播图片动态面板的每个状态下增添形状相同内容不同的图片,在序号面板下增添序号标签,选中哪个序号时就将该处原点设置为红色,其它为暗灰色。接下来,我们在页面载入时设置用例1,设置两个面板状态皆为Next,需要注意的是动画效果和循环间隔一定要保持一致呀~

页面载入时用例1

实现页面载入时的轮播功能后,我们还需要设置当鼠标移入或者单击序号点时,跳转到序号对应的图片中,这个时候就需要利用我们的热区功能,为每个序号点增加热区后设置用例,设置图片动态面板和序号动态面板为一一对应的关系,注意保持动画效果和循环间隔一致呀~现利用序号1进行举例说明。此时轮播效果及交互功能就设计完毕啦~

序号1热区用例设置

动态面板隐藏滚动条

我们在使用网易云音乐的时候发现,一些模块可以进行左右滑动却没有丑陋的滚动条显示出来,这是为什么呢?现在和我一起做,利用动态面板功能一起来隐藏滚动条!

首先第一步我们需要新建一个动态面板命名为外侧

外侧动态面板

接下来我们在外侧动态面板状态1中新建一个动态面板命名为内侧,注意其长度大于外侧动态面板,需包含要展示的所有内容

内侧动态面板

新建完成后,我们在内侧动态面板状态1中填充要展示内容。

内侧动态面板状态1

填充完内容后,我们对外侧动态面板拖动时设置用例,当拖动外侧动态面板时,内侧动态面板进行水平移动,同时设置左侧边界小于零,右侧边界小于外侧动态面板宽度(设置边界需根据实际情况考虑完成),这样我们就利用动态面板实现了移动且隐藏了丑陋的滚动条,大功告成啦~

拖动时用例设置

动态面板无滚动条实现水平滚动

动态面板真的是功能多多呢~在制作网易云音乐首页原型设计的时候,还利用了动态面板实现了基本的界面切换功能~

欢迎大家和我一起多多交流,共同进步~

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:网易  网易词条  原型  原型词条  首页  首页词条  教程  教程词条  设计  设计词条  
原型

 用原型写需求文档-后台系统篇

作者整理了一套后台系统原型模板,与各位PM分享,希望给大家的工作带来些帮助。后台系统的原型模板早在做APP模板前就已经使用了很长一段时间。后台原型不需要也不适合...(展开)

原型

 Axure RP 9 教程:记录...

本案例制作一个可拖动的条形进度条,同时可以显示当前位置的百分比。一起来看看~实现效果:自由拖动进度条记录当前进度条的百分比顺便记录下你的颜值实现逻辑this.r...(展开)

原型

 Axure教程(中级):网易云音...

本文笔者给大家分享了模仿网易云听歌识曲界面效果的教程,文章分为四个部分:页面布局、添加交互、交互细节调整以及预览效果。本教程给大家分享一下模仿【网易云音乐】AP...(展开)