首页 > 编程知识 正文

制作音乐相册小程序开源(音乐项目化案例)

时间:2023-05-04 20:24:59 阅读:84263 作者:3333

改版的背景

1 .结构层和表现层

改版的理由主要有两个。 一个是我最近在研究小程序的设计规范和设计方法,另一个是我平时使用的“互联网云音乐”小程序在使用中发现了一些“问题”。 从用户的角度、行业的调查反馈、业务的角度,还有可以改善的方面,所以从不同的方面进行了优化。

改版方向

1 .调整地板模块的结构

2 .缺乏传承

现有网易云音乐小程序的界面缺乏网易云音乐的品牌继承,如果不从一些小标志位置认识到这是网易云音乐的小程序,就很难认识到这是哪个音乐平台。

3 .从用户的角度分析网络云音乐的核心产品线

4 .从业务的角度考虑是否能得到Wechat的流量红利

5 .适应平台的特点

6 .方案总结

改版细节

1 .首页效果

希望排除“不必要的功能”,实现符合小程序特征的APP,实现更扁平化、轻量化的特征,体现和暴露最核心的业务模块。

歌曲标签栏

留下“歌曲推荐”、“最新音乐”、“最佳歌曲”、“排行榜”4种类型,

第一,大多数人习惯听歌的智能推荐(计算机算法的实现)从这个角度来满足用户的喜好

第二,满足新用户的喜好,最新的音乐很快就能在小程序上听到

第三,满足“排行榜”喜好群体的诉求,体验最轻松的重生,随心所欲,逃避选择;

第四,从商业角度看,用户可以启动高级音乐时,启动“购买流程”以增加收费

在首页的交互设计中,在原始APP上,留下按一次按钮进行引导的交互体验; 虽然搜索部分和APP的位置不一致,但是标题栏被小程序的固定操作按钮“占有”,想露出品牌标题,所以移动了。

收音机标签栏

之所以在收音机标签下留下“收音机推荐”、“高级内容”、“创作翻唱”,首先是推荐的观点,因为用户不需要花时间寻找收音机来进行“无压力的体验”。

二是保留了收费相关的内容。 我们不仅需要引导用户从小体验免费收音机,还需要引导用户在APP购买付费产品。 为了获得更好的付费体验,第三个是保留“创作和翻唱”的原创模块,迎合年轻群体和原创有“癖好”的用户群体。

弹匣和导向器

用小程序,弹窗尽量不遮挡底部的标签栏。 因为这在之前的文章中也说过了,所以适合程序的弹窗时可以如下设计; 虽然也有引导“添加到我的小程序”的小气泡,但是我们可以

以对其进行一些品牌元素的露出会,突出品牌基因。

2. 精品内容-核心入口引流

在页面的购买核心功能区,在APP中能够直接购买和充值的「非实体」性质的网络课程,通俗点讲就是网络课程类的在微信中是无法进行交易的,所以很多产品都在小程序核心的场景中使用了引导文字,引导打开APP来进行深度很全面的体验。

3. 音乐播放页

音乐播放页是很重要的页面,小程序的播放页应该更纯粹简单一些的交互,当然现在的网易云音乐的小程序播放页已经很纯粹了,但是在实际运用中还是发现了一些功能的「缺失」,以及交互的问题,比如无法满足播放音乐的序列浏览、无法进行收藏等。

功能不是越少越好,而是要「刚刚好」,意思就是要满足用户基本的用户诉求和基本功能;在重设计中综合对现有小程序交互和APP的交互功能进行了提取和精简。

第一:收藏喜欢歌曲(页面中的小桃心入口),此功能的目的是收集用户在小程序中的收藏习惯,同时也可以同步到APP中。

第二:传播喜欢歌曲的目的就是利用微信红利流量池分享音乐吸引大量现有或者潜在音乐用户、所以在这里特别把「分享到微信」的入口进行了突出强调(强引导);同时保留点击屏幕切换歌词的交互,方便用户查看歌词的体验。

第三:APP引流,在评论部分,不可能把APP中所有的评论都进行体现,而是精选了部分进行展现,如果想浏览更多则需要进入APP。

而当用户触发付费音乐单曲后,则出现提示弹窗,引导用户打开APP听歌:

第四:保留了播放列表的入口,原因是hxsddp在使用小程序听歌时不只是选择歌曲单独播放而是有一个心理预期,希望看到你播放的歌曲顺序和下一首要播的是什么歌;因为播放列表的操作和其他3个入口不是同一类型的操作,所以在设计上把该入口放在了页面的右上角;小程序的播放列表功能在APP的基础上进行了「瘦身」,为的是让我们的操作更加的轻量化,比如减少了全部和单独歌曲删除。

Tips:在这里我想说一下,现在很多APP进入小程序后,都进行了业务矩阵的功能细分,把能够独立支撑的功能独立设计小程序,更加的专注和细分(我了解的某些APP如金山贴图拆分了十几个甚至几十个小程序),那么在网易云音乐APP的首页左上角的「听歌识曲」功能和播放页中的「音街」都很适合独立做自己的小程序。

4. 搜索结果

小程序瘦身-仅保留单曲和专辑

为了方便用户高效听到喜欢歌星单曲的同时,又能畅快的听到系列歌曲,那么专辑的存在就很有必要,至于APP中的 综合Tab、云村、主播电台等等相对非必须存在的功能可以进行适当的删减,尽量较少非小程序核心需要功能;保持小程序的轻量化的特征,让用户更加专注的,简单快捷的得到搜索歌曲的结果。

同时在APP中我们发现搜索结果页保留了底部

Tab bar,在小程序中,为了保留更纯粹更专注的用户体验,隐藏了Tab bar:

搜索在APP中是置于标题栏位置,那么在小程序中,

为了更大面积的体现搜索条,较少和小程序固定入口的干扰,增加标题,对搜索跳进行了下移。

播放按钮

在现有网易云音乐的小程序中,是有单曲播放的引导图标,很好,但是如果我在搜索结果中想一键播放全部歌曲的场景,所以需要保留APP中的「播放全部」功能。

5. 登录页

登录页设计交互中,考虑到小程序的平台特性,突出「微信登录」的入口,去掉App中的其他登录入口比如苹果登录、微博登录等等;我的页面如果在不登录的情况下无法查看页面中的信息和服务;同时去掉了APP中底部纹理的动画效果,目的是减少小程序开发中开发包的大小。

6. 我的页面-我喜欢的音乐

可以同步APP中保存的歌单,hxsddp在网易云音乐APP中保存了喜欢的歌曲后,那么也是可以同步到微信小程序中,同时包括我的电台的「订阅」同时同步;小程序中的「我喜欢的音乐」页面进行了一些非必要功能的精简,只保留了基本的音乐播放及分享入口。在这里要特别说下,就是小程序暗黑模式的适配未来肯定是一个大面积适配的需求,可想而知hxsddp在使用微信暗黑模式下时,进入一个小程序的Light模式让人的体验很不友好。

总结

1. 符合小程序的平台属性+用户使用场景

APP「移植」到微信小程序,要符合小程序轻量化的平台特征,不是一味的减少就是最好。

在尽可能的「裁剪」不必要的不符合的功能的同时,也要考虑到用户的体验和使用场景及感受。

2. 市场及用户调研+APP的自我分析

在做本次网易云音乐小程序改版之前,我对主流的小程序和APP都进行了大量的双端调研,这样的调研能够足够支撑你前行之路,不会「偏航」,同时也要结合网易云音乐本APP的独特优势做出更加有特点的音乐小程序,保持品牌的一致性。

3. 保持与时俱进的用户体验

未来小程序还会不断的演变和进化,也还会有更好的用户体验出现,保持ALways Day One的精神,与时俱进就能够得到更好的用户体验。

喜欢关注大东一起聊设计!

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。