5个产品细节剖析，让你看看大厂是如何做设计的（四）

编者注：几乎每一个新手设计师，都会被要求多下载优秀的产品把玩一番。但如果你下载后不知道从哪里开始体验，也发现不了那些优秀的设计细节。那建议每天逛一次优设的「细节猎人」，每天都有新的产品细节上线 → https://www.uisdc.com/hunters

当然，你也可以不定期来看优设的产品案例分析长文。比如今天这篇：

解读MOO音乐的极简设计

由小良同学投稿，我们一起讨论并编辑完成，MOO音乐中的案例，场景如下：

今天为大家带来的是MOO音乐中播放页面的设计解析。MOO音乐这个产品不知道大家有没有使用过，它是腾讯在18年末推出的一款音乐app，主要面向喜欢流行音乐与小众音乐的潮流年轻人。与主流音乐app不同，他没有过多复杂的功能模块，旨在打造沉浸感的听歌体验。我们今天就通过其播放页面的设计来看看：

进入MOO音乐的播放页面，最直观的感受就是简洁。对比QQ音乐，MOO音乐在此页面中的各种元素与文字都非常少，控件数量也是屈指可数。接下来就让我们一起看看它是如何处理播放页面的各个功能来实现极简设计的。

△ 图为MOO音乐与QQ音乐的播放页面对比

首先看MOO音乐对进度条这个功能的设计，在主流音乐App中，用户需要拖动进度条的小圆点或点击进度条相应位置来改变播放进度，而在MOO音乐中，用户可直接在页面下方约四分之一的区域进行拖动来改变播放进度。这个设计相比传统播放进度条，大大提高了热区面积；热区的位置也位于用户单手持机时大拇指很容易触达的区域，用户拖动时无需盯着页面控件进行操作。但它也存在一个问题，用户在正常播放状态下无法看到播放进度，我想也有可能是设计师为了打造沉浸感有意而为之的。

△ 图为MOO音乐进度条操作热区展示

在暂停/播放功能的设计上，不同于其他主流App需要通过点击按钮来暂停和播放，在MOO音乐中用户可以单击屏幕任意位置（除其他按钮热区）来暂停或播放。这一操作多见于视频/短视频应用中，符合绝大部分用户对于播放/暂停的操作习惯。

△ 图为 单击屏幕任意位置进行暂停

在切换上一首/下一首的功能上，不同于其他主流App需要通过点击按钮来切换上一首或下一首歌曲，在MOO音乐中用户可以通过在屏幕任意位置上划或下划来切换。这一操作也很符合用户在浏览短视频时养成的操作习惯。

△ 图为上划下划切换歌曲

以上几个的功能的设计都是通过用符合用户操作习惯的手势交互代替用户对页面控件的操作，从而达到页面的布局的极简状态。

这种设计的优点十分显著，不仅帮用户在操作的过程中省去了视线聚焦的时间和精力，而且大大增加的热区面积降低了用户的操作成本。拖动改变播放进度、单击暂停或播放、上下划动切换歌曲的手势操作符合用户在以往使用其他产品时养成的操作习惯。极简的页面布局也增加了用户听歌的沉浸感。

但这个设计也存在一些缺点，首先为了打造极简的页面与沉浸感，MOO音乐将评论功能放在了二级页面，这必然会带来社交属性的降低，再加上它很有限的的用户规模与小众的音乐类型，用户使用时的感受到孤独感就尤为明显。其次，由于它与主流音乐App的操作方式差异很大，用户的认知成本高，新用户很有可能因为不愿学习或不适应这种交互方式也而无法留存。最后，虽然手势操作的热区面积大、操作灵活，但也增大用户误操作的可能性。

结语：MOO音乐刚刚面世的时候小火了一段时间，当时有很多用户被它优秀的设计吸引，它也曾收获了很多赞誉。但是随着用户的新鲜感逐渐减少，MOO音乐一直处于用户流失的状态，我能查到最近的数据只有艾瑞研究院显示的MOO音乐今年三月的月活只有两万左右。但我觉得就算是新鲜感过去了，还是会有一部分人用户会坚守在这里。因为是它陪伴着他们的独处时光，陪伴着他们度过了一个又一个个充满感性的夜晚。

解读石墨文档的非主流设计

由康乃馨同学投稿，石墨文档中的一个案例场景如下：进入后，石墨文档的「默认页」定位到了第二个标签——桌面。这与常规的做法不太一样。

在常规APP中，进入后通常默认定位在第一个标签下。同时第一个标签也往往是APP最重要的页面，包含了产品中最常用的功能或是最主推的业务。无论是文档笔记类APP，还是国民级应用APP几乎都是这样。例如下面的这些：

有道云笔记——最新（默认）、文件夹、新增、云笔、我的

腾讯文档——首页（默认）、新增、文档

支付宝——首页（默认）、理财、口碑、朋友、我的

微信——微信（默认）、通讯录、发现、我

比较之下，石墨文档显得有些「非主流」。——通知、桌面（默认）、新增、最近、收藏。对于这样的特殊设计，我有两种猜想：

猜想1:

石墨文档主打协作概念，团队成员的行为、文档的变化是需要强传达给用户的「通知」；所以石墨文档把通知放在第一个标签中，是为了凸显产品的协作功能。而桌面标签是用户操作和查找文件的主要入口。更多的用户进入APP是希望能够快速触达目标。出于此需求石墨文档才把默认标签定位到了「桌面」，起到了缩短用户操作路径的作用。

即第一个标签很重要，第二个标签更常用，因此采用了这样的布局与默认定位。达到「突出功能」与「用户目的」平衡。

猜想2：

第二、第三、第四标签属于高频操作，且页面内容非常重要。用户在使用过程中可能频繁切换。那么设计者有意将这3者位置靠近，且位于tab栏的中央位置。让用户在使用过程中减少手指的移动，聚焦于页面中央的3个入口。

发散来看，这种「定位不在第一个标签」的设计，还在其他产品中出现过吗？答案是肯定的。

例如keep和微信读书：

微信读书的标签定位逻辑是在「上一次退出时的标签」，这是由于读书类app的户的使用具有一定的「连续性」。再次打开app时，希望能够快速继续上次的任务。因而微信读书App默认标签定位到上次使用的位置，意在提高用户使用效率。

而keep——首页、计划、运动（默认）、商城、我的的设计逻辑与石墨文档的比较相似，首页承载的是App的主打/商业功能，即运动社交，用户可在首页看到关注、推荐、热门的运动达人动态，也可以自己上传动态，形成良好的社区氛围。

而默认的tab「运动」，更符合用户的使用场景——在运动时快速打开App开始记录。是用户高频操作的入口。

在作者看来，这种设计其实是商业目标和体验目标的互相妥协，产品放为了拓展新业务、或是更好的给投资人讲故事所以把一些内容放到了最重要的第一个标签，但是又不希望影响一些「需求纯粹」的用户的使用体验，所以默认定位还是在核心功能所在页面。

这里作者对石墨文档的这种设计还有一个猜想是；由于石墨文档目标的功能十分单一（也可以叫纯粹），所以其实是没有什么东西可放的。才给了通知内容这么高的地位，否则如果只是为了提高通知强度的话其实还是有不少其他做法的。当石墨文档的功能和业务越来越多，这种设计会有比较大的概率被改掉。

QQ音乐，设计师多想一步，用户就可以少走一步

QQ音乐中的一个案例场景如下：用户在QQ音乐中查看推荐视频时，视频播放5秒后，页面中除视频外的其他元素就会「变暗」，如下图：

其他元素变暗后用户的注意力就可以集中在视频本身，从体验目标上来说可以让用户更舒适的观看视频，通过减少信噪的方式避免干扰。从业务目标上来说不被干扰就意味着用户观看视频的时间可能会得到延长，提高了「用户使用时间」这一关键性的数据。

其实类似的设计甚至在十年前就已经有了，例如我们在使用优酷网站观看视频时，鼠标在屏幕中间点击一下就可以隐藏底部的播放进度条，再后来这种设计都被优化成了根据时间判断是否隐藏的方式。本质上就是通过设计师对用户使用场景的思考得到了优化点，设计师多想一步，用户就可以少走一步（俺觉得这句话就值一个转发）。

百度地图咋我没搜索就显示结果了？

百度地图中的一个案例场景如下：某天作者下班的时候随手打开了百度地图，刚想搜索一下最近的公交还有多久能到我这一站，结果还没搜索就出现了下面的图片：

我想要的搜索结果居然已经显示在屏幕上了！！！这时候作为一个用户当然是非常惊喜的，看完信息就随后回到了手机桌面，但是作为一个设计师还可以想到更多的东西。

为什么它能知道我要搜索的内容

• 第一点前提是我已经在这个产品中完善了自己的信息，包括居住地点、公司地点等等。
• 第二项基础是作者每天的运动轨迹比较固定，基本是家里和公司来回往返的路线。
• 第三点条件是当时作者打开软件的时间是「下班时间范围」

所以百度地图就可以根据作者当时的定位、当时的时间，判断出了这一用户打开软件的目的是什么，再根据已经存在的居住地点信息计算出了公交车到站时间这项结果，直接展示给了用户。

这种做法和我们昨天说的案例十分相似，都是「设计师多想一步，用户就可以少走一步」式的设计，通过已有条件判断用户的目的，再根据已有数据计算出用户需要的结果，帮助用户节省了操作成本和时间。

对于用户来说，这种设计则不仅仅是节省操作成本的问题，更重要的在于「惊喜感」和「超预期」，这两种感觉能够带来的用户体验提升是十分巨大的，当用户情绪波动比较大的时候也更容易给用户留下更深刻的产品印象，在日后和其他产品的竞争时无形就有了优势。

丁香医生APP带给用户的惊喜

丁香医生中的一个案例背景如下：

用户可以在丁香医生APP中，使用在线问诊功能去询问一些不着急到医院进行诊断的病症。在进行问诊之前，用户需要填写一些信息，例如症状和之前在医院检查时留下的病例，诊断图片等等。

如果用户在填写这些信息的页面点击了返回按钮。那么再次进入到填写信息页面时，就会出现如下图所示的提示：

这种设计方案作者认为是经历了一些比较复杂的判断才最终采用的方案。原因如下：当我们为了防止用户由于误操作而返回并丢失信息的时候。我们通常采用的办法是用户点击返回按钮时给一个阻断性的提示。例如下面这张图这样：

作者自己在之前的公司做名片产品时也遇到过类似的场景。为了防止用户由于误操作或其他原因中断制作名片的流程。在用户点击返回时，我们都会对用户进行挽留。这种方案最大的问题是用户发生误操作的情况只是极少数行为。但是我们每一次都会在用户点击返回时给出这个提示，让用户中断流程的操作变得更加复杂，付出了更多成本，这和用户的目的是不相符的。也是影响用户体验的。（这里要强调的是影响体验并不意味着业务数据目标变差）

除了这两种方案之外，还有一种作者曾经看到过的方案是这样：用户返回时没有提示，当用户再次进入时，直接保留用户上次已经填写的全部内容。如下图：

这种做法同样存在问题。如果用户并不是想继续上一次未完成的流程。那么用户需要手动删除所有已经填写的内容，我们可以看到这样用户需要付出的操作成本是极高的。需要删除文字，删除图片等等，并且有很多用户的行为是：使用「返回 + 再次进入」这样的操作来清空页面中已经填写的内容。（这种用户行为来源于去年做的一次真实用户访谈）

思考了以上两种设计方案之后，再回来看丁香医生中的方案就十分优秀了，当用户希望中断问诊流程时，一次点击就可以完成目的。当用户是误操作返回时也可以恢复已填写内容，当用户希望进行其他问诊/清空内容时，也只增加了一次点击。

往期大厂的设计案例分析：

欢迎关注作者的微信公众号：「设计的威严」