Kay Ginger's profile

High Fidelity Prototype of QQ Music With Axure

用Axure临摹QQ音乐 APP。视频演示如下:
实现的功能有:

我的、音乐馆、发现三个Tab点击/横划切换
· 如果横划速度快,即swipe,可以立即切换
· 如果横划速度慢,即drag,需要drag半屏的距离才能切换
· 一般情况,页面跟随手指移动。边缘情况下,页面移动距离只有手指移动距离的一般,给人划不动的感觉

向上滚动搜索框隐藏,向下滚动搜索框显示
· 设置成向上滚动300px搜索框隐藏,向下滚动不管多少距离,搜索框都会显示
· 搜索框隐藏时点击其他Tab标签,搜索框显示

我的
· 跑步电台横划删除
· 自建歌单/收藏歌单可以切换,实现方法和顶部的Tab类似

音乐馆
· 顶部banner轮播。用户也可以左右滑动。为了实现自动轮播,需要在“载入时”“状态改变时”分别添加自动循环。

发现
· 向上滚动时,杂志上方有灰色遮罩,杂志稍向上位移。滚动距离越大,灰色遮罩颜色越深。这需要设置不透明度时,用函数把滚动位置和不透明度关联起来。

汉堡包
· 点击汉堡包出现侧边栏
· 在“我的”快速向右划,也可以出现侧边栏
· 在“我的”慢慢向右drag,也能看到侧边栏,实现方式和发现页的杂志类似。status bar做成了动态面板,有白/黑色两种状态,出现侧边栏时,状态栏变成黑色

High Fidelity Prototype of QQ Music With Axure
Published:

High Fidelity Prototype of QQ Music With Axure

Published:

Tools