经验分享:如何一步步设计开发一款音乐播放器App

2023-02-01 22:53:11   文档大全网     [ 字体: ] [ 阅读: ]

#文档大全网# 导语】以下是®文档大全网的小编为您整理的《经验分享:如何一步步设计开发一款音乐播放器App》,欢迎阅读!
设计开发,步步,播放器,经验,如何
先谈谈主体设计

在开始谈论如何设计出这款应用之前,先来看看OooPlay这款应用的演示视频让大家有个直观的了解。看过视频之后,因为布局或交互方式也许大家会觉得有一点酷的感觉,但本质上我们未不是在追求酷的感觉,而是始终在围绕功能做一款随性而紧凑的产品设计

那下面就来还原一下,是如何一步步递进到现在的设计结果的:

首先,iPhone自带的音乐播放器不方便在列表上试听歌曲,一点击就会进入到另一个播放界面。这样想试听几首歌曲的话需要频繁点击返回。后来注意到有这样一款应用Panamp是在列表上直接播放的就很方便,只可惜这款应用不常用到的功能比较多,所以算不上精简和巧妙的设计导致特色不是很突出。我想从最初的角度出发如果让它能够是列表的形式并能听歌的话,只需要一个列表和播放暂停按钮就够了。就像下面的草图这样:

然而仅仅这样是不够的,因为随着列表的浏览和滚动,如何能够快速回到正在播放的歌曲上就变得重要,所以需要在列表的顶端或底端能有一个按钮,可以快 速定位到正在播放的歌曲上。想到必须要有这么个东西,那么加什么元素才能显示不突兀多余,又能跟整体的简洁风格比较和谐呢?于是想到歌曲的CD画面对于反 映正在播放的歌曲是谁很重要,而且CD画面还能消除一些软件界面的单调。

另外,播放中时还应该有一些动态效果以体现出正在播放中的状态来。基于这些功能和元素的结合,想到了用CD圆盘来显示CD画面,用圆盘的转动来 体现出正在播放中,用点击圆盘的边缘来回到正在播放的歌曲,这样才算达到了一种紧凑设计。后面就是把播放、暂停、上一首、下一首这样最常用 的功能,融入到CD圆盘的旁边。如下图这样

然而,细想之下只有这些还是不够,因为搜索歌曲虽然不常用,但是当需要用到时不能让用户从几百首歌里找不出那首歌曲来。所以需要有搜索功能,后面意 识到还不止,还有随机、单首循环等,那么把这些功能加在什么位置?加在顶部吗?底部已经占用比较多的高度了,加在顶部一下子就会挤压到中间内容的空间, 时让简洁的感觉荡然无存。我就创造性的在纸上尝试着画了一个侧栏,把搜索、随机、单首循环放在上面。

因为觉得歌曲列表的宽度压缩一点没关系。没想到这样放的效果不错,同时这种非对称的设计CD圆盘待在那个位置特别恰当。我不想把CD圆盘放在中间那样毫无新意的表达方式。于是有了下图:

这样基本的布局有了,然后继续去细化一些功能。我个人经常听到一首歌突然很有感觉,就想到手机里还有这个人的另外一首歌也很不错,就想去听一下。所 以,需要有个功能可以通过一首歌找到这个人的全部歌曲。于是在歌曲名称的后面增加一个小人图标,可以搜索这个演唱者的其它歌曲,使用搜索的方式也是为 了不额外增加界面,同时把搜索这么一个不常用的功能也变得常用了。http://lxylc.com 博彩e

另外,很多播放器都有了定时结束播放的功能,以便于睡觉前听着音乐入睡。我也增加了此功能,从常用的角度只保留了30分钟和60分钟两个时间档(沙 漏是倒计时结束播放)。再有就是为软件的关于保留一个入口,还有因为我有蓝牙立体声耳机所以增加了AirPlay功能的支持(无AirPlay设备时 不出现此图标)。于是就有了下图:

其实,在只有列表的时候我就想到让音乐可以左右滑动以置顶置底了。这个是受Clear应用视频的影响,Clear设计方式真的带给了设计师一些新的思考方向。本质上那种重要的信息偏靠上不重要的信息偏靠下的内容,都可以采用这种方式处理。




我个人觉得,音乐就可以恰当的使用这种方式,那些因为心情等暂时不想听的歌曲直接右滑就可以置底,意思是死的远远的,那些比较关注想多了解的歌 曲就可以左滑把它置顶,这样最方便找到。这样随性的处理,就可以让上面的歌曲偏好听,下面的歌曲偏不好听。这是其它音乐播放器所做不到的,况且它使用起来 是如此的简便,这也是这个播放器最大的亮点。

同时,由于把想关注的歌曲左滑置顶了,所以也不需要再保留自带播放器播放列表的功能了,因为接近顶端的位置就算是播放列表了。而且我总觉得过去播放列表的方式,把歌曲在多个列表间移来移去过于机械化,一点也不随性和简便。歌曲左右滑动见下图:

我并没有保留可以拖动歌曲排序的功能,因为单手那样操作并不容易,即便要双手来这样操作那大概也是有强迫症思维的人才会去刻意组织每一首歌的排序。刻意就违背我随性的原则,况且按住并拖动歌曲也会大大增加误操作的机率。

至此该应用主要功能的设计过程应该介绍完了,简单总结为三点:

在列表直接播放,可以快速试听歌曲。

左右滑动可以将歌曲好听与否快速分开。

点击演唱者图标可以快速查看该演唱者歌曲。

因为手机有侧键可以控制音量,所以没有在软件界面上保留音量控制。听音乐时没想到还需要进度条,所以没有进度条控制,不过跟自带播放器一样你可以按住下一首来快进歌曲(同时支持线控方式)。 因为OooPlay播放器只有一个主界面且全图标设计,不需要额外的翻译即可全球发行。基于全球用户这样一个市场无法提供比较靠谱的联网显示歌词服务。 加上用户iTunes自带的音乐多数不带歌词且无法逐句定位显示,所以综上原因我们也舍弃了显示歌词的功能,就让随性的音乐响起,不必在意他唱的每一句都 是什么。蓝盾国际 http://sqm6.com

再谈谈细节

为了把产品做到接近于完美,OooPlay极简音乐播放器还有很多细节做了精心的处理,下面列举几点(部分内容在之前文章中介绍过,已经了解的可直接跳过):

正在播放的歌曲如果右滑,那表示不想听,所以此歌曲会停止播放并置底,然后开始播放下一歌曲;如果是正在播放的歌曲左滑,表示好听 或想关注,所以不能够停止播放。该歌曲需要置顶,但是该歌曲需要留在原来的位置上,因为当该首歌播放完以后需要播放下面一首歌,而不能去播放顶上的第二首 歌,因为那些可能是从上听下来刚刚听过的歌曲。

左右滑动是全局性的操作,在任何搜索结果中左滑过的歌曲,回到所有歌曲列表时依然能够在最上面找到,不必担心只有回到那个搜索结果才能在上面找到。

不是所有歌曲后面都显示演唱者图标,只有某演唱者在库中的歌曲数量在1首以上时才会显示,因为如果该演唱者只有一首歌曲的话,你再去搜索也没有意义了,避免你搜索完发现还是只有一首歌曲而失望。

随机播放时的算法做了特殊处理,曲库如果有10首歌以上,最下面1首歌随机时不会被播放到;如果有20首歌以上,最下面2首歌不会被播放到。以此类推最多会有30首最下面的歌随机时不会被播放到。避免你随机播放时还是会听到你最近不想听的歌曲。


本文来源:https://www.wddqxz.cn/c7212fc89889680203d8ce2f0066f5335a8167b6.html

相关推荐