29 期 | 产品体验日记

不知道从什么时候开始养成了这个习惯，平时使用App的时候会截图一些优秀的设计，包括UI、交互、动效和一些特殊的功能。

看到这些优秀的设计会非常兴奋，经常会发脉脉和大家一起分享交流。主要目的是希望自己能够多一些思考，吸收这些优秀设计的原理，从而学以致用。

这次将这些零散的点整理出来，也是希望能和圈里的大佬们一起交流一起学习，发现更多更好的设计。

01、得物（毒），用户分享内容

毒APP关注模块的用户发布动态，五张图和六张图的排版样式很独特，猜测有两种原因。

一是因为毒的主要用户人群是追求时尚潮流，向往个性年轻人。所以在设计排版上也区别于一些常规的动态排版方式，以体现产品的个性化定位。

二是可能有一定的数据支撑，比如多图情况下常规的排版方式，使得图片比较小点击率低，用户更愿意点击大图，大图在信息流中更容易获得用户的注意力，从而提升该条动态的点击率。

02、花瓣手势横滑的交互设计

花瓣APP进入图片详情页，可支持左右横滑切换，当手指在页面中间左右滑动时，图片左右切换；当手指在屏幕边缘右滑，或者在当前图片下拉时则触发返回，返回瀑布流。细致友好的交互体验很大程度上提升了用户的浏览效率。

APP的四个Tab使用纯icon的形式展示，区别于其它产品icon+文字的展示形式，并且背景使用毛玻璃的效果，整体设计风格新颖独特。

03、QQ音乐的推荐视频模块

QQ音乐推荐视频模块，每次浏览到新的视频，大概三秒之后，除了视频本身其余信息全部置灰。为用户提供沉浸式的浏览体验，使其专注于视频本身。

细微的小功能体现出了产品在设计过程中，真实的考虑到用户的使用场景，将用户需要的最核心的内容最大化呈现在用户眼前。

04、QQ音乐商业模块，节省页面空间的小交互

QQ音乐商业模块，了解权益使用展开收起的交互形式，在有限的页面空间中提升展示效率，而且这种展开收起的形式代替了页面之间的跳转，用户体验更流畅。权益的icon和下方的商业卡片选中态，以及按钮的微渐变样式，统一使用产品的品牌色，视觉效果统一简洁。

05、GoFun出行_寻车功能设计

GoFun出行是一款共享汽车的产品，由于车量较少，停车位置不固定，定位精确度低。所以在用户需要用车的场景下，不容易立刻找到。

汽车的左上角有一个小喇叭的icon，当用户找不到车时。点击小喇叭会发出“哔哔哔～”三声巨响，此时以声音辨别位置，可以精确的帮助用户快速寻到目标车辆。此功能的设计真正的解决了用户在现实场景中的问题。

06、小红书视频关注按钮设计

小红书里，用户点击查看视频，当视频即将结束，“关注”按钮往右展开变为“立即关注”，展开的小动效立即吸引用户的关注，从而提升用户关注转化率。

类似的交互微动效在产品中用的恰到好处，既能吸引用户注意力进行操作，同时又能做到不过多的干扰用户。如何更好的利用这种微动效为产品业务助力，也是日常需要关注和思考的重点。

07、Keep运动达人主页的推荐关注设计

进入Keep达人主页，在上滑浏览过程中，会从底部弹出关注按钮，如果不点击大概过三秒左右自动消失。

大按钮的设计样式异常醒目，从底部弹出的动态效果做的非常细腻，左边头像右边关注icon，搭配简洁的文案提示，可以有效的吸引用户注意力促进转化。

按钮弹出的时机和消失的时间很符合当下的使用场景。用户既然进入达人主页浏览动态，表明非常感兴趣，这个时候推荐关注的转化成功率相对就非常高。而按钮在弹出后大概三秒左右自动消失，则完全做到了尊重用户意愿，不强制不打扰。细节处做的很用心。

08、Keep发动态时的贴纸小交互

Keep发动态时，在图片编辑模块有个“贴纸”的功能，删除贴纸的小交互体验非常顺畅。

如下图，首先完成添加贴纸，其次点击要删除的贴纸，点击的同时图片上出现删除icon，且页面中除了图片和贴纸之外的所有信息均消失，当贴纸被拖到删除icon的位置时，删除按钮的盖子打开，然后关闭完成删除动作。

09、汽车之家的智能问答IP设计

进入汽车之家的智能问答页面，顶部的智能机器人形象会模拟真人动态，进行眨眼和转头的动作，似乎在耐心的等待用户提问题，互动感极强，简单的交互微动效增强了产品的趣味性，同时给用户带来了惊喜的体验。

10、汽车之家的icon撞色设计

汽车之家的品牌主色是蓝色，辅色是橙色，两种颜色在色系上属于对比色，搭配使用会产生很刺激的视觉效果。icon的设计则采用这两种颜色搭配，两种色块使用渐变的样式叠加在一起，细节的处理也比较丰富，每一个icon都显得特别精致，非常吸引眼球。

另外这种设计方式也起到了品牌宣传的作用，颜色是很容易被记忆的一种元素，将汽车之家的品牌蓝透露在每一个icon上，潜移默化的则加深了用户对品牌的记忆。

11、汽车之家的广告位设计

汽车之家的首页推荐模块，在首屏Baner的下方插了一个高度特别小的广告位，文案和配图都很简单，右边使用圆形按钮“GO”引导用户点击。印象中的广告位点击之后都会跳转到新的页面，进行大篇幅的洗脑。但是这里点击之后在其下方直接弹出广告的详情卡片，并且带有收起按钮。

这种设计形式有几点好处，首先是在首页首屏的广告可以获得很大的曝光量；其次由于广告位比较小，所以占用首屏的黄金位置比较少，对用户的干扰也就比较低；再者对于点击广告的用户，在当前页可直接展开查看广告详情，展开之后若不感兴趣可直接关闭或者上滑浏览推荐信息，很大程度的减少了页面之间的跳转。

从业务角度出发，打造具有商业价值还能兼顾用户体验的设计。

12、百度地图的路线截屏功能

记得最早坐地铁的时候，会提前使用百度地图查好路线，然后手动截屏保存至手机相册，或者发到微信的文件助手。

当时这样做的原因有两个，一是担心地铁信号不好，关键时刻路线加载不出来；二是在地铁行程中大部分时间停留在微信，发送到微信为了减少反复切换App的次数；还有一些类似省流量省电等小细节的考虑。

而且当地图路线很长时就需要截很多张图，查看时候就比较麻烦。但是百度地图的截屏功能完全解决了我的痛。一键截屏，将一整条完整的出行路线保存至手机相册，方便随时随地查看。而且一整条完整的路线信息，查看的时候一目了然。结合用户真实使用场景进行的设计，既解决用户痛点，同时也能增强用户粘性。

13、高德地图引导页

很多产品在用户初次使用的时候，都会进行一些偏好选择。作为出行工具，高德地图在开屏页也设置了用户出行偏好的选择，分为自驾和公共交通两大类，分别用小卡片式的精美插画表示，清新的画面表意直白易于理解，打开产品的第一时间就让用户感受到了产品的用心。

14、平安好医生的答谢功能设计

平安好医生的红包答谢功能，无论对产品还是用户(医生)都起到了一个积极的正反馈作用。首先用户既然使用红包答谢，表示对问诊比较满意，一定程度上增强用户粘性。其次医生收到答谢红包备受鼓励，从而刺激其付出更优质的服务。

对优质的产品服务付费，才更能够刺激更多的产品持续贡献更优质的服务，从而形成一个更加稳定优质的产品形态。

15、夸克，智能语音模块的情感化设计

夜间进入夸克浏览器的消息模块，会有智能语音提示“夜深了，注意休息”，并提示今日剩余时间，或者是出现一些冷知识、科普内容、老黄历、古诗词等内容，上边的图形模拟眼睛的形态发生一些动态的变化，传递出一种智能科技的感受。

这种情感化的提示和图形微动效出现在页面中，让原本冰冷的工具型产品变得有温度，同时增加了产品的趣味性，无形中拉近了产品与用户的距离。

16、夸克浏览器的创意toast设计

夸克浏览器真的是能不断的给用户带来惊喜，在逐渐的使用过程中，很多细腻的交互和走心的功能像一个个彩蛋等待你去发现。

长按首页的站点图标会出现添加icon，点击进入站点编辑页。可以看到罗列出的很多咨询类app，点击则添加到首页。添加成功的同时会有toast提示添加成功，夸克的创意就在于此，将toast和ai智能助手元素结合在一起。点击添加则在页面底部弹出一个小的标签，两只眼睛眨巴眨巴的上下左右看着，提示“已添加至导航”。再次点击，以同样的方式提示“已移除导航”。这种创意点结合微动效带来的意外惊喜，无形中激发了用户对产品进一步探索的兴趣。另外也保持了产品中设计的统一性，将智能助手的元素融入到每一个页面细节中，同时也传达了夸克ai智能的一面。

17、夸克浏览器，细腻的小交互设计

最近几天疯狂迷恋夸克浏览器，似乎总有一些新奇的设计等待被探索。以下列举三例个人觉得有意思的小设计，欢迎大家一起讨论。

1、在图1首页的空白区域下拉，直接进入图2的输入状态。此处设计可能考虑到大屏手机单手操作的难度，手指无法轻易触碰到搜索框，所以添加一个下拉直接输入的小交互。为方便大屏手机用户使用。

2、点击图3推荐卡片的加号进行关注，点击之后“加号”变为图4的“差号”，再次点击差号则是取消关注。以一个常见的图形变化表示关注和取消，代替了传统的按钮功能，看似简单却能体现出设计师独特的思考。

3、图5的推荐页面，点击任意加号进行关注，常按相应模块则变为图6“添加到导航”的按钮样式，点击则直接添加至首页导航，交互流畅，设计样式简洁新颖。

18、UC浏览器的手机号登录页面设计

UC浏览器登录页面，设计形式极简，页面仅保留了最核心最重要的信息。点击输入手机号，完成输入之后获取验证码变高亮，点击获取验证码，输入后直接登录，交互非常流畅。

像这种清晰有效的设计，往往能够使用最少量的信息来表达页面的意图，从而提高用户和界面的沟通效率。实际工作中可以不断的尝试总结，提升产品的易用性和使用效率。

19、京东截屏功能思考

在京东APP内手机截图，调起三个功能，分别是一键分享、问题反馈和相似商品。不同的APP内截图所触发的功能不同，具体根据用户的使用场景进行设计。

比如京东，作为电商平台，用户截图的意图大致包括以下几点。一是发现喜欢的商品分享给好友或是让好友帮忙抉择；二是想去其它同类平台查看同款产品价格；三是发现产品bug要吐槽，或者是分享给客服解决问题等等。

这些都有可能是用户截图之后想要进行的行为，所以产品根据当下的场景设置了相应的功能，为用户铺垫了接下来的操作路径。很典型的根据用户的使用场景进行的产品设计。

截图后弹出悬浮卡片，截图内容在中间显示，三个功能依次在下边排列，卡片顶部使用京东吉祥物Joy，增添产品的趣味性。整个卡片设计非常精美。

20、Moo日记情感化IP设计

Moo日记的IP形象是一个简笔画小熊，质朴的线条勾勒出的造型，传达出一种笨拙可爱的感受。出现在产品的很多场景中，以拟人化的形象和对话的方式引导用户互动，给产品增加了很多的趣味性和温度。

一个优秀的IP形象可以加深用户对产品的记忆，从而有效的与其它同类竞品区分开。在产品前期设计中，可以尝试根据产品定位和属性设计出属于自己产品的IP。

最后分享一句话和大家共勉，“觉得困难的时候逼自己一把，真正让你受益的，是最朴实的认真和最枯燥的勤勉”。勤思考，多动手，希望大家都能抵达心之所向的远方......

本期产品体验日记分享到此结束，希望抛砖引玉，可以看到更多伙伴去发现更多好玩的设计。

本文由黑马家族 @鸭脖_ 整理编辑，发布于51学设计，仅作为学习交流，勿做他用。