实验一 听歌App原型设计

一、实验题目：原型设计
二、实验目的：掌握产品原型设计方法和相应工具使用。
三、实验要求
1、对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点

墨刀适用领域： 和他人在云端进行线上实时协作，完成多端同时登录，极大减少繁琐的操作和沟通成本。界面简洁，可以进行网页设计即跨平台操作。
墨刀优点：
（1）组件库内置丰富原型组件及页面的素材模式，包含基础、高级、发现三个分类。
（2）大量常见交互组件已经封装，可以直接使用，非常方便快捷。
（3）快捷高效地输出一个高保真模型。时间短、质量高，高保真模型的设计规范应有尽有。
（4）一键预览，可以在预览中操作所有交互。功能稳定，极少发生无法预览的情况。
墨刀缺点：
（1）和他人在云端进行线上实时协作可能会遇到多种问题例如网络。
（2）功能简单，只适用简单操作。
（3）交互功能不够完善。

Axure适用领域：大型复杂原型设计和交互性项目。利用原型图的设计规范，再进行优化，可以输出要求过高的高保真模型。
Axure优点：
（1）满足各种输出高保真原型图的需求。
（2）快速测试UI元素和交互。不用从头开始一步一步做交互效果，提高工作效率。
（3）工具可以使用上手性强，原型图输出更为方便快捷，操作也更加流畅。
Axure缺点：
（1）需要学习大量教程慢慢积累交互设计的操作。
（2）无法一键分享，需要通过自建服务器或托管服务器进行预览和分享。
（3）存储于本地，无论是分享还是合作都需要进行本地传输。下载Axure团队版可以实现多人协作，但是还是依赖局域网，不能够在其他网络下使用。

Mockplus适用领域：Mockplus是一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。
Mockplus优点：
（1） 界面设计较为方便。
（2）有原型演示，可以帮助前端设计师、后端程序员更好地理解你的原型产品。
（3）有丰富的组件和模板。
Mockplus缺点：
（1）一些功能相对有限，还需完善。
（2）不支持鼠标悬停和手势交互。
（3）设计不够灵活，文档支持欠缺。

四、实验过程
前言：随着互联网技术的不断发展和普及，音乐行业也面临了巨大的变革。在线音乐平台的崛起，标志着传统音乐产业正朝着数字化和网络化方向发展。音乐数字化存储和传输成为可能。传统的实体唱片已经无法满足人们多样化的音乐需求，而在线音乐平台及时呼应了这一趋势，小艺音乐提供了更便捷、更多样的音乐选择。
主题名称：听歌App原型设计：小艺音乐
功能：小艺音乐App是一款融歌曲和搜索、在线播放、同步歌词为一体的音乐聚合播放器。具有“全”、“快”、“炫”三大特点。100万首歌曲及MV，每日更新：整合了互联网上百万首歌曲、MV、歌词和写真，每周更新百张以上专辑。一点即播，无需等待：应用多资源超线程技术，同步欣赏明星写真、滚动歌词：像卡拉OK一样欣赏同步歌词，像看电影一样欣赏写真图片。
App总体设计
1.浅蓝色背景的音乐app界面设计，渐变细线条是这个设计的特点。
2.一套完整的音乐app设计，细节完整到位，可以直接下载研究学习。
3.选择明显和清晰的元素，例如：单曲名称和专辑名的字体、音乐播放界面的控制条和菜单按钮等，使用户能够轻松识别和操作应用的界面。
4.给用户提供一些自定义选项和功能，如选中的图像或图标，以及UI主题和配色方案等，提高用户体验，从而逐渐优化与推动应用界面的大众化意见。

界面设计
（1）进入界面
界面功能：吸引用户使用，吸引访问者留下继续访浏览网站其它页面，并转化为平台客户。
界面组成：使用简洁、常用的页面布局和文字
前置条件：打开App
后置条件: 登录App
操作步骤: 点开App图标，即可看到此界面

（2）登录界面
界面功能：解决用户与系统之间的问题，将现实的我们与虚拟的我们进匹配
界面组成：输入框：输入手机号码和密码，以及登录，注册，同意协议，遇到问题按钮等
前置条件：进入App
后置条件: 登录App
操作步骤：进入App之后，进行正常登录操作，填写相应材料

界面功能：解决用户与系统之间的问题，将现实的我们与虚拟的我们进匹配
界面组成：1.输入框：填写手机号，获取验证码按钮，找回密码和账号申诉及取消按钮
2.输入框：填写手机号，获取验证码按钮，填写图形验证码，注册按钮
3.输入验证码，确认和重新获取按钮
前置条件：进入App
后置条件: 注册App或者忘记账号密码
操作步骤：进入App之后，如果没有账号就需要进行获取验证码操作或者是忘记密码和替他问题

（3）音乐界面
界面功能：了解受众，得到目标受众的需求、喜好、期望数据，以及他们如何与平台交互，可以帮助App确定推荐内容方向。
界面组成：音乐 音频 视频 我的 按钮等。还有每日推荐，喜欢，排行榜，分类等操作。满足用户各式各样的需求。
前置条件：登录App
后置条件: 进行用户自定义操作
操作步骤：登录App之后，就进入到首页，可以进行听歌，看视频，听音频等等一系列操作

（4）搜索界面
界面功能：满足用户需求，得到相应搜素结果。
界面组成：搜索框 推荐听歌内容频道 热搜榜以及正在播放的音乐等等。
前置条件：登录App
后置条件: 搜索到用户想要的内容
操作步骤：登录App之后，就进入到首页，点击右上方搜索按钮，就可以出现搜索界面

（5）音频界面
界面功能：了解受众，得到目标受众的需求、喜好、期望数据，以及他们如何与平台交互，可以帮助App确定推荐内容方向。
界面组成：直播，满足用户各式各样的需求。
前置条件：登录App
后置条件: 观看音频
操作步骤：登录App之后，就进入到首页，可以进行听歌，看视频，听音频等等一系列操作点击音频按钮，就可以得到音频界面

（6）视频界面
界面功能：了解受众，得到目标受众的需求、喜好、期望数据，以及他们如何与平台交互，可以帮助App确定推荐内容方向。
界面组成：直播语音歌房还有各种直播间
前置条件：登录App
后置条件: 观看视频
操作步骤：登录App之后，就进入到首页，可以进行听歌，看视频，听音频等等一系列操作点击视频按钮，就可以得到视频界面

（7）我的界面
界面功能：方便用户查询最近歌单，评论留言，便捷用户查询。
界面组成：歌单及已购歌单等分界面
前置条件：登录App
后置条件:进行自定义操作
操作步骤：登录App之后，就进入到首页，可以进行听歌，看视频，听音频等等一系列操作点击我的按钮，就可以得到我的界面，方便下一步操作

（8）设置界面
界面功能：用户退出登录，查询常用功能，设置等
界面组成：常用功能界面以及设置，听歌识曲，扫一扫等功能
前置条件：登录App
后置条件:进行自定义操作
操作步骤：登录App之后，就进入到首页，可以进行听歌，看视频，听音频等等一系列操作点击我的按钮，再点击右上方，就可以得到设置界面

界面切换流程