從網易云音樂客戶端更新，淺析交互設計思路

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

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

在桌面端，新版本的設計對比之前還是提升了不少，所以可以借這個機會對它的界面框架結構做個簡單的梳理，對 B 端的設計也會有很好的啟發。

一、全局框架拆解

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

左側的導航首先做了優化，增加了 LOGO，移除頭像。下方的選項也做了調整，因為我的內容數不少，所以折疊，下方創建、收藏的歌單默認也折疊。折疊后的高度小于整個窗口的最小高度（沒法再拖小），目的是為了在默認環境下不出現滾動條，讓視覺更干凈。

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

在頁面結構上，返回的邏輯也比以前更簡單，只有一個返回按鈕，只要你進行跳轉，就可以用返回按鈕回到上一頁。如果跳轉的次數過多，則可以直接點擊左側導航回到基礎的頁面，約等于新版模糊了頁面的層級關系，只是跳轉到不同頁面而已。

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

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

播放面板

下拉菜單

抽屜

獨立浮層

它們的層級可以總結為：

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

二、響應式的應用

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

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

最小窗口：

最大版心：

接著分析窗口內的全局組件，規則如下：

1. 側邊欄：左對齊，寬度固定，高度自適應
2. 頂部欄：上對齊，寬度自適應，高度固定
3. 內容區域：右對齊，寬度自適應，高度自適應
4. 播放欄：下對齊，寬度自適應，高度固定
5. 懸浮層：根據內容排版，尺寸固定

雖然沒有很精細的去測算，但是內容區域內的響應式應該沒有很嚴謹的使用柵格系統，只使用了間距+斷點的基礎規則，左右頁邊距 40，模塊間距 20。

模塊的寬度 = （內容區域寬 - 頁邊距 80 - 20*間距數）/ 內容數。

在兩個斷點之間放大寬度，則內容會等比進行放大，如下圖所示。

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

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

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

所以適配斷點的邏輯，應該是每個組件根據自己的情況獨立設置的。比如在播放面板里，就沒有斷點，擬物唱盤區域和歌詞區域寬度自適應，但一個是按比例縮放，另一個寬度自適應。

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

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

結尾

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

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

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