一直對(duì)無線交互很感興趣，這次就來練練手~
　　本次分析評(píng)測基于iOS平臺(tái)，選取了兩款有代表性的音樂播放器，QQ音樂和豆瓣FM。由于這兩款產(chǎn)品在web端就有著龐大的用戶基礎(chǔ)，有一定的用戶粘性，手機(jī)端是web端的延伸，目標(biāo)用戶、信息架構(gòu)、核心體驗(yàn)等等也都繼承了web端的鮮明風(fēng)格。這兩款產(chǎn)品可以代兩類表定位不同的音樂播放器。一種是大而全的，功能全面，可滿足用戶管理本地音樂、同步其他設(shè)備音樂、發(fā)現(xiàn)好音樂等多種需求(類似應(yīng)用：百度ting、酷我音樂盒、iScrob)。一種是小而簡的，操作簡單，就像使用收音機(jī)一樣，打開就聽，不喜歡就換臺(tái)(類似應(yīng)用：蝦米FM、Console.fm)。
　　QQ音樂
　　1、界面總覽
　　2、需求分析
　　目標(biāo)用戶：熱愛音樂的普通青年，QQ產(chǎn)品的忠實(shí)用戶。
　　用戶需求：隨時(shí)隨地聽音樂，沒有wifi時(shí)可以聽本地音樂，有wifi時(shí)可以在線聽，遇到喜歡的歌曲可以提供 下載，能同步其他設(shè)備上收藏的歌曲。
　　設(shè)計(jì)目標(biāo)：提供播放本地音樂、賬號(hào)同步、在線收聽、音樂搜索等功能。
　　3、信息架構(gòu)
　　QQ音樂從本地音樂、我的音樂、在線音樂、更多，這四個(gè)方面對(duì)信息進(jìn)行整合。
　　“本地音樂”可以從歌手和專輯的維度對(duì)本地音樂進(jìn)行播放，也可以自建本地音樂的歌單，還可以從這里查找已經(jīng)下載過的緩存歌曲。
　　“我的音樂”同步了QQ賬號(hào)在各個(gè)設(shè)備上收藏的歌曲和建立的歌單，這種同步服務(wù)可以提高用戶的粘度，培養(yǎng)用戶及時(shí)登錄的好習(xí)慣。為了增強(qiáng)社交屬性，這里還有“點(diǎn)歌”的二級(jí)菜單，QQ用戶可以為好友點(diǎn)歌，送給你的歌曲就會(huì)出現(xiàn)在這里。
　　“在線音樂”是發(fā)現(xiàn)好音樂的地方。其中的“電臺(tái)”類似于“豆瓣FM”，可以隨機(jī)收聽不同主題的音樂，系統(tǒng)還可以根據(jù)用戶的收藏和收聽習(xí)慣來猜你喜歡。這里同時(shí)提供了新歌和熱歌的榜單，幫助用戶最快的了解音樂流行趨勢。這里還有類似于蝦米音樂的精選集，為用戶精選出具有主題的好音樂。
　　“更多”里面則是整合了一些次要信息，包括個(gè)人賬號(hào)、緩存設(shè)置、定時(shí)消息通知、軟件信息。
　　4、頁面布局
　　類似于大多數(shù)基于iOS的app布局，QQ音樂的list頁采用了列表式的布局，便于查找和擴(kuò)展。主導(dǎo)航固定于屏幕底部，二級(jí)導(dǎo)航在上，左上角是統(tǒng)一的返回上一級(jí)按鈕，右上角是正在播放的歌曲詳情頁，便于用戶快速找到正在播放的音樂，進(jìn)行停止、播放、收藏、下載、分享等操作。
　　歌曲播放界面采取了全屏展示，最常用的播放/暫停、上一曲/下一曲、音量調(diào)節(jié)默認(rèn)顯示，當(dāng)用戶點(diǎn)擊歌曲封面時(shí)，歌曲進(jìn)度、播放模式、收藏、下載、分享按鈕會(huì)顯示出來，用戶可以在這里進(jìn)行相應(yīng)操作。
　　5、手勢操作
　　對(duì)于歌曲的操作并不復(fù)雜，QQ音樂采用了上線滑動(dòng)、左右滑動(dòng)、單擊的操作手勢，大多是都是用戶常用、顯而易見的手勢操作。只有在查看歌詞的時(shí)候，用戶需要向左劃開專輯封面，圖片向左下方劃去，歌詞出現(xiàn)，這一操作并不是很容易發(fā)現(xiàn)。
　　豆瓣FM
　　1、界面總覽
　　2、需求分析
　　目標(biāo)用戶：熱愛音樂的文藝青年，豆瓣產(chǎn)品的忠實(shí)用戶。
　　用戶需求：像豆瓣FM一樣，只要一打開，不用任何操作，就能播放那些我喜歡的文藝范兒歌曲。
　　設(shè)計(jì)目標(biāo)：界面清爽、操作簡單、推薦精準(zhǔn)、縮短播放歌曲的路徑。
　　3、信息架構(gòu)
　　豆瓣FM的信息架構(gòu)要簡單許多，層級(jí)淺、操作簡單，只要打開電臺(tái)，就會(huì)播放歌曲。用戶可以滑動(dòng)歌曲上方選擇兆赫，也可以通過列表選擇。豆瓣不會(huì)讓用戶費(fèi)心的去選擇要聽那首歌，用戶只要挑選想聽的類別，豆瓣就會(huì)自動(dòng)推薦。豆瓣希望用戶可以“用心養(yǎng)電臺(tái)”，根據(jù)用戶長期的使用習(xí)慣，分析用戶加心或選擇不再播放的歌曲，推薦符合用戶喜好的歌曲。
　　4、界面布局
　　豆瓣FM的界面非常簡單，打開應(yīng)用既是歌曲播放界面，界面上只有喜歡、不在播放和下一曲的按鈕?；瑒?dòng)歌曲上方可以選擇赫茲，正在播放的歌曲會(huì)漸漸消失，新的歌曲會(huì)漸漸響起，過度很平緩。
　　因?yàn)槎拱甑亩ㄎ皇请娕_(tái)，想聽就打開，不想聽就關(guān)上，所以播放連暫停按鈕都簡化了。點(diǎn)擊專輯時(shí)封面會(huì)翻轉(zhuǎn)，顯示歌曲的評(píng)分。
　　點(diǎn)擊左上角按鈕可以進(jìn)入分類選擇歌曲的列表頁，列表頁分為私人兆赫和公共兆赫。私人兆赫是豆瓣通過用戶習(xí)慣推薦的歌曲和用戶加心收藏的歌曲，公共兆赫隨即推薦具有一定主題的好歌。
　　點(diǎn)擊右上角的設(shè)置按鈕，設(shè)置以提醒消息的形式出現(xiàn)，這又為豆瓣節(jié)省了一個(gè)界面。所以豆瓣FM真正做到了極簡，只有兩個(gè)頁面，歌曲播放頁和列表頁。
　　豆瓣FM的界面還采取了擬物化的設(shè)計(jì)隱喻，如未播放音樂時(shí)的背景就像收音機(jī)的喇叭，專輯背面的細(xì)節(jié)，做的也和真的CD背面一樣。
　　音樂播放器的重設(shè)計(jì)
　　1、產(chǎn)品定位和信息架構(gòu)
　　本次音樂播放器的重設(shè)計(jì)，定位于功能全面、可以解決用戶多種場景下需求的音樂播放器，可以在線發(fā)現(xiàn)好音樂、對(duì)歌曲進(jìn)行收藏和下載、管理和播放本地音樂、搜索音樂等。
　　通過對(duì)現(xiàn)有產(chǎn)品的分析，發(fā)現(xiàn)信息架構(gòu)層級(jí)較深、推薦音樂內(nèi)容較多。從用戶的需求來看，無目的收聽音樂時(shí)，用戶希望有好的音樂可以推薦給自己，看看最近流行的音樂是什么。有目的收聽音樂時(shí)，用戶希望可以快速找到自己收藏過的音樂或本地音樂，或?qū)ο肼牭母枨M(jìn)行搜索。在分析現(xiàn)有產(chǎn)品時(shí)發(fā)現(xiàn)，很多app提供了各種電臺(tái)、精選集、排行榜等令人眼花繚亂的精選推薦，讓用戶迷茫的同時(shí)，也使產(chǎn)品變得臃腫。
　　在重新定義產(chǎn)品功能時(shí)，希望合并功能類似的推薦，如電臺(tái)和精選集，可以從主題和音樂人的不同維度進(jìn)行推薦。同時(shí)希望扁平化信息架構(gòu)，縮短用戶操作路徑。將不常使用的次要操作放在更多中，突出主要任務(wù)。 以下是對(duì)信息架構(gòu)進(jìn)行的整理：
　　2、產(chǎn)品原型設(shè)計(jì)
　　在對(duì)產(chǎn)品進(jìn)行梳理之后，制作原型如下：
　　參照信息架構(gòu)，將產(chǎn)品一級(jí)導(dǎo)航置于屏幕底部，二級(jí)導(dǎo)航置于頂部
。扁平化的信息架構(gòu)，除精選集外，沒有二級(jí)頁面。用戶在一級(jí)導(dǎo)航間進(jìn)行切換時(shí)，默認(rèn)會(huì)顯示第一個(gè)tab頁，也就是用戶最常用的頁面，此時(shí)只需要一次點(diǎn)擊，即可看到音樂列表。
　　現(xiàn)有的音樂播放器，通常在點(diǎn)擊歌曲后會(huì)進(jìn)入新頁面播放歌曲。如果用戶想在瀏覽其他頁面后想關(guān)閉音樂，需要再次進(jìn)入播放頁面，增加了頁面深度。
　　可以將播放頁面的操作和信息，如暫停、上一曲/下一曲、收藏、下載和播放進(jìn)度，整合在比較小的區(qū)域內(nèi)，置于音樂播放器列表頁下部，方便隨時(shí)進(jìn)行操作。如用戶想要查看歌詞，可以向上滑動(dòng)播放器，即可展開歌詞。
　　當(dāng)用戶看慣了點(diǎn)擊浮出操作層時(shí)，也可以換換另一種方式。向右滑動(dòng)歌曲，歌曲的下一層便會(huì)出現(xiàn)收藏、下載的操作。當(dāng)然，第一次使用的時(shí)候需要新手引導(dǎo)一下。
　　微信可以搖一搖，音樂播放器當(dāng)然也可以。當(dāng)聽到不喜歡的歌曲時(shí)，搖一搖就可以換首歌聽。
　　在Web界面中使用下拉菜單，是節(jié)省空間增加擴(kuò)展性的好辦法，手機(jī)端也可以借鑒下。對(duì)于不常用的次要操作，可以在點(diǎn)擊時(shí)滑出。
　　搜索這項(xiàng)功能在音樂app中往往處于有點(diǎn)尷尬的位置，放在哪個(gè)頁面好呢?如果放在某一個(gè)頁面上，那就只能在這個(gè)頁面內(nèi)容的內(nèi)部進(jìn)行搜索，放在所 有頁面上又太啰嗦，單獨(dú)有個(gè)搜索頁面又沒必要，畢竟不是常用功能。出于對(duì)搜索功能并不常用的考慮，這次將搜索放在了更多中，縱向滑出后還可以橫向滑出搜索 框，可以對(duì)線上和本地的全部內(nèi)容進(jìn)行全局搜索。

　　3、視覺稿
　　由于時(shí)間有限，只簡單產(chǎn)出了部分視覺稿：
　　4、手勢操作
　　上下滑動(dòng)，查看歌曲列表
　　向上滑動(dòng)播放器查看歌詞，向下滑動(dòng)可收起
　　向右滑動(dòng)歌曲，下方出現(xiàn)常用操作
　　點(diǎn)擊更多，滑出搜索和設(shè)置，點(diǎn)擊搜索，向左滑出搜索框
　　搖動(dòng)手機(jī)，播放下一曲
　　其他點(diǎn)擊操作
　　作者：李月

最新評(píng)論