产品设计中的「惊喜感」与国内外音乐类产品差异 | 交互问答系列 2

问题背景

在音乐播放软件中，国内的 App 和国外的 App 在播放控件的「后退/上一首」操作上有比较显著的差异。在国内，绝大部分的产品点击「后退/上一首」按钮即返回歌单中的上一首歌曲，例如网易云音乐（下图一）；而在国外的产品中，点击「后退/上一首」按钮即从头播放当前歌曲，再点击一次才会回到上一首，例如 Apple Music, Spotify（下图二、三）。

问题一

是什么原因造成了该功能的设计差异？

问题分析

1.历史原因

从一些古早的图形界面中可以发现，设计师通常会把界面以模拟现实世界物品的方式设计出来，从而方便用户感知程序和界面想表达的操作，降低用户的学习成本。

而音乐、视频播放软件也是如此，媒体播放软件通过模拟了磁带播放器与光盘播放器的「上一首」，「快退」，「快进」，「下一首」来让用户对产品进行操作。这是媒体播放控件的开端。

而为什么国外音乐类产品「上一首」的按钮，点击了却是重新播放当前曲目呢？这个还得从磁带的设计谈起。当一个专辑被制作成磁带时，每首歌的播放起点都会被标记，暂且称其为锚点。这个锚点可以让我们的磁带播放器快速切换到上一个或者下一个定位歌曲位置，这样就完成了对磁带的切歌功能。所以当我们在播放当前曲目时，按下「上一首」，磁带会返回到当前曲目的锚点，即一首歌的播放起点，这说明了为什么按下「上一首」，却又是重新播放该曲目的原因。同时也说明了为什么国外音乐产品按下「上一首」，会回到歌曲开头然后重新播放了，这是由磁带设计的历史原因导致的。

所以我们通常需要快速按下两次「上一首」按钮，才会回到上一首歌曲。

经典的 Walkman：

2.界面演化

磁带播放器不但包括了「上一首」与「下一首」，也包含了「快进」和「快退」的功能。而在过去的实体设备中，使用「快进」和「快退」的功能（这里指的是按单位的跳播，而非倍速播放）都会出现杂音或者画面频闪，体验比较差。

而在今天，利用数字产品的进度条，我们已经能方便控制进度和快速调整歌曲到任意时间点了，所以「快进」和「快退」的功能也逐渐退出了历史的舞台。

但像是播客类产品，为了其特定的应用场景，增加了「快退 15 秒」或「快进 30 秒」等设计，都是为了让用户更方便的进行快进快退操作，这里就不展开讲解了。

核心是，歌曲的操作按键逐渐被简化。

就比如电饭煲或洗衣机这类产品，小时候用它们，按键非常复杂，通常真正用到的也就那几个常用的按键。而现在的很多这类产品，都已经被简化成几个按键。目的是「不要让用户思考」。

以至于，少数按键，覆盖了多数功能。但仅是几个按键的问题，也会有操作频率上的差异。

3.操作频率和场景

所以当所有复杂操作被合并成几个按键后，国外用户听歌时，要重听当前歌曲，除了通过进度条拖拽外，只需要点击「上一首」按钮即可；而国内用户需要点击「上一首」后，再点击「下一首」才能重听当前歌曲。

国外音乐产品保留了音乐设备的操作方式以匹配用户习惯，而国内音乐产品直接过滤了这个操作行为。

那么究竟哪个好呢？

其实，「上一首」和「下一首」在使用频率上是有明显差别的：「下一首」的操作频率远远大于「上一首」。各位回想下是不是如此。

我们甚至可以从各个产品的私人 FM 功能看出这点（产品鼓励用户发掘新歌的功能） —— 直接取消了「上一首」按钮，改用「爱心」替代。告诉用户如果喜欢该首歌曲就收藏，继续听之后的歌曲。这对平台本身来说也是好事。

以至于，虽然「上一首」和「下一首」是同层级按钮，但是成了两个完全不同优先级的操作。

于是，从「重播」的角度来说，国外产品的功能扩展性更强，「上一首」按钮被集合成多个结果，场景更细化；从「操作认知」的角度来说，国内产品的「上一首」更容易被理解。

因此，国外产品把一个「回放」功能和一个低频的操作「上一首」进行合并，就显得容易理解了。

4.细节拓展

一个小细节，Apple Music 与 Spotify 有个小差异，就是切换歌曲的按键不同。

如图。

Apple Music 的按键集成了三个功能：单击上一首回听当前歌曲；双击上一首回到上一首歌曲；长按上一首或下一首为快退或快进。而 Spotify 没有第三类操作。以至于两者在按钮形式上也存在一丝差异。

由此可以看出，场景的重要性。对 Spotify 这类产品来说，长按快进的效率过低，且用户真正去操作的几率也不会太高，所以舍弃了。而对 Apple Music 这类产品来说，保留用户的原始习惯，融合到新按钮中，也是一种措施。保留功能场景的完整性。

结论

至于国内音乐类产品为什么没有这样去处理，可能就是因为早期并没有这块意识，并直接做了上一首与下一首直接切换的设计形式。而且从文案角度理解，「上一首」确实就是上一首歌曲的意思。

比如，用户想重听一首歌，在这个场景上，肯定是在播放器已经切换到下一曲的时候才发现这首歌唱完了，这时候，国内产品只需要操作一次单击就可以了。当然，听一半就想重听的场景也是有的。

所以这两者没有好坏之说，只能说是习惯与一致性驱动的结果。大家都这样做，那我不这样做反而不好。以至于形成国内外的细节差异。

不过这当中有一个难点，就是，很难说他们各自坚持自己的设计形式，是因为用户习惯使然，还是因为「上一首」操作的点击数据在支撑着各自的结论。或者，根本没意识到？

不过从我的角度来说，我认为国外产品的文化影响因素和数据驱动设计的方法论是产品保留该设计的主要原因。

问题二

设计师怎么样才能在产品中为用户塑造「惊喜感」呢？

解答

你觉得，人和人交往的行为模式，能够被复刻到人和其他事物的交互过程中吗？

在《交互设计精髓》这本书里，有一个概念叫「产品礼仪」，说明了设计一款「聪明且体贴」的产品所需要的原则，比如关心喜好、预见需求、提供帮助等等。我们对这些产品「品质」的需要恰好验证了我们内在感性的期待，比如我们想要被尊重、被理解、被关心。而产品中所谓的惊喜设计或许可以说是产品在使用瞬间能够触达我们内心的真实需要，给予人性化反馈的一种短暂性愉悦，一个体验的峰值。

但有时候，我们总是过于执着地解决着一个又一个产品中出现的小问题，想要把产品打造得完美无缺，而我们以为的完美不过只是用户眼中的应当罢了。填补产品的小洞并不能很好地加深用户对产品的记忆和好感，就像我们对生活的记忆并不停留在渴了喝水，饿了吃饭一样。当我们回顾过去，难忘的总是那些与众不同的、突破生活脚本的时刻。即使只是一个小小的惊喜变量，都会在贫乏的对比中显示出它的力量。这就是惊喜的意义。

其实不止惊喜，我们的潜意识需求还有很多亟待满足，这些微妙的无意识情感虽然无形，但只要我们能够放大体验的触角就能够捕捉到。所以我刻意提出了惊喜设计，了解了大家惊喜的感知瞬间。从这些例子中，我们能够看到产品的「性格」，但更重要的，是看到我们想要的是什么？

情感化设计

以情感化设计为起点的案例，有时候能够填补用户的体验缺失感，比如下面这些案例。

趣味

谷歌浏览器「加载失败」页面可以玩游戏。

每日优鲜「部分通知」会有自己的专属音乐。

B 站「输入密码」时顶部的动画人物会从睁眼变成捂眼。

B 站「拖拽进度条」，图标会改变。

联结

网易云音乐评论区如果有音乐人发言，根据位置信息会显示「同城」标签。

网易云音乐移动端查看好友主页会显示已经「关注几天」。

乐趣歌曲播放页会自动「滚动弹幕」，伴随着音乐节奏，背景也会随之变化。

共鸣

网易云音乐直播中如果「收藏主播播放歌曲」，系统会自动提示我们去参与这首歌的故事讨论。

Moo 会在「引导页引用」相关名人说过的有意义的话。

亲切

支付宝「底部文案提示」我是有底线的。

高效操作

有的产品会在充值时推荐充值「金额」，其中包含能够与当前余额凑整的数字。

QQ 直接「移除消息标签的红点」可以清除列表中的所有红点；空间长按「转发」图标可直接一键转发；「长按评论」会自动弹出句子，可以选择进行快速评论；聊天界面「为收藏的表情包添加备注」，输入备注可快速呼出该表情包。

QQ 里「长按聊天列表」能够多窗口预览。

每日优鲜「下单备注」时可快捷选择几种常用标签，礼貌客气的表达省去了我们的语言组织时间，并且能让人自我感觉良好。

有些产品，会记录上一次登录的方式，在用户下次进来时提示。

百度网盘的文件列表右侧显示圆形选框，点击直接进入「编辑模式 」。

B 站观看视频时的「一键三连」。

应景设计 / 预测需求

淘宝商品详情页下拉会出现历史浏览的控件，方便用户快速「查看之前浏览过的商品」。

QQ 空间里，「长按评论」会跳出系统预设的一些回复；「长按转发」会立即转发到自己的 QQ 空间。

钉钉聊天界面左滑可以显示每条消息的具体「发送时间」。

虾米音乐把「手机横过来」，样式会变成磁带。

知乎回答的「发布时间」默认显示最后编辑时间，再点击一下会显示最初的发布时间。

微信 PC 端登录以后，手机消息可「设置静音」，以避免两边都收到提醒。

豆瓣改版以后「标记电影」时会推荐标记相关片单的电影。

微信 PC 端截图可自动「吸取颜色」。

韩剧 TV 看新剧超过 10 分钟，会自动为我们「加入追剧列表」。

支付宝好友页面上滑后会出现「找人转账」的悬浮按钮，方便快速选择好友转账；在好友对话界面的输入框输入数字会出现「给对方转账几元」的悬浮按钮；任意页面截图后界面右侧会出现「求助反馈」的按钮；系统进入多任务卡片管理界面时会自动「模糊页面」来保护用户的隐私。

呼吁性设计

B 站「音量调大后提示」高音量损伤听力，优酷后来也加了类似提示。是在音量进度条上通过颜色来提示音量对听力的伤害。

知乎里面搜索问题后滑动查看超两屏会出现「向知友提问」功能。

B 站视频播放页标签右边箭头图标配文「更多几个」，微信订阅号消息如果有隐藏内容，会用「余下几篇」表示。

微博浏览关注过人动态时，如果停留在一个卡片超过一定秒数会在底部出现「评论功能」。

防错设计

Keep 商城中「购物车图标会隐藏」，滑动的时候自动隐藏一半，停留的时候又会出现，防止用户在浏览的过程中误触图标进入购物车页面。

Keep 在户外跑步模式「记录数据」时，结束按钮需要长按才能生效，避免误触，若用户单击，还会提示正确的操作方式。

这些产品的功能点是用户心理感知的诉求延伸出来的，而塑造的原因就是给用户创造惊喜感。通过感官的享受刺激、打破脚本、帮助决策等设计方式为用户创造了惊喜的体验。

以至于，当要为自身产品设计这些「惊喜功能」时，前提必须是熟悉产品业务，与业务形成关联，才能设计出符合用户关于该产品感知的功能，触发用户的惊喜情绪。

当然，设计师是否有足够的敏感度和理性的自我意识，也是非常重要的一点。

以上就是本次交互问答系列的三个问题和解读，谢谢阅读：）