產(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è)計成了音樂播放入口的快捷操作欄。
優(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)雅。
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ì)頁面蝙眶。
而網(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)容有限卿啡,降低了信息獲取效率。