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

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

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

瑞幸咖啡APP的一处改版设计

场景如下：用户在瑞幸咖啡app下单时，选择好商品并进入提交订单页面，此时可以在页面中选择要使用的优惠券，并且在进入这个页面时，已经为用户自动选择了优惠力度最大的一张券，减少了用户的操作成本，如下图：

说到这里其实也只是常规操作，这种设计已经很普遍了，但是让作者感觉惊喜的其实是优惠券右侧的一个「取消使用」的小按钮，我们把上面的图片放大一下如下：

在之前的旧版本中，是没有这个「取消使用」按钮的，可能有的朋友会说，默认选择一张优惠券才是比较好的设计方案啊，你怎么会因为这个功能惊喜？

其实要理解他的优秀之处还是要从实际的使用场景来说，作者曾经遇到过一种这样的情况，其中有几个条件如下：

• 我的账户中存在20张5月份购买的28元代金券
• 我在6月下单想买一杯24元的咖啡时，系统默认帮我选择了这张28元的代金券
• 代金券和优惠券是两个概念，不可同时使用
• 我的账户中还存在一张5折优惠券

当时账户中的20张代金券是之前官方搞活动的时候买的，所以我经常出现的一种操作行为顺序是：先点击代金券一栏，进入代金券页面，点击「不使用代金券」按钮，最后返回提交订单页面，再去选择要使用的5折优惠券。整个行为路径被拉的很长，操作繁琐还浪费时间。用户的这种行为对于支付成功的比例是会有影响，所以后期瑞幸在改版时加上了上面的「取消使用」按钮。

由于作者的代金券已经在瑞幸承认财务造假时全部用掉了，所以上方图片使用的是「不使用优惠券」截图。而不是「不使用代金券」截图。其交互逻辑都是一样的。

当时作者每天早上都会买一杯24元的咖啡，所以发现这个改版后真的十分惊喜，也感叹瑞幸设计团队的敏锐嗅觉，实在是优秀。在思考一种设计方案的产出逻辑时，还是要结合不同的使用场景才能理解。

解读百度地图中的路线图设计

场景如下：用户在查看路线时，可以点击页面底部的截图按钮，将路线图片保存到相册，保存到相册的图片会显示一张长图，显示全部展开的导航信息。

以下是对这个设计案例的解读：

这个功能已经上线了很长时间了，在之前看到这个截图功能时，我的想法是「多余」，因为我们已经到了导航信息页面，即使是网络信号不好也是可以继续查看和展开折叠信息的，为什么还需要"截图"呢？或者为什么不直接使用手机的截图功能呢？最近由于到新公司入职，租房和公司的距离特别远，在使用百度地图导航的时候又注意到了这个功能，有了一些合理的解释。

1. 为什么不直接使用手机的截图功能？

手机截屏功能只能截取一屏，容易导致截图后的信息不全。并且在上面这种换乘信息比较复杂的时候甚至需要3-4屏才能容纳完整。还有一点原因是导航信息页面很多信息是折叠起来的，即使是用户手机中有截长图软件，也需要一个一个点击展开才能开始截图，大大增加了用户的点击次数，效率很慢。

2. 已经到了导航页面，为什么还需要这个功能?

因为存在多种用户场景，作者在之前的思维只考虑到了自己使用导航功能的场景，除此之外还存在帮他人查询、长期记录导航信息等场景。

真实场景1：某天我家里的老人在北京旅游，对于老人来说很大可能性就用一个微信，手机中不会安装很多其他APP，所以此时我需要自己查询好路线后发给他。（帮他人查询场景）

真实场景2：去年五一假期的时候，我和女朋友计划去杭州玩几天，她又是一个非常有计划的性格，所以提前做了旅行攻略，这个文档中就用到了类似的导航信息图。（长期记录导航信息场景）

可能还存在一些作者没有经历过和想到的场景。欢迎大家补充。

我们在做设计方案的时候，或是在评估一个功能是否有必要去做的时候，往往需要具备「场景化思维」，这样可以帮助我们摆脱「自我思维」的局限性。从更多维度来进行评估。

还有一直停留在导航页面，手机的耗电会比较快，截图保存在本地可以省电。

我认为豆瓣中的这种设计不太好

场景如下：用户在使用豆瓣APP查看电影详情时，可以看到页面中有演员表一栏，每屏可以显示4个演员信息，用户将演员表向左滑就可以查看到更多的演员，到达一定限度后，屏幕右侧就会出现一个状态叫做「更多」。

此时继续向左滑的，「更多」就会变成「释放查看」，如图：

出现此状态后如果用户停止滑动并松开手指。那么就会打开一个新页面，显示全部演员的列表或介绍。如下图：

这是一种比较新奇的交互方式，灵感来源可能是一些内容型产品中下拉刷新的场景。但是这种设计放在豆瓣里面是否合适呢，我有一些不一样的想法。

首先，下拉刷新比左滑刷新从人体工程学上来说更加的自然。例如，当我们用右手拿着手机用拇指向下滑动时，由于人的拇指关节的构造就决定了上下滑动比左右滑动要更加轻松省力。

第二点则是用户心智的问题。类似这种查看更多的交互方式一般会采用点击的形式，用户也已经习惯了这种形式。点击只需要点击一次，而滑动则需要控制拇指移动的范围和速度。对于如何取消打开下一个页面、如何终止操作都不是很明确。

这里说的用户心智，简单来说就是用户根据过往的经验，对可能会造成的结果的预测。我们都知道在设计师设计方案时，一定不能和用户已有的操作是不同的，而是要顺应用户的操作习惯，这样可以减少用户认知成本和操作出错率。

豆瓣中的这个设计在我看来是一种创新，是一次很勇敢的尝试。可能这个设计在未来的某一天手势操作的应用规模和范围更广，受众更多时，会是一种优秀的设计方案，但是在今天用户的心智还处于探索期，所以对于用户来说，认知成本会比较高。所以我认为在现阶段，这不是一种非常优秀的设计方案。

淘宝和京东的中类似的隐藏功能

场景如下：搜索功能是90%的产品中都不可缺少的功能，按照匹配度对搜索结果进行排序和展示也都是很常见的做法了，但是作者最近在京东和淘宝两个产品中发现了一点关于搜索功能的创新设计，在此分享给大家。

1. 京东：搜索直达

在京东中，如果用户在搜索框中输入的关键词与预先设计好的文字相同则不会显示搜索结果，而是直接进入一个新的页面，这个页面一般是某业务功能的首页。例如搜索「互联网医院」则是如下图的结果：

这种做法一般是流量规模很大的产品为了给新业务更多入口而设计的，在一些用户规模数亿的产品中，可能存在数百个子业务，这么多业务自然不可能每个都给与常驻显示的入口，之前的做法一般是采用独立的APP才承载，但是这就带来了推广新APP极高的成本问题，所以京东在这里采用了搜索直达的方式来给与更多业务隐藏式的入口，希望能够用集团中流量最大的产品来为新业务带来更多流量和用户。

2. 淘宝：定向结果

在淘宝中也有类似的设计，例如用户搜索「象牙」就会触发一个保护大象保护野生动物的页面，如下图：

淘宝这里很明显就不是为了给新业务导流了，而是发挥巨型平台的社会责任，体现了一些公益性的内容，但是如果只从产品设计来看的话，也不失为一种明智的选择，因为搜索象牙时完全可以显示一些「人工象牙」类的产品工艺品什么的，但这种搜索结果第一肯定是「卖假货」，第二这点销售额对淘宝来说也不值一提，所以还不如做些公益活动来博得用户好感度。其简介价值不见得比卖货赚钱要低。

除了淘宝和京东之外，很多产品也有类似的设计，例如在网易云音乐中搜索「自杀」就会出现非常暖心的内容，在百度中搜索「自杀」第一条结果也是心理咨询的热线电话。（是不是广告我就不知道了，没试过）

总结这些设计其实都是在满足一些「极少数场景」「特定场景」，类似的功能虽然暖心但也要注意产品生命阶段再决定做不做，或是使用卡诺模型来对需求进行排序。

QQ音乐和知乎中相同的「生成图片」设计

场景如下：当用户在QQ音乐的播放音乐页面中截图时，系统会为用户生成一张精美的海报，供用户分享或保存，如下图：

当用户在知乎的文章详情页面中选中一段文字时，可以选择「金句分享功能」之后系统会为用户生成一张精美的海报，供用户保存或分享，如下图：

在这两个产品中都出现了「生成图片」的设计，以下是我对这种设计的思考

用户进行截图时有几种可能的场景

• 场景1：想截图将信息保存起来
• 场景2：想把内容发送给朋友
• 场景3：分享到朋友圈

对于场景1来说，虽然用户截图体现了内容质量较高，但设计者其实并不希望用户把内容截图保存起来，而是更希望用户把内容收藏起来。截图保存和收藏的区别就在于用户之后是否会经常回到本产品中，也就是决定了用户留存率。那么怎么避免用户截图保存呢？难道直接禁用吗？这显然不可以。因为这就违反了用户操作的目的，会在更大程度上伤害用户体验。其结果可能是带来了更多的流失。所以此处设计方案的要求应该是：满足用户保存信息的目的并且避免用户不再回来。

具体设计方案的思路可能是这样的：

首先我要满足用户的目的，即保存内容，但是我可以只让用户保存一部分内容例如标题，再给用户一个能够找到正文的链接，即二维码，这样就满足了用户目的，并且也让用户需要内容的时候能够再回到产品中来，提高了留存率。

对于场景2来说，生成图片后同时给出了微信、QQ、微博等分享渠道，用户可以一键把图片分享过去，而不是返回桌面-找到微信-选择好友-点击加号-点击图片-选择图片-点击发送这样复杂的操作，减少了用户的操作步骤，提高了效率。并且在用户将图片分享出去之后的流程里，看到该图片的用户也可以通过二维码进入到知乎产品中，这就为产品带来了更多用户和活跃度，也达到了设计者的最想实现的目标。

场景3和场景2基本类似，就不再多说废话。在这三种场景中，一张样式更加精美的图片都能够起到增强用户分享动力的作用，毕竟颜值即正义～

上期回顾：

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