6个产品细节剖析，看看高手是如何做设计的！

本期我们将再次看看别的产品在交互体验上有哪些有意思的设计吧！

案例分享

1. 自如简洁趣味 banner

自如首页经过改版后，头部 Banner 采用了大面积白色底和小动效的形式，以实现简洁而富有品质感的效果。

提升用户体验：通过采用大面积白色底减弱 Banner 的营销感，提升整体页面的品质感和氛围感，同时可以降低用户对广告/活动的抵触情绪，提升信息的传递效率。

引导用户视觉焦点：在减弱 Banner 的营销感的同时，通过简单而有趣的小动效，提升头部的氛围感，吸引用户的视线，引导用户进行点击和转化。

2. 盒马-顶部 banner

盒马 app 尝新页顶部 banner 采用线描动画结合实物图的风格表现，线描 ip 小人生动有趣的表现和商品实物图结合令人眼前一亮。

传递正向情绪价值：线描小人表情生动有趣，结合期待搓手、挥手打招呼等动作，展示对推荐美食的向往，传递正向情绪价值，激发用户的好奇心和探索欲。

提高用户点击欲：轮播/手动切换时，背景变化的交互动效与星形的主视觉结合，自然有趣的互动元素，令人眼前一亮。引人注目，激发用户的点击欲。

3. 美团外卖

美团外卖的首页下拉动画与膨胀神券的结合，为用户带来了生动有趣的体验。

增强用户体验：随着用户下拉页面，红包金额逐渐增大，最终进入到领取红包的页面。这种交互设计不仅顺滑方便，还增强了用户的参与感和体验感。

提升用户对红包的感知：用户越往下拉，红包的金额越大，这种设计让用户能够直观地感受到红包的价值。同时，进入到领取红包的页面也增加了用户对红包的期待和兴奋感。

4. 滴滴打车评价体验创新设计

滴滴打车为了提升用户体验，对司机评价的设计进行了精心扩展。通过这些设计细节的引入，使得滴滴打车的评价界面更加生动有趣，让用户在评价司机的同时也能享受到更愉悦的体验。

引入动态表情，丰富情绪表达的方式：在评价界面的浮层顶部，滴滴打车引入了表情动画，通过放大的动画效果，增强了用户的情绪感受。这样的设计不仅丰富了情绪表达的方式，还为用户带来了更多趣味性。

呈现惊喜动画，增强评价过程的趣味性：当用户点击满意按钮后，如果选择进一步提供详细的评价，滴滴打车还特意加入了放礼花的动效。这样的动效不仅在丰富用户的情绪表达的同时，也增强了整个评价过程的趣味性。

5. 闲鱼-海鲜市场

「闲鱼」App 的海鲜市场板块头部的图标入口插画增加了点击交互动效，这一举措极大地提升了用户的互动性和趣味性。

对于用户来说：通过动效的设计，「闲鱼」App 成功地将用户的操作与应用的反馈相结合，让用户在使用过程中感受到更加自然和流畅的交互体验。

对于平台来说：让用户在使用过程中感受到更加愉悦的心情，从而进一步提高用户的使用频率和留存率。

6. 大众点评-隐藏二楼，划出惊喜

大众点评首页下划超 1/4 屏即可呼唤出二楼空间。通过下滑操作的交互，用户可以快速访问更多相关内容，而无需进行额外的点击或搜索。不仅能够提高用户的操作效率，还能够增加页面的可用性和吸引力。

多样化的流量入口：在屏效比十分紧张的首页，通过下划的方式增加了一个新的多样化流量入口。

渐进式露出的惊喜：在下划过程中，“下拉刷新”的文案随之变为“松手进入二楼”，并通过强眼的主视觉吸引用户注意，在交互的过程中巧妙地激起了用户的惊喜。

最后要说的话

本期的设计分享就到这里啦。

文章中的案例与思考来自于智行 UED 同学的日常分享。

后续我们将持续深度体验产品，挖掘更多值得分享、学习的设计案例。努力将其中的方法理论应用到智行 APP 后续的产品设计中。

愿我们的努力为你带来更好的体验。

作者：智行ZXD设计中心