13 min read

Vol 36 Twitter的新广告样式、Apple Music、Spotify、网易云音乐桌面端交互分析

Vol 36 Twitter的新广告样式、Apple Music、Spotify、网易云音乐桌面端交互分析
from Apple Music

这些产品有新的迭代:

· Twitter

Twitter在上周发布了三种新的正在测试的信息流广告样式,整体还是创意比较足,有点朋友圈广告的味道了:

  1. 互动文本广告:品牌可以选择最多高亮3处文案中的文字,达到跳转和吸引注意力的效果;
  2. 产品展示广告:用户可以在广告中以3D形式浏览商品;
  3. 合辑广告:品牌可以一次展示多个商品,并有系列主图。

· Instagram

Instagram正在内测与几项与好友互动相关的feature,包括

  1. 在浏览feed时收到私聊消息,支持在feed中快捷回复;
  2. 长按post的分享按钮,将会展示亲密还有,快捷分享;
  3. 在消息页,顶部增加横栏展示在线的好友。

· 微信

微信在上周更新了8.0.20版本,是小版本更新,没有大功能。只要的内容是:

  1. 修复消息通知延迟问题:路径是:我 - 设置 - 帮助与反馈 - 点击右上角“修复”图标;
  2. 同时微信的语音电话铃声,新增了历史记录,可查看对方使用过的铃声;
  3. 初次之外,还包括扫一扫页面的UI更新、微信状态的显示优化等。

· TikTok

  1. TikTok将上线浏览历史,可查看7天内浏览的视频记录;
  2. TikTok将在搜索结果页上线广告:如下右图,第一个视频有Sponsored标签即是推广视频。

· 其他更新

  1. 淘宝正在内测支持微信支付,但流程是需要保存付款二维码,在微信内扫码支付,过程比较绕。不确定是阳奉阴违还是接口限制。
  2. Youtube TV开始内测支持5.1立体环绕声,以及移动端的画中画功能。
  3. Messenger开始支持聊天内的快捷命令行,首先支持的是@所有人和/silent,即将支持的还有/pay /gif //shrug 和 /tableflip等。
  4. WhatsApp在本周更新了许多小细节,包括:新emoji、媒体控件UI等。

值得关注的新产品:

· 识区

字节推出的新阅读工具。基础模式时从一些订阅源(基本是今日头条的作者)聚合重要资讯,以主题的方式推送给你。适合有信息「洁癖」的用户。

AppSo有一篇关于它的介绍,供参考。

‎识区
‎识区,定义你的阅读宇宙。

· 态棒

阿里推出的潮玩电商社区App,logo依然是动物园组合。与一般电商产品不同的是,更强调社区氛围,除了购物还能和主理人发起对话。可惜的是目前还需要邀请码注册。

‎态棒 - 有态度的中国创造
‎态棒是一群年轻人为更多中国年轻人打造的生活方式APP。(后面没几句话,往下看!)我们希望有这么一个产品,能买点有特色的好东西,能让年轻人更有自己的态度,能让购物不止于购物,也可以和拽拽的主理人聊聊天,在氛围超好的社区认识酷朋友,去触摸一些想象之外的自己。 — 好看能打!有态度的中国创造好货 —态棒专业选品团队为你精选【中国创造】潮流好物。这里汇集了非常多中国新锐设计师品牌、有独特风格的主理人店、也为你发现了很多小众设计品牌,每款设计背后都有主理人独特的态度传递。 — 愉悦购物!更极简可信的购物体验 —咱态棒就是追求一个极简高效,少点套路,多点真诚,你不需要是一个数学家,也不需要东奔…

· 有致

物品记录与整理应用。我经常有这样的需求,吹风机忘了清洁、猫的饮水盘忘了换水等周期工作。这个应用可能可以帮到我,与市面上其他不一样的是,能支持从物品的分享链接导入信息,方便很多。

‎有致 - 高效的物品记录与管理应用
‎【主要功能】: - 录入: - 将自己心爱的物品手动录入 - 复制(淘宝&京东)分享链接,自动解析并导入,可以再次修改 - 支持物品的日常维护时间线录入 - 提醒: - 可以设置物品到期前的提醒 - 可以设置具体的提醒时间 - 可以自定义提醒内容 - 到期的物品应用内标记,支持一键已读,防止遗忘 - 详情显示 - 录入物品,支持多图录入 - 包含名称、日期、存放处等录入 - 支持物品的日常维护时间线展示

Apple Music、Spotify、网易云音乐桌面端交互分析

Apple Music的前身是iTunes,UI上也延续了iTunes的布局。这个播放进度条放在头部的软件令我一直无法适从,特别当我也是手机端音乐软件的重度用户(经常播放进度条是在底部)。

在转移到Spotify之前我使用了很长一段时间的网易云音乐,音乐播放器对于我来说是不需要集中精力,即用即走的“后台工具”。一个好的音乐产品能够让我在享受的同时彻底忘记它的存在。

上周看见了Jake Dragash分析Apple Music和Spotify交互的文章,学习到了许多,观察了一下网易云音乐的做法,在翻译的基础上扩展了一下文章内容。来一起看看这三个音乐软件比较重要的几个交互流程设计。

搜索

Apple Music、网易云音乐:搜索关键词会出现 搜索建议弹层,点击搜索建议或回车前往结果页。

Spotify:搜索的同时搜索结果页出现在下方,无需点击或回车,没有输出框搜索建议。

冷门乐队weezer在Apple music没有搜索建议,你需要全部拼写对才能跳转到乐队页(不过在我反复输入过几次以后,搜索weez弹出了搜索建议)。但在Spotify拼写weez或故意拼错为wezr的时候都能模糊搜索到正确乐队。云音乐的搜索结果鉴于两者之前。当然搜索算法是个非常复杂的东西,但只是从交互体验来看Apple显然不算好。

Spotify、Apple Music、网易云音乐

再看看三者的搜索结果页,组成都是:最佳匹配结果+其它相关结果。在信息呈现上,Apple和Spotify显得更加清晰丰富,云音乐的Tab折叠让一些信息失去了被快速看见的可能。

Spotify、Apple Music
网易云音乐

导航

不管什么产品,导航的好用与否都是非常关键的。好的产品不会让你停下来思考你在哪儿,并且你总是能撤销与回退。在这一点Apple music电脑端导航令人困惑,因为它提供的不是全局导航,而是基于Tab的。

而Apple在人机交互指南里提到了它们的三种导航:

from HIG

也就是说,在Apple music里你在广播tab里探索了一番,又前往了浏览Tab点击了几个页面。当你点击回退按钮想回到十秒前看过的那个播客页面,你会发现你停在了浏览页,回退按钮不见了!

Apple Music,from Jake Dragash

这就是Flag navigation的特点,毫无疑问这种导航在App端工作得很好,因为在有限的屏幕里,Tab的存在感很强,我们习惯了频繁通过Tab来切换页面。但在桌面端却不是的,人们更加习惯视线停留在占地更大的空间里,通过按钮来前进后退,而很少去关心左边的Tab,这也是浏览器驯化的结果。

Spotify的全局导航控制显得更加流畅,你能回退到任何页面,不管它在哪个Tab,与浏览器的交互保持了一致。

Spotify,from Jake Dragash

网易云音乐采用的也是全局导航的方式,然而我发现在视频详情页面出现了双导航的情况。并且点击结果都是回退到了视频Tab的首页,不知道是不是设计疏忽。

网易云音乐

反馈

在桌面端,我们通过鼠标点击前往任何一个想去的地方。

当我们看着Apple Music里的音乐控制条上显示的歌曲信息,心想:好的,我想去看看这个歌手还有哪些歌曲的时候。你会发现歌手是无法点击的。当鼠标Hover上去时候,右边会有个小小的更多图标。点击图标,选择前往当前歌曲,好了恭喜,你终于能看见他的其它歌曲了。

Apple Music,from Jake Dragash

Apple在设计统一上做的一向很好,在歌曲列表页也保持了同样不可点击的交互。(发现作者3月6号发布的文章,图片里歌曲列表歌手和专辑都是不可点击的,但今天我看又是能够点击了,不知道是不是Apple从用户角度重新设计过了)

Apple Music ,from Jake Dragash
Apple Music最新截图,鼠标悬停在艺人名称上

而在Spotify和网易云音乐你能轻易地通过点击音乐控制器里的歌手或者歌曲名前往到详情页。除了文字高亮以外,鼠标移动到可以点击的文字上方会变成一个手的形状。

这里我觉得Spotify下划线的设计非常人性化,因为文字的Hover效果如果只是用颜色高亮来显示,一些纤细的小字显示效果很不好。对于有视力障碍的人来说将更加吃力,而下划线代表可点已经是Web世界里的通识,清晰易懂。虽然这里损失了一些美观,但对于用户量如此之大的产品来说是很划算的。(Apple Music后来也使用了下划线)

这里我看了一下三个产品音乐播放列表里更多图标点击以后展开的选项(同样也是右键列表出现的选项)有哪些

Spotify、Apple Music、网易云音乐

三个产品都支持双击列表进行音乐播放的操作,Apple Music和Spotify在鼠标悬停的时候会在封面图或列表头部显示播放的图标。而网易云没有,不过在右键列表里增加了播放这一选项,这个增加我觉得是一个很好的补充。

总结

除掉一些交互问题,Apple Music依旧是一款非常优秀的音乐产品。有品位的音乐推荐,无损音质。与Spotify相比,它在一个更大的框架和设计系统的约束下诞生,但是正如音乐列表的点击交互改进,Apple Music也在变成一款更好用的产品。

而国内音乐产品也负担着一些超出听音乐本身的需求,比如视频、社交。每个部分的交互不太统一(比如视频详情页的双导航),但产品越是庞大,设计师们心里越应该留心交互,以免伤害了最核心的功能体验。

因为篇幅问题没有对比QQ音乐,其实还能从很多角度去对比这些音乐产品。能从一些不同之处体验到产品设计的微妙与精巧,是一个不错的学习方式。

感谢你的时间~


友情链接

  • 地心引力:关注效率工具与生活方式的周刊,一起脱离重力束缚。
  • 在诗外:Mostly关于如何成为更好的人类,关注自我成长、文化和科技。汝果欲学诗,功夫在诗外。
  • Newlearnerの自留地:不定期推送 IT 相关资讯,欢迎关注!