交互設(shè)計分析——蝦米音樂1

產(chǎn)品:蝦米音樂

1.導(dǎo)航與層級標(biāo)簽的一體化設(shè)計

蝦米音樂的導(dǎo)航設(shè)計模式采取了非標(biāo)準(zhǔn)化的IOS設(shè)計模式赡矢。 直接把我的音樂、推薦、發(fā)現(xiàn)等第一層級功能選項放在了導(dǎo)航欄鹦赎。而以往在OS平臺用于容納第一層級菜單的底部標(biāo)簽欄被設(shè)計成了音樂播放入口的快捷操作欄。


蝦米音樂首頁導(dǎo)航

優(yōu)點:

層級位置清楚误堡、醒目古话,為核心體驗底部音樂操作欄騰出了空間。

缺點:

導(dǎo)航欄元素過多锁施,顯得擁擠并且產(chǎn)生了空間上割裂感陪踩,影響了用戶的視覺體驗杖们。

日本AWA音樂app主頁采用了雖然采用了類似的設(shè)計模式,但是并沒有把發(fā)現(xiàn)肩狂,推薦等同一層功能入口全部放入導(dǎo)航欄而是采取了聯(lián)播式導(dǎo)航的設(shè)計摘完,并且把功能入口的標(biāo)題放在了內(nèi)容上。相比較蝦米簡單粗暴的導(dǎo)航設(shè)計傻谁,AWA的導(dǎo)航設(shè)計更加簡潔孝治、優(yōu)雅。


AWA音樂僅僅把輪播點放在導(dǎo)航上审磁,標(biāo)簽以標(biāo)題的形式放在內(nèi)容頁上谈飒。


2.音樂播放快捷操作欄

蝦米音樂的底部音樂播放快捷操作欄放置在除了個人中心以外的任何界面之上,讓用戶在app內(nèi)執(zhí)行其他操作與音樂相關(guān)操作時力图,可以方便直觀地觀察到當(dāng)前正在播放的音樂的相關(guān)狀態(tài)(歌名步绸、歌手和播放進(jìn)度)和快捷地執(zhí)行與音樂播放相關(guān)的基礎(chǔ)操作(播放、暫停和下一首)以及通過輕觸或上拉手勢吃媒,輕松地切換到音樂播放的詳細(xì)操作界面瓤介。




優(yōu)點:符合任務(wù)兼容原則,降低用戶處理任務(wù)的認(rèn)知負(fù)荷赘那。

在音樂app內(nèi)刑桑,使用頻率最高的是與音樂播放相關(guān)操作功能,尤其在體量較大的社交類音樂app里募舟,用戶期望能夠隨時隨方便祠斧、便捷地使用音樂播放的相關(guān)功能。通過音樂播放快捷操作欄拱礁,用戶不僅能夠在任意界面對當(dāng)前播放的音樂進(jìn)行簡單地操控琢锋,也可以通過輕觸或上拉,切換到音樂播放的詳細(xì)界面進(jìn)行音樂播放的更多操作呢灶。這樣的設(shè)計模式符合了認(rèn)知心理學(xué)中的任務(wù)兼容原則吴超,及任務(wù)的呈現(xiàn)方式(音樂播放的相關(guān)操作的入口位置)與用戶正在進(jìn)行或即將進(jìn)行的任務(wù)類型(用戶的渴望便捷地執(zhí)行與音樂播放有關(guān)的操作)相一致時,用戶解決問題的能力越高鸯乃,認(rèn)知負(fù)荷越少鲸阻,用戶的表現(xiàn)往往越好。

缺點:占據(jù)空間缨睡,功能效用有限鸟悴。

底部空間被占用,擠壓了其他同級別重要功能控件的放置空間奖年。而且细诸,活動視圖控制器里也可以監(jiān)視當(dāng)前播放音樂的狀態(tài)和進(jìn)行播放、下一首等基礎(chǔ)操作陋守,與底部音樂快捷操作欄功能形成重疊震贵。

3.搜索控件的交互

在蝦米音樂搜索框輸入關(guān)鍵字后可以得到部分歌曲鹏浅、專輯、藝人等相關(guān)信息屏歹。進(jìn)一步點擊“查看更多結(jié)果”按鈕或者鍵盤的確定按鈕可以跳轉(zhuǎn)到以歌曲、專輯之碗、藝人和精選集為分類標(biāo)簽的搜索結(jié)果的詳細(xì)頁面蝙眶。


輸入字條,按標(biāo)簽分類的形式出現(xiàn)相關(guān)程度較高的推薦條目褪那。


進(jìn)一步點擊幽纷,按標(biāo)簽分類出現(xiàn)搜索結(jié)果的更多信息。

而網(wǎng)易云音樂在搜索框輸入關(guān)鍵字后博敬,出現(xiàn)的是沒有標(biāo)簽分類的關(guān)聯(lián)詞列表友浸。

優(yōu)點:提高了用戶搜索目標(biāo)信息的效率

當(dāng)用戶不記得自己想要搜索的歌曲、專輯等完整信息時偏窝,可以通過輸入關(guān)鍵字收恢,在搜索列表下快速查看與關(guān)鍵字相關(guān)程度較高的內(nèi)容,提高了用戶的搜索效率祭往。如果用戶沒有得到預(yù)期的結(jié)果可以通過進(jìn)一步操作跳轉(zhuǎn)到搜索結(jié)果的詳細(xì)頁面進(jìn)行查找伦意,提高了解決用戶查找目標(biāo)歌曲這一問題的可能性。

缺點:界面設(shè)計不完善阻礙了設(shè)計初衷的實現(xiàn)硼补。

在輸入關(guān)鍵字得到部分歌曲驮肉、專輯和音樂人的相關(guān)信息時,同類別標(biāo)簽名稱重復(fù)顯現(xiàn)多次已骇,避免標(biāo)簽名重復(fù)得過于頻繁和讓不同標(biāo)簽類別下的相關(guān)程度較高的條目能夠一目了然离钝,蝦米的設(shè)計師使得同類別下最多顯示條目為3條,例如win關(guān)鍵字下褪储,出現(xiàn)的歌曲條目最多為3條卵渴。但是這樣的設(shè)計模式阻礙了實現(xiàn)提高用戶搜索效率的初衷。此外乱豆,在搜索結(jié)果的詳細(xì)頁面中奖恰,列表條目沒有涉及到滑動操作的情況下,無法通過左右滑動來在歌曲宛裕、專輯瑟啃、藝人和精選集各標(biāo)簽類別之間自由切換,這樣的設(shè)計不符合用戶的使用習(xí)慣降低了使用體驗揩尸。

4.矩陣與列表排版相結(jié)合的設(shè)計模式

在蝦米音樂的我的音樂界面可以發(fā)現(xiàn)矩陣排版和列表排版組合式的設(shè)計模式





優(yōu)點:不但可以按照功能優(yōu)先級靈活放置控件而且可以節(jié)約界面空間蛹屿。

列表排版與矩陣排版的區(qū)別在列表形式所占據(jù)的空間更大可以顯示更多的信息和放置更多的操作控件,而矩陣形式可以呈現(xiàn)更多的內(nèi)容岩榆。

兩種模式的結(jié)合可以讓綜合兩者的優(yōu)點错负。

缺點:違反一致性原則坟瓢,并且過多的快捷操作會使同樣功能控件出現(xiàn)多次,給用戶造成困擾犹撒,增加了用戶的認(rèn)知負(fù)荷折联。

例如,我的音樂的內(nèi)容界面识颊,蝦米音樂為了追求讓用戶更加方便快速地進(jìn)行操作诚镰,本地音樂列表欄設(shè)有播放控件,但是底部音樂操作欄也設(shè)有播放按鈕祥款,加上精選集列表的播放控件清笨,一個界面上最多出現(xiàn)了6個播放icon(精選集列表占滿一屏的情況下)。雖然在播放按鈕在功效上有些微不同(一個旨在播放本地音樂刃跛,另一個旨在播放當(dāng)前音樂列表)抠艾,但卻擁有功能上的交集,即底部菜單欄的播放按鈕也可以用于播放本地音樂列表桨昙。這樣的設(shè)計讓用戶面臨不必要的多項選擇检号,增加了用戶的認(rèn)知負(fù)荷。

5.內(nèi)容條目大面積顯示

在蝦米推薦列表下绊率,一個精選集模塊以幾乎占據(jù)一屏三分之二的大小谨敛,其中圖片和文字大約各占據(jù)二分之一,這樣的大圖與大面積留白的運用使得精選集模塊更加有品質(zhì)感滤否,切合了蝦米目標(biāo)用戶追求高品位音樂體驗的戰(zhàn)略需求脸狸。

優(yōu)點:符合環(huán)境貼切原則,提高了用戶的探索樂趣藐俺。

大圖與空間留白的運用炊甲,增強了整體的視覺感受和品質(zhì)感,符合蝦米核心用戶的審美風(fēng)格欲芹。

缺點:有限空間內(nèi)顯示內(nèi)容有限卿啡,降低了信息獲取效率。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末菱父,一起剝皮案震驚了整個濱河市颈娜,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌浙宜,老刑警劉巖官辽,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異粟瞬,居然都是意外死亡同仆,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進(jìn)店門裙品,熙熙樓的掌柜王于貴愁眉苦臉地迎上來俗批,“玉大人俗或,你說我怎么就攤上這事∷晖” “怎么了辛慰?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長干像。 經(jīng)常有香客問我昆雀,道長,這世上最難降的妖魔是什么蝠筑? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮揩懒,結(jié)果婚禮上什乙,老公的妹妹穿的比我還像新娘。我一直安慰自己已球,他們只是感情好臣镣,可當(dāng)我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著智亮,像睡著了一般忆某。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上阔蛉,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天弃舒,我揣著相機與錄音,去河邊找鬼状原。 笑死聋呢,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的颠区。 我是一名探鬼主播削锰,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼毕莱!你這毒婦竟也來了器贩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤朋截,失蹤者是張志新(化名)和其女友劉穎蛹稍,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體质和,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡稳摄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了饲宿。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片厦酬。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡胆描,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出仗阅,到底是詐尸還是另有隱情昌讲,我是刑警寧澤,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布减噪,位于F島的核電站短绸,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏筹裕。R本人自食惡果不足惜醋闭,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望朝卒。 院中可真熱鬧证逻,春花似錦、人聲如沸抗斤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽瑞眼。三九已至龙宏,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間伤疙,已是汗流浹背银酗。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留徒像,地道東北人花吟。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像厨姚,于是被迫代替她去往敵國和親衅澈。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內(nèi)容