围绕功能做随性而紧凑的设计——OooPlay设计过程

尹广磊

今年作为个人作品的尝试，我设计了这款iPhone上的极简音乐播放器OooPlay
官网地址：http://www.oooplay.com
下载地址：https://itunes.apple.com/cn/app/oooplay/id627799063?mt=8
视频演示：http://v.youku.com/v_show/id_XNTcyNDU4MDIw.html



下面介绍一下设计的过程：

先谈谈主体设计

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

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

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



然而仅仅这样是不够的，因为随着列表的浏览滚动，如何能够快速回到正在播放的歌曲上就变得重要，所以需要在列表的顶端或底端能有一个按钮，可以快速定位到正在播放的歌曲上。想到必须要有这么个东西，那么加什么元素才能显得不孤立多余，又能跟整体的简洁风格比较和谐呢？于是想到歌曲的CD画面反映正在播放的歌曲是一个很重要的元素，而且CD画面还能消除一些软件界面的单调。另外，播放中时还应该有一些动态效果以体现出正在播放中的状态来。基于这些功能和元素的结合，想到了用CD圆盘来显示“CD画面”，用圆盘的转动来体现出“正在播放中”，用点击圆盘的边缘来回到“正在播放的歌曲”，这样才算达到了一种“紧凑”的设计。后面就是把播放、暂停、上一首、下一首这样最常用的功能，融入到CD圆盘的旁边。如下图这样：



然而，细想之下只有这些还是不够，因为搜索歌曲虽然不常用，但是当需要用到时不能让用户从几百首歌里找不出那首歌曲来。所以需要有搜索功能，后面意识到还不止，还有随机、单首循环等，那么把这些功能加在什么位置合适？加在顶部吗？底部已经占用比较多的高度了，加在顶部一下子就会挤压到中间内容的空间，同时让简洁的感觉荡然无存。我就创造性的在纸上尝试着画了一个侧栏，把搜索、随机、单首循环放在上面。因为觉得歌曲列表的宽度压缩一点没关系。没想到这样放的效果不错，同时这种非对称的设计让CD圆盘待在那个位置特别恰当。我不想把CD圆盘放在中间那样毫无新意的表达方式。于是有了下图：



这样基本的布局有了，然后继续去细化一些功能。我个人经常听到一首歌突然很有感觉，就想到手机里还有这个人的另外一首歌也很不错，就想去听一下。所以，需要有个功能可以通过一首歌找到这个人的全部歌曲。于是在歌曲名称的后面增加一个“小人”图标，可以搜索这个演唱者的其它歌曲，使用搜索的方式也是为了不额外增加界面，同时把“搜索”这么一个不常用的功能也变得常用了。另外，很多播放器都有了定时结束播放的功能，以便于睡觉前听着音乐入睡。我也增加了此功能，从常用的角度只保留了30分钟和60分钟两个时间档（沙漏是倒计时结束播放）。再有就是为软件的“关于”保留一个入口，还有因为我有蓝牙立体声耳机所以增加了AirPlay功能的支持（无AirPlay设备时不出现此图标）。于是就有了下图：



其实，在只有列表的时候我就想到让音乐可以左右滑动以置顶置底了。这个是受Clear应用视频的影响，Clear的设计方式真的带给了设计者一些新的思考方向。本质上那种重要的信息偏靠上不重要的信息偏靠下的内容，都可以采用这种方式处理。我个人觉得音乐就可以恰当的使用这种方式，那些因为心情等暂时不想听的歌曲直接右滑就可以置底，意思是“死的远远的”，那些比较关注想多了解的歌曲就可以左滑把它置顶，这样最方便找到。这样随性的处理，就可以让上面的歌曲偏好听，下面的歌曲偏不好听。这是其它音乐播放器所做不到的，况且它使用起来是如此的简便，这也是这个播放器最大的亮点。同时，由于把想关注的歌曲左滑置顶了，所以也不需要再保留自带播放器“播放列表”功能了，因为接近顶端的位置就算是播放列表了。而且我总觉得过去“播放列表”的方式，把歌曲在多个列表间移来移去过于机械化，一点也不随性和简便。歌曲左右滑动见下图：




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

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

    1. 在列表直接播放，可以快速试听歌曲。
    2. 左右滑动可以将歌曲好听与否快速分开。
    3. 点击演唱者图标可以快速查看该演唱者歌曲。

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

再谈谈细节

为了把产品做到接近于完美，OooPlay极简音乐播放器还有很多细节做了精心的处理，下面列举几点：

• 正在播放的歌曲如果右滑，那表示不想听，所以此歌曲会停止播放并置底，然后开始播放“下一首”歌曲；如果正在播放的歌曲左滑，表示好听或想关注，所以不能够停止播放。该歌曲需要置顶，但是该歌曲需要留在原来的位置上，因为当该首歌播放完以后需要播放下面一首歌，而不能去播放顶上的第二首歌，因为那些可能是从上听下来刚刚听过的歌曲。
• 左右滑动是全局性的操作，在任何搜索结果中左滑过的歌曲，回到所有歌曲列表时依然能够在最上面找到，不必担心只有回到那个搜索结果才能在上面找到。
• 不是所有歌曲后面都显示演唱者图标，只有某演唱者在库中的歌曲数量在1首以上时才会显示，因为如果该演唱者只有一首歌曲的话，你再去搜索也没有意义了，避免你搜索完发现还是只有一首歌曲而失望。
• 随机播放时的算法做了特殊处理，曲库如果有10首歌以上，最下面1首歌随机时不会被播放到；如果有20首歌以上，最下面2首歌不会被播放到。以此类推最多会有30首最下面的歌随机时不会被播放到。避免你随机播放时还是会听到你最近不想听的歌曲。
• 列表的播放方式会有误操作的可能，如果你错点了一首歌曲，可以在5秒钟以内按“上一首”，就可以回到刚才听的歌曲，并且从断开的位置继续播放。5秒钟以后，说明你大概不是误操作，再按“上一首”就会正常跳到“上一首”歌曲上。
• 当一首歌快唱完的25秒以内，也就是歌曲高潮基本唱完的时候，如果你按“上一首”按钮，会重新播放当前歌曲。因为当快唱完的时候你按“上一首”大概是这首歌曲听着很爽，想再来一遍。iPhone自带的播放器是开始播放3秒钟以后，按“上一首”重新播放当前歌曲。
• 如果你新同步了5首歌进到手机里，新同步的歌曲会排在原来所有歌曲的最上面。你新同步进来的歌曲大概就是马上想听下它们吧，所以把它们放在最上面。你原来那些歌曲的排序也都保留了，不会因为同步而让你所有歌曲重新排序。
• 正如你看到的，从启动画面开始我们就做了连贯的动画衔接，让每一层含义都清晰可辩。
• 我们不想单单为了让你看一下无用的“关于”信息就多占用一个界面，所以在那里我们的“夜间模式”功能还能给你最后一层惊喜。
  

为什么要做？

我之前创办了这个Axure原型设计社区，近三年多以来一直在从事原型设计和交互设计的培训工作。毕业8年以来还一直没有一个面向大众的作品，这是我一直想实现的一个心结。同时，得知被苹果推荐的优秀应用DailyCost是由国人一人独立设计、开发、推广完成的，内心尤感佩服，遂激发了我尽快完成一件作品的斗志，于是有了这件作品。

当然这也不是完全的一时冲动，实际上我也是看到Clear和DailyCost证明了个人或小团体可以站在巨头的缝隙里去达到一种自我价值、投入与回报的平衡才决定做这个方向的。

• 首先感谢乔布斯创造了AppStore这样一个全球市场，你只需要让你的设计有创意就可以通过卖软件有不错的结果。
• 大公司不可能靠卖软件赚钱，也不可能极简到像你那么纯粹，它一定要把它的网络服务打包在应用当中。所以可以避开与大公司的竞争，即便它模仿你，脱离了极简很多创意也就没有意义了。
• 来自个人或小团体的模仿者一般都是在你之后开始行动，慢半拍不说，往往质量水准也不会太及格，所以也不必担心创意被抄袭或类似应用稀释。
• 开发一个成熟的极简工具类APP费用大概在10万以内，虽然也是一笔数目不小的开支，不过对于目前的我可以承受。我有承受最坏结果的准备，所以有创意了没有理由不去尝试。
  

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

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名。        


尹广磊简介：

2005年计算机专业毕业，工作了四年半，其中后三年一直从事互联网产品经理工作。
2010年初辞职转型做起了自由职业的原型设计与交互设计培训讲师。
更多详情可以了解  http://www.yintop.com

SpiritedAway

嗯嗯！看了你的作品，非常不错，简洁又不失时尚。如果能在Android平台上应用，我想会有奇迹发生。期待你的下一个作品！

daiyijun

看了你的作品.我越发越爱PM了~

wanghx

求Android 版

terry5125

投资10万，目前回本盈利了吗

don

很不错的作品

librafiven

很喜欢，尤其是看了详细的说明后，感觉使用起来得心应手。但如果作为一个不愿意研究操作的探访者，是不是有些功能不会轻易被发现或使用？这些人群需不需要引导或以某种“极简”的方式提示？

叶妮子lemon

可能是女孩子的原因 不喜欢这种重黑色重棕色的调调，淡蓝 淡青这些看着更清爽 舒服，而且又利于眼睛，或者说你可以做个换皮肤的

Dllaney

刚才试了一下，本机歌曲导入功能在哪里？

尹广磊

9# Dllaney

需要连接电脑使用iTunes软件导入音乐，
iPhone自带的播放器中如果有音乐文件，OooPlay就可以读取出来。

baiyune

你是怎么让用户知道这些交互动作的，比如左滑操作的效果，会不会隐蔽了有人不知道？

zam

webppd:flower

沈兰子

:P厉害

kingfu

很想使用看看，可惜现在ios版本不支持了，楼主有想要更新嘛？

尹广磊

kingfu 发表于 2019-7-9 11:44
很想使用看看，可惜现在ios版本不支持了，楼主有想要更新嘛？

没有更新了，iOS10及以下的版本才可以用。

kingfu

尹广磊 发表于 2019-7-10 11:16
没有更新了，iOS10及以下的版本才可以用。

好的，很遗憾了。