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

访客3年前黑客文章994

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

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

*** 示例如下:

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

网易云音乐发现界面

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

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

动态面板实现轮播功能

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

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

轮播图片动态面板

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

序号动态面板

序号1

序号2

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

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

页面载入时用例1

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

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

序号1热区用例设置

2 动态面板隐藏滚动条

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

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

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

外侧动态面板

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

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

内侧动态面板

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

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

内侧动态面板状态1

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

相关文章

Axure教程:顶部导航光标定位

Axure教程:顶部导航光标定位

当鼠标移入顶部菜单时,菜单顶部有光标跟随,当移出时,光标自动回到当前页面菜单位置。这种效果应该怎么实现呢? 如下图: 顶部导航光标定位 线上效果图,查看: 制件方法 1. 页面与导航栏制作 按平时...

Axure教程:登录滑动拼图验证交互教学

Axure教程:登录滑动拼图验证交互教学

滑动拼图是互联网一种新的验证形式,被广泛应用在各种网站的登录、注册、找回密码。用户可以不需要填写复杂的验证码,而是用鼠标去拖动滑块便能通过验证。 下面为今日头条的滑动拼图验证,接下来将为大家讲解:...

Axure教程:这几个小技巧你一定要知道

Axure教程:这几个小技巧你一定要知道

编辑导读:Axure是产物司理在事情中最常用到的软件之一,尽量它的利用范畴很是遍及,可是有一些小能力许多人并不知道。本文作者总结了Axure在利用中的一些小能力,与你分享。 一、Axure建造页面,...

Axure入门案例系列:简单音频播放动效

Axure入门案例系列:简单音频播放动效

编辑导读:音频播放特效各人都应该见过,本文作者操作Axure动态面板成果对音频播放动效举办了一个简朴的原型设计,并对进程中碰着的一些问题举办了简朴的梳理,与各人分享。 局部动态的展示可以或许的快速的...

Axure教程:中继器实现朋友圈发布图文动态

Axure教程:中继器实现朋友圈发布图文动态

编辑导读:本文是关于Axure中继器的运用操纵,作者具体讲授了操作Axure中继器实现伴侣圈宣布图文动态的操纵流程,较量基本,供初学者参考进修。 实现的交互:模仿微信伴侣圈,选择图片,编辑文字的交互...

Axure教程:APP/PC页面悬浮按钮显示与隐藏效果

Axure教程:APP/PC页面悬浮按钮显示与隐藏效果

无论是APP可能PC端页面,右下角大多城市有默认收起的悬浮按钮,点击悬浮按钮后会展开更多信息。本文作者先容了如何用Axure实现悬浮按钮显示与埋没结果的操纵步调,以及实现进程中的一些心得体会,与各人分...