前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【案例解析】国外的音乐软件如何设计?看看Spotify和Youtube Music吧!

【案例解析】国外的音乐软件如何设计?看看Spotify和Youtube Music吧!

作者头像
用户5009027
发布2022-10-27 11:24:41
1.6K0
发布2022-10-27 11:24:41
举报
文章被收录于专栏:静Design静Design

静电说:新一期的案例赏析栏目来啦!今天给大家分享两款不太一样的音乐软件,他们是国外的Spotify和Youtube Music。大家是不是已经看腻了国内软件的各种设计“套路”,那么今天来感受一下这两款国外音乐软件给大家带来怎样不一样的思考吧!

更多案例解析请点击这里查看

大部分的国外知名软件界面给我们的感受都是界面表现很简单,细节都藏在很深的地方,设计师更喜欢通过一些交互细节和更顺畅的体验来满足用户的需求。反观国内的APP,此处省略一万字。

我们先从Spotify的电脑客户端来看吧。不得不说体验真的很棒,整体感觉就是干干净净,没有那些乱七八遭的(此处继续省略一万字吐槽)。这两个音乐类软件都使用深色背景,特点就是在深色背景上使用不同的配图,色彩卡片来呈现设计感。

接下来我们的重点回归到移动端APP上来。下方是Spotify的首页设计,只有深色背景一种设计,在这种背景上,封面显得特别突出。当然,很多视频应用也是沿用这样的设计,比如Netflix等等。

在黑色模式下,设计师加入了一些背景磨砂渐变效果,大家可以看一下第一张图左上角,一抹光线直接定义了这款应用的设计感。

然后我们来说说配图。可以说,在内容至上的设计中,最最重要的就是配图了,Spotify并没有使用圆角来表现配图,所有配图都是直来直去的效果,不同的栏目会搭配不同设计感的配图,比如排行榜是颜色渐变效果,而艺人热门歌曲则直接采用艺人抠图+白色卡片设计。这一点我们可以学习一下,多去规整配图,会让你的页面上档次。

接下来看看二级列表页面,你会发现细节都藏在这些页面里边,你能发现他们的逻辑吗?什么情况下用封面?什么情况下用通栏的图片呈现?什么情况下用插画?还有,那个绿色的播放按钮,可以说是绿的很有特色,都在页面非常重要的位置。

继续看播放界面,Spotify的播放界面是跟电脑端联动的,你可以直接在手机上控制电脑播放器的播放音乐。这一点很贴心。

播放界面同样采用视频+封面结合的形式展示。对了,Spotify是没有评论的,所以,就是纯粹的听音乐而已,播放界面下滑就可以看到歌词。另外,点击右上方的三个点,可以看到更详细的艺人关联信息,采用大磨砂效果,从下往上滑动的抽屉效果展示。很顺滑。

下面是搜索页面。我在讲课的时候说过,搜索栏尽量不要用纯白色,但是还有一个点,就是要区分页面重要程度,和模块重要程度。在搜索页面,搜索当然会更加重要,所以这里Spotify使用了白色搜索栏。另外,下方的带有颜色的卡片与背景形成了鲜明的对比,这也是我很喜欢这个页面的一点。

接下来就是会员功能页面了,真的是简单粗暴,直接展示出会员和非会员的区别,这也是用户最关注的,就是,“我为什么要掏钱”?要给用户一个强烈的理由就好。同样是大卡片色块设计。

总结:Spotify采用深灰色到黑色的背景,重点突显内容与背景的对比,多种颜色配图的使用,加入大字体和简单的播放界面,让听音乐变的非常纯粹,有时候我们在想,少即是多,不只是说说而已啊。

接下来我们看看Youtube Music,它的设计感比Spotify要强一点,比如首页的毛玻璃效果,使用了更多的色彩来呈现。而且加入了场景化的标签来让用户有更多的选择。而它和Spotify比较一致的就是超大的标题文字使用和无分隔线的列表。

播放界面,Youtube Music加入了广告,这一点很难受,听歌还要听广告。歌手封面采用了描白边的设计,另外在播放页面同样是下拉抽屉的设计,让听歌更加方便,因为一个手势就搞定很多事情了。

总结:我们可以学习一下Youtube Music的小创意点,比如首页后方的颜色使用,还有微微的圆角设计。总之,这两款应用都是简单粗暴,没有乱七八遭的东西,这是真正做到了用户的沉浸式体验。

所以国内应用为什么要把东西一股脑的塞给用户呢?我陷入了深深的思考。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2022-07-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 静Design 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档