萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 音樂播放App的分析與重設計

音樂播放App的分析與重設計

音樂播放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頁,也就是用戶最常用的頁面,此時只需要一次點擊,即可看到音樂列表。

  現有的音樂播放器,通常在點擊歌曲後會進入新頁面播放歌曲。如果用戶想在浏覽其他頁面後想關閉音樂,需要再次進入播放頁面,增加了頁面深度。

  可以將播放頁面的操作和信息,如暫停、上一曲/下一曲、收藏、下載和播放進度,整合在比較小的區域內,置於音樂播放器列表頁下部,方便隨時進行操作。如用戶想要查看歌詞,可以向上滑動播放器,即可展開歌詞。

  當用戶看慣了點擊浮出操作層時,也可以換換另一種方式

copyright © 萬盛學電腦網 all rights reserved