产品:虾米音乐
1.导航与层级标签的一体化设计
虾米音乐的导航设计模式采取了非标准化的IOS设计模式。 直接把我的音乐、推荐、发现等第一层级功能选项放在了导航栏。而以往在OS平台用于容纳第一层级菜单的底部标签栏被设计成了音乐播放入口的快捷操作栏。
优点:
层级位置清楚、醒目,为核心体验底部音乐操作栏腾出了空间。
缺点:
导航栏元素过多,显得拥挤并且产生了空间上割裂感,影响了用户的视觉体验。
日本AWA音乐app主页采用了虽然采用了类似的设计模式,但是并没有把发现,推荐等同一层功能入口全部放入导航栏而是采取了联播式导航的设计,并且把功能入口的标题放在了内容上。相比较虾米简单粗暴的导航设计,AWA的导航设计更加简洁、优雅。
2.音乐播放快捷操作栏
虾米音乐的底部音乐播放快捷操作栏放置在除了个人中心以外的任何界面之上,让用户在app内执行其他操作与音乐相关操作时,可以方便直观地观察到当前正在播放的音乐的相关状态(歌名、歌手和播放进度)和快捷地执行与音乐播放相关的基础操作(播放、暂停和下一首)以及通过轻触或上拉手势,轻松地切换到音乐播放的详细操作界面。
优点:符合任务兼容原则,降低用户处理任务的认知负荷。
在音乐app内,使用频率最高的是与音乐播放相关操作功能,尤其在体量较大的社交类音乐app里,用户期望能够随时随方便、便捷地使用音乐播放的相关功能。通过音乐播放快捷操作栏,用户不仅能够在任意界面对当前播放的音乐进行简单地操控,也可以通过轻触或上拉,切换到音乐播放的详细界面进行音乐播放的更多操作。这样的设计模式符合了认知心理学中的任务兼容原则,及任务的呈现方式(音乐播放的相关操作的入口位置)与用户正在进行或即将进行的任务类型(用户的渴望便捷地执行与音乐播放有关的操作)相一致时,用户解决问题的能力越高,认知负荷越少,用户的表现往往越好。
缺点:占据空间,功能效用有限。
底部空间被占用,挤压了其他同级别重要功能控件的放置空间。而且,活动视图控制器里也可以监视当前播放音乐的状态和进行播放、下一首等基础操作,与底部音乐快捷操作栏功能形成重叠。
3.搜索控件的交互
在虾米音乐搜索框输入关键字后可以得到部分歌曲、专辑、艺人等相关信息。进一步点击“查看更多结果”按钮或者键盘的确定按钮可以跳转到以歌曲、专辑、艺人和精选集为分类标签的搜索结果的详细页面。
而网易云音乐在搜索框输入关键字后,出现的是没有标签分类的关联词列表。
优点:提高了用户搜索目标信息的效率
当用户不记得自己想要搜索的歌曲、专辑等完整信息时,可以通过输入关键字,在搜索列表下快速查看与关键字相关程度较高的内容,提高了用户的搜索效率。如果用户没有得到预期的结果可以通过进一步操作跳转到搜索结果的详细页面进行查找,提高了解决用户查找目标歌曲这一问题的可能性。
缺点:界面设计不完善阻碍了设计初衷的实现。
在输入关键字得到部分歌曲、专辑和音乐人的相关信息时,同类别标签名称重复显现多次,避免标签名重复得过于频繁和让不同标签类别下的相关程度较高的条目能够一目了然,虾米的设计师使得同类别下最多显示条目为3条,例如win关键字下,出现的歌曲条目最多为3条。但是这样的设计模式阻碍了实现提高用户搜索效率的初衷。此外,在搜索结果的详细页面中,列表条目没有涉及到滑动操作的情况下,无法通过左右滑动来在歌曲、专辑、艺人和精选集各标签类别之间自由切换,这样的设计不符合用户的使用习惯降低了使用体验。
4.矩阵与列表排版相结合的设计模式
在虾米音乐的我的音乐界面可以发现矩阵排版和列表排版组合式的设计模式
优点:不但可以按照功能优先级灵活放置控件而且可以节约界面空间。
列表排版与矩阵排版的区别在列表形式所占据的空间更大可以显示更多的信息和放置更多的操作控件,而矩阵形式可以呈现更多的内容。
两种模式的结合可以让综合两者的优点。
缺点:违反一致性原则,并且过多的快捷操作会使同样功能控件出现多次,给用户造成困扰,增加了用户的认知负荷。
例如,我的音乐的内容界面,虾米音乐为了追求让用户更加方便快速地进行操作,本地音乐列表栏设有播放控件,但是底部音乐操作栏也设有播放按钮,加上精选集列表的播放控件,一个界面上最多出现了6个播放icon(精选集列表占满一屏的情况下)。虽然在播放按钮在功效上有些微不同(一个旨在播放本地音乐,另一个旨在播放当前音乐列表),但却拥有功能上的交集,即底部菜单栏的播放按钮也可以用于播放本地音乐列表。这样的设计让用户面临不必要的多项选择,增加了用户的认知负荷。
5.内容条目大面积显示
在虾米推荐列表下,一个精选集模块以几乎占据一屏三分之二的大小,其中图片和文字大约各占据二分之一,这样的大图与大面积留白的运用使得精选集模块更加有品质感,切合了虾米目标用户追求高品位音乐体验的战略需求。
优点:符合环境贴切原则,提高了用户的探索乐趣。
大图与空间留白的运用,增强了整体的视觉感受和品质感,符合虾米核心用户的审美风格。
缺点:有限空间内显示内容有限,降低了信息获取效率。