首页 > 其他分享 >实验一:原型设计-网易云在线听歌app

实验一:原型设计-网易云在线听歌app

时间:2024-04-16 19:22:50浏览次数:16  
标签:网易 界面 app 音乐 功能 原型 按钮 在线听 墨刀

一、原型设计工具的各自的适用领域及优缺点
(一)、Axure的优缺点
1.主要优点
Axure作为老牌的原型图工具,功能最齐全,交互最多样,基本任何想要的效果都可以实现,尤其在制作PC端原型图上有优势。
2.主要缺点
Axure缺点同样也相当明显,Axure的动态面板、中继器等功能都是强大的,但是不容易搞懂。AXURE的素材也是很蛋疼的问题,大部分PM 都会在AXURE原型库、素材库去寻找相应的第三方素材库,进行载入,需要花费相应的时间。
(二)、墨刀的优缺点
1.主要优点
墨刀对于APP的原型设计真的是体验非常好,怎么说呢?就像有一个无形的人在帮助你,和你一起打造你的原型APP。(当然以后也适用微信小程序的设计),其控件的拖拉、大小的调整,都会自然的去匹配相应的母版大小。无需去担心有多移动一点或多 选择一点。并且墨刀的系统控件都是基于APP,以及系统平台IOS和安卓,因此在里面可以首先选择相应的设备布局,减少了不少工作环节。
2.主要缺点
墨刀的缺点就是相应的就是不自由啦,首先这也于墨刀的产品定位有关,清晰定位为移动端原型设计工具,因此在交互效果上、控件组合上,操作面板的选择上都不如AXURE 灵活,并且效果切换因为是采用连线的方式,有时候会让使用者脑子错乱的感觉。并且目前原型的交互效果系统自带的还比较少,但基本满足日常所有原型的使用。另外需要充费才能够使用更强大的共享创建功能
(三)、Mockpuls的优缺点
1.主要优点
Mockpuls(摩客)是一款简介快速的原型图设计工具。审核软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。Mockpuls设计了组件、图标、收藏、母版的Tab,切换起来很方便。还筛选了一部分常用的组件固定在组件库上面,实现高频操作不用找。另外折叠面板的功能很棒,不用纠结展开和关闭的问题。
2.主要缺点
摩客的表格功能还需要完善,和它提倡的快速目标有差距,不支持鼠标悬停,手机预览不是很清楚,日历表组件是静态的。
(四)、三者比较
墨刀的自由度及其简约的画风使得设计者可以在设想刚产生时便使用其绘制,同样的Mockpuls有着像是一把老工具的熟悉感,你可以通过它快速的导出你脑海中的设计图,但前两者都有着绕不过去的坎,他们可以做到快速简约但却没办法做到细致而在工作过程中细节决定成败,他们只能拿来做一些预览或是展示设计的表现手段,真正在工作中还是使用Axure,你可以自己寻找常用的元件并添加进去,同时它的交互功能更是可以让团队共同操作实现细致、高效率。所以三者没有优劣之分,真正决定你使用那个软件的是,你所导出的设计图是给谁看的?墨刀和Mockpuls更加方便快捷,可以做一个简单的DEOM和领导沟通;如果是给技术将详细功能会用Axure绘制原型图,交互更多更加自由,也可以更加方便的增加备注标签,方便研发人员理解。
二、实验
使用墨刀进行网易云音乐在线听歌平台原型开发设计
1.主题:在线听歌平台
2.原型功能:网易云音乐的主要功能是为用户提供在线听歌功能,在互联网上搜索用户想听的歌曲,根据用户常听歌曲进行推荐,选择用户想要的音质,根据用户需求进行下载。
3.界面切换流程:

4.界面设计:
(1)登录页
界面功能:任选一种方式登录账号并实名认证登录网易云平台,确保账户的安全
界面组成:登录方式、退出按钮、协议
前置条件:打开手机端网易云音乐平台
后置条件:进入app首页
操作步骤:在登录页面输入验证码进入app

(2)首页
界面功能:推荐听的音乐名称,附有上一次听的音乐浮窗,推荐看的MV和音乐电台
界面组成:搜索栏、推荐列表,广告位
前置条件:登录手机端网易云音乐
后置条件:点击搜索栏
操作步骤:根据用户需求在首页选中某个音乐或者直接在搜索栏中搜索自己想要听取的音乐

(3)搜索详细页
界面功能:对用户进行的搜索结果进行展示,让用户选取自己想要的音乐
界面组成:歌手,多个搜索结果,上一次听的音乐浮窗
前置条件:搜索某一音乐
后置条件:听取某一音乐
操作步骤:点击想要听取的音乐,单击播放

(4)歌曲详情页
界面功能:进行歌曲的详细页面展示,可以对音质进行更改以及添加到喜欢列表中
界面组成:歌曲宣传封面,暂停/播放按钮,切换播放方式按钮(单曲循环/随机播放/顺序播放),上/下一首按钮,下载按钮,分享音乐按钮
前置条件:单击某一想听的音乐
后置条件:想要看当前播放的音乐歌词
操作步骤:单击歌曲头像

(5)歌词详情页
界面功能:看当前播放音乐的歌词
界面组成:歌词页面,暂停/播放按钮,切换播放方式按钮(单曲循环/随机播放/顺序播放),上/下一首按钮,下载按钮,分享音乐按钮
前置条件:单击歌曲头像

5.点击该链接进入原型动态演示:https://modao.cc/proto/LtSVxuysbr7mdCNxMVGS/sharing?view_mode=device&screen=rbpU9ax6RZI8Yicki&canvasId=rcU9bL7vL6fcg7Ae #网易芸音乐平台-分享

标签:网易,界面,app,音乐,功能,原型,按钮,在线听,墨刀
From: https://www.cnblogs.com/wmc666/p/18139000

相关文章

  • 实验一原型设计——随“易”听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条)。墨刀的适用领域及优缺点适用领域墨刀是一款在线原型设计与协同工具,借助墨刀,产品经理、设计师、开发、......
  • 实验一原型设计——网抑云在线听歌APP
    1、对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点(至少3条)。(1)墨刀(MockingBot):适用领域:墨刀适合初级到中级的原型设计者,特别适用于快速设计简单的界面原型,可用于移动应用和网页设计。优点:界面简洁,易于上手,对于不熟悉专业设计软件的用户友好。支持在线......
  • 实验一:在线听歌APP原型设计
    一、原型设计工具的各自的适用领域及优缺点墨刀:适用领域:交互设计:墨刀提供了丰富的交互组件和动画效果,能够快速创建具有交互功能的原型。移动应用原型设计:墨刀专注于移动应用的原型设计,支持各种常见移动设备的屏幕尺寸和分辨率。用户测试和反馈收集:墨刀支持在线分享原型,轻......
  • 肖sir__app实战运用
    一、打开模拟器 二、cmd中打开dos命令adb connect  127.0.0.1:62001   三、安装测试包adb install  D:\app\baiduyuedu_3760.apkE:\dcs\two\app\mojibase.apk  四、打开appium    五、( 定位元素没有xpath的就删除原有uiautomatorviewer.......