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

访客3年前黑客文章993

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

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

*** 示例如下:

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

网易云音乐发现界面

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

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

动态面板实现轮播功能

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

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

轮播图片动态面板

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

序号动态面板

序号1

序号2

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

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

页面载入时用例1

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

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

序号1热区用例设置

2 动态面板隐藏滚动条

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

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

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

外侧动态面板

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

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

内侧动态面板

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

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

内侧动态面板状态1

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

相关文章

⽹易云⾳乐7.0推荐场景分析——进化明显,退化更明显!

⽹易云⾳乐7.0推荐场景分析——进化明显,退化更明显!

对网易云音乐新版本来说,场景推荐是新亮点,不过又旧版本已有的情况下,网易云音乐的推荐策略为何如何糟糕呢?笔者将针对这一问题做出深层分析。 目录: 1. 首页是重要的营销场景,先拿TA开刀 1.1...

竞品分析:QQ音乐VS网易云音乐,未来谁更受喜爱?

竞品分析:QQ音乐VS网易云音乐,未来谁更受喜爱?

编辑导读:QQ音乐和网易云音乐是今朝利用最广的音乐软件之一,背靠大厂的它们在各个成果和模块“厮杀”得藕断丝连。本文以两者为例,从四个角度举办深入阐明,但愿对你有辅佐。 QQ音乐、网易云音乐、百度音乐...

网易云音乐的红海出圈之路

网易云音乐的红海出圈之路

编辑导语:网易云音乐最近几回上热搜,从“网抑云”到“云村治愈所”,可见网易云音乐在挽回形象上所作出的尽力。网易云音乐的出圈之路很奇特,接下来,本文作者为我们做了具体地阐明。 最近一段时间,“网抑云”...

产品分析 | 网易云音乐,音乐产品的视觉化探索之路

产品分析 | 网易云音乐,音乐产品的视觉化探索之路

编辑导读:网易云音乐作为当下在年青人群体中大火的音乐类APP必有其独到之处,本文作者主要从产物框架、竞品阐明、用户阐明和成果阐明几个方面临网易云音乐的视觉化摸索之路举办了产物阐明,与各人分享。 本文...

差2分钟零点了,该网抑云了

差2分钟零点了,该网抑云了

编辑导读:许多人喜欢网易云音乐是因为出色的评论,可是,这个曾经引觉得傲的利益最近却被群嘲。评论区矫情颓废的文字让网友戏称其为“网抑云”,群嘲现象的背后有哪些需要引起重视的点呢?本文将从三个方面临这一现...

中年危机加剧的网易云音乐,不懂年轻人

中年危机加剧的网易云音乐,不懂年轻人

编辑导读:基于文案激发共识,是网易一贯以来的产物基因,”网抑云“的背后,很洪流平上是网易云音乐自身的主观借势加持,基础的破局要领照旧在于版权。文章对此展开了阐明接头,一起来看看。 2020年8月5日...