文章對(duì)QQ音樂(lè)“發(fā)現(xiàn)”功能的改版做了一些小測(cè)評(píng),指出了其改版的一些不足與需改進(jìn)之處,一起來(lái)看。
網(wǎng)易云靠著接地氣的UGC評(píng)論獲得高口碑,而現(xiàn)在QQ音樂(lè)想往專(zhuān)業(yè)音評(píng)方向走,雖然細(xì)節(jié)上還是有些許體驗(yàn)的問(wèn)題沒(méi)有處理好,但這次的大改版總體上來(lái)說(shuō)還是帶來(lái)了驚喜。
/更新前的QQ音樂(lè)界面/
作為多款音樂(lè)軟件的長(zhǎng)期使用者,QQ音樂(lè)一直都給我有種五六年前設(shè)計(jì)風(fēng)格的感覺(jué),看見(jiàn)那些粗線(xiàn)邊框大圖標(biāo)就糟心…但正是你有多失望你就有多驚訝,(前兩個(gè)功能視覺(jué)上目前并沒(méi)有大改)這次【發(fā)現(xiàn)】功能改版看得出QQ音樂(lè)的逼格上來(lái)了,視覺(jué)團(tuán)隊(duì)終于跟上了時(shí)代的審美。但是現(xiàn)在這個(gè)功能下的圖標(biāo)和整體而言,是不一致的…….
/更新后的QQ音樂(lè)【發(fā)現(xiàn)】界面/
1 音樂(lè)播放bar設(shè)計(jì)
在【發(fā)現(xiàn)】頁(yè)面還是使用一致的底部音樂(lè)播放bar,進(jìn)入閱讀次級(jí)頁(yè)面后,底部放置了更多迎合閱讀交互元素的入口,比如評(píng)論和分享,而音樂(lè)播放則相對(duì)變成了一個(gè)不顯眼的小圖標(biāo),但是會(huì)通過(guò)跳動(dòng)告知用戶(hù):你正在播放音樂(lè)。
這種設(shè)計(jì)滿(mǎn)足閱讀場(chǎng)景,如果還是使用原來(lái)的底部音樂(lè)播放bar,無(wú)論是轉(zhuǎn)動(dòng)的CD封面還是動(dòng)態(tài)變化的歌詞,一定程度上都會(huì)干擾閱讀的過(guò)程。而現(xiàn)在內(nèi)部跳動(dòng)的小圖標(biāo)并置于視野邊角,顯然是為用戶(hù)提供一個(gè)低干擾的閱讀界面。
2 圖文排版
第一眼就看見(jiàn)左文右圖的排版樣式,畢竟QQ音樂(lè)里主流排布都是左圖右文。關(guān)于左文右圖和左圖右文排版的優(yōu)勢(shì)之爭(zhēng)已經(jīng)很多年。
左文右圖的優(yōu)勢(shì):z型閱讀,既能調(diào)節(jié)閱讀節(jié)奏,避免疲勞,也能突出標(biāo)題文字。但缺點(diǎn)是,在瀏覽過(guò)程中很可能更多人會(huì)忽略右邊的圖,直接一直從上往下瀏覽文字。
如果圖片也是很重要的信息,那么左圖右文——將視覺(jué)落點(diǎn)左邊放置圖片,將作為吸引用戶(hù)的一個(gè)重點(diǎn)。但目前就我所知(本人是音樂(lè)專(zhuān)欄作家),封面圖片的挑選規(guī)則是在QQ音樂(lè)官方庫(kù)里挑選的,所以很大程度上封面照會(huì)有幾率重復(fù)出現(xiàn),因此這不是要表達(dá)的信息重點(diǎn),而對(duì)于封面照的官方把控,也能看出來(lái)騰訊對(duì)這個(gè)功能頁(yè)面內(nèi)容質(zhì)量的看重,避免各種奇怪的視覺(jué)元素充斥頁(yè)面,破壞整體美感。
3 節(jié)奏阻隔
除了普通的圖文列表,QQ音樂(lè)還有一個(gè)大圖類(lèi)別,既能作為重點(diǎn)內(nèi)容推送,也能作為節(jié)奏阻隔,防止視覺(jué)上這種(如上方右圖)一劃到底,失去焦點(diǎn)的行為。當(dāng)文字瀏覽過(guò)久,突然出現(xiàn)的大圖片會(huì)吸引注意,打斷過(guò)快的瀏覽,而這種節(jié)奏把控在每7-9個(gè)橫列表之間會(huì)出現(xiàn)一次。
這種手法很多app在設(shè)計(jì)時(shí)會(huì)用,但一般會(huì)如右圖般直接將文字也以攔斷設(shè)計(jì)。但QQ音樂(lè)做出來(lái)的則是左邊的設(shè)計(jì),雖然犧牲了一部分圖片的完整性,但是在文字排版上整體保持了一致性,而且保持眼跳范圍,一定程度上提高瀏覽效率。
4 標(biāo)簽設(shè)計(jì)
QQ音樂(lè)軟件里本身就有各種類(lèi)型的標(biāo)簽設(shè)計(jì),【音樂(lè)館】的標(biāo)簽會(huì)隨著背景圖片的不同而做相應(yīng)的調(diào)整,白底黑字或者是黑底白字。
而【發(fā)現(xiàn)】版面的反白標(biāo)簽真的做得特別清晰。
但是當(dāng)在大尺寸海報(bào)上運(yùn)用就比較難識(shí)別,但是如果在這里用白底黑字就又會(huì)和標(biāo)題產(chǎn)生混淆,所以當(dāng)遇上這種大圖片的標(biāo)簽情況設(shè)計(jì)需要更多的考慮,一來(lái)是易辨識(shí),二來(lái)是與整體標(biāo)簽設(shè)計(jì)保持一致。
雖然我個(gè)人是挺滿(mǎn)意QQ音樂(lè)這次的大改版,但還是有些許體驗(yàn)的問(wèn)題沒(méi)有處理好
1 表單填寫(xiě)
在移動(dòng)端填寫(xiě)網(wǎng)址?我一反應(yīng),嗯,應(yīng)該是選填吧。再仔細(xì)看看,必填。在移動(dòng)端填網(wǎng)址本來(lái)就真不是一件體驗(yàn)多好的事,但是也有可能是出于提高專(zhuān)欄進(jìn)駐的門(mén)檻,正好也減輕審核壓力。
2 調(diào)出鍵盤(pán)
這個(gè)無(wú)法接受了哈,為什么填郵箱調(diào)出的不是英文鍵盤(pán)啊,是不是忘了給開(kāi)發(fā)標(biāo)注鍵盤(pán)類(lèi)型。
3 置頂
習(xí)慣了看完長(zhǎng)文雙擊置頂?shù)牟僮髯屛以谶@里懵了一下,目前是不支持這個(gè)操作的??赐暧袝r(shí)候想回到頂部的時(shí)候內(nèi)心崩潰。
4 提示
我一直不是很明白為什么QQ音樂(lè)的提示要做到那么遠(yuǎn)距離,還一閃即逝。做成toast不行嗎?
5 每次評(píng)論完都不知道自己的評(píng)論在哪里系列
網(wǎng)易云好歹是往下滑動(dòng)能找見(jiàn),QQ也藏太深了在次級(jí)頁(yè)面。
6 點(diǎn)贊的文章
既然有那么大的入口,為什么頁(yè)面如此簡(jiǎn)單粗暴,其實(shí)就是一個(gè)美化過(guò)后的列表頁(yè)面啊,除了點(diǎn)開(kāi)看詳情沒(méi)有任何可操作性了,點(diǎn)贊的文章量大的時(shí)候是不是可以考慮給用戶(hù)整理、篩選、搜索。
以上就是類(lèi)似于QQ閱讀設(shè)計(jì)的實(shí)戰(zhàn)案例分析的內(nèi)容,如果想要了解關(guān)于社交網(wǎng)絡(luò)營(yíng)銷(xiāo)及競(jìng)價(jià)推廣技巧,可直接點(diǎn)擊查看