| 今年作为个人作品的尝试，我设计了这款iPhone上的极简音乐播放器OooPlay 官网地址：http://www.oooplay.com 购买地址：https://itunes.apple.com/cn/app/oooplay/id627799063?mt=8 视频演示：http://v.youku.com/v_show/id_XNzA3MjA5Mzgw.html http://player.youku.com/player.php/sid/XNzA3MjA5Mzgw/v.swf [attach]1809[/attach][attach]1811[/attach]下载 (83.77 KB) 2013-7-21 13:19 下面介绍一下设计的过程： 先谈谈主体设计 在开始谈论如何设计出这款应用之前，先来看看OooPlay这款应用的演示视频让大家有个直观的了解。看过视频之后，因为布局或交互方式也许大家会觉得有一点酷的感觉，但本质上我们并不是在追求酷的感觉，而是始终在围绕功能做一款随性而紧凑的产品设计。 那下面就来还原一下，是如何一步步递进到现在的设计结果的： 首先，iPhone自带的音乐播放器不方便在列表上试听歌曲，一点击就会进入到另一个播放界面。这样想试听几首歌曲的话需要频繁点击“返回”。后来注意到有这样一款应用Panamp是在列表上直接播放的就很方便，只可惜这款应用不常用到的功能比较多，所以算不上精简和巧妙的设计导致特色不是很突出。我想从最初的角度出发如果让它能够是列表的形式并能听歌的话，只需要一个列表和播放暂停按钮就够了。就像下面的草图这样： [attach]1809[/attach][attach]1813[/attach]下载 (26.07 KB) 2013-7-21 13:19 然而仅仅这样是不够的，因为随着列表的浏览滚动，如何能够快速回到正在播放的歌曲上就变得重要，所以需要在列表的顶端或底端能有一个按钮，可以快速定位到正在播放的歌曲上。想到必须要有这么个东西，那么加什么元素才能显得不孤立多余，又能跟整体的简洁风格比较和谐呢？于是想到歌曲的CD画面反映正在播放的歌曲是一个很重要的元素，而且CD画面还能消除一些软件界面的单调。另外，播放中时还应该有一些动态效果以体现出正在播放中的状态来。基于这些功能和元素的结合，想到了用CD圆盘来显示“CD画面”，用圆盘的转动来体现出“正在播放中”，用点击圆盘的边缘来回到“正在播放的歌曲”，这样才算达到了一种“紧凑”的设计。后面就是把播放、暂停、上一首、下一首这样最常用的功能，融入到CD圆盘的旁边。如下图这样： [attach]1809[/attach][attach]1815[/attach]下载 (28.73 KB) 2013-7-21 13:19 然而，细想之下只有这些还是不够，因为搜索歌曲虽然不常用，但是当需要用到时不能让用户从几百首歌里找不出那首歌曲来。所以需要有搜索功能，后面意识到还不止，还有随机、单首循环等，那么把这些功能加在什么位置合适？加在顶部吗？底部已经占用比较多的高度了，加在顶部一下子就会挤压到中间内容的空间，同时让简洁的感觉荡然无存。我就创造性的在纸上尝试着画了一个侧栏，把搜索、随机、单首循环放在上面。因为觉得歌曲列表的宽度压缩一点没关系。没想到这样放的效果不错，同时这种非对称的设计让CD圆盘待在那个位置特别恰当。我不想把CD圆盘放在中间那样毫无新意的表达方式。于是有了下图： [attach]1809[/attach][attach]1817[/attach]下载 (30.48 KB) 2013-7-21 13:19 这样基本的布局有了，然后继续去细化一些功能。我个人经常听到一首歌突然很有感觉，就想到手机里还有这个人的另外一首歌也很不错，就想去听一下。所以，需要有个功能可以通过一首歌找到这个人的全部歌曲。于是在歌曲名称的后面增加一个“小人”图标，可以搜索这个演唱者的其它歌曲，使用搜索的方式也是为了不额外增加界面，同时把“搜索”这么一个不常用的功能也变得常用了。另外，很多播放器都有了定时结束播放的功能，以便于睡觉前听着音乐入睡。我也增加了此功能，从常用的角度只保留了30分钟和60分钟两个时间档（沙漏是倒计时结束播放）。再有就是为软件的“关于”保留一个入口，还有因为我有蓝牙立体声耳机所以增加了AirPlay功能的支持（无AirPlay设备时不出现此图标）。于是就有了下图： [attach]1809[/attach][attach]1819[/attach]下载 (32.74 KB) 2013-7-21 13:19 其实，在只有列表的时候我就想到让音乐可以左右滑动以置顶置底了。这个是受Clear应用视频的影响，Clear的设计方式真的带给了设计者一些新的思考方向。本质上那种重要的信息偏靠上不重要的信息偏靠下的内容，都可以采用这种方式处理。我个人觉得音乐就可以恰当的使用这种方式，那些因为心情等暂时不想听的歌曲直接右滑就可以置底，意思是“死的远远的”，那些比较关注想多了解的歌曲就可以左滑把它置顶，这样最方便找到。这样随性的处理，就可以让上面的歌曲偏好听，下面的歌曲偏不好听。这是其它音乐播放器所做不到的，况且它使用起来是如此的简便，这也是这个播放器最大的亮点。同时，由于把想关注的歌曲左滑置顶了，所以也不需要再保留自带播放器“播放列表”功能了，因为接近顶端的位置就算是播放列表了。而且我总觉得过去“播放列表”的方式，把歌曲在多个列表间移来移去过于机械化，一点也不随性和简便。歌曲左右滑动见下图： [attach]1809[/attach][attach]1821[/attach]下载 (59.38 KB) 2013-7-21 13:19 我并没有保留可以拖动歌曲排序的功能，因为单手那样操作并不容易，即便要双手来这样操作那大概也是有强迫症思维的人才会去刻意组织每一首歌的排序。“刻意”就违背我“随性”的原则，况且按住并拖动歌曲也会大大增加误操作的机率。 至此该应用主要功能的设计过程应该介绍完了，简单总结为三点： 1. 在列表直接播放，可以快速试听歌曲。 2. 左右滑动可以将歌曲好听与否快速分开。 3. 点击演唱者图标可以快速查看该演唱者歌曲。 因为手机有侧键可以控制音量，所以没有在软件界面上保留音量控制。听音乐时没想到还需要进度条，所以没有进度条控制，不过跟自带播放器一样你可以按住“下一首”来快进歌曲（同时支持线控方式）。因为OooPlay播放器只有一个主界面且全图标设计，不需要额外的翻译即可全球发行。基于全球用户这样一个市场，无法提供比较靠谱的联网显示歌词服务。加上用户iTunes自带的音乐多数不带歌词且无法逐句定位显示，所以综上原因我们也舍弃了显示歌词的功能，就让随性的音乐响起，不必在意他唱的每一句都是什么。 再谈谈细节 为了把产品做到接近于完美，OooPlay极简音乐播放器还有很多细节做了精心的处理，下面列举几点：
为什么要做？ 我之前创办了这个Axure原型设计社区，近三年多以来一直在从事原型设计和交互设计的培训工作。毕业8年以来还一直没有一个面向大众的作品，这是我一直想实现的一个心结。同时，得知被苹果推荐的优秀应用DailyCost是由国人一人独立设计、开发、推广完成的，内心尤感佩服，遂激发了我尽快完成一件作品的斗志，于是有了这件作品。 当然这也不是完全的一时冲动，实际上我也是看到Clear和DailyCost证明了个人或小团体可以站在巨头的缝隙里去达到一种自我价值、投入与回报的平衡才决定做这个方向的。
开发过程大致经历了以下几个阶段： 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 [attach]1809[/attach][attach]1822[/attach]下载 (70.4 KB) 2013-12-14 15:32 [attach]1809[/attach][attach]1824[/attach]下载 (57.88 KB) 2013-12-14 15:32 |
| 欢迎光临 爱评测-移动互联网评测 (http://www.aipingce.com/) | Powered by Discuz! X3.2 |