音樂「QQ音樂」網頁版原型分享

在大城市的夜晚陪伴我們最多就是就是音樂，它陪伴我們一個又一個夜晚，寄託了太多的情緒和故事。

我們這次分享的是佔據音樂軟體半壁江山的 QQ 音樂的原型圖設計。在之前的分享里，我們已經提供給大家了幾十套APP原型模板以及數千個APP常用組件，但是很多小夥伴呼喚說能不能來點web組件，畢竟還是有很多web產品需要設計的！所以，這次為了提供給大家更多的web組件來創作原型，我們分享給大家QQ音樂的網頁版原型，不僅有可用於展示的能夠以假亂真的高保真原型，也有更加突顯產品邏輯和頁面結構的低保真原型。

這套資源不僅僅可以用來製作音樂類網站的原型，裡面豐富的組件和布局可以適用於視頻網站、電商購物網站、書籍閱讀網站、優選推薦網站、新聞資訊網站等一系列網站上面。

原型預覽

下面我們就來看看這次分享的《QQ音樂》里都包含哪些內容吧！

首先是三大版塊：

1、「音樂館」

排行榜、首頁、歌手、專輯、MV、數字專輯頁

2、「我的音樂」

關注、我喜歡

3、「音樂號」

音樂號、開通音樂號、申請頁

其次還有各類詳情頁面：

歌手個人頁、搜索結果頁、播放頁、歌曲詳情、MV播放頁

高保真原型

低保真原型

組件庫展示

這一套web原型中有多種圖文布局模板，雙欄、三欄、四欄、五欄布局，以及單列圖文列表，應有盡有，可以用於各類網頁中的信息展示。

還有其它常用網頁組件，比如評論列表、頂欄、分頁組件、篩選標籤等等。

這些原型資源怎麼使用呢～

進入xiaopiu精選廣場的組件庫/頁面庫，搜索「QQ音樂」，在搜索出的組件庫右下角點擊「引用為我的公用庫」。（搜索頁面庫時，記得在右側切換為web端）

點擊引用按鈕後，就可以在項目編輯頁左側面板看到這些資源！需要使用的時候直接從左側拖拽導入，就可以快速搭建自己的原型啦！

p.s.：我們xiaopiu的精選廣場里還有其他的海量原型圖設計資源庫呢！有海量的產品原型和組件可以隨時直接使用！

資源鏈接

高保真原型地址：QQ音樂網頁版（高保真）

低保真原型地址：QQ音樂網頁版（低保真）

高保真頁面庫地址：QQ音樂高保真頁面庫

低保真頁面庫地址：QQ音樂低保真頁面庫

組件庫地址：QQ音樂組件庫

什麼？你覺的網頁版原型設計圖的並不能滿足你，沒關係，下面就祭出和QQ音樂平分秋色的網易雲音樂 APP 原型設計圖，同時還有幾款音樂類別原型圖設計，總有一款能用得上!點擊下面的鏈接仔細了解一下吧！