「饿了么」App主页顶部的下拉刷新界面,会出现平台吉祥物柴犬「饿小宝」舔舌头的魔性交互小动画,以此反馈执行下拉手势操作的状态。生动有趣的微交互为交互过程增添了乐趣,也展现了外卖平台的吃货属性与产品的温度。
在「小宇宙」点击「加入播放列表」按钮添加想要听的播客内容时,会出现该播客封面图标跳进播放列表的微动效。虽然反馈操作的动效形式简单,但却很清晰地可视化了动作执行的过程,信息传达准确又生动自然。好设计不一定要复杂花哨,操作中有及时的反馈,交互过程自然流畅符合逻辑,也能带来好体验。
「猫耳」App底部导航栏的中间有一只会通过打瞌睡(常态)、听歌摇摆(音频播放中)等动画效果反馈用户操作行为的小萌猫吉祥物。其实,页面顶部的下拉刷新界面里,也藏着一只追蝴蝶的可爱猫咪。这些有趣的微交互设计都为用户与产品互动的过程增添了乐趣和惊喜,以情感化的细节设计拉近产品与用户的距离,也强化了二次元平台的属性和平台形象。
b站播放界面下方设置声音、画面、播放模式等的小图标的hover状态,都有可爱的微交互小动画来反馈当前的操作。虽然都是不复杂的小动效,比如调节音量小喇叭图标会有声波震动,宽屏模式图标会有形象的拉伸效果等等,但这些小心思的加入让发生交互的过程立马变得生动有趣起来。「优设」和「优优网」也有类似的hover交互小彩蛋,大家有发现吗?
「躺平」App下拉刷新的微交互做得还挺有意思,当使用下拉的手势操作刷新信息时,会出现一个向下俯冲的小人。情感化的设计不仅为清晰呈现操作反馈增添了趣味性,也从细节的设计中强化了用户对App品牌形象的记忆。
「美团」iOS(V11.0.201)中,刚下的外卖订单在外卖小哥接单以后,在一级页面就会出现一个小地图窗口显示距离等信息,让用户可以清楚知道外卖距离自己的位置。显然缩短了用户查看外卖位置的操作路径。以前的版本在小地图这个位置是只显示商品清单的,要点击进二级页面才可以看到外卖到哪里了。
「猫耳」App的主页Tab栏上的吉祥物小猫会根据用户的操作行为做出实时的动画反馈。进入App未播放任何音频内容时,小猫会趴在Tab栏上打瞌睡;当播放音频内容时,小猫则蹲在Tab栏开心的唱歌。最有趣的是,如果在听直播的时候将直播间缩小再回到主页浏览时,小猫会呈现戴着耳机开心听歌的状态。
当使用「小米有品」App出现意外退出的情况再重新打开时,会显示一个引导页面:首先为用户道歉,减少用户的负面情绪;然后会为用户提供解决方案,帮助用户解决App意外退出的问题。解决方案用三个选项给出,分别为:「尝试重置应用状态」「查看帮助」和「试试网页版小米有品」。在用户着急下单的情况下,即使前两个选项无法解决App意外退出问题,用户也可以继续使用网页版小米有品进行购物,减少对用户购物流程的打断,提升用户体验。
进入到「樊登读书」App的个人主页,如果尚未签到的话,签到icon呈现方式是倾斜的,给人一种不稳定感。左右摇晃手机会发现签到icon也会随着一起晃动,增添了趣味性的微交互更能吸引用户的眼球,也更能引导用户进行操作。在用户签到完成后,签到icon则会立即恢复到水平方向,文字也从「签到有礼」变成「签到完成」。
作为「知乎」这样高质量文字向的内容社区,打动人心或者获益匪浅的PGC与UGC文案往往是最能抓住用户心的内容。团队很聪明地将「金句分享」功能作为为产品引流的主要分享形式。选中想要分享的文字即会出现「金句分享」选项,点击则一键生成分享卡片的预览页面,并提供多种精美的卡片模版可供选择。
在「小宇宙」App的单集播放页中,你会发现播放进度条和常规的滑块进度条有很大差别。除了具有常规的拖拽定位媒体的播放位置,还将用户的点赞情况进行了可视化传达。柱子较高的片段代表了较高的点赞数量,帮助其他听众直观了解单集中的「高赞」位置,提高了内容获取的效率与质量。
经常使用QQ的用户都知道,在好友长时间不回消息的时候可以用「抖一抖」来提醒对方。最新版本的「微信」上线了新功能「拍一拍」,在聊天窗口双击头像即可「拍」对方,对方的头像会抖动还会出现「你拍了拍Ta」的文字反馈。与QQ不同的是,「微信」不仅可以拍一拍对方,还可以双击头像「拍」自己。
「优剪」是一个互联网专业剪发品牌,用户剪发前需要提前在微信小程序预约再到门店。等待页有若干个图标展示当前等待人数,「剪发中」和「等待中」的小图标有所区别,细节到位。当前一位用户结束后,后一位会收到微信通知,避免了频繁打开小程序查看进度而降低用户体验。
使用「厨房故事」App选择好食谱,将所需食材加入「购物单」时会生成可用来勾选是否已购食材的表单。由于App的用户普遍是个人或家庭,用餐人数不会过多,这里通过步进器调整人数来查看不同食材的用量很合适。调整人数的同时,每个食材的用量都会跟着变换,能及时给到用户反馈。
为了保障用户账号的安全,登录账号或当账号异常时产品通常会启动需要用户手动操作进行的安全验证。「百度网盘」的安全验证使用了常规的右滑按钮完成,但加入了有趣的颜文字表情变化动效来加强验证过程的趣味性。情感化的设计细节为产品增添了温度,同时也起到了操作状态的及时反馈效果。
在信息拥挤的时代里,用户是否愿意在问卷回答中花时间呢?「脱水」在注册的流程中加入了问答测试题的环节,设置这步的目的显然是为了获取更符合产品定位的目标人群。但是在问答测试题里,「脱水」并没有采用传统的提交整份答案后生成报告的模式,而是以对话的形式提问。
在「京东」对购买的商品做评价时,如果用户的打分高于4颗星便会顺利完成提交。如果用户评分少于4颗星,会下拉展示出相关问题供选择,鼓励用户反馈问题以进一步优化和改进京东的服务。只在用户满意度低时展示出问题参考选项,通过另一种弥补的方式提升用户购物的满意度,这种交互细节的设计非常流畅。
相信不少「微信」用户都会充分利用「文件传输助手」来作为自己日常图文临时记录或文件传送的地方,它是一个较为隐私的「工具人」。如果某用户将用户名改成「文件传输助手」则会出现操作不成功的模态弹窗。这个细节的设计很贴心,可以有效防止一些很皮的用户假扮成助手,避免其他用户将内容信息误发出去。
「RemoveBG」是一款专业的AI抠图神器。当在网站上传的图片无法被处理时,页面会出现「抱歉……」的提示反馈,并告知你图片素材无法被识别的原因(比如「无法识别前景」)。
产品交互中细腻而舒适的振动反馈,往往让用户欲罢不能。「下厨房」客户端作为其中之一也贴心地设计了这一触觉反馈。用户在下拉刷新菜单过程中,会明显感觉到一阵短暂的振动,随即松手后页面更新内容完成刷新。