酷狗APP的交互设计进行分析和改良设计.docx

《酷狗APP的交互设计进行分析和改良设计.docx》由会员分享，可在线阅读，更多相关《酷狗APP的交互设计进行分析和改良设计.docx（13页珍藏版）》请在第一文库网上搜索。

1、测试版本：酷狗7.8.7测试系统：安卓测试手机：魅族MX3酷狗早期作为一款PC端的音乐播放器，积累了广泛的用户基础。这对于其移动端的APP,用户是一个先天优势，单从豌豆荚这个平台的数据来看，同类APP的下载量，酷狗稳居第一。对比下载量较高的几款竞品（QQ音乐、网易云音乐、天天动听），酷狗的产品路线显然不仅是做一个单纯的音乐交流社区，酷狗通过APP,以用户基础厚实的音乐社区带动旗下另外两个平台一“直播社区”、“唱K社区”，企图打造一个多维的音乐平台。“一APP多平台”的设计，固然有其公司的业务诉求和战略目标，但是从用户的角度来看,捆绑多余的功能板块可能会影响部分用户的使用体验，毕竟部分的用户需求

2、仅仅是纯粹的音乐播放。酷狗APP显然不是一个纯粹的音乐播放器了，在我看来，这是一把“双刃剑”，为另外两个平台拓展用户的同时，也会损失部分追求纯粹播放体验的用户。今天借此，与诸位探讨交流一下酷狗APP的设计和产品体验。多平台整合在一个APP,产品架构显得臃肿，在所难免了。上图（图1）为酷狗简略的大体层级架构图，从图中可以看出，架构横向三个板块并列，并具有一定的纵深，部分内容需要经过5个层级才能到达最终页面。怎样从最底层的页面回到一级导航，快速切换到其他平台去，是个问题。针对这个情况，酷狗的解决方案就是在右侧的抽屉菜单里（图4）,提供一个“返回首页”的按钮，可以一键快速切换到一级导航页。这个设计，

3、给用户操作带来便捷，还是挺不错的设计的。以“乐库为例”（图2）o二级菜单采用卡片式平铺在页面内（图3）,以“听”的二级页面为例，不规则的卡片排布显得有些杂乱，且卡片板块也没有功能优先的设计。在一般的使用场景,最常使用的功能就是【本地音乐】、【搜索】、【乐库】，如将【本地音乐】相关的板块以宫格式布局，而【收音机】那一栏可以再进行架构归纳和整合，而底部的【广告】和【建议】则完全可以归纳在菜单栏里，或整合在其他低层级的页面去。化繁就简，突出常需功能，让“听”音乐变得更加纯粹，界面更友好。喜帖街谢安琪令国三Q会员中心流包月搜索IGHt定时I0G扫描得依设MO仅iRO“1MG返回员B退出16:07GJ会

4、.id358D手势交互比点击交互更有效率在使用过程中，发现虽然“听看唱”三个并列位于顶部的TAB式菜单导航，但是它们并不支持手势切换，仅能点击切换。在“听”这个页面上（图3）,当我习惯性的左滑切换菜单时，出现的却是抽屉菜单（图4）。然而仔细观察抽屉菜单里的功能,并不是强需求的功能点，除了“返回首页”。但是此时的页面已经处在一级导航的首页状态，“返回首页”也不是一个强需求。那为什么始终要将抽屉菜单放在这么优先的级别呢，通过便捷的手势交互就能调出，而导航菜单却只能通过点击来切换？这个是让我有点不解的地方，也是我觉得可以优化的地方。在提出我的看法前，依然以“听”的板块和任务流为例，先大致说明下该板块

5、下有关“切换”的交互行为。1 .“听看唱”菜单导航，仅能点击切换2 .首页状态下，点击图标或左滑出现抽屉菜单3 .各子页面下，点击图标或左滑出现抽屉菜单;点击图标或右滑返回上一页;首先，子页面（图6即为子页面类）下的手势交互是要保留的。左滑出抽屉菜单，“返回首页”可以快速回到首页导航;右滑则返回上一层页面，“从哪儿来回到哪儿去”，符合用户习惯和心里预期。两种切换方案，让用户的操作有了更多选择和便捷性。因此，需要优化的就是首页状态下导航和抽屉菜单的交互设计。在移动端，一般需要“切换”的情况下，手势交互比点击交互的操作效率更高。参考下图图示（图5）,无论男性还是女性，其大拇指的操作区域均难触及到手

6、机屏幕的顶部，尤其现在屏幕5寸以上的手机是时下主流。在这种情况下，要想单手操作，精准点击屏幕上方的按钮来进行菜单切换，是一件很费功夫的事情，操作效率很低。酷狗APP中的“听看唱”位于顶部的菜单，仅支持点击切换，显然是不便用户操作的。改进方案一整合原来的交互设计，“听看唱”支持点击切换，并增加左右滑动切换菜单的交互行为。同时首页状态下左滑调出菜单的交互保留，但其交互级别是位于“听看唱”之后。即首页左滑时，依次切换顺序为：“听”“看唱”抽屉菜单;右滑时则从抽屉菜单反之依次切换。这样的交互调整，结合子页面的左右滑动交互，就有了一个比较一致性的手势交互行为。不至于在首页状态滑动时，始终出现一个需求较弱

7、的抽屉菜单，让人感觉莫名其妙。杂乱的歌单界面当进入“歌曲列表”这个子页面时（图6）,给人第一感观还是有点杂乱的，浏览体验比较一般。U1设计是其中一个因素，比如图标线条粗大，模块视觉区别较低等。这里主要是讨论一下，其布局方面。16:3610号i1164叵）本地音乐三单曲歌手专辑文件夹U单曲循环-Q多选陈奕迅稳稳的幸福MVA-BDE陈奕迅无人之境MV纯音乐-Bridgeovertroub1edwaterFGI1可纯音乐柯南登陆界面（活泼）.mp3电影原声-那女孩对我说想结婚的女子田鬣运昌风和日丽花开花败01:00。令)53ED本地音乐三单曲歌手专辑文件夹U1单曲循环g多选F0冯建宇、王青今夏MV.

8、KKerenAnn-JardinD,hiver1田林一峰-红河村MV三W0王菲-旋木MV.#4NonB1ondes-WhatsUp-1992重制版今夏冯建宇、王青ABCDMN0PTUVWXYZ共5首歌曲由于遵循“子页面下，左滑菜单右滑返回”的设计，【菜单】的图标始终占据了顶部导航栏最右侧的位置。那样，此页面的相关功能按钮的布局设计就受到了影响。在上图（图6）,可以看到在TAB的分类菜单下，还有一列功能的菜单栏，（下文统称功能栏），分布【播放模式】、【搜索】、【多选】的功能按钮。这个功能栏和TAB菜单视为一个模块，始终固定位于歌曲列表的最上层的。首先，该页面的歌单列表提供了以首字母分列的辅助设计

9、（图6红箭头）。由于导航栏、TAB标签栏、功能栏三者固定在上方，已经压榨了一定的歌单展示空间。而首字母分列只是一个辅助浏览的设计，采用大字母和粗蓝线来分割，并占用将近一列的空间。这样设计，让原本受损的歌单展示空间显得更加拥挤了。再者，每个歌曲名称间的分割线较粗颜色较深，小图标线条较粗，干扰浏览，加剧了“界面杂乱”的问题。（图7,特意截了一张只有5首歌的界面图，这个问题突显）我认为，歌单列表页面的首要任务就是传达清晰明朗的歌曲信息。辅助浏览的设计，可以让用户更好的浏览，但是不能喧宾夺主。在这个界面上（图6）,首字母分列的设计，并不是用户必须获取的信息，不应该将其与歌曲信息同分为“列”的级别，占用

10、同等空间。因此，先对界面U1布局进行改进：1统一分割线为IPX细线，缩小字母的字号，并将两者整合在一起，起到辅助展示即可；2 .优化调整小图标等U1元素，调整其大小和粗细，要以突显歌曲信息为主；3 .调整部分图标的位置，将原先位于歌曲前的【+】插播图标移至【】图标旁边左侧，MV图标则放至歌曲名称后面。改进理由：上文已提到，优化界面的U1元素，是为了减少对主信息的干扰。在这里，我主要说说几个功能图标位置调整的出发点。其中，【MV】图标并不是一个常规的图标，而它是根据歌曲的属性来出现的，将其紧随歌曲后面，用户可以更直观获知该歌曲是否存在MV资源；+1和【】图标都是对歌曲进行操作的功能类按钮，将其放

11、在同一个附近区域，方便用户记忆和操作，同时也利于整洁界面布局。清晰的信息展现，整洁有序的界面，是良好浏览体验的基础。我做个了个大致效果图，请参看图8。用户在浏览歌曲时，只需专注左侧区域的信息即可，再无诸多繁杂干扰。本地音乐单曲歌手专辑文件夹Beyonce-Ha1o()E3Beyond-海阔天空c陈奕迅-无人之境回纯音乐-柯南E)ABCDEFGH曹格-背叛回D邓紫棋-泡沫E3邓丽君我只在乎你JMN0P动力火车-当戴荃-悟空K筷子兄弟-我从来没去过纽约回E3田E3TUVWXYZ#改进界面的大致布局设计后，还有一个需要考虑的问题，就是原本固定的功能栏要怎么处理?在此，我想了三个方案（图9）：一、保留

12、原本上方固定功能栏的设计，因为对界面布局优化后，浏览体验已得到提升。二、将功能栏并入歌单，列于歌单首部。随着歌单滚动出当前可视页面外，相当于隐藏。三、在方案二的基础上，将【搜索】图标移出至导航栏，放在【】左侧或并入陈奕迅-无人之境纯音乐-柯南方案一：方案二:固定动IB栏的位,“捶IT时刻可见位于”列,往上S1动而对失格背叛邓紫棋泡沫邓国君我只在乎你动力火车当戴圣-悟空筷子兄弟我从来没去过纽约三个方案的关键是其中的【搜索】按钮怎么处理。方案三中为何将其移到导航栏,是基于让【搜索】功能始终可见的考虑，因为在此页面下，搜索是个不可忽略的需求。将放在【】左边，直观方便操作，但此时导航右侧存在三个图标，

13、拥挤之外也可能影响酷狗的整体设计风格，是个待定方案;若将【搜索】并入【】，会不会太过隐蔽？而方案一，保留原本固定位置的设计，【搜索】功能直观，但是会有损歌单的展示空间，不是很好。因此，我认为方案二相当妥当些。因为，在打开此页面时，歌单是处在列表首部位置的，而功能栏也是处在列首，用户是可以获知【搜索】按钮的存在的，即便随后滚动消失了;并且字母分割线和右侧小字母等辅助查找歌曲的设计也可以分担【搜索】的需求操作;重要一点，隐藏着功能栏有利于界面广阔整洁，提升浏览体验。所以，首选方案二，次选方案三。其实，【搜索】按钮怎样放置，还需基于用户研究去出发,若能有相关的用户需要调研数据,相信更容易在其中找到一

14、个平衡,去据需设计，能直观可见或隐藏在较深层级，我觉得都是可取的。总之能给用户提供更好的体验，就是好的设计。保持操作一致性一款音乐软件，提供【播放模式】选择的功能，必不可少。在酷狗里，这个功能主要存在其中两个地方：歌单页面、播放歌曲页面。这两个页面里有两种状态界面，即默认界面和“播放队歹界面，都提供【播放模式】选择的功能。但是，它们的操作方式却是不同的。这两种操作方式分别是：一、点击出现下拉悬浮菜单，选择对应模式，完成操作。该方式出现在默认界面。二、点击图标即切换模式，出现悬浮层提示对应的模式状态。该方式出现在“播放队列”界面里。（图10,为了对比，将两个状态界面整合在一起了，实际上不是同时出

15、现的。播放队列只有点击后才会出现，然后可以对【播放模式】操作。）采用点击出现下拉菜单,选取对应模式，完成操作采用点击图标切换状态，并出现悬浮层提示对应的操作状态通过图片可以看出，交互方式上的不同。尤其在“播放歌曲页面”中，当“播放队列”中的【播放模式】点击里边的【播放模式】图标，随即出现悬浮层提示操作状态，即点即切换。而退出“播放队列”后，点击默认界面下的【播放模式】图标，出现的却是和“播放队列”一样的悬浮菜单，然后进行下一步选择!虽然是同一个功能,但是无论从操作反馈还是操作步骤来看，显然都不符合用户的心里预期的。尽管说,这种小差别用户慢慢就可以适应。但是为何不将两个图标按钮的交互方式统一，保持一致性呢？