「支付宝」蚂蚁森林里小鸡生活的时空模拟了现实的物理世界,会根据真实的时间变更白天和晚上。如果晃动手机,还可以看到天空动起来的逼真效果。这些细微的小细节不起眼,但当用户在偶然间发现,一定会被这种有意思的小彩蛋惊喜到。
「饿了么」App主页顶部的下拉刷新界面,会出现平台吉祥物柴犬「饿小宝」舔舌头的魔性交互小动画,以此反馈执行下拉手势操作的状态。生动有趣的微交互为交互过程增添了乐趣,也展现了外卖平台的吃货属性与产品的温度。
在「饿了么」送餐骑手的个人主页,点击蓝骑士的卡通头像,头顶的竹蜻蜓会出现转动的小动效。这里的微交互设计和之前写过的「小宇宙」App主页的logo动效相似,都是非功能性的交互彩蛋设计。主要是为了增强互动的趣味性以及强化品牌形象。
平安夜圣诞节期间,打开「天猫」App主页浏览商品信息,会出现雪花从天而降缓缓飘落的动画彩蛋。情感化的彩蛋设计给习以为常的阅读体验带来惊喜和可爱的小情趣,浓浓的节日气息扑面而来,温馨的氛围营造也更能激发购物欲望。
「即刻」App圣诞彩蛋上线,不仅桌面图标被悄悄戴上了圣诞帽,在App里发布圣诞主题相关的动态内容,其「点赞」图标也会由之前的「大拇哥」变成圣诞树🎄。情感化的彩蛋设计给用户之间的互动带来惊喜,更能感受到产品的温度与团队的用心。
「小宇宙」首页的右上方可以看见醒目的星球形态logo图标,点击还会出现有趣的星球转动小动效。虽然这里的小交互只是互动彩蛋,并非功能性交互行为的反馈,但有趣的设计还是给不少用户留下了深刻的产品印象。大家觉得诸如此类,无用但有趣的设计有存在的价值吗?
在「小宇宙」点击「加入播放列表」按钮添加想要听的播客内容时,会出现该播客封面图标跳进播放列表的微动效。虽然反馈操作的动效形式简单,但却很清晰地可视化了动作执行的过程,信息传达准确又生动自然。好设计不一定要复杂花哨,操作中有及时的反馈,交互过程自然流畅符合逻辑,也能带来好体验。
打开「高德地图」App,当顶部Tab栏被切换到某个出行方式选项时,会出现相应出行方式的微交互小动效。为执行搜索的过程增添了不少小乐趣,也让每个选项信息通过可视化的图像变得更加清晰直观。从细节处提升产品的使用体验与个性。
今天(11月27日)是世界武道变革先驱者、中国功夫的首位全球推广者李小龙的80周年诞辰,「百度搜索」主页上线了相关的纪念动态Doodle。李小龙身穿在自编自导的电影「死亡的游戏」中的经典造型黄色连体衣舞动双节棍的形象,被卡通动画的形式呈现出来,并与百度的logo出现进行了了有趣的融合。带来重要事件提醒与惊喜互动的同时,也展现了产品的情怀。
b站播放界面下方设置声音、画面、播放模式等的小图标的hover状态,都有可爱的微交互小动画来反馈当前的操作。虽然都是不复杂的小动效,比如调节音量小喇叭图标会有声波震动,宽屏模式图标会有形象的拉伸效果等等,但这些小心思的加入让发生交互的过程立马变得生动有趣起来。「优设」和「优优网」也有类似的hover交互小彩蛋,大家有发现吗?
「菜鸟裹裹」App的首页下拉刷新时,顶部会向上飞出一只头顶竹蜻蜓的小鸟形象吉祥物,小鸟飞走后还会从屏幕上方落下一个打开的快递箱。有趣的交互动画清晰地反馈了刷新这一手势操作的状态,也巧妙地将平台运送快递这一特征用「小剧场」的形式呈现了出来。
「躺平」App下拉刷新的微交互做得还挺有意思,当使用下拉的手势操作刷新信息时,会出现一个向下俯冲的小人。情感化的设计不仅为清晰呈现操作反馈增添了趣味性,也从细节的设计中强化了用户对App品牌形象的记忆。
考虑到用户注册信息时年龄会是个比较敏感的话题,「最右」App在用户填写注册信息的页面设计了情感化的可爱小动画。当用户填写年龄时,页面顶部的吉祥物会出现捂着眼睛的小动画,并用文案告知用户年龄信息会保密。在完成填写后,还会提醒用户这里有很多同龄人不必过于担心,让用户感受到亲切放松的氛围。
使用「搜狗输入法」发表情时,只需长按emoji,就可以让表情连续上屏。在长按输入多个emoji时,还会出现自动计数的动效。一方面利于用户一眼看清自己输入了几个表情,一方面也能增加输入体验的趣味性。
「QQ空间」相册的照片流页面会按由近至远的时间顺序排列所有照片,当滑动页面时,右上角的日历图标也会跟着翻页变化。并且图标中代表日期的数字刚好与照片对应的真实月份一致。细节虽小却是为交互场景增添趣味和灵性的小心机。
在「即刻」App发布新动态时,点开「相册」添加照片,你会发现页面左上角打开相机的图标被处理成了模糊实时显示摄像头取景的状态。既很好的保护了用户的隐私,又设置了一个有意思的交互小彩蛋等着用户发现惊喜。
「知乎」将小广告放置在了内容的信息流里,当用户滑动屏幕广告移动到接近屏幕中间的位置时,banner图会出现从右向左切换的交互效果,起到区别广告与内容的作用。这样用户的注意力马上会被动态效果所吸引,关注到广告的内容上。广告内容的左下角会清楚标注「广告」的提示字样,右下角还提供关闭按钮「X」,方便用户手动屏蔽广告。
「QQ」Tab栏的「消息」小图标会根据不同场景触发各种各样的表情变化。比如常规模式下的「消息」图标是开心眨眼的小表情,开启夜间模式后,不仅整体界面变成了暗黑模式,Tab栏的「消息」图标还变成了闭眼睡觉的表情,正好呼应了夜深该休息了的使用场景。
「虾米音乐」主页的「乐库」版块,顶部banner图展示区域的交互设计,模拟了现实生活中翻看CD的效果,很有仪式感。每张专辑都是编辑精选的歌曲专题合集,点击封面图可进入专辑详情页查看歌单,选择喜欢的音乐播放或进行收藏;而如果点击封面图上的播放按钮,则可以直接在主页随机播放该专辑列表的歌曲。
「黄油相机」是一款深受大家喜爱的Plog(图片博客)创作工具,据说它的名字源于电影「Julie&Julia」的经典台词「你是我面包上的黄油,生命中的呼吸」。将图片与文字的关系,比喻成面包与黄油,也是很别致的想法。使用App下载字体、滤镜时的加载动画很可爱,是一个切面包的黄油小人,有趣又贴合产品整体的设计概念,等待素材下载的时间仿佛也变得没那么枯燥了。