先談?wù)勚黧w設(shè)計(jì)

在開始談?wù)撊绾卧O(shè)計(jì)出這款應(yīng)用之前，先來看看OooPlay這款應(yīng)用的演示視頻讓大家有個(gè)直觀的了解?？催^視頻之后，因?yàn)椴季只蚪换シ绞揭苍S大家會(huì)覺得有一點(diǎn)酷的感覺，但本質(zhì)上我們未不是在追求酷的感覺，而是始終在圍繞功能做一款隨性而緊湊的產(chǎn)品設(shè)計(jì)。

那下面就來還原一下，是如何一步步遞進(jìn)到現(xiàn)在的設(shè)計(jì)結(jié)果的：

首先，iPhone自帶的音樂播放器不方便在列表上試聽歌曲，一點(diǎn)擊就會(huì)進(jìn)入到另一個(gè)播放界面。這樣想試聽幾首歌曲的話需要頻繁點(diǎn)擊“返回”。后來注意到有這樣一款應(yīng)用Panamp是在列表上直接播放的就很方便，只可惜這款應(yīng)用不常用到的功能比較多，所以算不上精簡和巧妙的設(shè)計(jì)導(dǎo)致特色不是很突出。我想從最初的角度出發(fā)如果讓它能夠是列表的形式并能聽歌的話，只需要一個(gè)列表和播放暫停按鈕就夠了。就像下面的草圖這樣：

然而僅僅這樣是不夠的，因?yàn)殡S著列表的瀏覽和滾動(dòng)，如何能夠快速回到正在播放的歌曲上就變得重要，所以需要在列表的頂端或底端能有一個(gè)按鈕，可以快 速定位到正在播放的歌曲上。想到必須要有這么個(gè)東西，那么加什么元素才能顯示不突兀多余，又能跟整體的簡潔風(fēng)格比較和諧呢？于是想到歌曲的CD畫面對(duì)于反 映正在播放的歌曲是誰很重要，而且CD畫面還能消除一些軟件界面的單調(diào)。

另外，播放中時(shí)還應(yīng)該有一些動(dòng)態(tài)效果以體現(xiàn)出正在播放中的狀態(tài)來?；谶@些功能和元素的結(jié)合，想到了用CD圓盤來顯示“CD畫面”，用圓盤的轉(zhuǎn)動(dòng)來 體現(xiàn)出“正在播放中”，用點(diǎn)擊圓盤的邊緣來回到“正在播放的歌曲”，這樣才算達(dá)到了一種“緊湊”的設(shè)計(jì)。后面就是把播放、暫停、上一首、下一首這樣最常用 的功能，融入到CD圓盤的旁邊。如下圖這樣

然而，細(xì)想之下只有這些還是不夠，因?yàn)樗阉鞲枨m然不常用，但是當(dāng)需要用到時(shí)不能讓用戶從幾百首歌里找不出那首歌曲來。所以需要有搜索功能，后面意 識(shí)到還不止，還有隨機(jī)、單首循環(huán)等，那么把這些功能加在什么位置？加在頂部嗎？底部已經(jīng)占用比較多的高度了，加在頂部一下子就會(huì)擠壓到中間內(nèi)容的空間，同 時(shí)讓簡潔的感覺蕩然無存。我就創(chuàng)造性的在紙上嘗試著畫了一個(gè)側(cè)欄，把搜索、隨機(jī)、單首循環(huán)放在上面。

因?yàn)橛X得歌曲列表的寬度壓縮一點(diǎn)沒關(guān)系。沒想到這樣放的效果不錯(cuò)，同時(shí)這種非對(duì)稱的設(shè)計(jì)讓CD圓盤待在那個(gè)位置特別恰當(dāng)。我不想把CD圓盤放在中間那樣毫無新意的表達(dá)方式。于是有了下圖：

這樣基本的布局有了，然后繼續(xù)去細(xì)化一些功能。我個(gè)人經(jīng)常聽到一首歌突然很有感覺，就想到手機(jī)里還有這個(gè)人的另外一首歌也很不錯(cuò)，就想去聽一下。所 以，需要有個(gè)功能可以通過一首歌找到這個(gè)人的全部歌曲。于是在歌曲名稱的后面增加一個(gè)“小人”圖標(biāo)，可以搜索這個(gè)演唱者的其它歌曲，使用搜索的方式也是為 了不額外增加界面，同時(shí)把“搜索”這么一個(gè)不常用的功能也變得常用了。

另外，很多播放器都有了定時(shí)結(jié)束播放的功能，以便于睡覺前聽著音樂入睡。我也增加了此功能，從常用的角度只保留了30分鐘和60分鐘兩個(gè)時(shí)間檔（沙 漏是倒計(jì)時(shí)結(jié)束播放）。再有就是為軟件的“關(guān)于”保留一個(gè)入口，還有因?yàn)槲矣兴{(lán)牙立體聲耳機(jī)所以增加了AirPlay功能的支持（無AirPlay設(shè)備時(shí) 不出現(xiàn)此圖標(biāo)）。于是就有了下圖：

其實(shí)，在只有列表的時(shí)候我就想到讓音樂可以左右滑動(dòng)以置頂置底了。這個(gè)是受Clear應(yīng)用視頻的影響，Clear的設(shè)計(jì)方式真的帶給了設(shè)計(jì)師一些新的思考方向。本質(zhì)上那種重要的信息偏靠上不重要的信息偏靠下的內(nèi)容，都可以采用這種方式處理。

我個(gè)人覺得，音樂就可以恰當(dāng)?shù)氖褂眠@種方式，那些因?yàn)樾那榈葧簳r(shí)不想聽的歌曲直接右滑就可以置底，意思是“死的遠(yuǎn)遠(yuǎn)的”，那些比較關(guān)注想多了解的歌 曲就可以左滑把它置頂，這樣最方便找到。這樣隨性的處理，就可以讓上面的歌曲偏好聽，下面的歌曲偏不好聽。這是其它音樂播放器所做不到的，況且它使用起來 是如此的簡便，這也是這個(gè)播放器***的亮點(diǎn)。

同時(shí)，由于把想關(guān)注的歌曲左滑置頂了，所以也不需要再保留自帶播放器“播放列表”的功能了，因?yàn)榻咏敹说奈恢镁退闶遣シ帕斜砹恕６椅铱傆X得過去“播放列表”的方式，把歌曲在多個(gè)列表間移來移去過于機(jī)械化，一點(diǎn)也不隨性和簡便。歌曲左右滑動(dòng)見下圖：

我并沒有保留可以拖動(dòng)歌曲排序的功能，因?yàn)閱问帜菢硬僮鞑⒉蝗菀?，即便要雙手來這樣操作那大概也是有強(qiáng)迫癥思維的人才會(huì)去刻意組織每一首歌的排序。“刻意”就違背我“隨性”的原則，況且按住并拖動(dòng)歌曲也會(huì)大大增加誤操作的機(jī)率。

至此該應(yīng)用主要功能的設(shè)計(jì)過程應(yīng)該介紹完了，簡單總結(jié)為三點(diǎn)：

1. 在列表直接播放，可以快速試聽歌曲。
2. 左右滑動(dòng)可以將歌曲好聽與否快速分開。
3. 點(diǎn)擊演唱者圖標(biāo)可以快速查看該演唱者歌曲。

因?yàn)槭謾C(jī)有側(cè)鍵可以控制音量，所以沒有在軟件界面上保留音量控制。聽音樂時(shí)沒想到還需要進(jìn)度條，所以沒有進(jìn)度條控制，不過跟自帶播放器一樣你可以按住“下一首”來快進(jìn)歌曲（同時(shí)支持線控方式）。 因?yàn)镺ooPlay播放器只有一個(gè)主界面且全圖標(biāo)設(shè)計(jì)，不需要額外的翻譯即可全球發(fā)行?；谌蛴脩暨@樣一個(gè)市場，無法提供比較靠譜的聯(lián)網(wǎng)顯示歌詞服務(wù)。 加上用戶iTunes自帶的音樂多數(shù)不帶歌詞且無法逐句定位顯示，所以綜上原因我們也舍棄了顯示歌詞的功能，就讓隨性的音樂響起，不必在意他唱的每一句都 是什么。

再談?wù)劶?xì)節(jié)

為了把產(chǎn)品做到接近于***，OooPlay極簡音樂播放器還有很多細(xì)節(jié)做了精心的處理，下面列舉幾點(diǎn)（部分內(nèi)容在之前文章中介紹過，已經(jīng)了解的可直接跳過）：

1. 正在播放的歌曲如果右滑，那表示不想聽，所以此歌曲會(huì)停止播放并置底，然后開始播放“下一首”歌曲；如果是正在播放的歌曲左滑，表示好聽 或想關(guān)注，所以不能夠停止播放。該歌曲需要置頂，但是該歌曲需要留在原來的位置上，因?yàn)楫?dāng)該首歌播放完以后需要播放下面一首歌，而不能去播放頂上的第二首 歌，因?yàn)槟切┛赡苁菑纳下犗聛韯倓偮犨^的歌曲。
2. 左右滑動(dòng)是全局性的操作，在任何搜索結(jié)果中左滑過的歌曲，回到所有歌曲列表時(shí)依然能夠在最上面找到，不必?fù)?dān)心只有回到那個(gè)搜索結(jié)果才能在上面找到。
3. 不是所有歌曲后面都顯示演唱者圖標(biāo)，只有某演唱者在庫中的歌曲數(shù)量在1首以上時(shí)才會(huì)顯示，因?yàn)槿绻撗莩咧挥幸皇赘枨脑?，你再去搜索也沒有意義了，避免你搜索完發(fā)現(xiàn)還是只有一首歌曲而失望。
4. 隨機(jī)播放時(shí)的算法做了特殊處理，曲庫如果有10首歌以上，最下面1首歌隨機(jī)時(shí)不會(huì)被播放到；如果有20首歌以上，最下面2首歌不會(huì)被播放到。以此類推最多會(huì)有30首最下面的歌隨機(jī)時(shí)不會(huì)被播放到。避免你隨機(jī)播放時(shí)還是會(huì)聽到你最近不想聽的歌曲。
5. 列表的方式會(huì)有誤操作的可能，如果你錯(cuò)點(diǎn)了一首歌曲，可以在5秒鐘以內(nèi)按“上一首”，就可以回到剛才聽的歌曲，并且從斷開的位置繼續(xù)播放。5秒鐘以后，說明你大概不是誤操作，再按“上一首”就會(huì)正常跳到“上一首”歌曲上。
6. 當(dāng)一首歌快唱完的25秒以內(nèi)，也就是歌曲高潮基本唱完的時(shí)候，如果你按“上一首”按鈕，會(huì)重新播放當(dāng)天歌曲。因?yàn)楫?dāng)快唱完的時(shí)候你按“上一首”大概是這首歌曲聽著很爽，想再來一遍。iPhone自帶的播放器是開始播放3秒鐘以后，按“上一首”重新播放當(dāng)前歌曲。
7. 如果你新同步了5首歌進(jìn)到手機(jī)里，新同步的歌曲會(huì)排在原來所有歌曲的最上面。你新同步進(jìn)來的歌曲大概就是馬上想聽下它們吧，所以把它們放在最上面。你原來那些歌曲的排序也都保留了，不會(huì)因?yàn)橥蕉屇闼懈枨匦屡判颉?/li>
8. 正如你看到的，從啟動(dòng)畫面開始我們就做了連貫的動(dòng)畫銜接，讓每一層含義都清晰可辯。
9. 我們不想單單為了讓你看一下無用的“關(guān)于”信息就多占用一個(gè)界面，所以在那里我們的“夜間模式”還能給你***一層驚喜。

開發(fā)過程大致經(jīng)歷了以下幾個(gè)階段：

• 2013-01-21     受到DailyCost激發(fā)，決定要從音樂播放器角度做個(gè)產(chǎn)品。
• 2013-01-22     上午紙上完成草圖，晚上制作出了最初的主原型界面。
• 2013-01-24     經(jīng)朋友介紹找到我應(yīng)用的開發(fā)者 rexshi，28日找到界面設(shè)計(jì) soioi。
• 2013-03-03     過完春節(jié)并完成所有原型細(xì)節(jié)，回到北京。
• 2013-03-16     溝通完各項(xiàng)工作，開始進(jìn)入開發(fā)階段。
• 2013-05-15     主體開發(fā)功能完成，放出了一個(gè)開發(fā)者版本的演示視頻。
• 2013-05-24     發(fā)布了一個(gè)公測(cè)的預(yù)覽版本。
• 2013-06-14     提交AppStore審核。
• 2013-06-21     OooPlay審核通過上線，當(dāng)天達(dá)到付費(fèi)音樂榜第7名，次日達(dá)到第3名。