【全网首发】一文解锁网易云音乐「播放器样式」创新设计

用户头像
北京/设计爱好者/1年前/11476浏览
【全网首发】一文解锁网易云音乐「播放器样式」创新设计
站酷特别策划【设计前沿探】内容专栏。
诚邀前沿设计领域专家、知名大厂杰出设计团队等,共同发掘与分享前沿设计观察、思考、观点与实战经验。
【设计前沿探】第1期:
【全网首发】一文解锁网易云音乐「播放器样式」创新设计
本期特邀专栏作者:
网易云音乐设计团队
【全网首发】一文解锁网易云音乐「播放器样式」创新设计(图ZMTQ4Mzc2OTY=) - 观点 - 站酷设计师站酷策划原创素材 - 站酷ZCOOL
收藏
一、项目介绍
黑胶播放器作为云音乐的核心品牌标志之一,多年来以简洁、优雅、干净的产品设计风格广受用户好评。从2013年至今,随音乐旋转着的黑胶唱片已经深入人心,成为经典。
除了经典黑胶唱片之外,云音乐的播放页还有其他可能性吗?更年轻活力、更具社交分享欲的用户对播放页有怎样的期待?不同曲风音乐爱好者对播放器有怎样的想象?这里有无限值得探索和发挥的空间。
于是我们发起了云音乐播放器样式的创新,在继承黑胶唱片品牌基因的基础上,延续和探索更丰富的音乐视听感受和创新体验。
大多数音乐爱好者应该对此深有体会:音乐带来的听觉享受之外,播放器实体本身的存在,也可以带来更丰富的音乐记忆和情怀,甚至是一种生活方式的体现。用户对于播放器的选择,亦可以彰显其独特的生活态度、品味和情趣。桃木桌上的黑胶唱机,为你带来温暖、细腻、丰富音质的同时,亦可以欣赏其唱片封面的美学价值;牛仔裤兜里的随身听,看见它就想起校园里阳光下的梧桐树和青春飞扬的自己...... 
此次播放器样式的创新设计,核心是构建用户熟悉的情境,营造真实景象、空间、场景等,带给用户身临其境般得线上音乐视听体验。
二、设计创新点
我们从以下两种创新样式【曲风播放器样式】【时光播放器样式】,为用户提供更丰富的音乐视听体验。
1. 造物创新:曲风播放器
核心设计思路
不是设计一款虚拟的播放界面,而是具有合理工业结构和运行规则的实体播放器,将其虚拟化。
每一款播放器都有其设计理念,产品参数、材质、色彩等独特定义,带给用户实体播放器真实沉浸的播放体验。
【全网首发】一文解锁网易云音乐「播放器样式」创新设计(图ZMTQ4Mzc3MTY=) - 观点 - 站酷设计师站酷策划原创素材 - 站酷ZCOOL
收藏
【全网首发】一文解锁网易云音乐「播放器样式」创新设计(图ZMTQ4Mzc3MjA=) - 观点 - 站酷设计师站酷策划原创素材 - 站酷ZCOOL
收藏
(1)模拟黑胶唱针运行轨迹
唱针随唱片凹槽轨迹有序运行,唱针的运行速度和方向决定了歌曲的播放进度,我们将这一规则映射到了新播放器设计中,指针向外移动表示歌曲正在向前播放,而指针向内移动则代表歌曲正在倒带。
【全网首发】一文解锁网易云音乐「播放器样式」创新设计(图ZMTQ4Mzc3MjQ=) - 观点 - 站酷设计师站酷策划原创素材 - 站酷ZCOOL
收藏
(2)模拟黑胶唱针摆动效果
由于唱针沿着凹槽运动时,在不同声道上接收到不同信息,从而导致唱针产生微小的摆动,同时摆动幅度也受唱针自身重量、弹性等因素影响,形成了黑胶独特的音质。
为了真实模拟音乐播放时,唱针在黑胶盘上轻微的摆动效果,我们做了以下精细化创新设计:
  • 新设计唱针的物理模型,选取符合对应唱机风格的唱针造型;
  • 根据唱针模型的物理特性,通过定义唱针的起始位置、运动速度、摆动角度、摆动频率等参数,模拟唱针在黑胶盘上的轻微Pingpong摆动效果;
  • 兼顾唱针运动时的光影变化等,增加播放时的真实感和趣味性。
【全网首发】一文解锁网易云音乐「播放器样式」创新设计(图ZMTQ4Mzc3MzI=) - 观点 - 站酷设计师站酷策划原创素材 - 站酷ZCOOL
收藏
(3)根据人群+曲风定义播放器风格
根据分析用户年龄结构与曲风偏好的关联度,将目标人群与高TGI曲风有机的结合起来。根据用户行为数据分析,观察到用户的曲风TGI值往往与自身的年龄、教育、艺术、消费以及生活息息相关。
云音乐目标人群的曲风偏好主要集中在流行、电子、摇滚、R&B、原声带、蓝调、民谣、爵士、乡村、二次元等。我们根据用户曲风偏爱度,优先定义了4大设计风格:青春、极简、经典、复古。
【青春彩胶】色彩挥洒浪漫
彩胶的设计主要体现色彩上,一方面,选择造型简单的透明底座和指针,让视觉焦点更聚焦在颜色变化上;另一方面,采用可塑性强的半透明材质、整体氛围用封面取色(多变);在此基础上我们加入了烟雾弥漫效果来制造朦胧美与惊喜感。
烟雾伴随及取色逻辑是行业首创  
1、通过获取专辑主色,再对色值进行规则控制,最终将颜色晕染在胶盘以及界面中;2、根据音频的高低起伏,控制烟雾弥散的密度,歌曲柔和片段,烟雾微弱轻缓,惬意浪漫;歌曲高潮片段,烟雾逐层浓郁,激情澎湃。
【全网首发】一文解锁网易云音乐「播放器样式」创新设计(图ZMTQ4Mzc5NzI=) - 观点 - 站酷设计师站酷策划原创素材 - 站酷ZCOOL
收藏
【极简主义】简约宣告不凡
当代的极简主义渐渐成为一种生活方式、消费观和价值观,其最核心的主张便是“Less is more”,我们沿用这种理念,整体造型简约,以点线面为基础几何结构,将转轴、皮带、黑胶与唱针进行简单有机组合,整体颜色黑白纯粹简洁,整体质感温润低调。
【全网首发】一文解锁网易云音乐「播放器样式」创新设计(图ZMTQ4Mzc5NzY=) - 观点 - 站酷设计师站酷策划原创素材 - 站酷ZCOOL
收藏
【典藏金胶】黑金彰显尊贵
经典唱机既是一种艺术品也是向过去时代的致敬,为了体现尊贵感与厚重感,唱机造型选用经典形态,唱臂选用S型,色彩选用黑金,底座装饰选用印花和金边点缀,材质上使用真皮和木纹纹理。
【全网首发】一文解锁网易云音乐「播放器样式」创新设计(图ZMTQ4Mzc5ODA=) - 观点 - 站酷设计师站酷策划原创素材 - 站酷ZCOOL
收藏
【复古情怀】复古构筑优雅
复古黑胶唱机,其独特美感和怀旧情怀持续触动着人们。某种程度上,人们对黑胶唱片的喜爱与收藏,也是对音乐作品的最高赞誉。上个世纪第一款立式留声机即是黑胶播放器的雏形,由于当时工艺并不发达,播放器通常都是体积较大的木质与金属材料组成的。
为了满足用户的复古情怀,我们在造型上也沿用了立式造型,在颜色上使用了极具古典色调的深红色、暗蓝色以及米棕色,材质上则使用了深色系的木纹、金属以及皮革质感的组合,最后使用了老式的金属拨杆开关作为点缀,并且加入了微弱的光影、摇曳的窗影来营造更为真实流动的视觉体验,烘托更为浓厚的典雅气息。
【全网首发】一文解锁网易云音乐「播放器样式」创新设计(图ZMTQ4Mzc5ODQ=) - 观点 - 站酷设计师站酷策划原创素材 - 站酷ZCOOL
收藏
【赛博唱片】纵享科幻体验
赛博播放器是各个领域的碰撞的结果,有科技与艺术的结合,有虚拟与现实的交织,有抽象与现代的融合,有透明与机械的拼接,更有多种高饱和色彩灯光的呼应。
最终在设计表达上采用轻透的玻璃拼接复杂的元器部件,配上鲜艳饱和的流动灯光,当指针放在唱片上那一刻迸射出无限的能量,整个界面的灯光跟随节奏闪烁呼应。
【全网首发】一文解锁网易云音乐「播放器样式」创新设计(图ZMTQ4Mzc5ODg=) - 观点 - 站酷设计师站酷策划原创素材 - 站酷ZCOOL
收藏
2. 造景创新:时光播放器样式
【全网首发】一文解锁网易云音乐「播放器样式」创新设计(图ZMTQ4Mzc5OTI=) - 观点 - 站酷设计师站酷策划原创素材 - 站酷ZCOOL
收藏
对于聆听者来说,即使是同一首曲子,聆听者的心情也会随着所处情景、时间等因素不断流动变化。这种变化既受音乐本身的影响,也会与当下的心情、所处的空间、光线、温度等环境因素有关,就像人们常在黄昏感到低落悲伤,在夜晚则思绪万千。基于此,我们将自然情境融入至播放器中,即:
用「情境」用以触发聆听者情绪,用时间的「流动性」传达陪伴。
时光样式的“以景触情”设计是行业首创,通过在音乐播放页内造景,实时刻画聆听者当时当地的真实情境,以达到触发情绪,丰富感知维度的音乐视听体验,已获得发明专利。
(1)真实情景映射
将自然场景转译到界面中,通过将虚拟与现实连通,提供环境刺激,触动此刻情绪,带来不同的聆听体验。为了最大化突出自然光线、天气、季节等因素的变化,如晨间温暖和煦的阳光、黄昏时绮丽的晚霞、午夜绮洁的月光……我们选取了核心元素:日、月、星、水,并
根据用户实际地理经纬度,实时精细刻画当时当地的天气与光线。
除此之外,午间炽热的光晕、黄昏的飞鸟回巢、向晚的渔舟、深夜的星空闪烁、窗外的雨雪阴晴......相信这些生活中的自然细节也曾打动过你,触动你的心绪,这些精巧的小细节都可以在时光样式中被发现,带来不经意的惊喜。
【全网首发】一文解锁网易云音乐「播放器样式」创新设计(图ZMTQ4Mzc5OTY=) - 观点 - 站酷设计师站酷策划原创素材 - 站酷ZCOOL
收藏
(2)时间流逝可视化
为了将时间的流逝可视化,我们将24h拆分为10个时间段,根据定位经纬度映射具体时间点,保证用户在每个时间段打开都能看到最贴合现实的画面,每一个时间段都拥有精心混合出最美的颜色与最合适的光影。通过现实照进虚拟的方式,能有效表达出一种心意:
这曲子背后的艺术家们、这歌词演绎的故事,正跨越空间时间与你同在。
【全网首发】一文解锁网易云音乐「播放器样式」创新设计(图ZMTQ4MzgwMDA=) - 观点 - 站酷设计师站酷策划原创素材 - 站酷ZCOOL
收藏
时光播放器传达出时间流逝,音乐始终伴随的品牌心意,曲风播放器在延续云音乐经典播放器调性的同时,赋予数字音乐以真实温暖的沉浸体验。云音乐播放器样式,是音乐视听体验的创新,
为云音乐播放页打开了新的拓展空间,为用户带来新的聆听体验和分享方式。
2023 年,网易云音乐推出了多款精美的播放器皮肤和个性装扮会员权益,为8亿云村村民带来了更加丰富多彩的听歌体验。接下来,我们期待站酷上才华横溢的设计师伙伴们,也能够共同
参与到网易云音乐播放器皮肤的创新探索
中来,一起为我们喜爱的云村增添更多独特的色彩。
在这个创意涌动、设计无界的时代,我们始终充满了对前沿探索的热情。
如果你正被某个内容选题深深吸引,希望可以和酷友切磋分享这份灵感与洞见; 或者,有你欣赏的某位设计专家在前沿设计领域有着独到见解和卓越作品!欢迎向【设计前沿探】专栏推荐提名或投稿。邮箱:zcooleditor@zcool.com.cn 
让我们携手共赴这场创意与设计的美妙旅程!
224
举报
|
291
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
科技医疗透明柜UI界面设计
【新年UI图标】钱包icon
UI通用设计素材1
盲盒APP UI设计
【新年UI图标】30个图标
手表表盘UI系列
Security Camera UI kit
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
拟物风质感写实UI卡片合集源文件
矢量立体简约UI蓝白图标
UI 登录界面设计模板包
3D渐变流体抽象矢量UI背景图
【新年UI图标】银行卡icon
【新年UI图标】影音icon
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】会员icon
【新年UI图标】珠宝icon
新能源APP应用UIKit
高级感金属拟物 UI设计组件库
UI界面 组件
高级表盘系列UI源文件
新拟态风格 UI设计组件库
【新年UI图标】秒杀icon
你可能喜欢
相关收藏夹
大家都在看
登录注册