交互設(shè)計(jì)四策略在音樂(lè)播放條上的運(yùn)用

追求簡(jiǎn)單易用是人類(lèi)的本性,《簡(jiǎn)約至上》中提出了合理刪除、分層組織、適時(shí)隱藏和巧妙轉(zhuǎn)移這四個(gè)達(dá)成簡(jiǎn)約的終極策略。對(duì)于功能性單一的產(chǎn)品做到簡(jiǎn)潔化比較容易,但對(duì)于功能性較強(qiáng)的產(chǎn)品如要做到簡(jiǎn)潔就是一個(gè)復(fù)雜的課題。
簡(jiǎn)約不是一件簡(jiǎn)單的事兒。真正的簡(jiǎn)約是在保證和突出特征和個(gè)性情況下的簡(jiǎn)約。是建立在一定情境下,對(duì)相應(yīng)對(duì)象而言的簡(jiǎn)約。不同角色的用戶對(duì)產(chǎn)品的需求不同,相同角色的用戶在不同時(shí)期的需求也不同。但總體而言,他們想要的是“不要讓我想、不要讓我煩、不要讓我等”的產(chǎn)品。
來(lái)說(shuō)說(shuō)此次內(nèi)容的主體:音樂(lè)播放條。這里所指代的是在音樂(lè)APP上播放音樂(lè)時(shí)底部出現(xiàn)的矩形操作入口,用來(lái)“吊起”當(dāng)前正在播放的音樂(lè),從而實(shí)現(xiàn)聽(tīng)音樂(lè)的同時(shí)不影響瀏覽其他頁(yè)面,又可以隨時(shí)對(duì)音樂(lè)進(jìn)行控制。
通常他們具備這樣的特性:
- 全局性:貫通整個(gè)APP幾乎所有的頁(yè)面中,無(wú)論你處在哪個(gè)層級(jí),都可以隨時(shí)進(jìn)行歌曲操作。
- 固定性:位置固定、樣式固定,不會(huì)受到頁(yè)面內(nèi)容的影響而改變。
形式上他們都是一個(gè)位于頁(yè)面底部的長(zhǎng)條矩形;內(nèi)容上可以分為信息展示、功能操作兩個(gè)部分。
我選擇了5個(gè)常用的音樂(lè)APP,將他們包含的信息整理如下
圖表:播放條信息整理
整理后發(fā)現(xiàn),平時(shí)習(xí)以為常使用的小模塊中間竟然包含了這么多內(nèi)容。所以說(shuō)簡(jiǎn)潔的產(chǎn)品不是本身有多簡(jiǎn)單,而是要把設(shè)計(jì)做的簡(jiǎn)單,讓用戶覺(jué)得簡(jiǎn)單。
播放條雖是音樂(lè)APP千萬(wàn)功能中不起眼的標(biāo)配模塊,但依然承載著產(chǎn)品的特性與戰(zhàn)略;因?yàn)樯儆械臋C(jī)會(huì),設(shè)計(jì)過(guò)程才更需謹(jǐn)慎。接下來(lái)就讓我們一起看看小小的播放條又是如何貫徹設(shè)計(jì)四策略的。
刪除:Apple music
“去掉所有不必要的按鈕,直到減到不能夠再減為止”。
當(dāng)頁(yè)面/模塊面積有限,卻有大量候選功能時(shí),我們要考慮的不是如何絞盡腦汁把它們硬塞進(jìn)去,而是想想:這些功能真的有必要嗎?用戶最期待的是那些功能?如果砍掉這個(gè)功能會(huì)影響產(chǎn)品使用嗎?
Apple music的主導(dǎo)航是位于底部的菜單欄,選擇播放條的形式就意味著頁(yè)面下方會(huì)被兩條矩形所占據(jù),小屏幕時(shí)更是將用來(lái)顯示信息的區(qū)域擠壓到可憐。盡可能壓縮播放條的面積更像是一個(gè)不得已之舉。
刪除法的關(guān)鍵在于要?jiǎng)h什么,這就牽涉到如何確定核心功能??梢钥吹紸pple music沒(méi)有展示任何圖片相關(guān)的信息,只保留了針對(duì)當(dāng)前媒體的基本功能操作,其他統(tǒng)統(tǒng)被舍棄。
組織:You Tube music
“按照有意義的標(biāo)準(zhǔn)將功能進(jìn)行整合劃分”
YT Music采用音/視頻切換的播放模式,將圖像信息與播放條完美的組織在了一起,播放條更像是一個(gè)縮略版的播放界面。與其他家的放置封面圖片相比,算的上眼前一亮的突破。
在對(duì)播放條畫(huà)面的截取上YT Music也做了細(xì)心的處理。通常構(gòu)圖時(shí)人的視覺(jué)重心會(huì)在畫(huà)紙物理中心偏上的地方,因?yàn)檫@樣更符合人在觀察事物時(shí)視覺(jué)中心的平衡點(diǎn)。從拍攝畫(huà)面來(lái)說(shuō),這個(gè)區(qū)域也最有可能出現(xiàn)頭部、臉部或重點(diǎn)要素。YT Music選擇中間偏上的區(qū)域用來(lái)顯示在播放條上,能最大程度的展示關(guān)鍵信息。
格式塔原則中指出:當(dāng)構(gòu)圖中各個(gè)視覺(jué)單元具有共同的特征時(shí),它們就顯示出一種視覺(jué)歸類(lèi)的趨向,這種視覺(jué)簡(jiǎn)化法也稱(chēng)為相似歸類(lèi)。在界面設(shè)計(jì)時(shí)此原則依然受用,將存在共同特性的功能、信息組合在一起,選擇合適的方法將它們打包,從而實(shí)現(xiàn)簡(jiǎn)化使用操作的效果。
隱藏:QQ音樂(lè)
“將那些不是最重要的功能放在舞臺(tái)之下,避免分散用戶注意力?”
QQ音樂(lè)的播放條看起來(lái)很簡(jiǎn)潔,除了左邊的音樂(lè)信息外,右側(cè)就放了兩個(gè)按鈕,但他卻是五個(gè)APP中唯一擁有“上一首”功能的。針對(duì)此操作QQ音樂(lè)并沒(méi)有給以實(shí)際的按鈕,而是將它們隱藏,通過(guò)左右滑動(dòng)實(shí)現(xiàn)歌曲前后切換。
隱藏不等于不可見(jiàn),QQ音樂(lè)選擇了動(dòng)效這一常見(jiàn)的方法來(lái)引導(dǎo)用戶。當(dāng)音樂(lè)播放完畢進(jìn)入下一首時(shí),播放條上音樂(lè)的信息就會(huì)向左滑動(dòng)并由新的音樂(lè)所替代。以此來(lái)傳達(dá)播放條在X軸維度上依然存在操作,整個(gè)引導(dǎo)過(guò)程簡(jiǎn)單流暢。
隱藏在常用功能之下,利用提示和線索讓功能容易被找到。隱藏法保證了產(chǎn)品的簡(jiǎn)潔,而又不會(huì)使功能有所缺失,每個(gè)功能都如同被隱藏的寶石,等待你慢慢的發(fā)現(xiàn)體會(huì)。
轉(zhuǎn)移:酷狗音樂(lè)
“保留基本信息,將剩余轉(zhuǎn)移到其他地方”
將一些不常用或者信息量很大的元素轉(zhuǎn)移到其他地方顯示。
酷狗的特點(diǎn)是可以在播放條上調(diào)整歌曲進(jìn)度,如果只是單單在進(jìn)度條上多了個(gè)手柄當(dāng)然沒(méi)啥好講的,模糊調(diào)整對(duì)歌曲而言并沒(méi)有太大的意義??峁返淖龇ㄊ牵蟿?dòng)手柄過(guò)程中會(huì)在播放條的上方出現(xiàn)對(duì)應(yīng)的歌詞模塊。通過(guò)將臨時(shí)信息轉(zhuǎn)移擴(kuò)展到主體以外的區(qū)域,實(shí)現(xiàn)了用戶精細(xì)操作,又保證了播放條的簡(jiǎn)潔。
其實(shí)做設(shè)計(jì)就像是整理房間,閑置多余的扔掉、相同類(lèi)型的放在一起、不常用的儲(chǔ)藏起來(lái)、放不下的轉(zhuǎn)移到其他地方……
對(duì)于功能性單一的產(chǎn)品做到簡(jiǎn)潔化比較容易,但對(duì)于功能性較強(qiáng)的產(chǎn)品如要做到簡(jiǎn)潔就是一個(gè)復(fù)雜的課題。
清晰的設(shè)計(jì)邏輯是簡(jiǎn)潔的前提,只有產(chǎn)品的設(shè)計(jì)簡(jiǎn)潔、清爽了,用戶才會(huì)用、愛(ài)用。
本文由網(wǎng)易云音樂(lè)交互設(shè)計(jì)師 @任軼(微信公眾號(hào):臭臉任的慢生活) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?,未經(jīng)許可,禁止轉(zhuǎn)載。
學(xué)到很多 ??
期待網(wǎng)易云音樂(lè)的分析,對(duì)我來(lái)說(shuō),我喜歡的理由是有質(zhì)感的外觀、精準(zhǔn)精品的歌單。它和QQ音樂(lè)一大顯著區(qū)別是音樂(lè)資源庫(kù)的不同,當(dāng)然這就屬于產(chǎn)品定位、運(yùn)營(yíng)策略了
謝謝回復(fù),很感謝對(duì)云音樂(lè)的喜愛(ài),我會(huì)繼續(xù)努力。
其實(shí)社交也是云音樂(lè)一直想嘗試的方向,最近我一直在思考這方面的問(wèn)題,多交流哈~
音樂(lè)和社交結(jié)合有難度,音樂(lè)對(duì)于大部分人來(lái)說(shuō)不屬于高頻需求,期待你們的社交方向!再加一句,云音樂(lè)的資源庫(kù)和歌單、每日推薦真的是太出彩了。
我是先用的qq,后面嘗試著用了一下網(wǎng)易的,不知道是不是受先入為主的思想,我又用回了QQ,總覺(jué)得網(wǎng)易在“我的音樂(lè)”那塊兒,沒(méi)QQ做得大氣,好用,順手,基本我一進(jìn)去,在“我的音樂(lè)”那里找功能,特別快,求大神分析一下,我并非高頻用戶,聽(tīng)在線音樂(lè)也不多,畢竟能聽(tīng)歌的時(shí)間都是碎片化的,沒(méi)有無(wú)線網(wǎng)絡(luò)的場(chǎng)景居多!
謝謝回復(fù),很感謝親的耐心留言
親說(shuō)的問(wèn)題我也有同感,我認(rèn)為可能是布局形式的不同?
QQ將六個(gè)功能柵格排布首先擴(kuò)展性差,比如多一個(gè)或少一個(gè)的時(shí)候就會(huì)顯得不整齊;柵格的入口是常駐的,當(dāng)次模塊不具備內(nèi)容時(shí)依然占位存在,對(duì)頁(yè)面來(lái)說(shuō)也是種空間損失;云音樂(lè)起初也嘗試過(guò)柵格,不過(guò)音樂(lè)功能架構(gòu)太復(fù)雜后來(lái)還是選擇了列表入口,根據(jù)用戶自身的使用狀態(tài)來(lái)有機(jī)的顯示入口(譬如沒(méi)有下載/收藏過(guò)MV,MV的入口就不會(huì)顯示)。
很開(kāi)心與您的交流~
求大神有機(jī)會(huì)了分析下網(wǎng)易云音樂(lè)~ ??
謝謝留言,會(huì)多嘗試的~多多交流哈
為什么不分析下網(wǎng)易的交互??
謝謝留言,會(huì)的會(huì)的~