【移动音乐UI设计的应用与实现6000字（论文）】

PAGEPAGE1移动音乐UI设计的应用与实现目录TOC\o"1-3"\h\u7140一、UI设计相关概念 127519（一）UI定义 116749（二）UI设计技术介绍 1210101.界面设计技术 117352.交互技术 16892二、移动音乐应用总体设计 321791（一）系统思维导图 323119（二）系统功能模块设计 410322三、移动音乐UI设计应用 531424（一）logo设计 53718（二）APP界面设计 612467四、移动音乐UI设计实现 1430108五、总结 166338参考文献 17UI设计相关概念（一）UI定义用户界面用UI作为代表，并在普通用户与智能机器之间负责传递信息交互，最终结果是界面的视觉呈现。今天的UI设计仅仅为了网站外观美观是没有意义的。基本上，它更关注用户的需求和体验，这是一个充满自由创意的项目。网站UI设计是根据用户或客户的需要而配备的整个界面设计，不仅要实现美观的设计，还要方便人们。非标准的UI设计将使网站适应网站的位置和风格，不但可以让用户感觉到愉悦的审美印象，而且使网站操作更加方便和舒适。[1]（二）UI设计技术介绍界面设计技术处理像素为单位的数字图像是Photoshop或PS主要需要做的。许多的编辑工具和绘图工具可让使用者更好地进行图像编辑。大多数图像可以在PS系统上设计。AI，主要用于编辑矢量图形，编辑矢量图形的最佳软件是AdobeIllustrator。矢量图形主要由点和线组成，这些点和线可以不断扩大而不会模糊。对于研究人员而言，我们高质量期刊文章中的大多数图像都是矢量插图。在此设计中，logo是使用PS和AI技术设计的。UI设计是基于网站界面的布局以及布局中网站的图片、文字、颜色等附加元素的组合以及与网站用户的互动和交流。干净简洁的界面是每个好的UI设计应该具备的；平稳一致的操作方法和易于响应；它的使用过程简单而愉快。用户与网站之间的信息交互是用户界面设计的主要目标。如果人们不知道产品程序是如何工作的，或者他们不知道网站上需要的内容，就会让用户感到困惑和沮丧。[2]交互技术交互式设计包括三大类：自交互数据，人类环境和人与人之间的交互。交互式系统设计的目标可以在“可用性”和“用户满意度”两个级别上进行分析，重点放在以人为本的用户需求上，实现与系统的交互。[3]交互技术具有以下特点：可见性：功能可见性越高，对于用户要怎样使用和理解它就越简单容易；反馈：对活动的反馈，以允许用户采取下一步措施；限制：对用户进行显示给定时间功能，以避免错误的操作；映射：对其之间的效果关系进行精确的表达控制；连贯性：保障相同系统的相同功能中一致性能和操作；灵感：精确的使用建议。二、移动音乐应用总体设计（一）系统思维导图“芒果”音乐类UI是对音乐上传、下载、推荐为主的音乐软件，满足用户需求是系统功能的主要任务。实现登录注册、歌曲收藏、下载、歌曲推荐等功能，“芒果”音乐UI的系统思维导图如1、2所示。图1“芒果”音乐系统思维图图2“芒果”音乐系统网页思维图（二）系统功能模块设计本系统主要用于音乐的在线听歌，具有用户注册登录、歌曲收藏、发现歌曲、充值服务等功能。用户模块具有登录注册、输入个人信息、查看商城、歌曲收藏、视频管理、芒游发布等功能。系统模块图如下图3。图3系统模块图三、移动音乐UI设计应用用户界面是用户界面的简称。界面设计指的是整个人机交互计划、操作逻辑和软件界面的美观。用户界面是与用户的研究密切相关的设计，是最终用户满意的持续视觉增强设计。[4]UI设计的原则包括：第一，简单性：简单的设计，拒绝复杂的界面以及对用户体验的影响。第二，一致性：保持界面之间样式的统一。第三，仔细观察用户平时的使用习惯：设计必须符合用户使用习惯并由用户使用。第四，灵活性：确保互动的多样性，以提高娱乐性。第五，可见性：功能可见性越高，对怎样发现和使用它才会让客户更简单的理解。第六，灵感来源：足够精确的使用技巧，可减少用户错误并提高其体验质量。（一）logo设计“芒果”音乐的logo和设计稿用用Photoshop来完成。效果图如图4所示。图4“芒果”音乐logo在设计logo时参阅了一些类似的手办方面的软件的logo，无一例外都是造型偏向专业的或者有很强的识别性，像“网易云音乐”“QQ音乐”“酷狗音乐”的logo都是颜色偏亮丽，具有很高的识别性，让人们看见一眼就知道是什么音乐软件。既然软件的使用者大部分是音乐的粉丝，既然有偏好民谣的人，那么也应当有喜欢摇滚的人，所以在logo设计时，我结合大家喜欢音乐是因为音乐能让人找到共鸣，设计了音乐通过耳机是人产生共鸣的logo。所以如图所示的的logo也是我所做出的，由橙色的耳机为主题形象，logo中的电流图就是最硬核的硬核，它代表了人们能通过听歌产生共鸣；而音乐是通过耳机的形式传入人们的耳里。[5]（二）APP界面设计启动页以APP主色橙色为背景，简单的平面效果，带着logo的页面，使用户对于“芒果”音乐加深印象。画面有趣，简单明了，页面的“音乐是种记忆”也能引起用户的共鸣，很多音乐对于不同的都有不同的记忆[6]。如图5所示图5APP启动页引导页的设计采用漫画图像来吸引用户关注，第一页让用户能够放松心态，如同学生时代躺在操场上听歌的心态一样，而APP是专为音乐爱好人设计的，可以让用户对其产生一种身临其境的感觉。第二页为现在年轻人的生活状态，孤独是常态，而音乐可以让我们不再那么孤单，能够填满我们生活和心里的空白。第三页用乐章表示进入本APP就好像进入了新世界，吸引用户来对其进行体验。如图6。图6引导页登录界面采用白的为背景的，简洁明了，让用户能够一眼就看懂。支持验证码登录和其他方式登录，微信、QQ、微博都可以对APP进行登录。这样能让用户不必一步一步进行登录过程，只需要第三方软件授权即可。登录进入软件后，映入用户眼中的是以白色为背景颜色的界面，可以看到用户的名字、用户等级和是否是VIP。同时，可以看到我喜欢的歌曲、最近播放、本地音乐、下载管理和已购等功能。在创建歌单里可以查看现有歌单和创作新的歌单；推荐歌曲能找到一些根据近期新奇系统给予推荐的歌曲[7]。在我喜欢的界面里，以白和黑作为背景颜色。设计过程中研究了多家音乐软件，对其缺点进行了改进。例如QQ音乐中我喜欢的界面，没有加入下载，评论功能，只有对歌曲的名字，搜索等功能。而在“芒果”音乐里面加入了评论、下载、分享等功能。还能实现对歌曲的添加等功能。对于最近播放界面，以白色作为背景色，实现了用户对于近期所听过的歌或者直播、视频都有记录。这样可以让用户对于一些听过的歌，可是没有印象的情况下，找到这些歌。对于喜欢的歌单、专辑都可以进行查找。下载管理能对已经下载的歌曲进行管理，其中能播放已经下载的单曲和电台节目，同时可以对下载的视频进行查看。对于下载中的歌曲或者视频，可以暂停或者删除。已购中结合了多个软件的效果，对其进行精化。删除了一些累赘的功能，界面简化了，用户可以立即看到购买的商品。包含了歌手和专辑名，使用户直接选择需要的专辑。用户已经下载的音乐就在本地音乐中，可以对已经下载的音乐进行选择播放或者播放部分歌曲，可以根据给出的歌曲名和专辑名来选择，还可选择相对应的歌手或者专辑来查看，在搜索歌曲的时候，用歌曲首字母来搜索想要的歌。实现了简便化的操作，让用户有了跟好的使用体验。在最下一排的第二个功能选项是发现，它实现了用户对于喜欢的音乐的搜索，由歌手、歌名、专辑搜索来进行寻找想要的歌，其中搜索功能可以按关键字搜索。而在广告界面采用了轮播图的形式来显示最近的歌曲信息和歌手。采用轮播图是考虑到了用户的使用习惯，在众多APP的首页，都用轮播图的形式来显示活动、专题等，这既是一个快速入口，又是宣传推广的绝佳位置。同时，用户可以通过排行榜、歌单、FM、直播和歌手等功能实现对歌曲的搜索；而大家都在听则是根据当前热度比较高的歌曲进行推荐[8]，用户可以点击更多后查看热度比较高的歌曲歌单；根据用户的听歌喜欢来进行推荐的歌曲在精选歌单中，其中根据用户近期的听歌语种、风格、情绪来推荐相类似的歌单。左上角的音符标志则可以进入用户当前所听歌的见面。如图7所示。图7发现页面发现弹窗是采用了系统的自动识别、推荐技术，系统会根据用户喜欢的歌来给正在首页浏览的用户进行推荐，不过这些歌曲需要开通VIP才能播放。这个过程中给“芒果”音乐软件VIP的功能做了部分描述，使得用户根据自己的情况选择是否开通VIP的提示。让音乐软件的收费更人性化，合理化。如图8所示。图8发现弹窗排行榜功能相比较与其他音乐软件做了简化，删除了一些没有必要的功能，使得用户可以一眼就看出音乐排行榜的内容。排行榜主要分为三个板块。第一个，推荐榜，根据近期的歌曲流行情况，系统给出推荐的榜单供用户查看。第二个，巅峰榜，它分为多个板块，对不同的板块就行了分类，例如飙升榜则是根据前一天的用户听歌量来排行的。巅峰榜里的排行主要都是一些国内的歌曲或者热度比较高的外国歌曲，让用户对于现在受大众喜欢的音乐进行了解和听，其中飙升榜、新歌榜是每天更新；原创榜、热歌榜和畅销榜则是每周四更新；相对较火的人气榜、说白榜是每小时更新，来满足用户的需求。第三个，全球榜，对于一些少数音乐群体所设计的，其中收录了部分国家音乐的排行榜，根据不同国家进行相对应的更新。为了给用户更好的使用感觉，歌单部分采用了推荐、励志、运动、学习工作和亲音乐这些模块对歌单进行分类。这些基本包括了人们的生活状态和心理状态，可以根据当前的状态和心情来进行选择想要的歌单。在详细的歌单上，该歌单的播放量也可以看见，在右上角的放大镜则是搜索功能，包含了关键字搜索，使得用户可以自己搜索歌单。FM界面选用了一张动画作为背景，能提高用户的使用体验。在FM里，可以一样就看到歌名和歌手，歌手旁的爱心则是让用户可以把该歌曲直接加入我喜欢的里面，歌词采用的是滚动技术，能根据歌曲当前的播放，对应歌词。最下面一排实现了弹幕功能，能发弹幕和关闭弹幕，定时关闭和分享，用户的需求都被人性化的设计而满足，如图9所示。图9FM直播界面主要是根据当下直播行业的兴起，对这方面做了一定的功能实现。分为三大模块，实现了用户多方面的需求，有对失恋的人的治愈，对于喜欢脱口秀的有专业的脱口秀模块等。同时分为电台、娱乐、关注三个模块，对用户的需求进行诸多满足，如图10：图10直播歌手界面对多个音乐软件进行结合，增加了关注功能，让用户能实时关注喜欢的歌手的近况。同时实现了对不同地区、性别和歌手类型进行了详细区别。对当下热度比较高，更受用户喜欢的歌手进行了相关的推荐。短视频已经是人们平时不可缺少的一部分，在视频界面里对短视频进行了展示。还有直播、音乐现场、翻唱、BGM、舞蹈等功能的实现。在不同的功能里，可以查看不同的视频，在右下角的摄像头能让用户录视频进行上传。直播能让用户可以自己开直播，对用户与用户之间的信息交流来进行实现，直播也分为不同的区域，有游戏直播、才艺直播、放映室等，在直播功能里加入了我的关注，可以直接找到关注过的用户，而不用多余的操作去找自己关注的用户。如图11所示。图11视频直播社交在社会科技发展中必不可少，芒游界面结合了当下的朋友圈，设计了一个用户在“芒果”音乐软件的广场。在芒游里分为关注和广场。关注主要是用户所关注的一些歌手近况信息、新歌发行和歌曲分享。广场里有用户动态，可以使用户与用户之间进行信息交流。

四、移动音乐UI设计实现在界面设计过程中，固定的设计了每个界面在左上角都有三条横线的标志，这是列表设置功能。点击后可以看见用户名和一些APP的设置，通过点击头像则可以进入个人页面，在下面可以看见我的消息、我的好友、我的动态，这些都是只有在芒游里才能实现的功能。而下面的则是定时播放、音乐闹钟、百变彩铃等功能。更加人性化的设计更符合人们的生活。个人界面以白和暗红为主背景颜色，让用户有一种时尚的感觉。在个人页面可以看见用户名、关注人数和粉丝人数。个人简介可以点击右边的编辑按钮进行个人信息编辑。而在我的歌单里有我喜欢的音乐和我收藏的歌单，可以看见歌单的介绍和播放次数。右上角可以对该页面进行分享，让用户可以更为简便的分享自己，也使得APP让更多人知道。会员中心结合了网易云音乐的会员界面，增加了赠送好友VIP等功能。永辉可以查看自己的VIP等级以及VIP所拥有的权限。让用户直接看到VIP的优势，VIP也会每天推送不同的热门内容给VIP用户，对于当下的音乐软件，收费制度已经被用户所接受，软件的主要收入来源就是收费，所以在会员中心做了更加精细的设计。在用户支付时，可以选择开通VIP的时间和支付方式，实现了多功能，多方面的支付方式。给用户更多的便利，对于新的用户开通VIP，会给予优惠，让其体验我们的VIP后觉得物有所值。对于VIP的开通和商城的基础上，对致富界面进行了设计，简介明了的说明了用户购买的项目和金额，也给出了收款方。让用户对于支付更加放心。支付成功后，系统会弹出支付成功的界面，用户可以清楚的知道是否支付成功了。而在用户使用过程中，运用的最多的界面便是播放界面。在播放界面多了多次比较，最终决定使用比较简洁明了的设计，让用户直接就能上手使用。播放界面实现了歌手、歌曲、评论等功能。对于专辑图片、歌名、歌手放在了最中心的位置，而下一排喜欢则是可以把这首歌收藏进我喜欢的歌单，下载可以把当前歌曲下载至本地音乐。最后一排实现了歌曲的循环顺序、切歌、暂停、播放和查看当前歌曲列表的功能，简洁的界面能给用户更好的使用体验。如图12所示。图12播放页面还有人性化设计的歌曲识别界面，用户可以进行听歌识曲或者哼歌识曲的操作，对于一些只知道旋律不知道歌词的歌曲也可以进行识别。对于歌曲搜索界面，做到了歌手、歌名、专辑等搜索，同时支持关键字搜索，给予用户更好的使用体验，而在用户纠结于搜什么歌曲时，会给出相对应的热搜榜供用户参考，热搜榜还有相对应的播放记录。五、结论在当今市场上，音乐应用程序集成了社会功能，大多数人接受音乐作为社会化的载体。而将情感和服务融为一体的音乐应用也逐渐具有了社会性功能。专注于“芒果”音乐的音乐应用程序可以利用并显示社会价值的原因是，可以通过这些音乐应用程序来对用户的需求进行社交化满足，而社交化是社会价值的核心。不管是“芒果”音乐，QQ音乐还是虾类音乐，其社会环境和提供的条件-音乐产品，即专辑歌曲，露天看台和音乐圈-发挥用户的社会价值。在音乐应用程序的社会环境中，用户表达自己的情感，满足他们的需求并实现其社会价值。然后，以商业促销的形式呈现用户的社会价值，这再次刺激了用户的社交行为，并产生了音乐领域的社交循环，实现了用户的社会价值。参考文献[1].Technolog