在UI/UE设计中，我们如何将至关重要的信息有效地传递给用户，这是设计本身的职责。但是绝大多数信息的呈现，我们可以在细节的处理方面带给用户惊喜，让用户喜欢并完成最终的转化，通过设计的手段提升产品的可读性以及可访问性。初级与高阶设计师的区别，并不是在整体大的布局上有什么差别，通常都体现在产品的细节上，好的产品可以在内容不变的情况下，通过细节的处理让之焕然一新。

其实除了在细节上下功夫，还可以通过融入品牌基因、简化交互流程、增加适合用户的功能等，在规划前需要思考，自己的产品是否符合这些触点，不能为了功能或细节上的差异化，产生过度设计，一切都要恰到好处的在用户需要时，合适的出现。

01.「酷狗音乐」电台听书-网页朗读助你解放双眼

产品体验：

体验酷狗音乐的电台听书版块时，在AI朗读里，选择网页朗读，把需要收听的网页地址复制到对应位置，点击一键朗读，选择自己喜欢的主播声调，即可解放双眼，轻松愉悦的收听。

设计思考：

酷狗一直是音乐应用里的一匹黑马，有人直呼：“酷狗功能强，隐藏功能有好多，像运动模式、驾驶模式、白噪音模式、还推出了电台听书，连喜马拉雅都不用打开了”。的确，酷狗持续走在音乐的前沿，为迎接“耳朵经济”的崛起，一边积极布局多元化的音乐内容，一边加码在线音频领域，开辟以泛音乐娱乐为主，泛文化兴趣为补充的内容生态。之前，酷狗推出了AI朗读功能，最近又新增了网页朗读，颇受多用户喜爱。

在酷狗V10.2.5版本中，新增的网页朗读功能可以称得上是黑科技，只需要把我们喜欢的书籍/文章/段子网址粘贴在朗读功能里，即可一键朗读，还可以调整不同的声音、倍速，网址不分类别，轻松复制粘贴即可，省时省力省精神。AI网页朗读可以给用户带来沉浸感和惊喜感，将视觉转变为听觉更加合理简单，解放用户的双眼，提升产品的易用性。

02.「猫乎」空状态-全屏化的视觉冲击

产品体验：

进入猫乎APP，空状态页面使用场景画布全屏布局内容，IP形象+趣味化的创意文案，让人惊喜。

设计思考：

空状态是APP设计中不可或缺的一部分，新用户初次接触到产品，必然会面对很多空状态。另外当用户处理完所有任务或者进行检索筛选时，没有符合的结果，也会出现空状态页面，如果处理不好，会带给用户焦虑、挫败、疑惑…的负面情绪。我们可以通过空状态页面告诉用户当前处于什么位置，暗示用户如何才能获得内容并搭建快捷通道，帮助用户建立预期。

猫乎APP在空状态页面是较有创新的，通过场景画布全屏布局内容，IP形象+趣味化的创意文案非常个性化，有很强的视觉冲击力，给与用户多种惊喜。使用IP（猫脸）形象通过恰当的方式强化品牌元素的呈现，带给用户情感关怀，同时品牌认知更加明显。通过全场景化的设计创意，专业和幽默色彩，创造正面情绪环境，让用户更容易记住这个产品，并对之产生一定记忆，在增加品牌价值的同时，还能有效的抚慰用户焦躁心情，减少负面情绪，并指导用户，通过引导快速开始操作获取相关的内容，从而减少了放弃的机会。

03.「微信」消息-语音转文字更方便

产品体验：

用微信发送语音消息时，按住不放录制语音消息，往左上方的“X”拖动，取消发送，往右上方的“文”拖动，会把当前的语音转换成文字，松开手指即可发送文本消息。

设计思考：

微信的功能一直都很强大，不是说功能的数量有多少，有多么的高科技，主要是站在用户的角度考虑，设计出来符合大众化而且操作难度极低，几乎没有学习成本的功能。可能有很多的设计细节大家没有注意到，所以微信功能要用过才能体会到微信的好用。之前有用户提到过“别人发一堆语音给我，我要一个一个的听，很费时间，而且很多内容记不住”，然后就就有了语音转文字功能，为了对信息发送者和接收者都很友好，还专门在菜单栏上线了语音转文字功能，可以把录入的语音转换成文字之后在发送出去，算是双保险了。

微信APP在最近的版本更新中，又上线了在语音录制的过程中选择发送方式，录制语音消息时，直接松开手指按照语音消息发送，如果将手指往右上方的“文”拖动，当前的语音自动转换成文字，松开手指即可按文本消息发送，目前支持普通话，粤语和英语，准确率高还支持二次编辑功能，用户体验非常好。

04.「虾米音乐」刷脸听歌-听什么？让脸来决定

产品体验：

从个人中心进入音乐实验室，点击刷脸听歌，将摄像头对准自己或他人的脸部，拍照之后使用照片，系统会根据用户的面部表情分析当前的心情，并推荐相关歌曲播放。   

设计思考：

现阶段的音乐APP用户已经不是以前那种进去就有目标性的听歌了，很多都是漫无目的的在众多歌曲中寻找自己所喜欢的音乐，于是乎各种电台、直播、听书等功能都在智能化的极力给用户匹配。刷脸听歌，是个什么梗，听起来是不是很有新意？这个有点让用户摸不着头脑的“黑科技”可能也只有在虾米音乐里能见到了。

虾米音乐的刷脸听歌，就是提交自己所拍的照片，系统通过人工智能可以根据用户的表情来感知情绪，推荐相应的歌曲。其实这个功能出来已久，并不是多么顶尖的高科技，而是用智能的方式为用户增加一种新鲜的体验感，在几乎没有被同质化的音乐APP里，用“科技感”给品牌增加一些调性，虽然不清楚这个“黑科技”是否被用户认同，但通过这种差异化+趣味性的方式能给用户营造新鲜感，增强印象记忆。

（PS：本人撅起嘴拍了一张，歌曲的匹配结果是“处处吻”，笑抽......，这个功能的弊端就是，当心情不好，摆着一张苦瓜脸来识别的歌曲，会让你听的怀疑人生......良性/恶性循环，全取决于用户）

05.「手机淘宝」领券购买-避免错过优惠

产品体验：

在淘宝商品详情页，如果当前有优惠，底部的立即购买变成了领券购买，并提示券后价格，刺激购买欲望。

设计思考：

现在的用户大部分并不是在需要某个商品时才去购买，一有时间（女性居多），就经常活动在各大电商APP浏览着形形色色商品，没准就能看到一件自己喜欢的。查看各种评论、详情，再进行比价，然后最让人心动的应该就是价格了，查找着各种优惠、领券、折扣等，如果价格不满意，就会添加都购物车，等有活动了再一次性购买（什么618、双11...就是这样被成就的）。

淘宝在商品详情页，将优惠券直接展示在购物的必经之路“立即购买”按钮上，即领券购买，在选择规格弹窗里面也可以看到优惠提示，改变了之前需要提前领券然后再去购买的情况。将领券和购买合并在一起，除了让操作路径更加合理外，也能有效降低用户因没有看到优惠而放弃购买，降低下单转化，同时还能避免用户因没有领券而直接购买，造成用户利益上的损失后而吐槽商品价格过高的问题。

06.「猫耳FM」启动页-让人惊喜的猫叫声

产品体验：

进入猫耳FM应用经过启动页时，会有一只猫形象的动画过渡，启动页伴随着猫叫声结束，然后自动进入首页。

设计思考：

当你进入一个PP应用的时候，首先映入眼帘的是它的启动页，启动页就像是一场预演，用来介绍它是什么、长的什么样或者是做什么的（主要业务）。作为第一印象的视觉传播，毕竟只有2~3秒的时间就会自动消失，太大的信息量，用户几乎不会去看，常见的启动页大部分都在品牌形象上下功夫，比如logo、IP、主色调、主要业务等多种组合形式。而表现方式也是层出不穷，有静态图片、动态图片、动画、视频等表现方式。但在2~3秒的时间内想让用户记住太多的东西几乎不可能，首先要做的是如何吸引用户去看，然后才是表现方式以助于用户形成记忆。

猫耳FM就很特别，进入启动页后会有一只猫的IP以动画的表现方式过渡，同时会有猫叫声吸引用户的注意力。常规的启动页不管以何种表现方式，都只能通过视觉传入用户的大脑，而猫耳FM启动页的猫叫声给用户带来的很大的惊喜。APP启动页的植入已是常态，不管那种表现方式，都会因用户提前做好了心理准备而接受，这种常态对用户来说，几乎已经免疫，不会做特别的关注，当一声猫叫通过听觉传入大脑，有可能感到比较突然或者异象，会不自觉的去看上一眼，既做到了差异化，又通过了视觉+听觉的双重传播渠道吸引用户关注，强化用户记忆。

07.「波洞」波纹-形成品牌记忆

产品体验：

在体验波洞APP时，进入首页、点击tab栏图标交互的最后一瞬间，会有一个多彩的波纹效果，直至消失。

设计思考：

一个应用如果想让用户记住，除了有优质的内容之外，首先做的就是如何抓眼球，否则即使打开了你的应用但没有吸引的用户的焦点，用户可能会随时离开，再好的内容也是空谈。一个APP应用能否成功，其关键因素就在于APP应用能否获得用户认可，给用户留下好印象。

波洞APP，在进入首页或点击tab栏图标交互的最后一瞬间，会出现一个多彩的波纹效果，这种通过品牌基因融入的效果，会给用户形成一个非常独特而强烈的记忆点。有趣的贴合产品整体的设计概念，产品交互的等待时间就会变得没那么枯燥了，同个这种细微的体验设计，不经意间也带给了用户惊喜，给用户留下深刻的印象。

08.「全民K歌」声动合唱-让K歌不在寂寞

产品体验：

在全民k歌的歌房，点击声动合唱，通过搜索框输入我们想要合唱的歌名，即可在线实时匹配其他正在苦苦寻找一起合唱的用户。还可以进行闪电匹配，不过前提是大部分的歌曲都会唱，否则进去了也会选择逃跑。

设计思考：

很多用户多有K歌的爱好，K歌可以放松心情宣泄情绪、感受音乐的美感、提高唱歌水平、心情好了有利于身体健康等。KTV虽然可以满足我们的需求，但每次都是一笔不小的费用，况且自己和他人的时间有限，我想应该很少有闲着没事就一个人跑去KTV自嗨到半夜的人吧。正是因为这些需求，成就了层出不穷的k歌软件。全民k歌是一个比较平民化的平台，可以满足不同人群的需要，歌曲种类较多，不管是五音不全还是平时胆小的用户，都可以独自一人放飞自我，通过各种功能配合自己的声调，以找回K歌的自信。

全民k歌的声动合唱功能，让唱歌不再单调，更多的是有种互动的氛围，让用户找到了线上KTV的感觉，只要是自己想唱的歌曲，都可以通过搜索匹配其他用户一起合唱，没有在KTV时的拘谨和羞涩。合唱是“一种和谐、平衡、完美的音响运动形式”，讲究和谐、之间要互相协调统一，但在线上就能完全抛开所谓的规则，寻找自己喜欢的唱歌方式，可以让对方鼓励、夸奖、吐槽等。合唱功能不仅能提升自己的歌唱水平，还能让用户感受到产品的活泼有趣，更能迎合年轻用户的喜好，增加用户粘性。

09.「QQ」清除消息提示-趣味的拖动效果

产品体验：

在清除QQ消息提示的小红点时，点击小红点拖动会有一种难分难舍的分离效果，彻底分离后松手会炸裂。

设计思考：

QQ上的小红点消息提示（包括小灰点），大部分用户都难以忍受，时刻都在勾引起点击的欲望，对于很多无关紧要的消息，并不想每个都点开看一遍，就会使用清除操作。大多数应用最常规的就是选中后通过编辑操作清除，或者使用一键清除，但针对只需要清除部分红点提示的用户，就需要去频繁的去通过特定操作便捷性的清除了。

QQ清除小红点消息提示算是一大亮点了，通过点击小红点长按拖动，红点会用一种藕断丝连的感觉，在尚未完全跟原位置分离是松手，就会还原，完全分离后松手会有一个炸开的动效，非常有趣，在较少操作步骤的同时，有能通过拟人化的心理贴合整体的设计概念，通过情感化反馈用户行为，为交互行为增加了趣味性。

10.「一零零一」按钮-无处不在的品牌基因

产品体验：

进入一零零一APP，随处可见的品牌基因，比如按钮、导航的下划线、卡片模块等都有一个厚度，这种样式源自于一零零一的IP形象~趴在地洞口的猫，即地洞口的边缘厚度。

设计思考：

品牌基因其实就是品牌的DNA，它包括品牌核心价值和品牌个性，不同的品牌基因，是各品牌之间形成差异化的根本原因，无一例外。成功的延用品牌基因在产品不同场景中让用户眼前一亮，一眼就能看出这是你的产品。在互联网产品设计越来越同质化的今天，做出有自己品牌调性和差异化的产品，是每个设计师要面对的挑战，无论是按钮、插画、图标还是其他元素，只要注入了品牌基因的产品就等于有了灵魂。

一零零一APP，品牌基因可以说是融入的非常好。首先主色调几乎大面积的用到了每个页面，黄色色调并不十分有魅力，但其明亮和愉快的特质能向潜在用户传递着温暖和乐观，主色调代表着APP的整体色彩倾向，大面积的使用可以加深品牌印象与品牌感。

其次大部分的主操作按钮、卡片下方都叠加了一层厚度，顶部导航的下划线也使用了椭圆形的样式。而一零零一IP形象正是一只趴在洞口边缘的猫咪，并且洞口边缘都带了一定的厚度，那些元素的样式正是继承了这一品牌基因的特性，也跟其他应用做到了差异化，让用户更容易记住这款产品，并对之产生一定情绪记忆，用品牌基因以推动产品在用户心中所产生价值。

11.「微信」文本输入-智能匹配表情

产品体验：

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

设计思考：

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

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

①、有时为了不想打字，可以直接回个表情包，简单明了；

②、衍生跟文字相近的含义，表情包可以用来增强语气，对文字进行补充说明；

③、相对于冷冰冰没有温度的文字相比，表情包更贴近用户的心理模型，产生趣味性、同理心等作用。

④、难以启齿或者羞于开口的文字，可以通过表情包的方式表达，以玩味的方式避免造成交流过程的不愉快

      ......

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

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

产品体验：

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

设计思考：

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

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

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

产品体验：

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

设计思考：

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

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

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

产品体验：

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

设计思考：

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

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

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

产品体验：

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

设计思考：

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

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

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

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

产品体验：

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

设计思考：

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

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

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

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

产品体验：

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

设计思考：

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

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

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

18.「支付宝」蚂蚁森林-捷径之道逛一逛

产品体验：

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

设计思考：

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

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

19.「淘宝」Tab栏-隐藏的图标小秘密

产品体验：

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

设计思考：

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

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

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

产品体验：

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

设计思考：

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

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

21.「波洞」趣味的视频点赞效果

产品体验：

在波洞APP观看视频，给自己喜欢的视频点赞时，会以点赞图标为中心，通过动画效果向四周发散出五颜六色的二次元图标，看起来非常炫酷有趣。

设计思考：

点赞，这个词语我们并不陌生，不管哪个应用，我们操作了点赞就是对创作者的观点的一种认可，点赞多了，就会得到推广，使更多的用户去发现创作者，同时也能得到更多的关注，给与创作者更多的鼓励和动力，以作出更多的优质作品，而成为良性循环。当用户的攀比心和排名出现的时候，创作者就会更加努力来吸引更多的用户，后面就有了不受控制的发展，以“蚂蚁吞象”的原理，最终受益更大的一定是企业（平台）。所以很多大的产品团队都会在点赞这一小小的图标及效果上花很大的功夫。

波洞APP的视频点赞功能，用很炫酷的动画效果在点赞过程中为用户设计了独特的交互体验。点赞的行为不光是对创作者的认可，还能起到协助平台以推荐更多优质内容的作用。对于点赞的用户本身也更需要鼓励或认可，通过发散出五颜六色的二次元图标作为点赞特效，大大提高了用户点赞的趣味性，带给用户的感情共鸣更深刻。甚至还有种打游戏的使用体验，达到让用户用得爽、用得好玩的目的。

22.「微信」朋友圈-评论删除

产品体验：

微信新增功能，在朋友圈不想看到的评论再也不扎眼了，长按想删除的评论，会弹出小气泡，点击删除，根据弹窗提示操作完成。

设计思考：

前两天，“微信新功能”冲上热搜，当有人在你朋友圈下面评论时，主动权终于掌握到了你的手中——你可以选择保留这条评论，也可以选择删除这条评论。因为在很多人心里，“删除评论”的意思就是：对不起，我不想你出现在我的朋友圈里。最让人伤感的地方在于，当你正期待着别人热情回应你时，你发过去的消息，对方可能早已悄悄处理掉。这段话结合微信新增的删除功能，似乎有些煽情，让人心情低落，但通过抬杠党告诉我们需要面对现实，尤其是微信这样的专业社交应用。前段时间看到一篇文章，里面提到了几个案例：

①、一个爸爸因没有时间给女儿过生日，在朋友圈写到：生日快乐！闺女。不敢相信以前抱在怀里的小姑娘......依然是我们手心里的宝贝。一位叔叔评论：30岁了还宝贝！也没个对象，单着单着都不金贵咯。

②、一对小夫妻，在大城市里打拼：有一次下雪，丈夫顶着严寒，接妻子下班，两人把仅有的一双手套来回推给对方，很甜蜜的一幕。旁边却有人说：这鬼天气，真心疼老婆就打个车回去啊！

③、当你兴致冲冲晒了张自拍到朋友圈，有人评论：这图P得你亲妈都不认识了吧；忙碌一整年，带父母出去玩了一次发到朋友圈，有人评论：这破地方有啥可显摆的；因为工作出色拿到奖金，决定奖励自己一个心心念念很久的包，有人评论：就这点钱，还学人家买奢侈品嘚瑟呢？

......

其实这种例子何其之多，总有这样一些人，明明能祝福，却非得抬杠；明明能说高兴话，却偏得说丧气话。把肆意伤害当作坦率，把不分轻重当作耿直。有句话是这样说的：发自己的光就好，不要吹灭别人的灯。

微信一直都在致力于做最好的社交而努力前行，虽然不能同时满足所有人的胃口，但不可否认的是，很多的功能都照顾到了大部分用户的心理。通过上面的案例，这时你的心理应该不是伤感和低落，可能还会有一个想法：这个删除功能真的太香了，为什么就没有早点上线呢？朋友圈“删除评论”的确给了我们更多坦荡做人的权利，它昭示的是，我的朋友圈，只留给用心待我的人。

23.「iphone」APP Store-规范不是束缚

产品体验：

iPhone的应用市场，在遵循统一设计规范的同时也在打破统一，根据用户的使用场景在APP列表页「获取」使用浅灰色弱提示按钮，进入APP介绍页则变成了深色，强化了信息的聚焦。

设计思考：

为什么说iPhone的设计是魔鬼，并不是危言耸听。站在设计层面，从扁平化设计、卡片式、线性转面性设计变革的演变，每一次都很彻底，无一不引起设计圈的轰动。iPhone的界面设计都是在严格遵循统一的设计规范，但从未被规范束缚，在遵循统一的同时也在根据用户的使用场景变化，站在用户的角度思考而去打破统一。

以APP Store应用市场为例，新APP的「获取」按钮在列表页以浅灰色面衬托文字，就是为了让用户沉浸在列表内容中，避免深色样式对浏览造成干扰而影响列表各APP信息的传达效率。进入APP介绍页后，按钮变为深色，是由于用户通过列表对某个APP产生了一定的兴趣，有了想了解更多的动机，固通过深色按钮强化信息的聚焦，强制用户注意并引导进行下一步操作行为。

24.「支付宝」-滑动消息列表的温馨提示

产品体验：

在支付宝的消息会话列表，向上滑动会出现“找人转账”的轻提示，点击后，自动过滤掉除个人之外的其他会话消息，便于更好的浏览，方便查询。

设计思考：

我们在平时有资金支出的需求时，都会在微信/支付宝二选其一。作为金融理财的专业级应用，支付宝会更胜一筹，就像用户常说的“小额用微信，大额用支付宝”，在体验方面很好的抓住了用户心理，即使有很小几率可能出现的想法也被支付宝挖掘出来，力求提供给用户最好的体验。

支付宝APP消息页面，在界面操作上滑时，出现的“找人转账”提示，是为了更好的迎合有转账需求的用户，提供快捷入口，点击后，会自动过滤掉除个人之外的其他会话消息，去掉了其他信息的噪音，只显示好友，便于更好的浏览以及转账操作。“找人转账”存在5秒后自动消失，对于没有转账需求的用户不会产生影响。支付宝正是通过这种在合适的时间、合适的地点对有需求的用户合适的出现，以提供便捷的操作，提升体验、深得人心。

25.「快递100」查询-剪切板自动带入运单号

产品体验：

进入快递100首页时，系统会优先访问剪切板，如果复制过与运单号相似的信息，会通过弹窗提示，点击即可跳转至该运单号的物流轨迹详情页面。

设计思考：

我们每次在购物之后，最关心的应该就是快递信息了。在不同的应用里，要频繁切换应用才能查到对应的快递信息，非常不便。快递100接入了国内98%以上快递公司的寄/查快递功能，给用户带来的很大的便利，特别是快递查询，从其他应用将已有的运单号录入，就可以单独从快递100查询到所有的快递运行轨迹，实现综合式运单管理。随着时间的推移，用户所需要的是能够节约时间成本的简便操作，各大应用的快递单号也都可以进行一键复制，让快递查询变的更方便快捷。

在快递100APP中查询快递信息时，只需要在其他应用复制运单号，进入快递100会通过系统访问剪切板已复制的运单号，并根据单号规则自动匹配对应的快递公司，利用弹窗让用户进行信息确认，点击确定之后即可查询详细的快递运行轨迹信息。省去了之前从找到搜索框>粘贴运单号>查询>跳转页面的繁琐操作，快递100的这一功能大幅度的提升了操作效率，节约时间成本，同时页面之间的多次切换流程也得到简化，让操作路径变得更加合理简单，方便用户快速查询，提升了产品的易用性。

26.「滴滴打车」地图-便捷的车辆位置提示

产品体验：

进入滴滴首页定位后，系统会提示多个合适的上车点，并将最近的上车点利用标签强化提醒；地图以自身为中心，提示附近的滴滴车辆信息，并用颜色区分不同的服务车型。

设计思考：

滴滴出行App改变了传统打车方式，建立培养出大移动互联网时代下引领的用户现代化出行方式，相比传统电话叫车或路边拦车来说，滴滴打车的诞生更是改变了传统打车市场格局，颠覆了路边拦车概念，从打车初始阶段到下车使用线上支付车费，画出一个乘客与司机紧密相连的o2o闭环。虽然存在一些弊端，但比线下出问题的概率确实低了很多。就好比一个不知名的打车应用出了多次问题，无人问津，而知名应用出了一次问题却被批判到顶点。从原则上讲，我们不可否认的是，知名应用的付出与带给我们的便利确实得到了大部分用户的认可，如果没点实力，纯粹纸上谈兵，不可能达到量的级别。滴滴打车一直到在致力于为提升APP的用户体验、打车舒适度等努力前行。

①、推荐上车地点：系统会提示多个合适的上车点，并将最近的上车点利用标签强化提醒。附近车辆提示实际聚类的结果，一些小区门口，路口，公交站等其他数据，可以让乘客尤其是针对路痴类型的用户，打车时能在最短的时间内上车，解决用户与司机互相找不到对方，反复电话沟通的问题。推荐上车地点不仅仅是提升用户体验，还能避免乘客和司机多走冤枉路，造成时间和金钱的浪费（司机油钱），还能减少司机在行车过程中联系乘客打电话而带来的安全隐患。

②、地图上提示附近的车辆，并用颜色区分不同服务的车型，金色代表出租车、黑色代表专车、白色代表普通快车/拼车/顺风车。通过提示，让用户在打车之前就会有一定的心理预期，知道附近有什么车型，下单后滴滴会将订单派给这些离用户最近的车。最大限度优化乘客打车体验，节约司机与乘客沟通成本，降低空驶率，最大化节省司乘双方资源与时间成本。

27.「微信」你用语音发过朋友圈吗？

产品体验：

在微信的收藏页面，可以通过右上角的“ + ”入口新建语音消息，完成后点击右上角菜单，选择发送朋友圈。

设计思考：

有很多用户平时都很喜欢发朋友圈，吃饭时，拍照发朋友圈，让朋友圈先吃；旅游时，遇到好看的风景，要让朋友圈先看；甚至办了张健身卡，专门去健身房拍照发朋友圈；当然还有心灵鸡汤肯定不能少……昨天，我在贴吧看到一个网友问“为什么微信不能在朋友圈发语音呢”？大家都知道，微信官方是没有明确提供朋友圈发语音功能的，但还有个隐藏的高级玩法，你可能还不知道。

在微信的收藏页面，点击右上角的“+”按钮，选择下方的话筒图标，就可以进行语音录入了，录入完成后点击右上角菜单，选择发送朋友圈即可。平时可以把我们想发出去的祝福+配图发送，或者自己唱的歌曲也可以用这种的方式发布朋友圈，语音也是记录生活的一种方式，有没有感觉与众不同，更好玩了呢。

28.「樊登读书」签到-动态的视觉引导

产品体验：

在樊登读书APP我的页面，签到提示图标不受手机旋转影响，始终以悬挂样式正视用户的视觉，签到完成后图标变为静态，并用“对勾”的样式提醒已签到完成。

设计思考：

在众多APP应用中，签到功能对用户来说并不陌生，几乎也成了营销及用户留存的一个重要手段，五花八门的签到样式及效果也是存出不穷，有静态、动态、炫酷、强行弹窗等，但真正达到预期并能提升用户体验和转化的并不多见，有的甚至让用户产生反感。

在体验樊登读书APP时，签到功能则是众多应用中较为优秀但并不张扬的一种了。进入我的页面，右上角的签到以静态的线性图标并半悬挂状态展示，当手机出现轻微旋转时，图标并不跟随手机屏幕转动，以悬挂点为中心，造成一种受到重力影响的错觉，始终正视用户，似乎在向用户招手，产生更强烈的点击欲望，相比纯静态(吸引力不强)、动态(成为焦点并影响其他信息浏览)真正做到了动静结合，吸引用户并不张扬，提高完成效率。

进入签到页面后，自动签到成功，省去了手动签到的操作步骤，节约时间，同时也符合用户的“懒惰心理”，即：两步可操作完成的，绝不点击第三下。再次回到我的页面，签到图标变成了“对勾”的样式，跟签到之前形成了差异化，避免用户因忘记而产生重复操作。

29.「淘宝」商品详情页-下拉“多窗口浏览”

产品体验：

在淘宝商品详情页，下拉后会从顶部弹出我的足迹，即展示从最近浏览过的商品按照先后时间顺序依次排列，方便用户多次浏览，进行比价。

设计思考：

在如今互联网大爆发的时间，用户的“懒惰心理”基本浮出水面，也从理性逐渐升级感性消费，之前的按收入消费演变成了提前消费（信用卡/花呗）。平时花大量的时间在各大电商APP里挑选着自己商品，看到满意的东西就会加入购物车进行价格、口碑、发货地及销量等综合对比，所花的时间不言而喻，可能天天后半夜，特别是各大节日前夕。所以各大应用也在节约用户时间成本上绞尽脑汁的探索、研究。

淘宝APP在商品页详情下拉后，会从顶部弹出我的足迹，最近浏览过的商品按照时间的先后顺序依次排列，方便用户多次浏览，进行各种对比。之前都是从购物车查找，或者从搜索页面多次重复相同的操作，非常不便。而在详情页下拉后从顶部我的足迹左右滑动查找更加快捷，相当于开了一个“多窗口浏览”，反复切换即可，减少用户因多次进行各种商品对比花费大量时间而产生的焦虑感，带来更愉快的用户体验，提高操作效率并让用户快速的做出决策，提升消费转化。

30.「百度网盘」扫一扫-贴心的暂停功能

产品体验：

使用百度网盘扫一扫功能，如果出现长时间未扫描或返回操作，系统会暂停扫一扫功能，节约设备资源。

设计思考：

我们对扫一扫功能一点也不陌生，几乎每天都在使用。特别是微信，从付款、加好友、应用下载到关注公众号，无所不能。但你有没有出现过以下情况：付款扫不出来直接换成支付宝、正在扫描时突然有事放下手机而没有关闭扫描功能，然后莫名的发现设备很卡或者发烫，接着一阵吐槽×&%￥#@№……

使用百度网盘扫一扫时，长时间没有操作会自动暂停扫描功能，如果再有需求，点击继续扫一扫即可，这一小小的细节却隐藏着很大的学问。首先能够防止因摄像头长时间开启造成手机发烫，导致设备硬件过早老化，降低使用寿命；其次可以有效避免因扫一扫占用设备资源导致使用设备时反应慢或卡顿的问题。

结语：

设计师需要养成体验产品的好习惯并将优秀的产品细节记录下来，加强自己的记忆，不仅能提升自己的语言组织和总结能力，也为日后输出优秀的作品当铺垫，对自己的能力提升以及未来的职业发展带来便利。

本期产品细节分享结束，我们下期再见。

Powered by Froala Editor