音乐APP的设计》.docx

音乐APP的设计》.docx

《音乐APP的设计》.docx》由会员分享，可在线阅读，更多相关《音乐APP的设计》.docx（9页珍藏版）》请在冰点文库上搜索。

音乐APP的设计》

音乐APP的设计

1前言

一款智能设备应用程序,其界面设计元素主要包括界面的图形设计、界面中功能图标设计、界面中的文字排版和版式布局设计以及界面的色彩搭配，因此界面设计的合理性、功能性与美观性的统一尤其重要。

2设计背景

2.1设计目的

音乐类App的本质内容就是音乐播放器，有很多的非常棒的作品没有被大家所发现，我想做一个拥有社交功能的音乐平台，希望平台能够像个朋友告诉你什么歌曲好听，然后会让你有想听这首个的行为，让更多的用户能够发现更多适合个人的优秀音乐作品。

2.2产品定位

虾听是一款时尚简约的手机音乐APP设计，主要针对于14-30岁爱听音乐的人群。

这款手机APP设计主题明确，突出整体颜色虽然使用了鲜艳的橙色却不显单调，界面风格设计整体统一，使用扁平化的表现方式给人带来更为直观地体验。

我的作品具有很高的体验效果，创意设计把用户需要的主要操作体现在了每一个界面，在交互使用中带给人想象不到的操作体验；人性化的细节呈现着令人赏心悦目的视觉体验。

我的APP界面设计将会给用户带来贴心、愉悦、便捷的交互体验。

3产品设计

3.1APPlogo设计

图一启动图标

图一是虾听的logo以橙色主题色为底色，颜色鲜艳容易吸引人们的眼球。

整体使用扁平化的风格使用白色的虾为主体，使虾的触须变型成耳机的形象，形成一个虾带着耳机听歌的图案。

简单形象的logo让本产品拥有更好的识别性。

3.2产品架构

图二推荐界面

发现音乐多纬度满足用户发现音乐的需求

1.推荐：

每日歌曲推荐、音乐新歌榜、推荐歌单、独家放送、最新音乐、推荐MV。

2.排行榜：

包含官方榜（歌手榜、热歌榜、原创榜、新歌榜、飙升榜）、全球榜、用户榜。

3.歌单：

基于情感、风格、场景、语种、主题等不同维度划分的歌单。

4.附近：

基于附近的社交分享功能，可以对歌曲，歌曲，专辑，电台点赞，评论，转发和关注的基础上的邮件列表的朋友，朋友，音乐明星，微博大师。

图二

3.3交互及界面设计

首先整个APP默认的主题是橙色，给人热情、活跃和热烈的感觉。

首页将产品主推的歌曲放在最显眼的位置一目了然，使用宫格式布局清晰展现各个入口，提高用户使用效率，顶部banner用于吸引住用户眼球。

使用顶部状态栏可以在其五个按钮中任意切换，我为了让用户时刻知道自己所处的界面，让被选中按钮的颜色变为橙色的主题色，还同时有一个下划线如图三所示。

图三排行榜界面

音乐排行榜采用列表试布局层级展示清晰明了，可使用户视线从上到下，浏览体验快速流畅。

大图试设计让用户更乐意去了解信息，上下滑动可进行翻阅如图三。

图四附近界面

图五电台界面

附近可通过地理信息位置互相了解附近用户的听歌状态并可以点击用户，对该用户进行关注等更多操作。

使用列表布局，您可以清楚地看到附近的用户的状态，使用户能够找到很多人具有相同的音乐品味，然后挖出了很多音乐，你从来没有听到和感觉良好，如图四所示。

图四附近界面

图四

底部常驻模块在虾听音乐的任何界面都显示在最下方。

允许用户随时使用APP，可以轻松播放当前音乐播放暂停、播放、切换等操作。

左侧显示的是当前播放音乐的封面，其右侧是歌曲名和歌手。

点击音乐封面则可进入播放界面如图五。

图五电台界面

图五

图六搜索界面

搜索页面可以从歌手、曲风流派两个分类去搜索自己想要的音乐，同时还有听歌识曲来帮助用户去搜索没有精确信息的歌曲。

下半区域的今日热搜可引导用户去搜索当前最热门的歌曲。

按钮使用图标加文字的设计让用户能增加用户的识别性与准确性，点击右上角的取消按钮可返回到上一层级如图六所示。

图七播放器界面

播放界面上半部分是歌曲封面，下半部分是歌词，背景使用当前歌曲封面放大并高斯模糊产形成毛玻璃效果。

顶部左侧按钮点击返回上一级，右侧为分享按钮，同时还有我喜欢、评论、删除、跟多登功能。

左右滑动歌曲封面可进入歌曲详情和歌词界面，上下拖动歌词可对歌曲进行快进/快退。

播放到当前的歌词会以白色显现，区别于其他灰色的歌词如图七所示。

图八个人中心界面

个人中心界面采用侧拉式弹出显示，使用黑白万能搭配色能更好与主题色相结合。

顶部显示用户头像和用户名，在用户没有登陆的情况下点击头像显示区进行登陆。

用户登陆之后才可以使用APP的社交功能，如关注和收发消息登。

数字使用白色而文字使用灰色是为了突出数字，让用户了解信息更加有重点如图八。

图八个人中心界面

图八

图九登录界面

登陆界面整体风格简约，背景高斯模糊做出毛玻璃效果，顶部加上logo是产品更具有识别性，同时使整体画面更加和谐。

底部有第三方登陆按钮更加方便用户的使用，让用户登陆选择多样性如图九。

图九

4总结

手机音乐APP经过长时间的发展，已经不再是简单的一个音乐播放器，更是用户交流、分享音乐的娱乐平台，也是音乐人发布作品的传播媒介。

手机音乐APP的界面设计不只是要对复杂的功能要素加以协调和排列，更要在界面设计同质化的大环境下，创造出别具匠心、具备自己特色的设计风格，要抓住自己的核心用户，争取更多的潜在用户。

手机音乐APP作为娱乐媒介已经是人们日常生活中的一部分了，对其界面进行深入的研究，具有非常重要的现实意义。

我们现在身处信息大爆炸的时代，通过手机接了解到的信息越来越多，想要解决掉冗余信息的干扰简直是难上加难。

当今人们对于复杂化的反感和排斥从而导致了简约设计风的流行，人们的这种体会也反映在工作、生活中的方方面面。

简洁的界面设计风格，伴随着流行的扁平化，迅速影响了当前APP界面的设计，并促进其敏锐地满足用户的喜好。

简约的界面设计风格不仅有助于使手机音乐APP繁多复杂的功能加以合理的整合，又对设计具有自身特色的手机音乐APP界面起着良好的指导作用。

参考文献

[1]现代主义风格的UI设计之兴起[J].汪大伟.现代装饰（理论）.2012（09）

[2]范圣玺.行为与认知的设计设计的人性化[M].中国电力出版社.2009

[3][美]维克多•帕帕奈克（VictorPapanek）著,周博译.为真实的世界设计[M].中信出版社.2013

[4]肖昱.关于电子音乐APP的思考[J]，艺术科技，2014

[5]毛昕，赵倩云.浅析移动终端设备的扁平化设计风格[J]，设计，2014

[6]张宪荣.符号设计学.化学工业出版社，2004

[7]ShneiderMan.用户界面设计:

有效的人机交互策略.电子工业出版社，2004

[8][美]科尔科著.方舟译.交互设计沉思录：

顶尖设计专家JonhKolko的经验与心得.机械工业出版社，2012

[9].[日]伊达千代著.周淳译.版面设计的原理.中信出版社，2011

[10]宋方，金锦虹，逯新辉.析“扁平化”手机界面设计［J］.包装工程，2012

[11]庞博.从扁平化风格看界面设计的发展［J］.装饰，2014

[12]李若辉.浅析全球化趋势的设计对文化发展的推动[J].今日科苑2011年

[13]析“扁平化”手机界面设计[J].宋方,金锦虹,逯新辉.  包装工程.2012（14）

[14]面向用户体验的手持移动设备软件界面设计[J].罗仕鉴,龚蓉蓉,朱上上.  计算机辅助设计与图形学学报.2010

致谢

时光飞逝，转眼间大学四年的学习生活就快要结束了。

想想大学四年的生活，和同学一起快乐的讨论学习的时间已经会变成了回忆。

大学四年让我不论在思想、生活、学习上都得到了很大的提高，我要感谢同学和老师在学习和生活中对我的帮助，这四年是充实的四年，在以后的日子里这将是一段美好并值得怀念的记忆。

　　同时在此我要非常感谢在我的论文写作过程中给我提供支持和帮助的老师、朋友和同学们。

特别感谢我的导师!

老师在我的论文撰写过程中，从论文的选题、拟定提纲、构思、初稿的修改直至最后的定稿，倾注了大量的心血，提出了众多宝贵意见和建议，给予了精心的指导，让我的论文得以最终完稿。

同时，老师严谨的治学，渊博的知识，细致的教学，使我受益匪浅。

我想对你表示深深的感谢！

　　而且，感谢我的家人，在我学习的路上，是他们默默的支持着家人，支持着我，让我能全心全意地追求我学业的进步。