网易云音乐播放页面的图片设置,网易云音乐播放界面图怎么改

首页 > 实用技巧 > 作者:YD1662023-11-07 14:38:57

网易云音乐播放页面的图片设置,网易云音乐播放界面图怎么改(5)

通过我们对网易云音乐发现界面的观察我们发现搜索框中带有一个类似于放大镜的标志,带有搜索图案的搜索框制作过程如下:

(1)拖入宽为305,高为33的矩阵,同时设置其圆角直径为20,如下图所示

(2)在矩形中添加“放大镜”图片,以及文本框,设置文本框为无边框且宽度小于33,同时在文本框中添加提示文字:

(3)最后一步只要在矩形中添加热区,对热区设置单击时交互效果就可以啦~

若有搜索历史的话,我们默认将搜索历史显示出来;若需要对搜索历史进行删除的话,我们要有弹窗对用户的行为进行确认,以防止用户只是误点了删除按钮:

首先设置一个黑色透明遮罩层以及提示框,将其隐藏;在我们单击清除历史记录按钮后将其显示出来。

若单击提示框的取消按钮,则将黑色透明遮罩层以及提示框隐藏起来;

若单击提示框的确认按钮,在将黑色透明遮罩层以及提示框隐藏起来的同时,我们需要将历史记录及下边的标签隐藏起来,同时将热搜榜向上移动。

二、歌手分类

在使用网易云音乐歌手分类界面时我们发现,进入页面时默认显示歌手分类标签及热门歌手;当滑动热门歌手名单列表时,歌手标签会自动隐藏起来,我们单击筛选时又会自动显示歌手标签,下面我们来看一下这个功能的实现过程:

(1)首先,热门歌手列表我们采用两个动态面板的组合,之前的推文已经介绍过具体的实现过程;

(2)当滑动热门歌手列表时,我们将歌手分类标签隐藏起来,同时将动态面板向上移动,“全部歌手”以及“筛选”标签显示出来。

这里我们设置两个用例,一个为拖动时,一个为拖动结束时:

网易云音乐播放页面的图片设置,网易云音乐播放界面图怎么改(6)

(3)同理,当我们单击筛选时,我们需要隐藏必要的标签以及将动态面板根据固定坐标下移。

三、歌曲播放界面

通过对网易云音乐歌曲播放界面使用后,我们选取部分功能进行设计,即播放暂停音乐、对唱片封面进行旋转、圆形动态效果、时间进度条、标记喜爱的音乐以及弹出分享窗口。

单击音乐播放按钮时,显示暂停按钮;同时唱片封面进行选择,围绕着唱片封面的原型呈现动态效果,时间增加以及进度条向前移动,针对以上我们设置如下用例:

1. 单击播放按钮时相关用例

将播放按钮隐藏起来,显示暂停按钮并置于顶层;唱片封面以每100ms旋转1°的速度;进度条标识以每1000ms的速度移动1;设置唱片封面周围的动态圈为动态面板,在每个状态中放入圆心相同、半径不同的空心圆,将其设置为向后循环效果;

网易云音乐播放页面的图片设置,网易云音乐播放界面图怎么改(7)

为使单击暂停按钮时,唱片封面停止旋转以及动态圆圈停止动态变化,同时为保持旋转等变化的一致性,我们对唱片封面图片设置旋转时的用例如下,需要注意的是,此时我们需要添加判断条件,即当暂停部件可见时才会执行以下操作,暂停图标隐藏时动作随即停止:

网易云音乐播放页面的图片设置,网易云音乐播放界面图怎么改(8)

上一页123下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.