在大城市的夜晚陪伴我们最多就是就是音乐，它陪伴我们一个又一个夜晚，寄托了太多的情绪和故事。

我们这次分享的是占据音乐软件半壁江山的 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 原型设计图，同时还有几款音乐类别原型图设计，总有一款能用得上！点击下面的链接仔细了解一下吧！

音乐（网易云音乐）APP原型资源分享

「抖音短视频」APP原型分享

「全民K歌」原型资源大放送！