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

作为设计师，我们时时刻刻都在和各种应用打交道，在体验的过程中，其实里面有很多小揪揪需要深挖和思考，所以千万不能小瞧它。很多产品细节的背后都是为了更多新用户的加入、浏览、留存、付费/转化等，以最终达到对用户服务/体验的提升、内容生产者的利益以及企业自身的商业化。

「微信」文本输入：智能匹配表情

1. 产品体验：

在微信聊天的文本框输入文字时，系统会根据文字的含义在已添加的表情专辑里智能筛选与文字含义相近的表情包，点击即可直接发送。

2. 设计思考：

微信作为最主流的社交软件，算是人人必备了，下至刚会走路的孩子、上至80岁的老人，而微信最大的作用就是聊天（花样多的就不提了）。相信有很多用户在微信的工具栏都添加了很多的表情包专辑，平时可以用来聊天、斗图、简单的文字替代等，但因添加太多，很多时候无法在短时间找到与想发送的文字含义相近的表情包。

微信聊天打字时，系统会自动匹配与文字含义相近的表情包，这个功能虽然出来已久，但存在的意义绝不是表面上看到的“方便”这点作用。比如：

• 有时为了不想打字，可以直接回个表情包，简单明了；
• 衍生跟文字相近的含义，表情包可以用来增强语气，对文字进行补充说明；
• 相对于冷冰冰没有温度的文字相比，表情包更贴近用户的心理模型，产生趣味性、同理心等作用。
• 难以启齿或者羞于开口的文字，可以通过表情包的方式表达，以玩味的方式避免造成交流过程的不愉快
• ......

表情包正是有了这些作用，方能衬托出“打字时自动匹配表情”的重要性，在使用过程中操作更加便捷，尤其是添加太多的表情专辑，再也不用花时间去苦苦寻找合适表情包了。自动匹配这一功能给用户带来愉悦的体验，增强使用频率及用户粘性。

「波洞」顶部导航：下划线的巧妙过渡

1. 产品体验：

在体验波洞APP时，所有带顶部导航栏的页面，在切换导航时，标题的下划线以声波的异形样式平滑过渡切换。

2. 设计思考：

一个APP的顶部标签式导航，其作用仅次于底部标签栏的导航，类似于一个主要页面的模块分类，当类型较多又不是太多时候，采用顶部标签导航是最合适的办法，不仅容易吸引用户去操作，还可以通过左右滑动的方式作全视化的展示，传达更多信息。

波洞APP也采用了这种大众化的顶部标签带下划线的导航样式，但最引人注目的是切换时过渡的样式。在切换导航时，标题的下划线以声波的异形样式平滑过渡切换，就像一条蠕动的虫子，通过这种样式做到差异化，略带趣味性增加用户使用时的操作频率。通过声波样式的品牌元素作为下划线的过渡，可以让用户在操作的过程中产生更深刻的印象，其记住的就是品牌的本身。

「躺平」品牌元素：融入用户心理模型

1. 产品体验：

躺平APP从桌面启动图标开始，到启动页，再到各页面的扁平形象、空状态、系统头像等，都完美融合了用户的心理模型及品牌元素，让用户印象深刻。

2. 设计思考：

大部分APP应用都融入了品牌基因，但基本上都是为了宣传推广、让用户记住或表现自己而强行注水，往往忽略了产品本身给用户带来的体验以及产生的商业价值。就像一个人有着华丽的外表而失去了灵魂，最终产生的结果跟企业的预期相差甚远。

躺平APP在品牌元素融入这一块，做的算是出类拔萃的了，桌面图标、启动页、系统元素及空页面，都是根据用户的心理模以元素视觉化的形式展示给用户，更贴近真实环境，用图形提前表达出心理感受，让用户产生心理变化以增加情绪记忆。比如：让用户熟悉的单词、短语和概念进行图形化，而不是系统导向的术语，通过图形描述来遵循现实世界的约定，使信息以自然且合乎逻辑的顺序出现，给用户更加直观的感受，活泼有趣且让用户过目不忘。

「京东」新增地址：访问剪切板并带入地址信息

1. 产品体验：

在京东APP新建收货人信息时，进入该页面，系统自动访问剪切板，如果有复制过跟地址类型相似的信息，会通过弹窗提示确认信息内容，点击立即粘贴，系统自动分离信息类型并录入至对应的表单输入框，非常实用。

2. 设计思考：

在我们使用的众多电商APP里面，其中有大部分都录入过地址信息，除了给自己买商品之外，有时还可能帮别人买或者买来送人。关、于收货地址，最常见的方式就是别人通过QQ或微信把收货地址发给我们，然后我们自己在APP里新增地址，但针对这么多种类的信息，很难做到一次性记住，就需要在添加地址的APP与收信息的APP来回切换，最终完成地址的录入，其中有部分设备较为老旧，在多个应用切换时，还会出现应用自动结束进程或者闪退的现象，一言难尽。

京东APP在添加用户收货地址时，就免去了这个苦恼，只需要把地址信息复制，进入新建收货人页面，系统会自动访问剪切板并通过弹出显示已复制的信息内容，粘贴即可自动区分信息类型，自动录入到对应的表单输入框，如果有误修改即可，让新增地址变的更加简单，大幅度的提升了操作效率，节约时间成本。

「淘宝」查看物流：地图运输轨迹带来心理安慰

1. 产品体验：

在淘宝待收货的订单里，查看物流时，将物流的文字区域下拉，即可看到地图上车辆的运输轨迹信息。

2. 设计思考：

我们在电商应用里买到心仪的商品之后，最关心的应该就是物流信息了。从下单开始，时不时就会去看上一遍，有很多用户并不是因为急用，而是想快速体验收到商品之后的心理满足感。但往往事与愿违，当我们看了十几遍之后，心里会更加的焦虑。

在淘宝APP查看订单物流时，下滑页面将文字信息拖到底部，即可看到地图上物流车辆的运动轨迹，比起苍白无力的文字信息相比，会有一种商品离自己越来越近的真实感，带给用户一种心理上的安慰。另外地图轨迹的信息更新较为延后，是因为商品到达一个站点，工作人员需要通过手动录入信息变更状态后，地图轨迹才会更新。因快递公司经常都是大批量的操作，等很多快件到了之后一起更新，所以先前到的快件需要很久之后才能看到地图上的更新轨迹，虽然相比真实信息较为延后，但很有可能会降低用户的时间预期而带来意外惊喜。说到意外惊喜，可能有人不理解或者不认同，下面我举个例子：

我们在某电商平台购物，商家说2天就能收到商品，但过了3天才收到，这时候就会不淡定了，差评、抱怨、投诉满天飞；但如果商家说4天才能收到商品，我们可能去别的店看或者随便抱怨几句就下单了，同样是过了3天就收到商品，这时心情一定是激动的，服务好、物流快就成了当时心情的代名词，这个就是意外惊喜。同样的道理，淘宝物流地图上的轨迹信息相对延后，很可能地图上显示快递还在隔壁城市，但下一分钟就收到派件电话，说已经到楼下了，这时候的你可能不激动吗？

「腾讯地图」导航车标：超趣味的主题切换

1. 产品体验：

使用腾讯地图导航时，点击车标即可选择自己喜欢的主题，下载使用后，地图上原来的车标就会变成自己喜欢的形象，滑稽有趣。

2. 设计思考：

几乎每个年轻用户的手机里都装有地图应用，无论是出门自驾、骑行、步行或者地点查询，都会打开地图应用。常规的地图功能都可以满足用户的需求，但有哪些比较好的细节可以增加用户的粘性呢？腾讯地图相比某德地图，虽然用户体量小了很多，但通过创新的设计加上原有各渠道的推广，依然有大量的用户使用。

腾讯地图APP通过趣味化的方式在导航车标上加入了各种主题，通过下载自己喜欢的主题切换后，地图上原来的车标就会变成自己喜欢的形象。众所周知，腾讯游戏是整个行业中不可逾越的一座大山，在众多主题里，「和平精英」「王者荣耀」的形象就是用户最熟悉的。用户可以选择游戏人物角色、摩托车、卡丁车等作为地图导航中的车标。可以想象，骑车摩托车、安吉拉用着疾跑、开着卡丁车在地图上狂奔是一种什么样的感觉。腾讯团队通过整合各种现有资源作为主题，给用户创造了既然趣味又个性化的体验，带给用户惊喜以增强用户粘性。

（开车疲倦时，导航换个“吃鸡”人物形象，有没有感觉精神抖擞、到了服务区要来两把的冲动）

「腾讯动漫」取消收藏：有那么容易取消成功吗？

1.  产品体验：

体验腾讯动漫APP，针对喜欢的动漫点击收藏时，会从顶部向下弹出成功收藏提示的毛玻璃效果。取消收藏，系统会弹窗提示，并结合情感化的挑逗文案挽留用户放弃当前操作。

2. 设计思考：

收藏（关注、喜欢）是每个用户都操作过的，也是每个应用最常见的功能了，虽然各种应用屡见不鲜，但收藏的交互样式就那么回事，常用的就是点击“收藏成功”、再点击“取消收藏”的toast样式。

腾讯动漫APP的收藏交互就与众不同了。点击收藏时，会从顶部向下弹出成功收藏提示，这也符合用户从上到下、从左到右的常规视觉浏览习惯，将操作结果反馈让用户第一时间发现。取消收藏时，系统会弹窗提示，并结合挑逗性质的文案在极力挽留用户放弃操作，相对之前常规的点击就立即取消成功的方式，这种弹窗式的二次操作一定能起到挽留效果，就好比挽留失败则没有损失，因为用户来就是要取消收藏的；万一挽留成功，就达到了自己的目的。另外用户的主要操作动机为“取消收藏”，而腾讯动漫的弹窗将主要动机降为次级，而“继续收藏”上升到主操作，容易让用户产生误判，在操作速度较快的情况下，用户快速的点击了主操作按钮，以为成功取消收藏了，其实根本没有操作成功，相当于变相的阻止了用户的操作。

（这时候有些用户可能会吐槽，误导用户的行为不太友好，其实不难理解。记得之前，我下载了一款“xxx”名字的PC端软件，后面在卸载的时候，反反复复出现了5个挽留的弹窗，误导的方式让我很烦，于是我下定决心，再好用也要把它卸载掉。站在企业的角度可以这样解释：你把我上完了就想抛弃我，我挽留了几次都不行，你还有资格怪我不友好么）

「支付宝」蚂蚁森林：捷径之道逛一逛

1. 产品体验：

使用支付号蚂蚁森林的逛一逛，可以快速跳转至有能量可收取的朋友的蚂蚁森林页面，待全部收取后，继续同样的操作，直至支付宝所有朋友的蚂蚁森林没有能量可收取为止。

2. 设计思考：

10年前，很多用户每天早上醒来的第一件事就是进入QQ农场偷菜，几年后回想起来感觉是那么的幼稚。可10年后，依然有很多用户早上醒来的第一件事还是拿起手机，不过这回不是偷菜了，而是进入蚂蚁森林收取能量。蚂蚁森林作为公益类型的一款小游戏，让很多用户的参与都感觉到为公益出了一份力的成就感，深得人心。

最近在玩蚂蚁森林时，发现右下角多了一个“逛一逛”的按钮，点击可快速跳转至朋友的蚂蚁森林页面（前提是有能量可收取），能量收取完成后，继续反复相同的操作，直至没有可收取的能量为止，非常方便。之前收取能量，需要单独点击蚂蚁森林里的朋友列表进入，操作完成后返回再换个朋友，反复操作，“逛一逛”功能入口的上线，简化了之前需要挨个重复点击去收取能量的复杂操作，让收取能量变得更高效便捷，节省了很多时间。

「淘宝」Tab栏：隐藏的图标小秘密

1. 产品体验：

进入淘宝APP，底部标签栏的的首页图标为品牌logo，页面上滑至一屏内容的1.5倍时，首页图标变成了小火箭，点击可直接回到顶部。

2. 设计思考：

我们在使用过的应用里面，至少有80%的APP都有底部Tab栏，分为几个大的模块。众所周知，有很多大企业在APP应用停留在首页时，就把logo作为底部Tab栏的首页图标使用，进入Tab其他功能后，logo换成了首页的图标样式，相当于起到了双重作用，即能当做模块入口使用，还可以进行品牌传播。淘宝APP就是其中的一个例子，不过产品团队似乎并不满足现有的双重功能，还在挖掘更多价值以及提升用户体验。

淘宝APP在Tab栏首页图标的第三个功能就是“回到顶部”，页面上滑至一屏内容的1.5倍时，首页图标变成了小火箭，点击可直接回到顶部。其实在淘宝之前，也有少数的APP有这个操作，不过都是隐藏性质的，还有iPhone手机直接点击状态栏也可以回到顶部。但淘宝的用户体验的确要好很多：①通过上滑后自动更换图标，明确的视觉提示，能够节省用户思考时间，通过视觉传达快速一目了然；②放在底部Tab栏，离大拇指很近，缩短了手指与设备操作之间的距离，更易于操作，提升便捷性。

「自如」功能icon：充满神秘气息的轻量渐变

1. 产品体验：

进入自如APP首页，节奏缓慢且过渡自然柔和的金刚区轻量渐变icon，透漏着时尚且神秘的氛围，同时瓷片区的卡片通过轻量渐变的色彩搭配也兼具美感。

2. 设计思考：

一个APP首页是应用的核心部分，担当着对用户的吸引力及转化，与企业的效益有着直接的关系。固一个产品团队都会在首页下很大的功夫，不管是用户还是设计师，所看到的各种各样、层出不穷的首页设计风格及样式，时间一久就会视觉疲劳。

自如APP首页的视觉风格在同行业中算是与众不同了，尤其是金刚区icon（其他页面部分icon、插画）通过扁平化的轻量渐变，营造出一种舒缓、治愈的沉浸感。同时轻量渐变也是当下非常流行的色彩搭配，使整体色彩统一且不失丰富，透漏着时尚且神秘的氛围。还可以减轻用户的视觉负担，不仅能美化界面，还可以起到强调、醒目的作用，让用户产生一种想掌控的欲望，增加点击率。

往期回顾：

欢迎关注作者微信公众号：「能量眼球」