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

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

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

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

测试版本：

酷狗7.8.7测试系统：

安卓测试手机：

魅族MX3

酷狗早期作为一款PC端的音乐播放器，积累了广泛的用户基础。

这对于其移动

端的APP,用户是一个先天优势，单从豌豆荚这个平台的数据来看，同类APP

的下载量，酷狗稳居第一。

对比下载量较高的几款竞品（QQ音乐、网易云音乐、

天天动听），酷狗的产品路线显然不仅是做一个单纯的音乐交流社区，酷狗通过

APP,以用户基础厚实的音乐社区带动旗下另外两个平台一“直播社区”、“唱K

社区”，企图打造一个多维的音乐平台。

“一APP多平台”的设计，固然有其公司的业务诉求和战略目标，但是从用户的

角度来看，捆绑多余的功能板块可能会影响部分用户的使用体验，毕竟部分的用

户需求仅仅是纯粹的音乐播放。

酷狗APP显然不是一个纯粹的音乐播放器了，

在我看来，这是一把“双刃剑”，为另外两个平台拓展用户的同时，也会损失部分

追求纯粹播放体验的用户。

今天借此，与诸位探讨交流一下酷狗APP的设计和

产品体验。

多平台整合在一个APP,产品架构显得臃肿，在所难免了。

上图（图1）为酷狗简

略的大体层级架构图，从图中可以看出，架构横向三个板块并列，并具有一定

的纵深，部分内容需要经过5个层级才能到达最终页面。

怎样从最底层的页面回

到一级导航，快速切换到其他平台去，是个问题。

针对这个情况，酷狗的解决方

案就是在右侧的抽屉菜单里（图4）,提供一个“返回首页”的按钮，可以一键快速

切换到一级导航页。

这个设计，给用户操作带来便捷，还是挺不错的设计的。

以

“乐库为例”（图2）。

二级菜单采用卡片式平铺在页面内（图3）,以“听”的二级页面为例，不规则的卡

片排布显得有些杂乱，且卡片板块也没有功能优先的设计。

在一般的使用场景,

最常使用的功能就是【本地音乐】、【搜索】、【乐库】，如将【本地音乐】相

关的板块以宫格式布局，而【收音机】那一栏可以再进行架构归纳和整合，而底

部的【广告】和【建议】则完全可以归纳在菜单栏里，或整合在其他低层级的页

面去。

化繁就简，突出常需功能，让“听”音乐变得更加纯粹，界面更友好。

Q谭am员

心员中心

♦手势交互比点击交互更有效率

在使用过程中，发现虽然“听看唱”三个并列位于顶部的TAB式菜单导航，但是它

们并不支持手势切换，仅能点击切换。

在“听”这个页面上（图3）,当我习惯性的

左滑切换菜单时，出现的却是抽屉菜单（图4）。

然而仔细观察抽屉菜单里的功能,

并不是强需求的功能点，除了“返回首页”。

但是此时的页面已经处在一级导航的

首页状态，“返回首页”也不是一个强需求。

那为什么始终要将抽屉菜单放在这么

优先的级别呢，通过便捷的手势交互就能调出，而导航菜单却只能通过点击来

切换?

这个是让我有点不解的地方，也是我觉得可以优化的地方。

在提出我的看法前，依然以“听”的板块和任务流为例，先大致说明下该板块下有

关“切换”的交互行为。

1,“听看唱”菜单导航，仅能点击切换

2.首页状态下，点击图标或左滑出现抽屉菜单

3.各子页面下，点击图标或左滑出现抽屉菜单;点击图标或右滑返回上一页;

首先，子页面（图6即为子页面类）卜.的手势交互是要保留的。

左滑出抽屉菜单，

“返回首页”可以快速回到首页导航;右滑则返回上一层页面，“从哪儿来回到哪儿

去”，符合用户习惯和心里预期。

两种切换方案，让用户的操作有了更多选择和

便捷性。

因此，需要优化的就是首页状态下导航和抽屉菜单的交互设计。

在移动端，一般需要“切换”的情况下，手势交互比点击交互的操作效率更高。

参

考下图图示（图5）,无论男性还是女性，其大拇指的操作区域均难触及到手机屏

幕的顶部，尤其现在屏幕5寸以上的手机是时下主流。

在这种情况下，要想单手

操作，精准点击屏幕上方的按钮来进行菜单切换，是一件很费功夫的事情，操作

效率很低。

酷狗APP中的“听看唱”位于顶部的菜单，仅支持点击切换，显然是不便用户操

作的。

改进方案一整合原来的交互设计，“听看唱”支持点击切换，并增加左右

滑动切换菜单的交互行为。

同时首页状态下左滑调出菜单的交互保留，但其交互

级别是位于“听看唱”之后。

即首页左滑时，依次切换顺序为:

“听”，“看唱”.

抽屉菜单;右滑时则从抽屉菜单反之依次切换。

这样的交互调整，结合子页面的

左右滑动交互，就有了一个比较一致性的手势交互行为。

不至于在首页状态滑

动时，始终出现一个需求较弱的抽屉菜单，让人感觉莫名其妙。

♦杂乱的歌单界面

当进入“歌曲列表”这个子页面时（图6）,给人第一感观还是有点杂乱的，浏览体

验比较一般。

UI设计是其中一个因素，比如图标线条粗大，模块视觉区别较低

等。

这里主要是讨论一下，其布局方面。

单曲，

歌手

专辑

文件夹

EQ多选

陈奕迅•稳稳的幸福

为陈奕迅•无人之境

MV

A

B

F

纯音乐-Bridgeovertroubledwater

司纯音乐-柯南

电影原声・那女孩对我说《想结婚的

女子》

田董运昌-风和日丽

■

花开花败

浮尘工队n

c®oo；g®一

歌手

专辑

文件夹

多选

□冯建宇、王青-今夏

0KerenAnn-JardinD'hiver

田林一峰-红河村

田王菲•旋木

—14NonBlondes-What'sUp-1992重

制版

共5首歌曲

今夏

冯建宇、王青□

由于遵循'子页面下，左滑菜单右滑返回”的设计，【菜单】的图标始终占据了顶

部导航栏最右侧的位置。

那样，此页面的相关功能按钮的布局设计就受到了影

响。

在上图（图6）,可以看到在TAB的分类菜单下，还有一列功能的菜单栏，（下

文统称功能栏），分布【播放模式】、【搜索】、【多选】的功能按钮。

这个功

能栏和TAB菜单视为一个模块，始终固定位于歌曲列表的最上层的。

首先，该页面的歌单列表提供了以首字母分列的辅助设计（图6红箭头）。

由于导

航栏、TAB标签栏、功能栏三者固定在上方，已经压榨了一定的歌单展示空间。

而首字母分列只是一个辅助浏览的设计，采用大字母和粗蓝线来分割，并占用将

近一列的空间。

这样设计，让原本受损的歌单展示空间显得更加拥挤了。

再者，

每个歌曲名称间的分割线较粗颜色较深，小图标线条较粗，干扰浏览，加剧了“界

面杂乱”的问题。

（图7,特意截了一张只有5首歌的界面图，这个问题突显）

我认为，歌单列表页面的首要任务就是传达清晰明朗的歌曲信息。

辅助浏览的设

计，可以让用户更好的浏览，但是不能喧宾夺主。

在这个界面上（图6）,首字母

分列的设计，并不是用户必须获取的信息，不应该将其与歌曲信息同分为“列”的

级别，占用同等空间。

因此，先对界面UI布局进行改进：

1.统一分割线为1px细线，缩小字母的字号，并将两者整合在一起，起到辅助展

示即可；

2.优化调整小图标等UI元素，调整其大小和粗细，要以突显歌曲信息为主；

3.调整部分图标的位置，将原先位于歌曲前的【+】插播图标移至】图标旁

边左侧，

[MV]图标则放至歌曲名称后面。

改进理由:

上文已提到，优化界面的UI元素，是为了减少对主信息的干扰。

在这里，我主

要说说几个功能图标位置调整的出发点。

其中，【MV】图标并不是一个常规的

图标，而它是根据歌曲的属性来出现的，将其紧随歌曲后面，用户可以更直观获

知该歌曲是否存在MV资源；

【十】和【…】图标都是对歌曲进行操作的功能类按钮，将其放在同一个附近区

域，方便用户记忆和操作，同时也利于整洁界面布局。

清晰的信息展现，整洁有序的界面，是良好浏览体验的基础。

我做个了个大致效

果图，请参看图8。

用户在浏览歌曲时，只需专注左侧区域的信息即可，再无诸

多繁杂干扰。

<:

本地音乐…三

II►!

=

纯音乐-柯南

改进界面的大致布局设计后，还有一个需要考虑的问题，就是原本固定的功能栏

要怎么处理？

在此，我想了三个方案（图9）：

一、保留原本上方固定功能栏的设计，因为对界面布局优化后，浏览体验已得到

提升。

二、将功能栏并入歌单，列于歌单首部。

随着歌单滚动出当前可视页面外，相当

于隐藏。

三、在方案二的基础上，将【搜索】图标移出至导航栏，放在【…】左侧或并入

方案三:

方案二4•上，第“帽泰”移封身院曜

<本地音乐q…三

6.；毒瞰|6所三

南格•背叛回

邓紫梅-泡沫

邓8B召-我只在乎你

动力火车・当

威荃•悟空

筷子兄弟-我从来没去过纽约

三个方案的关键是其中的【搜索】按钮怎么处理。

方案三中为何将其移到导航栏,

是基于让【搜索】功能始终可见的考虑，因为在此页面下，搜索是个不可忽略的

需求。

将放在【…】左边，直观方便操作，但此时导航右侧存在三个图标，拥挤

之外也可能影响酷狗的整体设计风格，是个待定方案;若将【搜索】并入【…】,

会不会太过隐蔽?

而方案一，保留原本固定位置的设计，【搜索】功能直观，但

是会有损歌单的展示空间，不是很好。

因此，我认为方案二相当妥当些。

因为，

在打开此页面时，歌单是处在列表首部位置的，而功能栏也是处在列首，用户

是可以获知【搜索】按钮的存在的，即便随后滚动消失了;并且字母分割线和右

侧小字母等辅助查找歌曲的设计也可以分担【搜索】的需求操作;重要一点，隐

藏着功能栏有利于界面广阔整洁，提升浏览体验。

所以，首选方案二，次选方案三。

其实，【搜索】按钮怎样放置，还需基于用户

研究去出发，若能有相关的用户需要调研数据，相信更容易在其中找到一个平衡,

去据需设计，能直观可见或隐藏在较深层级，我觉得都是可取的。

总之能给用户

提供更好的体验，就是好的设计。

♦保持操作一致性

一款音乐软件，提供【播放模式】选择的功能，必不可少。

在酷狗里，这个功能

主要存在其中两个地方：

歌单页面、播放歌曲页面。

这两个页面里有两种状态界

面，即默认界面和“播放队列”界面，都提供【播放模式】选择的功能。

但是，它

们的操作方式却是不同的。

这两种操作方式分别是：

一、点击出现下拉悬浮菜单，选择对应模式，完成操作。

该方式出现在默认界面。

二、点击图标即切换模式，出现悬浮层提示对应的模式状态。

该方式出现在“播

放队列”

界面里Q

（图10,为了对比，将两个状态界面整合在一起了，实际上不是同时出现的。

播

放队列只有点击后才会出现，然后可以对【播放模式】操作。

）

:

采用点击出现下拉菜单，选取对应模式，完成操作

采用点击图标切换状态，并出现悬浮层提示对应的操作状态

通过图片可以看出，交互方式上的不同。

尤其在“播放歌曲页面”中，当“播放队列”

中的【播放模式】点击里边的【播放模式】图标，随即出现悬浮层提示操作状

态，即点即切换。

而退出“播放队列”后，点击默认界而下的【播放模式】图标，

出现的却是和“播放队列”一样的悬浮菜单，然后进行下一步选择!

虽然是同一个

功能，但是无论从操作反馈还是操作步骤来看，显然都不符合用户的心里预期的。

尽管说，这种小差别用户慢慢就可以适应。

但是为何不将两个图标按钮的交互方

式统一，保持一致性呢？

保持产品交互的一致性，符合用户的心里预期的操作，更便于学习和使用。

酷狗APP的架构庞大稍显臃肿的情况下，有必要让子页面尽可能显得简洁和轻

巧。

同一个功能却存在两种交互方式，只会显得更复杂。

因此，需将【播放模式】

的交互方式统一起来，在此之前先看下两种交互方式的情况：

顺序播放

随机播放

横式固定曦京排列

完成操作:

收起菜单:

两种设计各有优劣。

第一种，采用点击出现下拉菜单的方式，用户只需两步操作

即可完成模式的切换，操作精确直观且更容易掌控。

但结合酷狗的界面，“播放队

列”是和下拉菜单类似的弹出悬浮层，若在此上面再出现下拉菜单悬浮层，体验

比较糟糕。

就如同图10,我硬将两种悬浮层PS拼在一起，界面显得繁琐混乱,

容易让用户迷茫当前哪个浮层是可以控制的，影响用户的操作焦点。

因此，这种

交互方式放在“播放队列”里，有一定冲突的。

而第二种交互方式，相对而言缺点则有：

不能直观操作，用户一时无法获知下一

个的操作结果;有固定的排列顺序，用户不能随意控制，必须逐次点击逐个切换

到自己想要的模式。

好在模式不多，切换操作成本的不算高，还可以接受。

这种方式，操作反馈和呈

现较轻，不会强干扰用户，相对更容易保持界面的一致性。

那两种交互方式如何取舍?

我倾向采用第二种，原因有三：

1.放在哪个界面都可以比较好的融合，比第一种方式适用性强

2.不会给界面造成杂乱，构造轻巧简洁的界面，改善APP笨重繁杂的感观

3.许多类似APP都采用此方式，有一定的用户习惯基础

结语

在使用过程中，该版本的个别页面偶尔还会出现小卡顿的情况。

作为一个融合多

平台的APP,在大框架的限制下，如何让产品显得更轻巧，我认为是酷狗APP

优化改善的方向。