首页 > 其他分享 >实验一原型设计——音乐社交类app

实验一原型设计——音乐社交类app

时间:2024-04-16 21:34:16浏览次数:22  
标签:界面 app 音乐 用户 点击 原型 歌曲 社交 图标

一、对比墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点

(一)Moqups:
1.适用领域: Moqups适用于快速创建简单的线框图和原型,特别是对于团队合作和迭代设计有很好的支持。

2.优点:

  • 用户界面简洁,易于学习和使用,适合快速原型设计。
  • 具有丰富的模板和图形库,支持团队协作和实时评论。
  • 在Web设计和流程图等方面表现出色。

3.缺点:

  • 功能相对较为有限,不太适合复杂的交互式原型设计。
  • 缺乏高级交互功能和动画效果。
  • 在复杂的应用程序设计中可能不够灵活。

(二)Axure:
1.适用领域: Axure适用于创建高保真度的交互式原型,特别是对于复杂的应用程序和网站设计。

2.优点:

  • 提供丰富的交互功能和动态效果,可以创建高度可交互的原型。
  • 支持复杂的条件逻辑和数据驱动交互,适用于用户体验设计和用户测试。

二、原型设计
1.主题名称:音乐社交——边听边分享。
2.功能:主要功能包括在线听音乐,用户根据自己的爱好搜索歌曲,系统根据大数据给用户推送歌曲,用户还可以再音乐圈中添加好友,发布音乐感想贴,分享自己喜欢的音乐
3.界面设计:以网易云app为对标软件,界面以简约为主,配色主要是黑白灰和红色,红色的高亮可以让用户更加明显的感知操作过程,以及为软件增加一些色彩。图标设置也是简单明了,可以更加方便用户操作。

三、界面展示
1.界面切换流程总览

2.登录页
(1)界面功能:登录软件
(2)界面组成:手机号登录以及第三方软件登录方式
(3)前置条件:打开软件
(4)后置条件:进入软件首页
(5)操作步骤:打开软件之后选择合适方式登录账户即可

3.首页
(1)界面功能:根据用户喜好推荐音乐单曲和歌单
(2)界面组成:推荐歌单,推荐单曲,下方四个功能切换区域
(3)前置条件:登录账号进入软件
(4)后置条件:用户根据喜好点击歌曲或者歌单听音乐
(5)操作步骤:歌单部分可以右滑查看更多,点击可以查看,听推荐音乐单击播放键即可

4.搜索
(1)界面功能:用户根据歌名或者歌手名字搜索相应的歌曲,系统形成热门歌曲榜单,系统根据用户喜好推荐歌曲
(2)界面组成:搜索框,最近搜索,热门歌曲,歌曲推送
(3)前置条件:点击首页的搜索图标
(4)后置条件:搜索到相应的音乐
(5)操作步骤:在搜索框中输入文字

5.我的
(1)界面功能:显示用户昵称头像,本地音乐导入,喜欢收藏的音乐和独特的个人歌单
(2)界面组成:用户昵称和头像,本地音乐,喜欢的音乐和创建歌单,以及查看收藏的歌单
(3)前置条件:点击首页下方的“我的”图标
(4)后置条件:进入“我的”界面
(5)操作步骤:点击头像和昵称部分用户可以自行修改,点击本地音乐之后可以导入手机的音乐,点击收藏和赞可以看到添加了喜欢的歌曲,点击创建歌单可以新建,点击收藏歌单可以查看用户收藏的歌单

6.社交
(1)界面功能:添加好友,浏览其他用户发布的帖子,
(2)界面组成:添加用户图标,用户发布的帖子,发布帖子图标
(3)前置条件:点击首页下方的“社交”图标
(4)后置条件:进入“音乐圈”界面
(5)操作步骤:点击添加用户图标可以添加用户,上下滑浏览用户发布的帖子,点击加号可以进入发布页面

7.发布
(1)界面功能:编辑帖子
(2)界面组成:编辑区,添加音乐区
(3)前置条件:点击“社交”上方的“加号”图标
(4)后置条件:进入发布图文界面
(5)操作步骤:在编辑区编辑文字,点击相应图标可以添加音乐图片语音和话题

8.漫游
(1)界面功能:系统随机播放歌曲,用户可以收藏歌曲,播放暂停歌曲,切换歌曲,调节音量
(2)界面组成:播放区,切歌区,调节音量区
(3)前置条件:点击“首页”下方“漫游”图标
(4)后置条件:进入歌曲播放页面
(5)操作步骤:单击图标收藏歌曲,单击播放暂停暂停键,切换歌曲,左右滑动歌曲片段,滑动调节音量

标签:界面,app,音乐,用户,点击,原型,歌曲,社交,图标
From: https://www.cnblogs.com/chenqianyue/p/18139249

相关文章

  • 实验一-原型设计-口袋音乐
    一.对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点(一)墨刀适用领域:1.简单原型设计:墨刀适用于创建简单的原型,特别是对于初学者或需要快速原型验证的项目。2.Web和移动应用设计:它提供了丰富的模板和组件,适用于Web和移动应用的设计。3.在线协作:墨刀支......
  • 实验一原型设计-在线听歌
    一、对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点。1、墨刀:适用领域:常用于移动应用、网页设计等领域,适合快速搭建原型,进行简单的交互设计。优点:具有简洁直观的界面,易于学习和使用;可在线共享和协作,方便团队成员协同工作;支持实时预览和演示。缺点:对于......
  • 实验一:原型设计-网易云在线听歌app
    一、原型设计工具的各自的适用领域及优缺点(一)、Axure的优缺点1.主要优点Axure作为老牌的原型图工具,功能最齐全,交互最多样,基本任何想要的效果都可以实现,尤其在制作PC端原型图上有优势。2.主要缺点Axure缺点同样也相当明显,Axure的动态面板、中继器等功能都是强大的,但是不容易......
  • 实验一原型设计——随“易”听app
    实验一原型设计——随“易”听app一.对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点(一)墨刀1.适用领域:墨刀是一款在线原型设计与协同工具,借助墨刀,产品经理、设计师、开发、销售、运营及创业者等用户群体,能够搭建为......
  • 教你编写Windows的VBScript与Mac的AppleSCript脚本解放双手
    <divid="navCategory"><h5class="catalogue">目录</h5><ulclass="first_class_ul"><li><ahref="#_label0">一、Windows篇——VBScript</a></li&g......
  • uniapp checkbox_group实现全选和反选功能
    <template> <view> <label> <checkbox:value="value":checked="allpicks"@tap="allpick"/><text>全选</text> </label> <checkbox-groupname="allpick"> <label......
  • 实验一:原型设计---大麦app(抢票平台)
    实验一原型设计--大麦app(抢票平台)一、实验题目:原型设计二、实验目的:掌握产品原型设计方法和相应工具使用。三、实验要求原型设计的相关步骤  需求分析:明确产品的功能和用户需求,了解产品的目标和用户的期望。  初步设计:设计师需要根据需求和用户反馈,将概念转化......
  • Uni-app的Prompt组件实现
    代码实现<!--prompt组件--><template> <view> <viewv-show="show"class="uni-mask":style="{top:offsetTop+'px'}"@touchmove.stop.prevent="maskMoveHandle"></view> <view......
  • uniapp踩坑:编译H5解决浏览器跨域问题
    uniapp编译到app是不存在跨域问题的,但是编译到H5就会有跨域问题。记录一下工作中遇到跨域及解决跨域方法方法一:直接编译Hbuilder内置浏览器,能解决跨域,但是内置浏览器调试没有谷歌爽方法二:在manifest.json文件中配置跨域,该方法类似vue.config.js中的devServer 步骤一"......
  • 实验一 二手交易平台APP原型设计
    一、实验题目:原型设计二、实验目的:掌握产品原型设计方法和相应工具使用。三、实验要求1.对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点(至少3条)。墨刀的适用领域及优缺点适用领域墨刀是一款在线原型设计与协同工具,借助墨刀,产品经理、设计师、开发、......