推荐阅读》《产品体验细节02篇》

01

喜马拉雅

当用户第二次打开APP的时候，如果检测到用户上次离开APP的时候有未播放完的内容，就会显示“继续播放”小气泡。

MAKA设计

用户打开APP时，当系统检测到用户上次离开的时候有未完成的作品，那么会弹出提示，询问用户是否继续完成上次的作品。

设计思考

这里考虑了用户的使用场景，当用户上次离开app时有“未完成的任务”，那么当他再次进入APP时，大概率会想继续完成上次的任务，所以在这里提供快捷入口，减少用户重复操作步骤。

02

QQ表情面板

第一次点开表情面板时，该面板占屏幕大约1/3面积。用户单次滑动距离足够大时，该面板就会上移，占屏幕2/3面积。屏幕可以容纳更多的表情包。（这里微微滑动时，不会触发该变化）

美图秀秀

美图秀秀选择字体面板，也有类似的功能。用户往上滑动想查看更多字体的时候，字体选择面板往上自动加高，一屏幕内就有更多的空间来展示更多的字体。

设计思考

当用户首次点开面板选择时，优先展示常用表情。当用户滑动距离大时，说明用户在当前页面没找到自己想要的，想多滑动一些距离快速翻阅查找，此时面板上移加大，提供给用户更多的选择。但当用户滑动距离较小时，微滑动时，说明用户正小心仔细的浏览表情，很可能是用户脑中已经对自己要找的那个表情包有了大致的定位，正在进一步确认位置，如果此时面板上移，可能反而会造成定位迷失，所以在这里微滑动并不会触发面板的改变。

03

得物 卖豪车

得物APP首页第三个选项卡是汽车分类，点进去发现都是高端豪车，难道真的会有人会在app里下单买豪车？

设计思考

在APP里卖豪车实属少见，得物为什么要在app里卖豪车，通过和朋友的讨论，总结出了以下几个原因

1、汽车行业赚钱，有机会   

2、高端汽车平台目前在行业内属于空白，得物有机会   

3、得物通过中高端鞋，聚合了一批中高端消费群体，这里面应该是有一部分用户和豪车消费群体匹配

4、即使豪车没有产生交易，那也会吸引一部分对车感兴趣的用户长期留在得物关注豪车相关信息，到时会有相关品牌方在平台做品牌营销，也有广告费

5、很有可能虎扑有计划大力涉足汽车行业，先在得物上进行用户兴趣度测试，后续再慢慢做独立的中高端汽车平台，毕竟几百万大生意平台需要提供的服务是几千客单的得物承接不了的 

如果大家对得物卖豪车这事有别的想法，欢迎留言讨论～

04

微信读书划线功能

微信读书里面可以对内容进行划线，然后发表看法。也可以看到别人的划线，点击之后可以查阅别人对这段划线内容发表的看法。

当划线内容在下部的时候，评论内容在上面出现，倒着排列滑动查看。当划线内容在上部的时候，评论内容在下面出现，正常顺序往上滑动查看

设计思考

划线功能模拟了用户在现实中看书的场景，用户看到重要的内容，或者有感而发的内容就会划线，然后在旁边记录写下感想。在这里用户不仅可以记录自己的想法，还可以看到别的用户对划线内容的想法，还可以进行点赞或者回复操作。把社交元素巧妙的融入了进去，让用户看书的时候也不会感到“孤单”。

05

叮咚买菜找相似

首页下方信息流中，第一个会有提示，提示用户长按找相似，长按某商品图片后会显示找相似按钮，点击该按钮后进入页面显示该商品的相似商品。

设计思考

这里特意多一步，长按后显示找相似按钮再点击进入而不是直接长按进入，一来是让用户对自己的操作有预知（操作前可预知），二来是防止用户误操作。

06

36氪 即将开播模块

36氪直播页面的即将开播模块，当用户滑动到最后一个卡片时，露出“全部预告”提示文字，当该卡片露出足够多的一定距离时，自动进入“直播预告”页面，可以查看更多的直播预告，这个页面和点击“更多”按钮进入的页面相同。同时在这个交互操作过程中，手机还会有一个短震动反馈。

设计思考

当用户滑动到最后一个卡片的时候，如果有进一步滑动的操作，说明用户想继续滑动查看更多的直播预告，在这个场景下，此时直接把“更多直播”的页面打开，省去用户还要点击“更多”按钮的操作，提升了产品的使用效率和用户体验。

07

支付宝搜索轮播词

搜索框中的轮播关键词，一般为三个。当点击搜索框后，三个轮播关键词会展示在搜索发现页面最上方。

设计思考

原因考虑到是这样的一个场景，当用户正好瞄到搜索框内的轮播关键词且有兴趣的时候，正准备点击搜索，轮播词正好更换成了下一个，那么刚刚感兴趣的那个就找不到了。为了避免这种情况，把三个轮播词展示在搜索框点开后的页面最上方，不仅解决了这个问题，还提高了轮播词的权重。这里轮播词的展现规则，是根据之前搜索过的关键词的相关内容推荐的，偶尔也会展示热搜榜中的词语。

08

豆瓣

豆瓣截图后自动弹出一个对话框，里面是自动生成的包含更多当前页面信息，重新排版并且更适合传播的一张图片。用户可以直接点击分享或者保存图片。

设计思考

当用户在该页面截图的时候，说明是想把当前页面中的信息观点发送给好友进行分享讨论。所以在这个时候弹出这样一个分享弹窗，既满足了用户在当前场景下的需求，又能实现帮助产品传播裂变的商业目标。

生成的分享图和截图的区别

分享图凸显了话题标题，去除了引言的信息。引入了2个话题观点，且观点的文字内容变少了，展示更多的图片。

原因分析

1、图片比文字更具有吸引力，激起被分享者的兴趣，加入到话题讨论中。

2、观点只用两行显示，也许是留给被分享者的悬念，如果想要查看完整的观点信息，那就扫码查看，吸引用户进入APP，最终达到分享传播的效果。

09

京东到家首页

用户滑动过程中界面内容的实时变化。首页第一屏的金刚区图标（图1）消失的时候，转换成在顶部出现(图2)。当商品类型切换选项卡片顶到金刚区图标导航时，把金刚区图标推出屏幕外(图3)，顶部变成商品类型切换选项卡片(图4)。

设计思考

在滑动的过程中，页面顶部的导航栏信息会随着页面的内容的变化而变化。首页第一屏的时候主要展现节日营销类banner、新人礼包等重要活动入口。在浏览一些瓷片区推荐、附近商家信息时，金刚区图标在顶部起到了导航入口的作用。当浏览到下面信息流推荐时，顶部导航变成选项卡，可以切换筛选信息流的内容。页面中的入口、导航信息等会根据页面当前的信息变化，在满足用户沉浸式浏览的条件下，根据信息内容提供相应的导航形式，方便用户进行操作，灵活性高。

同时在底部标签栏中，第一个首页图标选中状态变成了一个按钮，点击后，用户进入附近商家页面。许多APP在这个位置会放置回到顶部的的按钮，点击后页面回到最顶端。而京东到家在这里使用了“附近商家”按钮，点击后进入附近商家页面。

原因分析

京东到家主要业务是作为连接线下店铺和用户的媒介，将线下店铺整合到平台，同时为双方提供包括物流（达达）在内的各种便利服务，从而获取中间利益。所以“附近商家”功能是京东到家产品的“核心特色功能”，具有非常高的权重，所以在这么重要的位置放这个按钮。京东到家并没有效仿别的产品在这里放置顶按钮，而是根据自身产品的特点，灵活的运用了这个位置，这种思路值得学习。

10

小红书“别人的”主页

当还没关注此人时，关注按钮是整个页面最显眼的，该按钮右边是发消息按钮。当点击关注之后，关注按钮变成发消息按钮，而原来的“发消息按钮”变成了“取消关注”按钮。相当于这两个按钮进行了功能交换。同时在下面弹出“关注她的人也关注了”窗口，这些用户下面的“关注按钮”变成了页面中最显眼的。

设计思考

从用户体验的角度来说，这样的设计其实是很不合理的，正常逻辑应该是，点击关注按钮后，该按钮变成了“取消关注”按钮，而发消息按钮保持不变。现在这样的设计，当用户操作完成后，会突然陷入迷失状态，因为两个按钮的功能在用户操作后发生了交换，这样的因果关系在逻辑上是矛盾的。这里以牺牲用户体验为代价来满足产品的商业目标，提高产品的关注率和活跃度。当用户还没关注这个人的时候，以引导其关注作为主要目标。当用户关注之后，主要引导用户发消息来提高产品的活跃度，“阻止”他取消关注。可谓是颇具“心机”的设计。

很多时候，并不是所有设计都能完美的同时满足商业目标和用户体验目标。有时候我们可能为了达到产品的商业目标会牺牲一部分体验目标，而在产品设计的过程中如何适当的平衡这两个目标，也是需要深入思考的。

每个产品都有其特定的业务和场景，思考分析的点并不一定正确，具体问题还是要具体分析，但是这里可以很好的锻炼自己的思维能力。希望可以坚持记录下去。