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

什么是AXURE

AXURE是一款专业的快速原型设计工具。其设计的文件一般后缀名带有.rp。rp文件是快速原型的缩写——Rapid Prototyping。在项目的设计中,一般用来进行开始阶段的原型确定。

设计QQ音乐APP

如何学习一个软件最快速的方式就是模仿并总结思考,下面本人将通过AXURE模仿设置QQ音乐APP的功能。
素材获取

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

设置母版
母版的主要作用在于减少一些重复性的操作,比如QQ音乐中搜索框、下方中的页面切换、音乐小播放按钮转动的图片。‘

母版的设计


设置分界面

本项目分为五个界面和一个母版。五个界面分别根据QQ音乐中的四个切换界面和音乐播放界面仿照而成,母版是在五个界面相似的基础上建立而成。并且本项目运用了六组交互。下面将根据页面来进行说明。

音乐馆界面:
音乐馆界面

该界面运用了三个交互:

1.搜索框的使用
通过点击上方的搜索框,可以显示并弹出键盘组合,最后通过在输入框键盘输入需要搜索的歌名等信息,点击确定后,信息会自动显示在搜索框。
弹出键盘组成部分交互

  1. 轮播图的转换
    通过使用动态面板来切换不同的转播图,同时通过条件设置状态改变时、页面载入时、下方小按钮点击时等交互设计完成该模型。
    轮播图的一种状态


     一个圆点的交互设置

3.界面切换和播放按钮点击旋转的转换
下方的点击切换界面和播放按钮
点击热区


通过设置四种不同的组合,设置点击时设置选中、打开链接来实现不同界面的选中颜色和切换界面。最后通过点击播放按钮,设置旋转并且旋转图片设置旋转时来实现播放时持续旋转。

旋转图片旋转时
播放按钮点击交互事件

推荐界面:

该界面新增一个交互:
拖动时界面移动和特定条件下拖动结束时返回。
在这里插入图片描述

拖动事件

在这里插入图片描述

拖动界面总览

在这里插入图片描述

动态界面:

动态界面
在这里插入图片描述

该页面新增加一个交互。
通过设置动态面板来设置滑块的切换,设置单击时,切换到下一个状态,设置滑块移动到达的位置,切换状态。并且更换不同的板块。
滑块动态面板设置

开关动态切换

播放界面:

播放界面

点击热区进入播放界面:

进入播放界面

该界面新增加一个交互
通过构造全局变量play2和play来设置时间轴来进行计算播放时间的计算,并且通过点击右上方的分享界面可以进行分享。通过时间的变化设置进度条的尺寸大小,达到实现实时更新的目的。
时间切换交互样式

按钮切换交互样式

我的
在这里插入图片描述

四、 模型缺点
这里的缺点是指本项目中没有达到设计的目的,并且最后没能修改成功。
1.音乐馆界面中第一个轮播图总是默认选中
在这里插入图片描述

轮播图bug

2.动态图界面中需要单击两次才进行切换,预期是只要单击一次即可
在这里插入图片描述

初始界面

在这里插入图片描述

第一次单击

在这里插入图片描述

第二次单击


总结

模型总存在很多的不足,用了3天完成。希望以后可以得心应手。

  • 6
    点赞
  • 68
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
### 回答1: Axure原型是一种用于创建各类app原型的工具软件。它可以将设计师的创意想法转化成可操作的原型,从而更好地展示应用程序的用户界面、交互方式、流程等。Axure原型具有以下几个主要特点: 一、生动直观。通过模拟用户操作,展示应用程序的交互流程,让人们更加直观地了解产品的功能和特点。 二、易于操作。无需编写代码,可以在界面上直接设计,调整和编辑应用程序的各个界面元素。 三、多人协作。Axure原型支持多个设计师同时协作,共同完成产品的原型设计,提高设计师的效率和沟通速度。 四、灵活性强。Axure原型可以应用于各种应用场景,包括网站、APP等,具有高度的灵活性。 五、快速迭代。Axure原型可以通过精细的交互流程和样式定义,快速迭代产品原型,帮助设计团队快速确认问题点,减少修改成本。 总之,Axure原型是一个强大的应用程序设计工具,它能够帮助设计师快速、高效地创建各类APP原型,提高产品设计的质量和效率。 ### 回答2: Axure原型是一种应用于用户界面设计的交互式原型开发工具。各类app原型也是使用Axure制作的一种原型,它可以快速地将APP原型呈现给用户,以便用户更好地了解和体验产品。 在制作各类app原型时,使用Axure可以通过简单的拖拽和设置不同的交互动作,让原型变得更加真实。开发人员可以使用Axure来创建流程图、线框图、用户界面和交互功能,这样可以更加准确地模拟出APP的体验,提高了设计的效率。 使用Axure还可以在设计过程中让用户更好地参与其中,可以根据用户的反馈进行调整,从而使设计更加符合用户的需求。此外,Axure也可以让团队成员进行协同工作,可以加强团队之间的沟通和协作,提高团队开发效率。 总之,使用Axure原型制作各类APP原型,不仅可以提高开发效率,还可以更好地满足用户的需求,从而推动产品的创新和发展。 ### 回答3: Axure原型是一种用于网站、移动应用程序、软件等的原型设计工具,通过使用该工具,开发人员和设计师可以创建出各种各样的原型,以快速有效地展示出产品的设计概念。 对于移动APP相关的Axure原型,可以生成各种精细的交互效果,如滑动、弹出框、悬浮菜单等,使用户可以通过界面的互动感受到应用程序的真实交互效果,增强用户的使用体验。 个类APP原型的设计过程中,需要考虑到用户需求、行为以及目标,初步制定出设计架构和流程,最终产品需要通过实际测试进行修正、适应,完成用户友好的应用。 总之,在对各类APP进行设计过程中,使用Axure原型可以有效地提高产品的设计效率和品质,是一种非常受欢迎的原型设计工具,也是当前APP设计师必备的设计工具之一。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值