关于音乐播放App(应用软件)的分析与重设计 如何设计出漂亮的音乐播放界面

所属分类: 网页制作 / 应用技巧 阅读数: 1858
收藏 0 赞 0 分享
音乐播放App的分析与重设计 三联教程
  一直对无线交互很感兴趣,这次就来练练手~
  本次分析评测基于iOS平台,选取了两款有代表性的音乐播放器,QQ音乐和豆瓣FM。由于这两款产品在web端就有着庞大的用户基础,有一定的用户粘性,手机端是web端的延伸,目标用户、信息架构、核心体验等等也都继承了web端的鲜明风格。这两款产品可以代两类表定位不同的音乐播放器。一种是大而全的,功能全面,可满足用户管理本地音乐、同步其他设备音乐、发现好音乐等多种需求(类似应用:百度ting、酷我音乐盒、iScrob)。一种是小而简的,操作简单,就像使用收音机一样,打开就听,不喜欢就换台(类似应用:虾米FM、Console.fm)。
  QQ音乐
  1、界面总览
  2、需求分析
  目标用户:热爱音乐的普通青年,QQ产品的忠实用户。
  用户需求:随时随地听音乐,没有wifi时可以听本地音乐,有wifi时可以在线听,遇到喜欢的歌曲可以提供 下载,能同步其他设备上收藏的歌曲。
  设计目标:提供播放本地音乐、账号同步、在线收听、音乐搜索等功能。
  3、信息架构
  QQ音乐从本地音乐、我的音乐、在线音乐、更多,这四个方面对信息进行整合。
  “本地音乐”可以从歌手和专辑的维度对本地音乐进行播放,也可以自建本地音乐的歌单,还可以从这里查找已经下载过的缓存歌曲。
  “我的音乐”同步了QQ账号在各个设备上收藏的歌曲和建立的歌单,这种同步服务可以提高用户的粘度,培养用户及时登录的好习惯。为了增强社交属性,这里还有“点歌”的二级菜单,QQ用户可以为好友点歌,送给你的歌曲就会出现在这里。
  “在线音乐”是发现好音乐的地方。其中的“电台”类似于“豆瓣FM”,可以随机收听不同主题的音乐,系统还可以根据用户的收藏和收听习惯来猜你喜欢。这里同时提供了新歌和热歌的榜单,帮助用户最快的了解音乐流行趋势。这里还有类似于虾米音乐的精选集,为用户精选出具有主题的好音乐。
  “更多”里面则是整合了一些次要信息,包括个人账号、缓存设置、定时消息通知、软件信息。
  4、页面布局
  类似于大多数基于iOS的app布局,QQ音乐的list页采用了列表式的布局,便于查找和扩展。主导航固定于屏幕底部,二级导航在上,左上角是统一的返回上一级按钮,右上角是正在播放的歌曲详情页,便于用户快速找到正在播放的音乐,进行停止、播放、收藏、下载、分享等操作。
  歌曲播放界面采取了全屏展示,最常用的播放/暂停、上一曲/下一曲、音量调节默认显示,当用户点击歌曲封面时,歌曲进度、播放模式、收藏、下载、分享按钮会显示出来,用户可以在这里进行相应操作。
  5、手势操作
  对于歌曲的操作并不复杂,QQ音乐采用了上线滑动、左右滑动、单击的操作手势,大多是都是用户常用、显而易见的手势操作。只有在查看歌词的时候,用户需要向左划开专辑封面,图片向左下方划去,歌词出现,这一操作并不是很容易发现。
  豆瓣FM
  1、界面总览
  2、需求分析
  目标用户:热爱音乐的文艺青年,豆瓣产品的忠实用户。
  用户需求:像豆瓣FM一样,只要一打开,不用任何操作,就能播放那些我喜欢的文艺范儿歌曲。
  设计目标:界面清爽、操作简单、推荐精准、缩短播放歌曲的路径。
  3、信息架构
  豆瓣FM的信息架构要简单许多,层级浅、操作简单,只要打开电台,就会播放歌曲。用户可以滑动歌曲上方选择兆赫,也可以通过列表选择。豆瓣不会让用户费心的去选择要听那首歌,用户只要挑选想听的类别,豆瓣就会自动推荐。豆瓣希望用户可以“用心养电台”,根据用户长期的使用习惯,分析用户加心或选择不再播放的歌曲,推荐符合用户喜好的歌曲。
  4、界面布局
  豆瓣FM的界面非常简单,打开应用既是歌曲播放界面,界面上只有喜欢、不在播放和下一曲的按钮。滑动歌曲上方可以选择赫兹,正在播放的歌曲会渐渐消失,新的歌曲会渐渐响起,过度很平缓。
  因为豆瓣的定位是电台,想听就打开,不想听就关上,所以播放连暂停按钮都简化了。点击专辑时封面会翻转,显示歌曲的评分。
  点击左上角按钮可以进入分类选择歌曲的列表页,列表页分为私人兆赫和公共兆赫。私人兆赫是豆瓣通过用户习惯推荐的歌曲和用户加心收藏的歌曲,公共兆赫随即推荐具有一定主题的好歌。
  点击右上角的设置按钮,设置以提醒消息的形式出现,这又为豆瓣节省了一个界面。所以豆瓣FM真正做到了极简,只有两个页面,歌曲播放页和列表页。
  豆瓣FM的界面还采取了拟物化的设计隐喻,如未播放音乐时的背景就像收音机的喇叭,专辑背面的细节,做的也和真的CD背面一样。
  音乐播放器的重设计
  1、产品定位和信息架构
  本次音乐播放器的重设计,定位于功能全面、可以解决用户多种场景下需求的音乐播放器,可以在线发现好音乐、对歌曲进行收藏和下载、管理和播放本地音乐、搜索音乐等。
  通过对现有产品的分析,发现信息架构层级较深、推荐音乐内容较多。从用户的需求来看,无目的收听音乐时,用户希望有好的音乐可以推荐给自己,看看最近流行的音乐是什么。有目的收听音乐时,用户希望可以快速找到自己收藏过的音乐或本地音乐,或对想听的歌曲进行搜索。在分析现有产品时发现,很多app提供了各种电台、精选集、排行榜等令人眼花缭乱的精选推荐,让用户迷茫的同时,也使产品变得臃肿。
  在重新定义产品功能时,希望合并功能类似的推荐,如电台和精选集,可以从主题和音乐人的不同维度进行推荐。同时希望扁平化信息架构,缩短用户操作路径。将不常使用的次要操作放在更多中,突出主要任务。 以下是对信息架构进行的整理:
  2、产品原型设计
  在对产品进行梳理之后,制作原型如下:
  参照信息架构,将产品一级导航置于屏幕底部,二级导航置于顶部
。扁平化的信息架构,除精选集外,没有二级页面。用户在一级导航间进行切换时,默认会显示第一个tab页,也就是用户最常用的页面,此时只需要一次点击,即可看到音乐列表。
  现有的音乐播放器,通常在点击歌曲后会进入新页面播放歌曲。如果用户想在浏览其他页面后想关闭音乐,需要再次进入播放页面,增加了页面深度。
  可以将播放页面的操作和信息,如暂停、上一曲/下一曲、收藏、下载和播放进度,整合在比较小的区域内,置于音乐播放器列表页下部,方便随时进行操作。如用户想要查看歌词,可以向上滑动播放器,即可展开歌词。
  当用户看惯了点击浮出操作层时,也可以换换另一种方式。向右滑动歌曲,歌曲的下一层便会出现收藏、下载的操作。当然,第一次使用的时候需要新手引导一下。
  微信可以摇一摇,音乐播放器当然也可以。当听到不喜欢的歌曲时,摇一摇就可以换首歌听。
  在Web界面中使用下拉菜单,是节省空间增加扩展性的好办法,手机端也可以借鉴下。对于不常用的次要操作,可以在点击时滑出。
  搜索这项功能在音乐app中往往处于有点尴尬的位置,放在哪个页面好呢?如果放在某一个页面上,那就只能在这个页面内容的内部进行搜索,放在所 有页面上又太啰嗦,单独有个搜索页面又没必要,毕竟不是常用功能。出于对搜索功能并不常用的考虑,这次将搜索放在了更多中,纵向滑出后还可以横向滑出搜索 框,可以对线上和本地的全部内容进行全局搜索。

  3、视觉稿
  由于时间有限,只简单产出了部分视觉稿:
  4、手势操作
  上下滑动,查看歌曲列表
  向上滑动播放器查看歌词,向下滑动可收起
  向右滑动歌曲,下方出现常用操作
  点击更多,滑出搜索和设置,点击搜索,向左滑出搜索框
  摇动手机,播放下一曲
  其他点击操作
  作者:李月
更多精彩内容其他人还在看

32个典型的以分栏/网格为基础的网站

如果你正在寻找网页分栏设计的灵感,这里收集了32个典型的以分栏/网格为基础的网站。它们显示了在网页设计中分栏/网格的重要性,无论对于信息量巨大的站点还是个人博客。 1.The New York Times 2.National Post 3.Guardian 4.Times
收藏 0 赞 0 分享

理论普及——用户体验

一、概念分析1:UE用户体验 英文叫做user experience,缩写为UE, 或者UX。 当指电子商务网站的时候也被称作顾客体验(CUSTOMER EXPERIENCE). 它是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉,是否成功,是否享
收藏 0 赞 0 分享

分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

建立用户体验

也许你刚刚来到一家公司,他们希望进行一些“可用性”工作。你可能是一名UI设计师,业务分析师,或前端开发人员,一名产品经理,或者负责用户体验部门的经理或副总。你知道,如果更好地了解使用产品/软件/网站的人,就可能开发出更好的产品/软件/网站。不管怎么样
收藏 0 赞 0 分享

网页图片快速显示的方法和技巧

1. Use .gifs rather than .jpgs. GIFs are smaller in size when compared to JPGs. 1.用.gifs格式保存图片,最好不要用.jpgs格式。因为前者的尺寸比后者小。 2.Use 'Height
收藏 0 赞 0 分享

推荐60种分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

全面的网站评估方案

有时会被问到“看看XXX网站如何?”之类的问题。 谈到评估,通常都是指产品级的网站,如果模式很新,了解需要花一定时间。于是,很多人又问“那么你仅从UI/UE的角度看看呢?”首先我们得达成共识,一切花里胡哨都在为功能服务,如果功
收藏 0 赞 0 分享

网页的栅格设计思考

原文地址:http://andymao.com/andy/post/82.html 网页设计中的脏、乱、差,是我们在设计过程中常会遇到的问题。通常"脏"是由对色彩使用不当所产生的,而色彩使用不当产生的不好效果也分为:"花、灰",花哨、
收藏 0 赞 0 分享

设计理论设计中的层次感

原文:http://andymao.com/andy/post/80.html 这段时间我一直在说设计需要有层次感,这种层次感可能有很多类型,比如色彩的层次感,或是元素的层次感。当一个设计缺乏层次感的时候页面所表现出来的无非是两种可能,一种是单调,一种是花哨。在设计中我们常
收藏 0 赞 0 分享

网页心得:网页色彩的搭配

网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?这里谈一些心得,希望对你有所启发。 首先我们先来了解一些色彩的基本知识:
收藏 0 赞 0 分享
查看更多