最近，QQ音樂和蝦米音樂最近都做了更新，讓人比較欣喜的地方，那就是終于都棄用了底部Tab欄。
我們可以看看身邊很常用的App，界面幾乎都是底部Tab欄的布局模式，比如微信、微博、淘寶、美團，還有其他的音樂App比如網(wǎng)易云音樂、多米音樂都還是有底部Tab欄。當然這種模式是有他的好處，比如入口清晰、操作方便等等，但是也會給人一種千篇一律，及其死板的感覺。它讓整個App內(nèi)容展示在一個有限的小窗格里，其實在瀏覽內(nèi)容時并不用Tab欄的操作，所以在用戶大部分的使用時間里Tab欄的存在是很沒有必要的，制約了內(nèi)容展示空間也影響了用戶的使用體驗。
我們先來看一下未使用Tab欄的例子：
從左到右依次為Spotify、蝦米音樂、QQ音樂，他們都沒有在屏幕底部設(shè)置Tab欄，所以從頂部狀態(tài)欄一下的內(nèi)容全部都是讓用戶去瀏覽（內(nèi)容流）、操作（播放控制條）的，也就是說把屏幕的大部分空間用在用戶主要的需求上，不展示無關(guān)內(nèi)容。
在這一點上，和底部Tab欄的對比就很明顯：
以上圖多米音樂為例，當用戶在瀏覽、挑選自己音樂庫里的音樂時，它并不需要去關(guān)注“音樂架”、“搜索”和“發(fā)現(xiàn)”這幾個選項中的內(nèi)容，也就是說不管用戶在干什么，Tab欄始終都在那里，即使這個任務(wù)內(nèi)容和它無關(guān)。這對于屏幕空間本身就很有限的移動端來說，顯然是一種浪費，而且對用戶當前任務(wù)是一種干擾。
其實，既然頂部狀態(tài)欄必然存在，那么就可以把底部Tab欄變相放在頂部，把底部空間騰出來給更重要的任務(wù)。又比如例子中的Spotify就把所有的分類都放進了折疊菜單里，所以我們能夠很明顯感到它的界面最簡潔，我們在瀏覽內(nèi)容時幾乎感受不到其他任何的視覺干擾，讓用戶完全專注于當前的內(nèi)容，有些沉浸式的體驗。還有，Spotify的歌單突出顯示的是文字性的主題覆蓋在若隱若現(xiàn)的圖片上，但是我們的應(yīng)用都是一個鮮明的配圖下方加一段文字主題，其實有一點兒喧賓奪主的感覺，因為我們每次去判斷這個歌單的大概風格是靠文字性說明去感知的而并不是圖片，而那些花花綠綠的圖片反而讓整個頁面變得紛雜，但另一方面也是避免了文字閱讀的干澀。總之，這是要取決于受眾的認知和習慣的，沒有絕對的好壞之分。
導(dǎo)航部分
大體來看，兩者都是頂部滑動菜單導(dǎo)航的模式，但是細分下去的各個層級的導(dǎo)航還是有很大不同的，先來看看蝦米每個欄目下的導(dǎo)航模式：
上面依次為我的、推薦、樂館這三個欄目內(nèi)的頁面截圖，做以下總結(jié)：
我們可以看到主要應(yīng)用了信息列表的導(dǎo)航模式，其余根據(jù)需要還有三種其他模式的導(dǎo)航，比如推薦中用CD擬物的專輯陳列展示就很好，通過一種很自然地方式把單曲集合和專輯做出了區(qū)分，清晰易懂。導(dǎo)航模式在每個欄目里相對差異小，整個應(yīng)用整體性會比較強、不凌亂，用戶認知負擔小。
相反，QQ音樂就顯得有點五花八門，尤其在音樂館一欄下還分有推薦、排行、歌單、電臺、分類這五個類別，先來看一下屏幕截圖：
上面是QQ音樂我的、音樂館、發(fā)現(xiàn)欄目的屏幕截圖，同樣做個總結(jié)來看：
我們看到我的、發(fā)現(xiàn)兩欄的導(dǎo)航模式還是比較統(tǒng)一的，也都是簡潔的線性圖標，不過有個小問題就是圖標的可點擊性不是很強，用細線把它們分開會比較好：
音樂館就有點兒大雜燴了，本身的信息分類就比較多，導(dǎo)航模式也多而且風格迥異，比如電臺的滾動式和分類中的標簽式差異就比較大，所以整體性不是很強，有點兒亂哄哄的感覺，增加用戶的認知負擔。
還有一個操作的問題，就是第一級的三個欄目間是通過滑動、點擊兩種方式都可以切換的，在音樂館的五個二級類目之間只能通過點擊切換，其實明顯滑動是最好的方式，但是由于會和上一級的切換相沖突造成邏輯混亂所以只能點擊切換，這么多的類目橫跨屏幕給用戶的操作帶來很大的不便，也會降低用戶對于其中一些類目的使用熱情。
在這一方面，不得不說Spotify的統(tǒng)一性和整體性最好，抽屜導(dǎo)航使得界面沒有多余的內(nèi)容和分類，只有卡片式和列表展示信息，清晰、簡潔，能讓用戶最大程度上的專注于內(nèi)容。
播放頁面
兩者的播放頁面也有許多的不同，我們分別做一下功能梳理，先看蝦米：
再來看一下QQ音樂，先做對比，在討論：
1、首先我們可以很直觀得感受到播放頁面固定部件的對比，我們也可以通過截屏具體感受一下：
很明顯，QQ音樂的部件擺了小三行，種類也很多，但是在移動端一次性給用戶提供如此多的選擇，用戶會有那個耐心去選擇么？實際情況很可能是大多數(shù)人連大部分圖標都忽略了，因為它干擾了用戶控制音樂播放這個最主要任務(wù)。其次，這么多的元素也讓整個界面有點兒零亂，而且容易誤點造成用戶操作失誤。
2、在功能圖中，同種顏色標示的為相同的功能元素或者在點擊后觸發(fā)相同跳轉(zhuǎn)。我們看到蝦米音樂只是把藝人、專輯詳情做了兩個入口，清晰簡潔易記；而QQ音樂對于藝人、專輯詳情提供了很多入口及相同入口的不同路徑，當然這樣會讓用戶在任何地方都有選擇，但另一方面也加重用戶的認知和記憶負擔，也使得頁面元素不得不增加。
最明顯的就是QQ音樂在滾屏1的狀態(tài)下，點擊屏幕會跳轉(zhuǎn)到 更多 中的選項，然而 更多 按鈕始終都在屏幕右上角，何必浪費一整個屏幕的點擊空間去做一個明顯而又重復(fù)的功能呢？使得滾屏1中的歌詞只有一行顯示空間根本顯示不完全，全屏歌詞只能讓用戶在做一次滑動放在滾屏3。首先極大弱化滾屏1的歌詞顯示，歌詞都顯示不全還不如不顯示，其次這有導(dǎo)致用戶再多一次操作才能看到完整全屏歌詞。查看歌詞對用戶來說是個硬需求，他可能永遠不去下載那首歌但是他可能有意無意去看看這個歌唱的是什么，所以這樣的功能設(shè)置真是得不償失。
而反觀蝦米音樂，在滾屏1中點擊屏幕就可以顯示全屏歌詞，這樣不會打斷用戶查看歌詞的操作，也不用離開當前屏幕，使得用戶后續(xù)的操作更加流暢，相比于QQ音樂還節(jié)省了一個屏幕的顯示。
其實對于所有應(yīng)用來說，努力的方向都是明確用戶的主要目標然后提供給他卓越的體驗。而通過上面的對比，個人認為蝦米音樂做得要好一些。
