酷狗APP的交互设计进行分析和改良设计.docx
《酷狗APP的交互设计进行分析和改良设计.docx》由会员分享,可在线阅读,更多相关《酷狗APP的交互设计进行分析和改良设计.docx(18页珍藏版)》请在冰豆网上搜索。
![酷狗APP的交互设计进行分析和改良设计.docx](https://file1.bdocx.com/fileroot1/2023-7/10/0f997166-ddde-4d05-a9ed-79a18655d140/0f997166-ddde-4d05-a9ed-79a18655d1401.gif)
酷狗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
优化改善的方向。