關於音樂播放App(應用軟件)的分析與重設計如何設計出漂亮的音樂播放界面

DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 關於音樂播放App(應用軟件)的分析與重設計如何設計出漂亮的音樂播放界面

編輯：前端技巧

　　一直對無線交互很感興趣，這次就來練練手~
　　本次分析評測基於iOS平台，選取了兩款有代表性的音樂播放器，QQ音樂和豆瓣FM。由於這兩款產品在web端就有著龐大的用戶基礎，有一定的用戶粘性，手機端是web端的延伸，目標用戶、信息架構、核心體驗等等也都繼承了web端的鮮明風格。這兩款產品可以代兩類表定位不同的音樂播放器。一種是大而全的，功能全面，可滿足用戶管理本地音樂、同步其他設備音樂、發現好音樂等多種需求(類似應用：百度ting、酷我音樂盒、iScrob)。一種是小而簡的，操作簡單，就像使用收音機一樣，打開就聽，不喜歡就換台(類似應用：蝦米FM、Console.fm)。
　　QQ音樂
　　1、界面總覽

　　2、需求分析
　　目標用戶：熱愛音樂的普通青年，QQ產品的忠實用戶。
　　用戶需求：隨時隨地聽音樂，沒有wifi時可以聽本地音樂，有wifi時可以在線聽，遇到喜歡的歌曲可以提供下載，能同步其他設備上收藏的歌曲。
　　設計目標：提供播放本地音樂、賬號同步、在線收聽、音樂搜索等功能。
　　3、信息架構
　　QQ音樂從本地音樂、我的音樂、在線音樂、更多，這四個方面對信息進行整合。

　　“本地音樂”可以從歌手和專輯的維度對本地音樂進行播放，也可以自建本地音樂的歌單，還可以從這裡查找已經下載過的緩存歌曲。
　　“我的音樂”同步了QQ賬號在各個設備上收藏的歌曲和建立的歌單，這種同步服務可以提高用戶的粘度，培養用戶及時登錄的好習慣。為了增強社交屬性，這裡還有“點歌”的二級菜單，QQ用戶可以為好友點歌，送給你的歌曲就會出現在這裡。
　　“在線音樂”是發現好音樂的地方。其中的“電台”類似於“豆瓣FM”，可以隨機收聽不同主題的音樂，系統還可以根據用戶的收藏和收聽習慣來猜你喜歡。這裡同時提供了新歌和熱歌的榜單，幫助用戶最快的了解音樂流行趨勢。這裡還有類似於蝦米音樂的精選集，為用戶精選出具有主題的好音樂。
　　“更多”裡面則是整合了一些次要信息，包括個人賬號、緩存設置、定時消息通知、軟件信息。
　　4、頁面布局

　　類似於大多數基於iOS的app布局，QQ音樂的list頁采用了列表式的布局，便於查找和擴展。主導航固定於屏幕底部，二級導航在上，左上角是統一的返回上一級按鈕，右上角是正在播放的歌曲詳情頁，便於用戶快速找到正在播放的音樂，進行停止、播放、收藏、下載、分享等操作。

　　歌曲播放界面采取了全屏展示，最常用的播放/暫停、上一曲/下一曲、音量調節默認顯示，當用戶點擊歌曲封面時，歌曲進度、播放模式、收藏、下載、分享按鈕會顯示出來，用戶可以在這裡進行相應操作。
　　5、手勢操作

　　對於歌曲的操作並不復雜，QQ音樂采用了上線滑動、左右滑動、單擊的操作手勢，大多是都是用戶常用、顯而易見的手勢操作。只有在查看歌詞的時候，用戶需要向左劃開專輯封面，圖片向左下方劃去，歌詞出現，這一操作並不是很容易發現。
　　豆瓣FM
　　1、界面總覽

　　2、需求分析
　　目標用戶：熱愛音樂的文藝青年，豆瓣產品的忠實用戶。
　　用戶需求：像豆瓣FM一樣，只要一打開，不用任何操作，就能播放那些我喜歡的文藝范兒歌曲。
　　設計目標：界面清爽、操作簡單、推薦精准、縮短播放歌曲的路徑。
　　3、信息架構

　　豆瓣FM的信息架構要簡單許多，層級淺、操作簡單，只要打開電台，就會播放歌曲。用戶可以滑動歌曲上方選擇兆赫，也可以通過列表選擇。豆瓣不會讓用戶費心的去選擇要聽那首歌，用戶只要挑選想聽的類別，豆瓣就會自動推薦。豆瓣希望用戶可以“用心養電台”，根據用戶長期的使用習慣，分析用戶加心或選擇不再播放的歌曲，推薦符合用戶喜好的歌曲。
　　4、界面布局

　　豆瓣FM的界面非常簡單，打開應用既是歌曲播放界面，界面上只有喜歡、不在播放和下一曲的按鈕。滑動歌曲上方可以選擇赫茲，正在播放的歌曲會漸漸消失，新的歌曲會漸漸響起，過度很平緩。
　　因為豆瓣的定位是電台，想聽就打開，不想聽就關上，所以播放連暫停按鈕都簡化了。點擊專輯時封面會翻轉，顯示歌曲的評分。

　　點擊左上角按鈕可以進入分類選擇歌曲的列表頁，列表頁分為私人兆赫和公共兆赫。私人兆赫是豆瓣通過用戶習慣推薦的歌曲和用戶加心收藏的歌曲，公共兆赫隨即推薦具有一定主題的好歌。
　　點擊右上角的設置按鈕，設置以提醒消息的形式出現，這又為豆瓣節省了一個界面。所以豆瓣FM真正做到了極簡，只有兩個頁面，歌曲播放頁和列表頁。

　　豆瓣FM的界面還采取了擬物化的設計隱喻，如未播放音樂時的背景就像收音機的喇叭，專輯背面的細節，做的也和真的CD背面一樣。
　　音樂播放器的重設計
　　1、產品定位和信息架構
　　本次音樂播放器的重設計，定位於功能全面、可以解決用戶多種場景下需求的音樂播放器，可以在線發現好音樂、對歌曲進行收藏和下載、管理和播放本地音樂、搜索音樂等。
　　通過對現有產品的分析，發現信息架構層級較深、推薦音樂內容較多。從用戶的需求來看，無目的收聽音樂時，用戶希望有好的音樂可以推薦給自己，看看最近流行的音樂是什麼。有目的收聽音樂時，用戶希望可以快速找到自己收藏過的音樂或本地音樂，或對想聽的歌曲進行搜索。在分析現有產品時發現，很多app提供了各種電台、精選集、排行榜等令人眼花缭亂的精選推薦，讓用戶迷茫的同時，也使產品變得臃腫。
　　在重新定義產品功能時，希望合並功能類似的推薦，如電台和精選集，可以從主題和音樂人的不同維度進行推薦。同時希望扁平化信息架構，縮短用戶操作路徑。將不常使用的次要操作放在更多中，突出主要任務。以下是對信息架構進行的整理：

　　2、產品原型設計
　　在對產品進行梳理之後，制作原型如下：

　　參照信息架構，將產品一級導航置於屏幕底部，二級導航置於頂部
。扁平化的信息架構，除精選集外，沒有二級頁面。用戶在一級導航間進行切換時，默認會顯示第一個tab頁，也就是用戶最常用的頁面，此時只需要一次點擊，即可看到音樂列表。

　　現有的音樂播放器，通常在點擊歌曲後會進入新頁面播放歌曲。如果用戶想在浏覽其他頁面後想關閉音樂，需要再次進入播放頁面，增加了頁面深度。
　　可以將播放頁面的操作和信息，如暫停、上一曲/下一曲、收藏、下載和播放進度，整合在比較小的區域內，置於音樂播放器列表頁下部，方便隨時進行操作。如用戶想要查看歌詞，可以向上滑動播放器，即可展開歌詞。

　　當用戶看慣了點擊浮出操作層時，也可以換換另一種方式。向右滑動歌曲，歌曲的下一層便會出現收藏、下載的操作。當然，第一次使用的時候需要新手引導一下。
　　微信可以搖一搖，音樂播放器當然也可以。當聽到不喜歡的歌曲時，搖一搖就可以換首歌聽。

　　在Web界面中使用下拉菜單，是節省空間增加擴展性的好辦法，手機端也可以借鑒下。對於不常用的次要操作，可以在點擊時滑出。
　　搜索這項功能在音樂app中往往處於有點尴尬的位置，放在哪個頁面好呢?如果放在某一個頁面上，那就只能在這個頁面內容的內部進行搜索，放在所有頁面上又太啰嗦，單獨有個搜索頁面又沒必要，畢竟不是常用功能。出於對搜索功能並不常用的考慮，這次將搜索放在了更多中，縱向滑出後還可以橫向滑出搜索框，可以對線上和本地的全部內容進行全局搜索。