交互设计分析——虾米音乐1

产品:虾米音乐

1.导航与层级标签的一体化设计

虾米音乐的导航设计模式采取了非标准化的IOS设计模式。 直接把我的音乐、推荐、发现等第一层级功能选项放在了导航栏。而以往在OS平台用于容纳第一层级菜单的底部标签栏被设计成了音乐播放入口的快捷操作栏。


虾米音乐首页导航

优点:

层级位置清楚、醒目,为核心体验底部音乐操作栏腾出了空间。

缺点:

导航栏元素过多,显得拥挤并且产生了空间上割裂感,影响了用户的视觉体验。

日本AWA音乐app主页采用了虽然采用了类似的设计模式,但是并没有把发现,推荐等同一层功能入口全部放入导航栏而是采取了联播式导航的设计,并且把功能入口的标题放在了内容上。相比较虾米简单粗暴的导航设计,AWA的导航设计更加简洁、优雅。


AWA音乐仅仅把轮播点放在导航上,标签以标题的形式放在内容页上。


2.音乐播放快捷操作栏

虾米音乐的底部音乐播放快捷操作栏放置在除了个人中心以外的任何界面之上,让用户在app内执行其他操作与音乐相关操作时,可以方便直观地观察到当前正在播放的音乐的相关状态(歌名、歌手和播放进度)和快捷地执行与音乐播放相关的基础操作(播放、暂停和下一首)以及通过轻触或上拉手势,轻松地切换到音乐播放的详细操作界面。




优点:符合任务兼容原则,降低用户处理任务的认知负荷。

在音乐app内,使用频率最高的是与音乐播放相关操作功能,尤其在体量较大的社交类音乐app里,用户期望能够随时随方便、便捷地使用音乐播放的相关功能。通过音乐播放快捷操作栏,用户不仅能够在任意界面对当前播放的音乐进行简单地操控,也可以通过轻触或上拉,切换到音乐播放的详细界面进行音乐播放的更多操作。这样的设计模式符合了认知心理学中的任务兼容原则,及任务的呈现方式(音乐播放的相关操作的入口位置)与用户正在进行或即将进行的任务类型(用户的渴望便捷地执行与音乐播放有关的操作)相一致时,用户解决问题的能力越高,认知负荷越少,用户的表现往往越好。

缺点:占据空间,功能效用有限。

底部空间被占用,挤压了其他同级别重要功能控件的放置空间。而且,活动视图控制器里也可以监视当前播放音乐的状态和进行播放、下一首等基础操作,与底部音乐快捷操作栏功能形成重叠。

3.搜索控件的交互

在虾米音乐搜索框输入关键字后可以得到部分歌曲、专辑、艺人等相关信息。进一步点击“查看更多结果”按钮或者键盘的确定按钮可以跳转到以歌曲、专辑、艺人和精选集为分类标签的搜索结果的详细页面。


输入字条,按标签分类的形式出现相关程度较高的推荐条目。


进一步点击,按标签分类出现搜索结果的更多信息。

而网易云音乐在搜索框输入关键字后,出现的是没有标签分类的关联词列表。

优点:提高了用户搜索目标信息的效率

当用户不记得自己想要搜索的歌曲、专辑等完整信息时,可以通过输入关键字,在搜索列表下快速查看与关键字相关程度较高的内容,提高了用户的搜索效率。如果用户没有得到预期的结果可以通过进一步操作跳转到搜索结果的详细页面进行查找,提高了解决用户查找目标歌曲这一问题的可能性。

缺点:界面设计不完善阻碍了设计初衷的实现。

在输入关键字得到部分歌曲、专辑和音乐人的相关信息时,同类别标签名称重复显现多次,避免标签名重复得过于频繁和让不同标签类别下的相关程度较高的条目能够一目了然,虾米的设计师使得同类别下最多显示条目为3条,例如win关键字下,出现的歌曲条目最多为3条。但是这样的设计模式阻碍了实现提高用户搜索效率的初衷。此外,在搜索结果的详细页面中,列表条目没有涉及到滑动操作的情况下,无法通过左右滑动来在歌曲、专辑、艺人和精选集各标签类别之间自由切换,这样的设计不符合用户的使用习惯降低了使用体验。

4.矩阵与列表排版相结合的设计模式

在虾米音乐的我的音乐界面可以发现矩阵排版和列表排版组合式的设计模式





优点:不但可以按照功能优先级灵活放置控件而且可以节约界面空间。

列表排版与矩阵排版的区别在列表形式所占据的空间更大可以显示更多的信息和放置更多的操作控件,而矩阵形式可以呈现更多的内容。

两种模式的结合可以让综合两者的优点。

缺点:违反一致性原则,并且过多的快捷操作会使同样功能控件出现多次,给用户造成困扰,增加了用户的认知负荷。

例如,我的音乐的内容界面,虾米音乐为了追求让用户更加方便快速地进行操作,本地音乐列表栏设有播放控件,但是底部音乐操作栏也设有播放按钮,加上精选集列表的播放控件,一个界面上最多出现了6个播放icon(精选集列表占满一屏的情况下)。虽然在播放按钮在功效上有些微不同(一个旨在播放本地音乐,另一个旨在播放当前音乐列表),但却拥有功能上的交集,即底部菜单栏的播放按钮也可以用于播放本地音乐列表。这样的设计让用户面临不必要的多项选择,增加了用户的认知负荷。

5.内容条目大面积显示

在虾米推荐列表下,一个精选集模块以几乎占据一屏三分之二的大小,其中图片和文字大约各占据二分之一,这样的大图与大面积留白的运用使得精选集模块更加有品质感,切合了虾米目标用户追求高品位音乐体验的战略需求。

优点:符合环境贴切原则,提高了用户的探索乐趣。

大图与空间留白的运用,增强了整体的视觉感受和品质感,符合虾米核心用户的审美风格。

缺点:有限空间内显示内容有限,降低了信息获取效率。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容