AXURE实现QQ音乐APP部分原型功能

2020-05-0915:56:32原型设计Comments3,409 views字数 1085阅读模式

什么是AXURE
AXURE是一款专业的快速原型设计工具。其设计的文件一般后缀名带有.rp。rp文件是快速原型的缩写——Rapid Prototyping。在项目的设计中,一般用来进行开始阶段的原型确定。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

设计QQ音乐APP
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

如何学习一个软件最快速的方式就是模仿并总结思考,下面本人将通过AXURE模仿设置QQ音乐APP的功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

素材获取
1.确定手机模型的外壳,设置其中的内部大小。当然这个也可以通过AXURE中一些基本元件的变化很容易得到。
2.从手机中进行截取QQ音乐APP的图片,通过PS进行P图,获得大部分的素材。
3.获得一些需要实现的动态图标,比如播放按钮、红心变化、音乐符号等文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

设置母版
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

母版的主要作用在于减少一些重复性的操作,比如QQ音乐中搜索框、下方中的页面切换、音乐小播放按钮转动的图片。‘文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

设置分界面
本项目分为五个界面和一个母版。五个界面分别根据QQ音乐中的四个切换界面和音乐播放界面仿照而成,母版是在五个界面相似的基础上建立而成。并且本项目运用了六组交互。下面将根据页面来进行说明。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

音乐馆界面:
AXURE实现QQ音乐APP部分原型功能
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

该界面运用了三个交互:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

1.搜索框的使用
通过点击上方的搜索框,可以显示并弹出键盘组合,最后通过在输入框键盘输入需要搜索的歌名等信息,点击确定后,信息会自动显示在搜索框。
AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

  1. 轮播图的转换
    通过使用动态面板来切换不同的转播图,同时通过条件设置状态改变时、页面载入时、下方小按钮点击时等交互设计完成该模型。
    AXURE实现QQ音乐APP部分原型功能AXURE实现QQ音乐APP部分原型功能

3.界面切换和播放按钮点击旋转的转换
下方的点击切换界面和播放按钮
AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

通过设置四种不同的组合,设置点击时设置选中、打开链接来实现不同界面的选中颜色和切换界面。最后通过点击播放按钮,设置旋转并且旋转图片设置旋转时来实现播放时持续旋转。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

AXURE实现QQ音乐APP部分原型功能
AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

推荐界面:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

该界面新增一个交互:
拖动时界面移动和特定条件下拖动结束时返回。
AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

拖动事件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

拖动界面总览文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

动态界面:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

动态界面
AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

该页面新增加一个交互。
通过设置动态面板来设置滑块的切换,设置单击时,切换到下一个状态,设置滑块移动到达的位置,切换状态。并且更换不同的板块。
AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

播放界面:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

进入播放界面文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

该界面新增加一个交互
通过构造全局变量play2和play来设置时间轴来进行计算播放时间的计算,并且通过点击右上方的分享界面可以进行分享。通过时间的变化设置进度条的尺寸大小,达到实现实时更新的目的。
AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

我的
AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

四、 模型缺点
这里的缺点是指本项目中没有达到设计的目的,并且最后没能修改成功。
1.音乐馆界面中第一个轮播图总是默认选中
AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

轮播图bug
2.动态图界面中需要单击两次才进行切换,预期是只要单击一次即可
AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

初始界面
AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

第一次单击
AXURE实现QQ音乐APP部分原型功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html

第二次单击
总结
模型总存在很多的不足,用了3天完成。希望以后可以得心应手。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18689.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/18689.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定