先談談主體設計
在開始談論如何設計出這款應用之前,先來看看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名。