目录
一、原型设计工具比较
墨刀
-
优点
-
较为丰富的组件，可以实现稍微复杂的交互功能
-
优秀的协作功能可以实现多人同时协作，大大提高效率
-
界面简单，交互方便上手时间快，学习时间较短，出作品时间周期快
-
-
缺点
- 大部分高级功能需要vip，对于偶尔使用的人或者学生来说，成本较高，且不划算
- 不支持复杂交互，如果要实现复杂交互，比较繁琐且困难
- 自定义组件功能较弱，且用户自定义组件功能限制较大
Axure
- 优点
- 功能强大，不仅支持文档，图画等功能，并且交互简单，方便上手
- 可以实现复杂且流畅的交互操作，可以实现较为真实，细腻的交互演示
- 自定义组件丰富，用户自定义组件功能较强，可以实现多样化的组件演示
- 缺点
- 由于功能强大，所以交互界面较为复杂，且交互界面，部分功能使用频率较少，界面复杂
- 学习成本高，不易上手，且需要一定时间的实际操作才能实现基本功能
- 多人交互会有延迟，无法随时随地同步操作
Mockplus
- 优点
- 交互界面简单明了，容易上手操作，学习成本低
- 交互方便，交互提示简单易懂
- 项目层次明了方便可以随时更改项目子位置与图层位置，项目目录一目了然，有ps基础同学更容易操作
- 缺点
-
无法实现较为复杂丰富的交互界面
-
组件功能还需完善，无法实现较为丰富的交互动画
-
部分组件和自定义组件交互较差，例如进度条等功能无法交互
-
二、原型设计实践
1.原型设计主题
- 本组选题为在线音乐播放器，取名为T音乐
2.原型设计构思
- 选题为在线听歌软件，所以参照现有的几大音乐软件，做出这次原型设计。其中主要参考网易云音乐设计了移动端的在线音乐听歌软件“T音乐”设计了登录，主页，推荐，听歌，歌词，分享，下载，听歌识曲，以及评论等功能，来满足大众的需求并且深化主题“在线听歌”，所以我们着重设计并且优化了听歌功能，对排版，设计，交互，功能性和实用性重点设计。
3.原型设计实现
-
1.工具选择原因
结合三个不同工具的优缺点考虑，最后选择了Mockplus,主要是由于项目工程较小，且需要多人协作来实现，况且作业时间较少，故选择Mockplus
-
2.软件功能实现
- 本人主要参与登录界面，听歌界面的设计与实现，以及完善不同成员的界面之间的交互完善。所以本文着重介绍登录界面以及听歌界面的功能与设计
-
登录页面
- 界面功能
- 通过不同方式进行登录
- 电话号码一键登录
- 账号密码登录
- 提供其他方式登录软件（如微信，支付宝等主流软件）
- 界面组成
- T音乐logo
- T音乐宣传词
- 手机号一键登录按钮
- 账号密码登录按钮
- 用户协议按钮
- 其他主流软件登录按钮
- 前置条件
- 打开软件
- 后置条件
- 显示登录方式
- 界面功能
-
听歌页面
- 界面功能
- 通过播放按钮实现歌曲的播放
- 分享歌曲
- 喜欢歌曲
- 下载歌曲
- 切换播放歌曲
- 调出播放列表
- 显示歌曲基本信息
- 界面组成
- 专辑封面
- 歌曲进度条
- 播放暂停按钮
- 分析按钮
- 播放列表按钮
- 更多按钮
- 下载按钮
- 返回按钮
- 前置条件
- 打开app，进入首页，点击下方歌曲图标
- 后置条件
- 打开播放页面
- 界面功能
-
歌词界面
- 界面功能
- 实现歌词的显示
- 分享歌词
- 界面组成
- 可滑动歌词文本
- 分享按钮
- 播放页重复按钮不再介绍
- 前置条件
- 点击播放页专辑图片
- 后置条件
- 显示歌词
- 界面功能
-
更多信息界面
- 界面功能
- 显示歌曲的详细信息
- 支持设定铃声
- 支持定时关闭
- 支持倍速播放
- 界面组成
- 歌曲名称
- 显示具体信息，如：歌手，创作者，专辑等
- 显示播放歌曲来源
- 前置条件
- 点击更多按钮
- 后置条件
- 显示更多信息界面
- 界面功能
-
一些小的界面切换
- 添加喜欢按钮
- 切换播放按钮
- 歌曲循环情况按钮
-
4.界面交互
- 为了实现更好的用户体验，我们对于所有的界面进行了交互设计，具体交互视频链接如下
https://www.bilibili.com/video/BV1Ks4y1A7cg/?vd_source=d1c2561319edd5685e45da14099a4c19
- 为了实现更好的用户体验，我们对于所有的界面进行了交互设计，具体交互视频链接如下
-
5.界面切换流程
- 先进入登录界面，选择登录方式登录之后，进入首页，点击播放栏，进入播放页，可以通过点击播放顺序按钮切换播放顺序，点击歌曲专辑封面，进入歌词页，可以通过滑动预览所有歌词，点击分享，进入分享页面。
