Question

如何一步步设计开发一款音乐播放器App

Answer 1

　　OooPlay 是一款极简音乐播放器，本文是产品原型设计培训师、OooPlay 设计者尹广磊的分享，文中详细阐述了OooPlay在产品原型设计和开发过程中的思维演化方式以及产品心路历程，在此分享给感兴趣的读者。

　　先谈谈主体设计

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　再谈谈细节

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

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

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

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

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

　　列表的方式会有误操作的可能，如果你错点了一首歌曲，可以在5秒钟以内按“上一首”，就可以回到刚才听的歌曲，并且从断开的位置继续播放。5秒钟以后，说明你大概不是误操作，再按“上一首”就会正常跳到“上一首”歌曲上。

　　当一首歌快唱完的25秒以内，也就是歌曲高潮基本唱完的时候，如果你按“上一首”按钮，会重新播放当天歌曲。因为当快唱完的时候你按“上一首”大概是这首歌曲听着很爽，想再来一遍。iPhone自带的播放器是开始播放3秒钟以后，按“上一首”重新播放当前歌曲。

　　如果你新同步了5首歌进到手机里，新同步的歌曲会排在原来所有歌曲的最上面。你新同步进来的歌曲大概就是马上想听下它们吧，所以把它们放在最上面。你原来那些歌曲的排序也都保留了，不会因为同步而让你所有歌曲重新排序。

　　正如你看到的，从启动画面开始我们就做了连贯的动画衔接，让每一层含义都清晰可辩。

　　我们不想单单为了让你看一下无用的“关于”信息就多占用一个界面，所以在那里我们的“夜间模式”还能给你最后一层惊喜。

　　开发过程大致经历了以下几个阶段：

2013-01-21 受到DailyCost激发，决定要从音乐播放器角度做个产品。

2013-01-22 上午纸上完成草图，晚上制作出了最初的主原型界面。

2013-01-24 经朋友介绍找到我应用的开发者 rexshi，28日找到界面设计 soioi。

2013-03-03 过完春节并完成所有原型细节，回到北京。

2013-03-16 沟通完各项工作，开始进入开发阶段。

2013-05-15 主体开发功能完成，放出了一个开发者版本的演示视频。

2013-05-24 发布了一个公测的预览版本。

2013-06-14 提交AppStore审核。

2013-06-21 OooPlay审核通过上线，当天达到付费音乐榜第7名，次日达到第3名。