网易云音乐appAXURE原型设计

最近，本人在自学axure，并花了一周多的时间利用AXURE软件独自完成了网易云音乐app的部分交互效果设计，可以直接拉到底部点击原型网址查看app交互效果。现阶段能做出的效果如下：

一、登录页设计实现效果

1、启动画面展示后进入登录页面；

2、点击QQ登录图标可以快捷进入到主界面；

3、手机号登录验证，输入手机号：12345678901，密码：123456，可以进入到主界面，否则无法进入，弹出相应消息框；

4、小图标和矩形，悬停、鼠标点击等交互效果。

二、音乐页设计实现效果

1、左侧菜单效果。点击左侧菜单栏弹出 ”设置菜单栏“页，设置页内容可以鼠标单击上下拖动；并可以实现左侧菜单栏左右拖动效果，拖动距离不到一半，自动返回原位置。

2、可鼠标单击顶部音乐、推荐、视频和搜索等图标跳转到相应页面，点击底部音乐播放区域，可跳转到音乐播放页面。

3、点击“创建的歌单”和”收藏的歌单“区域的右箭头，可以实现展开收起效果。

4、鼠标单击内容区域可以上下拖动显示内容。

三、发现页设计实现效果

1、点击“推荐”等菜单项，可以移动下方白色线条，下方区域自动切换到对应的内容页面。

2、图片轮播功能。左右拖动可以循环切换图片，相应的小圆点自动移动，并且图片可以自动循环轮播。

3、可鼠标单击顶部音乐、推荐、视频和搜索等图标跳转到相应页面，点击底部音乐播放区域，可跳转到音乐播放页面。

4、鼠标单击内容区域可以上下拖动显示内容。

四、视频页设计实现效果

1、推荐区域菜单栏。鼠标可以在规定区域内拖动推荐区域菜单栏，单击菜单项时候，实现菜单项下方线条的移动，菜单栏的水平移动，以及下方内容区域会自动切换到对应的内容。

1、左侧菜单效果。点击左侧菜单栏弹出 ”设置菜单栏“页，设置页内容可以鼠标单击上下拖动；并可以实现左侧菜单栏左右拖动效果，拖动距离不到一半，自动返回原位置。

2、可鼠标单击顶部音乐、推荐、视频和搜索等图标跳转到相应页面，点击底部音乐播放区域，可跳转到音乐播放页面。

3、鼠标单击内容区域可以上下拖动显示内容。

4、鼠标单击点赞图标，可以实现点赞数+1和-1效果。

五、搜索页设计实现效果

1、搜索框输入右侧图片music栏的内容，可以显示筛选结果。

2、点击热门搜索下面的矩形框可以实现将矩形内容填入到搜索框。

3、在历史搜索显示区域，单击删除图标，实现历史记录删除效果。

4、单击“歌手分类”框可以跳转到相应页面。

5、点击底部音乐播放区域，跳转到音乐播放界面。

六、音乐播放页设计实现效果

1、点击播放按钮，可以实现唱片转动，音乐计时效果，时间进度自动移动，播放到05：08，自动暂停播放，停止唱片转动。点击暂停，唱片停止转动，音乐计时停止，进度条停止。

2、可以自由拖动进度条小圆点，并且实时显示对应的具体时间和进度条长度。

3、单击“爱心”图标，显示选中取消效果

4、点击顶部左箭头返回到音乐页面。

---

网易云音乐appAXURE原型预览网址： https://q1lpd2.axshare.com 。

最后，欢迎批评指导~~~~~