UI設計教程：手把手教你擼一個網易云音樂UI界面【Pixso】

時間：2023-09-03 15:06:01 | 來源：網站運營

時間：2023-09-03 15:06:01 來源：網站運營

UI設計教程：手把手教你擼一個網易云音樂UI界面【Pixso】：Hello 各位好，我是皮仔 @Pixso協(xié)同設計 。

前兩天在逛本站的時候，看到有位網友提了一個問題，想知道「網易云音樂的播放頁是如何制作出來的」，本著「有求必應」的原則，皮仔稍微研究了下，花了一會功夫就在 Pixso 中復刻了一版。

制作過程其實并不復雜，更花時間的反而是寫如何制作出同樣效果的教程鴨~所以，如果這篇 UI 教程幫到了你，請不要忘記雙擊屏幕點贊鴨，皮仔在此先謝過各位。

為證明皮仔不是在吹牛( ?? ω ?? )?，皮仔使出了好幾年沒用過的「設計技能」，在 Pixso 中參照原版的界面，做了一個勉強還能接受(????)的版本，如下圖右側的圖片。

作品拆解

實際上每當我們拿到一張設計作品的時候，可以問自己一個問題，「這張圖是由哪些元素組成的」，逐層拆解出組成圖片的所有元素或圖層，確定好需要的元素后，依次制作出每個元素，最后將元素「拼裝」在一起，就能得到想要的設計作品。

題主想做的網易云音樂播放界面，組成界面的元素如下，主要有：模糊背景、各種 icons 圖標、CD、專輯封面、唱臂、底部的半透明圖層。

拆解完組成作品的主要元素后，我們就可以用在線設計工具 Pixso 開始做圖啦~

繪制過程

在瀏覽器打開 Pixso 官網，進入工作臺新建一個 Pixso 文件，首要的是創(chuàng)建一個和原版圖片類似大小的畫板。

點擊左上角的「畫板」，接著在右側的「設計」面板，選擇「iPhone SE」，就能創(chuàng)建一個空白的畫板。

創(chuàng)建好畫板后，開始制作底層的模糊背景，我們需要在畫板中插入一張圖片。

點擊 Pixso 右上角的插件圖標，打開 Pexels 圖庫，在圖庫中選擇一張自己喜歡的豎版圖片，插入畫板中。

插入的圖片比例如果與畫板不一致，我們可以裁剪圖片，讓圖片的比例適配畫板的尺寸。

雙擊插入的圖片，右側會彈出圖片的設置面板，點擊「適應」右側的小三角，將「適應」更改為「裁剪」，圖片四周就會出現(xiàn)裁剪的控制條，將圖片裁剪為符合畫板尺寸的比例。

圖片完成裁剪后，按住 Alt/Option 鍵，并用鼠標拖拽圖片，快速復制出一張相同的圖片，放在畫板旁邊，等會需要用到。

選中畫板中的圖片，點擊右側面板「效果」的加號 + ，默認會給圖片添加「外陰影」，但這不是我們想要的，點擊「外陰影」，將「外陰影」更改為「高斯模糊」。

點擊「高斯模糊」左側的「效果設置」，在彈出的設置面板，提高模糊數(shù)值的大小。

伴隨著模糊值的提高，會帶來一個小問題，圖片邊緣會出現(xiàn)虛化效果，影響最終的觀感，對于這個問題，我們可以采用如下方法解決：

雙擊選中圖片，拖拽圖片左上和右下的錨點，放大圖片，配合 Pixso 自動啟用的「超出畫板不顯示」，隨著圖片放大，圖片四周虛化的邊緣就會被隱藏起來，問題也就得到了解決。

制作好頁面背景后，就可以著手制作頁面上其他的元素啦~

點擊左上角的「形狀」工具，選擇「圓形」，按住 Shift 鍵，在畫板中插入一個圓形，點擊右側面板的「填充」，將圓形的填充色更改為白色，并設置透明度，讓圓形看起來更通透。

同樣地再插入一個圓形，點擊右側的「填充」打開拾色器面板，可以用吸管工具吸取原版圖片中代表 CD 的元素的顏色。

為了讓深灰色的圓形與下方的半透明圓形產生層次感，我們可以給深灰色的圓形添加陰影效果。

選中深灰色的圓形，點擊右側面板「效果」的加號 + ，給圓形添加「外陰影」效果，點擊陰影前面的效果選項按鈕，可以適當調整一下陰影默認的參數(shù)，譬如偏移方向、模糊程度、擴展和陰影的透明度。

完成前面的操作后，我們還要再添加一個圓形，用來制作音樂的專輯封面。

將前面復制出來的背景圖片移動到最頂層，并覆蓋剛創(chuàng)建的圓形，同時選中圖片和圓形，右擊選擇「創(chuàng)建蒙版」，將矩形的背景圖轉換為圓形。

將做好的圓形圖片放在頁面的最頂層，這樣就搭建好了頁面的基本框架。

接下來就是給頁面添加文本內容和各種 icons 圖標，添加 icons 圖標時，可以點擊 Pixso 右上角的「插件」，從 Pixso 內置的兩個矢量素材庫 iconfont 或 IconPark 插入圖標。

在制作頁面頂部的狀態(tài)欄時，可以點擊左側面板的「資源」選項卡，從內置的組件庫中插入現(xiàn)成的狀態(tài)欄。

以其中的 WeUI 純色組件庫為例，點擊組件庫右上角的下拉菜單，將「圖標」切換為「導航欄」，從中選擇 iPhone 的導航欄組件并插入畫板中。

選中導航欄組件頂部的時間電量模塊，按住 Alt/Option 鍵并拖拽鼠標，復制出一份同樣的模塊，移動到前面做好的頁面上方，稍微修改一下模塊的填充顏色和文字大小，就能快速做好頁面頂部的狀態(tài)欄。

至此，除了原圖中的「唱臂」，題主想要制作的網易云音樂播放界面，我們就可以說是基本完成了。

Pixso 資源社區(qū)

看完界面的整個繪制過程，如果你覺得步驟比較繁瑣，或是沒有充足的時間來制作類似的界面，可以前往 Pixso 資源社區(qū)獲取現(xiàn)成的模板，模板提供了音樂 App 不同頁面的高保真原型，其中就包含了題主想做的音樂播放頁面，所有元素都可以自由編輯，對模板稍加修改，就能得到屬于自己的設計作品。

? Pixso 資源社區(qū)簡介

Pixso 資源社區(qū)，是在線協(xié)同設計軟件 Pixso 推出的設計社區(qū)，提供了 UI 設計經常會用到的各類素材和模板，素材模板不僅質量高，關鍵還是完全免費的~

素材：矢量圖標、插畫素材、emoji 表情、3D 圖標、樣機素材
模板：多款移動端 UI 模板、網頁端 UI 模板、國內外眾多大廠的 UI 設計規(guī)范和設計系統(tǒng)

對于 Pixso 資源社區(qū)的模板或素材，可以點擊右上角的「收藏」或「復制」，保存到自己的賬號中，方便之后需要用到的時候可以隨時找回。

將模板復制到個人賬號后，點擊「打開文件」可以直接調用 Pixso 自帶的編輯器，打開剛復制的模板，Pixso 編輯器支持在線編輯模板，且所有編輯操作會自動保存到云端。

每一個 UI 模板包含了多個不同的頁面——開屏頁、注冊頁、主頁、用戶頁、搜索頁等等，頁面中的所有元素都是可以自由編輯的。

點擊左側的「組件」選項卡，可以看到 UI 模板中用到的所有組件，組件可以在文檔的多個頁面復用，如果你在模板的基礎上創(chuàng)建了新的頁面，可以優(yōu)先從中挑選組件作為頁面元素，保證整體風格的統(tǒng)一。

模板自有的組件如果不能滿足需求，可以切換到「資源」選項卡，調用來自其他組件庫的組件，這一點大大提升了 UI 模板的可拓展性，將模板原有組件進行替換，就能得到另外一套不同風格的模板。

對于模板中用到的位圖素材，如果想更換為自己更喜歡的圖片，可以點擊右上角的「插件」，打開內置的 Pexels 圖庫插件，選中需要更換的圖片，點擊 Pexels 插件中的圖片就能一鍵更換。

多個模板不同的頁面設計，既可以給我們的設計提供靈感，也可以將其中的一些組件復制到自己的項目中，稍加修改就能直接使用，減少不必要的重復勞動。

Pixso 個人用戶完全免費

Pixso 目前對個人用戶免費開放，現(xiàn)階段前往 Pixso 官網注冊賬號，可以享受多項權益，包含：無限云端空間容量、無限協(xié)作人數(shù)等等，還有眾多實用的隱藏福利，等你來發(fā)現(xiàn)~




碼字不易，如果對你有幫助的話，請別忘了賞個【三連】或是【關注】我哦，關注不迷路！

我是皮仔，那我們下次再見咯。