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

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

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

一、全局框架拆解

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

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

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

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

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

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

播放面板

下拉菜單

抽屜

獨(dú)立浮層

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

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

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

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

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

最小窗口：

最大版心：

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

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

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

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

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

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

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

所以斷點(diǎn)的規(guī)則并沒(méi)有在所有頁(yè)面中統(tǒng)一，所以不會(huì)在頁(yè)面層應(yīng)用斷點(diǎn)規(guī)則，比如我們平時(shí)看的 AntD 的定義方式。

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

因?yàn)樾掳姹緝?nèi)容整體都做簡(jiǎn)化，所以每個(gè)組件做響應(yīng)式的邏輯就變得更簡(jiǎn)單，整體的完成度也就更高，統(tǒng)一性更好。

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

結(jié)尾

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

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

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