江苏龙网

  1. 首页 > 资讯 > 科技 > >

『』Axure教程：网易云音乐界面原型设计


作者利用Axure动态面板功能对网易云音乐的搜索界面、歌手分类界面以及歌曲播放界面进行了一个简单的原型设计 ， 与大家分享 。
『』Axure教程：网易云音乐界面原型设计
本文插图

在歌曲播放界面 ， 我们实现了唱片的旋转 ， 带时间的进度条 ， 对喜欢的音乐进行标记等基础效果 。 下面我们先来浏览一下总体的实现效果：
发现界面、搜索界面、歌手分类界面以及歌曲播放界面交互效果：
『』Axure教程：网易云音乐界面原型设计
本文插图

音乐播放界面：
『』Axure教程：网易云音乐界面原型设计
本文插图

在对已有的产品进行原型设计时 ， 最重要的就是要熟练使用产品 ， 了解每一个部分的交互效果 ， 必要时我们可以采用脑图将每个界面的功能及交互效果记录下来~
一、搜索界面
『』Axure教程：网易云音乐界面原型设计
本文插图

『』Axure教程：网易云音乐界面原型设计
本文插图

通过我们对网易云音乐发现界面的观察我们发现搜索框中带有一个类似于放大镜的标志 ， 带有搜索图案的搜索框制作过程如下：
（1）拖入宽为305 ， 高为33的矩阵 ， 同时设置其圆角直径为20 ， 如下图所示
（2）在矩形中添加“放大镜”图片 ， 以及文本框 ， 设置文本框为无边框且宽度小于33 ， 同时在文本框中添加提示文字：
（3）最后一步只要在矩形中添加热区 ， 对热区设置单击时交互效果就可以啦~
若有搜索历史的话 ， 我们默认将搜索历史显示出来；若需要对搜索历史进行删除的话 ， 我们要有弹窗对用户的行为进行确认 ， 以防止用户只是误点了删除按钮：
首先设置一个黑色透明遮罩层以及提示框 ， 将其隐藏；在我们单击清除历史记录按钮后将其显示出来 。
若单击提示框的取消按钮 ， 则将黑色透明遮罩层以及提示框隐藏起来；
若单击提示框的确认按钮 ， 在将黑色透明遮罩层以及提示框隐藏起来的同时 ， 我们需要将历史记录及下边的标签隐藏起来 ， 同时将热搜榜向上移动 。
二、歌手分类
在使用网易云音乐歌手分类界面时我们发现 ， 进入页面时默认显示歌手分类标签及热门歌手；当滑动热门歌手名单列表时 ， 歌手标签会自动隐藏起来 ， 我们单击筛选时又会自动显示歌手标签 ， 下面我们来看一下这个功能的实现过程：
（1）首先 ， 热门歌手列表我们采用两个动态面板的组合 ， 之前的推文已经介绍过具体的实现过程；
（2）当滑动热门歌手列表时 ， 我们将歌手分类标签隐藏起来 ， 同时将动态面板向上移动 ， “全部歌手”以及“筛选”标签显示出来 。
这里我们设置两个用例 ， 一个为拖动时 ， 一个为拖动结束时：
『』Axure教程：网易云音乐界面原型设计
本文插图

（3）同理 ， 当我们单击筛选时 ， 我们需要隐藏必要的标签以及将动态面板根据固定坐标下移 。
三、歌曲播放界面
通过对网易云音乐歌曲播放界面使用后 ， 我们选取部分功能进行设计 ， 即播放暂停音乐、对唱片封面进行旋转、圆形动态效果、时间进度条、标记喜爱的音乐以及弹出分享窗口 。
单击音乐播放按钮时 ， 显示暂停按钮；同时唱片封面进行选择 ， 围绕着唱片封面的原型呈现动态效果 ， 时间增加以及进度条向前移动 ， 针对以上我们设置如下用例：
【『』Axure教程：网易云音乐界面原型设计】 1. 单击播放按钮时相关用例


推荐阅读


上一篇：##LG G9 ThinQ可能不是旗舰：搭载骁龙765G处理器，控制成本

下一篇：数据中心：京东数科宣布机房巡检AI机器人落地金融机构数据中心