优秀的设计是能带给用户惊喜的，在不经意间吸引你的注意力，让你感受到产品的温度。

作为产品设计师而言，发现这些优秀的设计解决方案，可以提高我们输出项目的灵感。今天黑马哥继续和大家一起去发现，通过这些大厂的设计案例提升我们的设计思维。

分享目录

一、俏皮可爱的加载动效

二、人性化的天气提醒设计

三、裸眼 3D 感的 Banner 设计

四、打破常规的分类设计

五、动态手绘风的登录设计

六、融入界面场景的 Banner 设计

七、俏皮可爱的闪屏设计

八、音量大小的温馨提示

九、情感化的天气反馈设计

十、动态瓷片区强化关注度

一、俏皮可爱的加载动效

缺省页设计对于提升用户体验至关重要，通过情感化表达可以降低用户等待过程中的焦虑感，结合动效表达效果更佳。

吃货笔记 App 在网络不佳时，针对部分正在加载的内容进行了动效表达。俏皮可爱的 3D 表情悠闲地畅饮，这个连续的动态表达流畅自然，让用户感觉特别可爱生动。通过情感化的方式缓解等待焦虑，提升了用户的访问体验度。

二、人性化的天气提醒设计

通过情感化设计可以拉近与用户之间的亲和力，而人性化的设计总能让用户感受到产品的温度，达到用户对产品的体验预期。

通过携程 App 订票之后，在行程界面顶部区域会以到达目的地标志性建筑进行视觉强化，也会根据当地天气情况设计动态表达。该设计表达不仅强化视觉感，人性化的天气提醒也提高了用户体验度，为用户出行提供更全面的服务。

三、裸眼 3D 感的 Banner 设计

通过新技术呈现不一样的设计，总能带给用户体验之外的惊喜，提高用户的参与度。

腾讯视频在元宵节期间访问 App 时，发现首页 Banner 设计以裸眼 3D 的立体视觉效果进行呈现，随着左右晃动手机而进行分层位移和动效。通过设计和技术的结合带给用户一场视觉互动体验，以此提高用户的参与度和产品体验感。

四、打破常规的分类设计

设计差异化在于不断打破常规表达，以区别于常规认知的设计打动用户，提升产品的感官体验。

马蜂窝 App 在推荐不同地区旅行套餐时，针对地区分类设计以卡片式进行切换交互，默认卡片会以区域特点的元素进行突出。点击之后的配色也会根据主题发生变化，让用户感受到栏目变化的丰富度。以区别于常规分类表达的形式吸引用户关注度，打破常规的设计带来了差异化的体验。

五、动态手绘风的登录设计

登录设计为了降低用户的排斥感，在情感化设计的表达中不断尝试，设计风格也是丰富多样。

软眠眠 App 登录界面设计以手绘风表达，不仅延续了产品整体设计风格，也区别于大部分产品的设计表达。以动效的方式展示出落叶的场景，熟睡的猫咪摇着尾巴也非常可爱，整体的氛围让用户感觉很放松，也就没有了登录的排斥感。

六、融入界面场景的 Banner 设计

Banner 设计的创意形式已经很丰富了，样式也是层出不穷，但是设计师依然在尝试更有特色的表达。

最近在体验自如的时候，Banner 设计以白底呈现，和整个界面的设计高度融合。以不同造型的配图结合动效表达主题内容，没有生硬的边界束缚，让设计表达融合性更强。

七、俏皮可爱的闪屏设计

闪屏设计（非广告）是为了降低用户等待焦虑而存在，通过带有情感共鸣的插画、IP 形象的设计、品牌文化的传播等等呈现。

喜马拉雅 App 的闪屏设计以 IP 形象表现了阅读、洗澡、睡觉等场景，以听着喜马拉雅而显得悠闲自在。每次打开软件都会以不同场景切换闪屏（目前黑马哥只发现三个场景），俏皮可爱的 IP 形象惹人喜爱，也提升了用户的感官体验。

八、音量大小的温馨提示

使用产品时除了满足用户自身体验以外，也要防止对他人或者公共环境造成影响，通过温馨提示可以善意的提醒使用者。

我们通过抖音刷短视频时，如果音量过大时会弹出温馨提示，提醒用户当前音量较大可能会影响他人等。通过温馨提示善意的提醒用户，提升用户体验和公共环境的维护。

九、情感化的天气反馈设计

为了提升用户体验，产品设计师都在不断优化各方面细节，希望可以让用户感受到产品带来的服务和温度。

如果遇到下雨天等特殊天气时，打开高德地图会以动效的形式进行天气反馈示意，方便用户对即将出行的决定有更好的安排。情感化的天气反馈设计起到提示用户，增加用户对产品体验的好感度。

十、动态瓷片区强化关注度

瓷片区可以汇总活动、功能、服务等业务内容，是主界面曝光度汇聚的栏目，通过微动效更能强化该栏目的曝光度。

在体验贝壳找房 AI 设计操作界面时，瓷片区以动效的形式强化了图形曝光度。相较于别的动效表达不同，这里采用的是按照顺序进行动效播放，不会形成互相干扰。有种排队的次序感和连贯性，让人印象深刻。

小结

带给用户惊喜的设计总能留下深刻的印象，无论是感受到产品的温度，还是通过情感化的设计拉近用户之间的亲和力等。希望今天的总结和分享可以让你有一点反思，通过优秀的案例提高我们的设计思维。

作者：黑马青年（vx: heimaux）

本文由 @黑马青年 原创发布。未经许可，禁止转载。

Powered by Froala Editor