网易云音乐的界面设计(网易云音乐怎么自定义背景)

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

制作示例如下:

网易云音乐发现界面

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

动态面板实现轮播功能

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

轮播图片动态面板

序号动态面板

序号1

序号2

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

页面载入时用例1

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

序号1热区用例设置

2 动态面板隐藏滚动条

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

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

外侧动态面板

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

内侧动态面板

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

内侧动态面板状态1

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

拖动时用例设置

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

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

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

本文由 @产品小小白原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

(0)

相关推荐

  • vue如何添加音乐?vue给视频添加音乐方法

    vue是一款手机小视频视频制作软件,可以将在制作好的视频,发到朋友圈等地方.只能制作固定大小的视频,还可以给视频添加音乐,让视频看起来更加好.那么我们怎么用vue添加音乐呢?小编下面告诉大家. vue ...

  • 微信怎么用摇一摇分享音乐?微信摇一摇分享音乐方法

    如果正在用手机欣赏一首音乐,无论是用APP软件收听,还是在线收听,觉得内容精彩,希望将其分享到你的“朋友圈”或共享给某个朋友,用“摇一摇”的办法就可实现,而且不另占手机内存.因为网上类似的分享音乐的方 ...

  • 网易云音乐mac版如何下载无损音乐

    网易云音乐mac版怎么下载无损音乐?网易云音乐for mac非常人性化,它能根据你平时听音乐的喜好,自动给你推荐音乐,准确度大体很不错.MacBook用户都有一个难题,就是不知道去哪里下载免费的音乐. ...

  • 网易云音乐怎么清除图片缓存和音乐缓存

    网易云音乐是我们现在经常使用的音乐播放软件之一,今天小编跟大家分享的是网易云音乐怎么清除图片缓存和音乐缓存.具体如下:1. 首先我们打开手机中的网易云音乐.进入主界面之后点击右下方的账号.2. 然后我 ...

  • 手机网易云音乐软件怎么导入酷狗音乐的歌单

    我们的手机中有很多常用的音乐软件,但是为了我们使用的方便我们会将软件中的歌单导入到常用的音乐软件中,接下来小编就教大家怎样在网易云音乐软件中导入酷狗音乐的歌单.具体如下:1. 首先我们打开手机进入到桌 ...

  • 如何在网易云音乐app中设置下载的音乐到SD卡?

    我们在使用网易云音乐听歌的时候想要将自己喜欢的歌曲下载到SD卡中应该如何设置呢?今天,小编就教大家在网易云音乐app中设置下载的音乐到SD卡.具体如下:1. 首先,我们打开手机中的网易云音乐,之后点击 ...

  • 如何分享网易云音乐App里私人FM的音乐歌曲

    网易云音乐是我们常用的一款听歌App,深受大家的欢迎,给生活带来了极大的乐趣,有的朋友想知道怎么分享网易云音乐App里私人FM的音乐歌曲,小编为大家分享解决问题的方法.具体如下:1. 首先,请大家在自 ...

  • 网易云和QQ音乐哪个好(网易云音乐和QQ音乐哪个好)

    大家好啊,你们平时听音乐都用的什么软件呢?网易云?QQ音乐?哦,对了,QQ音乐前一段时间还全新改版了,页面很好看啊!但是不论是QQ还是网易云,亦或者是虾米,有的资源都是需要付费的,好不容易搜了一首好听 ...

  • 怎么把QQ音乐歌单导入网易云音乐

    怎么把QQ音乐歌单导入网易云音乐?很多新入网易音乐的朋友需要将歌单同步转回,下面小编教大家怎么转,供大家参考! 操作方法 01 首先启动QQ音乐,进入你的账户,点击我的,如下图所示 02 进入我的界面 ...

  • 怎么将网易云音乐的歌单导入QQ音乐

    网易云音乐凭其粉丝推崇一时间风头无两,但是随着核心竞争力的歌手版权缺失,导致一些用户转投向QQ音乐.那么,怎么将网易云音乐的歌单导入QQ音乐呢?下面让我来给大家介绍下吧,希望对大家有所帮助. 操作方法 ...