最近網(wǎng)易團(tuán)隊終于在百忙之中抽出時間，更新了 Mac 客戶端，讓 Mac 用戶可以擁有這款“口碑爆棚”的 APP 了，真的感覺好尊貴啊……

網(wǎng)易云音樂在今年的改動比較大，不管是移動端還是桌面端，都做了大量的精簡，把一些花哨的功能弱化，回歸歌曲推薦的基本盤。

在桌面端，新版本的設(shè)計對比之前還是提升了不少，所以可以借這個機(jī)會對它的界面框架結(jié)構(gòu)做個簡單的梳理，對 B 端的設(shè)計也會有很好的啟發(fā)。

一、全局框架拆解

我們先從全局框架入手，主要頁面包含側(cè)邊欄、頂欄、內(nèi)容區(qū)域、底部播放器四個模塊。

左側(cè)的導(dǎo)航首先做了優(yōu)化，增加了 LOGO，移除頭像。下方的選項也做了調(diào)整，因為我的內(nèi)容數(shù)不少，所以折疊，下方創(chuàng)建、收藏的歌單默認(rèn)也折疊。折疊后的高度小于整個窗口的最小高度（沒法再拖?。?，目的是為了在默認(rèn)環(huán)境下不出現(xiàn)滾動條，讓視覺更干凈。

而頂部欄上，移除二級頁面選項，替換成搜索，選項也做過精簡，主頁不放，其它頁面則放到內(nèi)容區(qū)域中。

在頁面結(jié)構(gòu)上，返回的邏輯也比以前更簡單，只有一個返回按鈕，只要你進(jìn)行跳轉(zhuǎn)，就可以用返回按鈕回到上一頁。如果跳轉(zhuǎn)的次數(shù)過多，則可以直接點擊左側(cè)導(dǎo)航回到基礎(chǔ)的頁面，約等于新版模糊了頁面的層級關(guān)系，只是跳轉(zhuǎn)到不同頁面而已。

而老版本則對頁面的層級做了比較多余的處理，所以會出現(xiàn)兩級返回，下方的返回用于返回上一級頁面。

接著分析框架中的浮層元素，播放面板（覆蓋頁面）、下拉菜單、抽屜、獨立浮層。

播放面板

下拉菜單

抽屜

獨立浮層

它們的層級可以總結(jié)為：

雖然這套框架看起來簡單，但不代表拿到需求時看到那么多模塊和頁面類型會這么構(gòu)思。這次的改版顯然是狠下心做出簡化，讓業(yè)務(wù)為交互的流暢度讓步。

二、響應(yīng)式的應(yīng)用

新版也增加了比較細(xì)致的響應(yīng)式（感覺還是半成品），作為交互框架的一部分，我們也對它做個簡單的分析。

首先確認(rèn)窗口的尺寸規(guī)則，最小的寬、高尺寸為 1056px*752px。原則上沒有最大尺寸，但是內(nèi)容區(qū)域的版心寬度有限制，最大約為 1490px，居中顯示。

最小窗口：

最大版心：

接著分析窗口內(nèi)的全局組件，規(guī)則如下：

1. 側(cè)邊欄：左對齊，寬度固定，高度自適應(yīng)
2. 頂部欄：上對齊，寬度自適應(yīng)，高度固定
3. 內(nèi)容區(qū)域：右對齊，寬度自適應(yīng)，高度自適應(yīng)
4. 播放欄：下對齊，寬度自適應(yīng)，高度固定
5. 懸浮層：根據(jù)內(nèi)容排版，尺寸固定

雖然沒有很精細(xì)的去測算，但是內(nèi)容區(qū)域內(nèi)的響應(yīng)式應(yīng)該沒有很嚴(yán)謹(jǐn)?shù)氖褂脰鸥裣到y(tǒng)，只使用了間距+斷點的基礎(chǔ)規(guī)則，左右頁邊距 40，模塊間距 20。

模塊的寬度 = （內(nèi)容區(qū)域?qū)?- 頁邊距 80 - 20*間距數(shù)）/ 內(nèi)容數(shù)。

在兩個斷點之間放大寬度，則內(nèi)容會等比進(jìn)行放大，如下圖所示。

以推薦頁為例，斷點應(yīng)該包含了 4 級，應(yīng)用了四種布局的變化。

而在精選頁，斷點則只有 3 個規(guī)格（下方最新音樂就兩種模式）。

所以斷點的規(guī)則并沒有在所有頁面中統(tǒng)一，所以不會在頁面層應(yīng)用斷點規(guī)則，比如我們平時看的 AntD 的定義方式。

所以適配斷點的邏輯，應(yīng)該是每個組件根據(jù)自己的情況獨立設(shè)置的。比如在播放面板里，就沒有斷點，擬物唱盤區(qū)域和歌詞區(qū)域?qū)挾茸赃m應(yīng)，但一個是按比例縮放，另一個寬度自適應(yīng)。

因為新版本內(nèi)容整體都做簡化，所以每個組件做響應(yīng)式的邏輯就變得更簡單，整體的完成度也就更高，統(tǒng)一性更好。

越簡單的框架規(guī)劃，對后續(xù)的交互、響應(yīng)、設(shè)計的實現(xiàn)就越有利，設(shè)計的專業(yè)性往往是來自“穩(wěn)定”而不是復(fù)雜的樣式，在 B 端中同理，追求復(fù)雜的視覺效果“熵增”也就越大，越難控制，小問題也就越多。

結(jié)尾

大家可以自己下網(wǎng)易云仔細(xì)體驗，除此以外，還可以下載同類的 QQ 音樂、酷狗、Apple Music、Spotify 等播放器進(jìn)行對比，可以對框架對交互、設(shè)計的影響有更深刻的認(rèn)識。

下篇可能就以這個主題做個對比分析，看大家反饋如何了。

歡迎關(guān)注作者的微信公眾號：「超人的電話亭」