最近桐臊，QQ音樂(lè)和蝦米音樂(lè)最近都做了更新，讓人比較欣喜的地方晓殊，那就是終于都棄用了底部Tab欄断凶。
我們可以看看身邊很常用的App，界面幾乎都是底部Tab欄的布局模式巫俺，比如微信钦扭、微博叼耙、淘寶、美團(tuán)，還有其他的音樂(lè)App比如網(wǎng)易云音樂(lè)糊识、多米音樂(lè)都還是有底部Tab欄。當(dāng)然這種模式是有他的好處，比如入口清晰巨朦、操作方便等等，但是也會(huì)給人一種千篇一律赶撰，及其死板的感覺(jué)舌镶。它讓整個(gè)App內(nèi)容展示在一個(gè)有限的小窗格里，其實(shí)在瀏覽內(nèi)容時(shí)并不用Tab欄的操作豪娜，所以在用戶大部分的使用時(shí)間里Tab欄的存在是很沒(méi)有必要的餐胀，制約了內(nèi)容展示空間也影響了用戶的使用體驗(yàn)。
我們先來(lái)看一下未使用Tab欄的例子：
從左到右依次為Spotify、蝦米音樂(lè)鸣奔、QQ音樂(lè)墨技，他們都沒(méi)有在屏幕底部設(shè)置Tab欄，所以從頂部狀態(tài)欄一下的內(nèi)容全部都是讓用戶去瀏覽（內(nèi)容流）挎狸、操作（播放控制條）的扣汪，也就是說(shuō)把屏幕的大部分空間用在用戶主要的需求上，不展示無(wú)關(guān)內(nèi)容锨匆。
在這一點(diǎn)上崭别，和底部Tab欄的對(duì)比就很明顯：
以上圖多米音樂(lè)為例，當(dāng)用戶在瀏覽恐锣、挑選自己音樂(lè)庫(kù)里的音樂(lè)時(shí)茅主，它并不需要去關(guān)注“音樂(lè)架”、“搜索”和“發(fā)現(xiàn)”這幾個(gè)選項(xiàng)中的內(nèi)容土榴，也就是說(shuō)不管用戶在干什么诀姚，Tab欄始終都在那里，即使這個(gè)任務(wù)內(nèi)容和它無(wú)關(guān)鞭衩。這對(duì)于屏幕空間本身就很有限的移動(dòng)端來(lái)說(shuō)学搜，顯然是一種浪費(fèi)，而且對(duì)用戶當(dāng)前任務(wù)是一種干擾论衍。
其實(shí)瑞佩，既然頂部狀態(tài)欄必然存在，那么就可以把底部Tab欄變相放在頂部坯台，把底部空間騰出來(lái)給更重要的任務(wù)炬丸。又比如例子中的Spotify就把所有的分類(lèi)都放進(jìn)了折疊菜單里，所以我們能夠很明顯感到它的界面最簡(jiǎn)潔，我們?cè)跒g覽內(nèi)容時(shí)幾乎感受不到其他任何的視覺(jué)干擾稠炬，讓用戶完全專注于當(dāng)前的內(nèi)容焕阿，有些沉浸式的體驗(yàn)。還有首启，Spotify的歌單突出顯示的是文字性的主題覆蓋在若隱若現(xiàn)的圖片上暮屡，但是我們的應(yīng)用都是一個(gè)鮮明的配圖下方加一段文字主題，其實(shí)有一點(diǎn)兒喧賓奪主的感覺(jué)毅桃，因?yàn)槲覀兠看稳ヅ袛噙@個(gè)歌單的大概風(fēng)格是靠文字性說(shuō)明去感知的而并不是圖片褒纲，而那些花花綠綠的圖片反而讓整個(gè)頁(yè)面變得紛雜，但另一方面也是避免了文字閱讀的干澀钥飞≥郝樱總之，這是要取決于受眾的認(rèn)知和習(xí)慣的读宙，沒(méi)有絕對(duì)的好壞之分彻秆。
導(dǎo)航部分
大體來(lái)看，兩者都是頂部滑動(dòng)菜單導(dǎo)航的模式结闸，但是細(xì)分下去的各個(gè)層級(jí)的導(dǎo)航還是有很大不同的唇兑，先來(lái)看看蝦米每個(gè)欄目下的導(dǎo)航模式：
上面依次為我的、推薦膀估、樂(lè)館這三個(gè)欄目?jī)?nèi)的頁(yè)面截圖幔亥，做以下總結(jié)：
我們可以看到主要應(yīng)用了信息列表的導(dǎo)航模式，其余根據(jù)需要還有三種其他模式的導(dǎo)航察纯，比如推薦中用CD擬物的專輯陳列展示就很好帕棉，通過(guò)一種很自然地方式把單曲集合和專輯做出了區(qū)分，清晰易懂饼记。導(dǎo)航模式在每個(gè)欄目里相對(duì)差異小香伴，整個(gè)應(yīng)用整體性會(huì)比較強(qiáng)、不凌亂具则，用戶認(rèn)知負(fù)擔(dān)小即纲。
相反，QQ音樂(lè)就顯得有點(diǎn)五花八門(mén)博肋，尤其在音樂(lè)館一欄下還分有推薦低斋、排行、歌單匪凡、電臺(tái)膊畴、分類(lèi)這五個(gè)類(lèi)別，先來(lái)看一下屏幕截圖：
上面是QQ音樂(lè)我的病游、音樂(lè)館唇跨、發(fā)現(xiàn)欄目的屏幕截圖，同樣做個(gè)總結(jié)來(lái)看：
我們看到我的、發(fā)現(xiàn)兩欄的導(dǎo)航模式還是比較統(tǒng)一的买猖，也都是簡(jiǎn)潔的線性圖標(biāo)改橘，不過(guò)有個(gè)小問(wèn)題就是圖標(biāo)的可點(diǎn)擊性不是很強(qiáng)，用細(xì)線把它們分開(kāi)會(huì)比較好：
音樂(lè)館就有點(diǎn)兒大雜燴了玉控，本身的信息分類(lèi)就比較多飞主，導(dǎo)航模式也多而且風(fēng)格迥異，比如電臺(tái)的滾動(dòng)式和分類(lèi)中的標(biāo)簽式差異就比較大高诺，所以整體性不是很強(qiáng)既棺，有點(diǎn)兒亂哄哄的感覺(jué)，增加用戶的認(rèn)知負(fù)擔(dān)懒叛。
還有一個(gè)操作的問(wèn)題，就是第一級(jí)的三個(gè)欄目間是通過(guò)滑動(dòng)耽梅、點(diǎn)擊兩種方式都可以切換的薛窥，在音樂(lè)館的五個(gè)二級(jí)類(lèi)目之間只能通過(guò)點(diǎn)擊切換，其實(shí)明顯滑動(dòng)是最好的方式眼姐，但是由于會(huì)和上一級(jí)的切換相沖突造成邏輯混亂所以只能點(diǎn)擊切換诅迷，這么多的類(lèi)目橫跨屏幕給用戶的操作帶來(lái)很大的不便，也會(huì)降低用戶對(duì)于其中一些類(lèi)目的使用熱情众旗。
在這一方面罢杉，不得不說(shuō)Spotify的統(tǒng)一性和整體性最好，抽屜導(dǎo)航使得界面沒(méi)有多余的內(nèi)容和分類(lèi)贡歧，只有卡片式和列表展示信息滩租，清晰、簡(jiǎn)潔利朵，能讓用戶最大程度上的專注于內(nèi)容律想。
播放頁(yè)面
兩者的播放頁(yè)面也有許多的不同，我們分別做一下功能梳理绍弟，先看蝦米：
再來(lái)看一下QQ音樂(lè)技即，先做對(duì)比，在討論：
1樟遣、首先我們可以很直觀得感受到播放頁(yè)面固定部件的對(duì)比而叼，我們也可以通過(guò)截屏具體感受一下：
很明顯，QQ音樂(lè)的部件擺了小三行豹悬，種類(lèi)也很多葵陵，但是在移動(dòng)端一次性給用戶提供如此多的選擇，用戶會(huì)有那個(gè)耐心去選擇么屿衅？實(shí)際情況很可能是大多數(shù)人連大部分圖標(biāo)都忽略了埃难，因?yàn)樗蓴_了用戶控制音樂(lè)播放這個(gè)最主要任務(wù)。其次，這么多的元素也讓整個(gè)界面有點(diǎn)兒零亂涡尘，而且容易誤點(diǎn)造成用戶操作失誤忍弛。
2、在功能圖中考抄，同種顏色標(biāo)示的為相同的功能元素或者在點(diǎn)擊后觸發(fā)相同跳轉(zhuǎn)细疚。我們看到蝦米音樂(lè)只是把藝人、專輯詳情做了兩個(gè)入口川梅，清晰簡(jiǎn)潔易記疯兼；而QQ音樂(lè)對(duì)于藝人、專輯詳情提供了很多入口及相同入口的不同路徑贫途，當(dāng)然這樣會(huì)讓用戶在任何地方都有選擇吧彪，但另一方面也加重用戶的認(rèn)知和記憶負(fù)擔(dān)，也使得頁(yè)面元素不得不增加丢早。
最明顯的就是QQ音樂(lè)在滾屏1的狀態(tài)下姨裸，點(diǎn)擊屏幕會(huì)跳轉(zhuǎn)到 更多 中的選項(xiàng)，然而 更多 按鈕始終都在屏幕右上角怨酝，何必浪費(fèi)一整個(gè)屏幕的點(diǎn)擊空間去做一個(gè)明顯而又重復(fù)的功能呢傀缩？使得滾屏1中的歌詞只有一行顯示空間根本顯示不完全，全屏歌詞只能讓用戶在做一次滑動(dòng)放在滾屏3农猬。首先極大弱化滾屏1的歌詞顯示赡艰，歌詞都顯示不全還不如不顯示，其次這有導(dǎo)致用戶再多一次操作才能看到完整全屏歌詞斤葱。查看歌詞對(duì)用戶來(lái)說(shuō)是個(gè)硬需求慷垮，他可能永遠(yuǎn)不去下載那首歌但是他可能有意無(wú)意去看看這個(gè)歌唱的是什么，所以這樣的功能設(shè)置真是得不償失揍堕。
而反觀蝦米音樂(lè)换帜，在滾屏1中點(diǎn)擊屏幕就可以顯示全屏歌詞，這樣不會(huì)打斷用戶查看歌詞的操作鹤啡，也不用離開(kāi)當(dāng)前屏幕惯驼，使得用戶后續(xù)的操作更加流暢，相比于QQ音樂(lè)還節(jié)省了一個(gè)屏幕的顯示递瑰。
其實(shí)對(duì)于所有應(yīng)用來(lái)說(shuō)祟牲，努力的方向都是明確用戶的主要目標(biāo)然后提供給他卓越的體驗(yàn)。而通過(guò)上面的對(duì)比抖部，個(gè)人認(rèn)為蝦米音樂(lè)做得要好一些说贝。
