在「饿了么」点餐后,app会用可视化的信息展示从店家配餐到骑手接单、取餐、配送的全过程。让点单者对自己的外卖是如何送达的每个步骤都清楚明了,用信息的透明化获得用户的信任。除此之外,展示外卖配送信息的页面还有情感化设计的小巧思:商家接单时,图示会在地图中显示店铺的卡通形象;骑手接单后,信息会定位到骑手,画面展现骑手骑车赶往商家的样子。
真实世界里所有的物体都有其独特的质感,交互设计里动效的表现也应有自己的个性与质感。所谓交互动效的质感,最常见的体现就是对动效速度与节奏的微妙把控。「榫卯 」作为一款体现传统民艺文化的App,不仅视觉设计出众,交互体验也十分让人惊喜。
春夏秋冬四季更替,每个季节都有属于自己的个性与色彩。「有期」App通过传统农历与物候插画的结合形式,让无形的时间与节气在这里显像。你可能从未发现,「有期」界面的色彩看似每日相同,实则却是随季节变迁而微妙变化的。
在2019年的春节贺岁档,我们终于迎来了一部属于中国人自己的硬科幻电影 —「流浪地球」。尽管影片存在很多不完美,但中国导演能在现阶段拍出硬科幻且让影片在诸多现实条件限制下达到这样高的完成度,已是一件让人激动与倾佩的事。当在「百度」搜索栏输入关键词「流浪地球」进行检索,页面会触发电影专属的飘落小地球🌍图案的彩蛋。
你是否也曾羡慕古人文雅精致的生活?「每日故宫」用电子文物日历带你梦回前朝, 掌上观展。App的中国古典美学之美体现在视觉、交互与动效设计的每个小细节之中。
很多人每天工作前的第一件事就是打开邮箱,看看有什么新通知并检查一下行事历,确定任务安排。在「Outlook」 App 的行事历界面翻看日历列表时,导航栏上的日历图标会出现翻动的动画效果。利用左右摆动和前后翻页的动效来告知用户,现在正在翻看以往的内容还是未来的安排。
「支付宝」的「蚂蚁会员」会根据用户的积分情况匹配不同的会员等级,会员界面的皮肤也各不相同。会员卡的设计模拟了真实生活中会员卡的质地和视觉效果。比如「黄金会员」的会员卡,在晃动手机时,你能清晰地看见会员卡的光泽质地和流光效果。
「网易云音乐」新版本更新,悄悄上线了一个名为「Sati空间」的新功能。从「我的音乐」页面进入「Sati空间」,会出现一个满屏都是泡泡的页面并自动开始随机播放音乐。这其实是「网易云」新出的「解压模式」,在这里你可以一边听音乐,一边无限戳泡泡来解压。
「网易云音乐」在去年上线了解压模式「Sati空间」,用户可以进入这个模式边听音乐边戳泡泡来释放压力。如今提供给用户减压的互动小游戏不仅有「戳泡泡」,还新增了「砸玻璃」。用力敲击屏幕,会出现玻璃被敲碎的视觉效果并伴有震动反馈,带给用户一种多感官体验的爽感。
还记得「榫卯」吗?这次TagDesign团队又推出了另一款中国风民艺与教育App「折扇」。我们可以在这里欣赏当代画师的佳作,了解折扇的工艺与历史。
「作文纸条」App对于每日信息与文章的推送有着自己独特的设计逻辑,如果推送内容用户当天未读,系统会将推送内容自动移到「废纸篓」里。为了让用户在浏览「废纸篓」内容时,明确感知到被删内容与正常内容的差别,躺在「废纸篓」里的信息视觉上模拟了揉皱纸团的形象。如同我们在现实生活里,会将写作时不满意的内容从笔记本中撕掉并揉成纸团丢进垃圾桶的行为一般。
「作文纸条」每日提供的长文素材内容,自带「不阅即焚」功能。素材推送当天未被查看的长纸条会在用户下一次登录App时,出现「碎纸机」当着用户的面将纸条销毁并丢进「废纸篓」。只有通过参与平台的活动获得「万能胶」,才能从碎纸堆里将纸条恢复。
通常各大网站和应用的「搜索」功能,除了具备其基本的信息查找属性,还会常常隐藏很多惊喜和彩蛋。比如在「百度」里搜索某些关键词,就会触发一些神奇的效果,非常有趣。搜索关键词「DUANG」,搜索结果页面就会出现晃动的交互效果生动演绎这个词的特点。
在iOS12的控制中心面板里,不仅藏有计时器图标和手电筒图标动态变化的小彩蛋,屏幕亮度的调节操作也伴随着很隐蔽的小细节变化。当手机屏幕的亮度被调得较低时,控制中心里表示亮度的小太阳图标呈现圆点样式的光芒。当亮度被调高,太阳图标的圆点光芒则会慢慢变成向四周发射的线状。
InPieces 是一个关注濒临灭绝动物的公益组织创办的HTML5特效网站,借此来呼吁人们关注这些濒临灭绝的可爱动物们,保护生存环境。折纸风的视觉效果,仅三角形碎片的破碎重组和转换变化展示了30个世界范围内濒临灭绝的物种。网站的loading页面延续了整体网站的视觉元素与风格,十分酷炫。
在NOMO App下载TOY F 相机后,正式使用相机前会有十分有趣又极具仪式感的拆机环节。模仿真实世界里拆开相机包装的场景,开启新相机需要按照引导指示用手指在屏幕上滑动「撕开」包装袋来完成。将用户熟悉的物理行为与抽象的交互行为相关联,为互动体验增添了真实感与趣味性。
跑步用「Keep」做数据统计,在App里可分别根据「距离」「 时长」「 配速」 和「热量」进行目标设定。 其中热量值的设置除了会显示数字指标外,还会将每一个热量值所对应的食物信息显示出来,并配有可爱的emoji图标。用具象的食物对比非常抽象的千卡数字更直观,适合时宜的信息呈现方式让用户更加清晰明了运动量和食物之间的关系。
所谓「护眼模式」,通常是指经过智能调色,添加黄、红、绿的颜色以及降低屏幕亮度来使屏幕变暗变黄,从而达到缓解用户用眼疲劳的作用。新浪微博从「普通模式」切换为「护眼模式」的过程,并不仅仅是通常机械化的模式切换,页面顶部还会在模式转换的过程中出现模拟太阳升起与夜幕降临的小动画。情感化的设计,在给用户提供操作反馈的同时也为产品增添了趣味性与亲切感。
「石墨文档」对于文档的隐私保护十分重视,当未登录或账号未获得授权时点击他人分享的文档链接,会出现「没有权限访问」的提示页面告知权限状态并提醒登录账号。提示页的图案为一道被虚掩着的门透出微光,巧妙地通过隐喻的形象呈现出无权访问的意象。
B站最近在iOS版本的「弹幕设置」里,添加了奔跑中与慢走中小人儿的图标来分别表示弹幕速度调节的快与慢。这个小彩蛋与 iOS里用兔子与乌龟的形象表示「朗读速率」快慢的调节类似,都运用了形象思维将抽象的 「速度」概念具象化。让用户对抽象概念的感知更直观清晰,也为交互体验带来更多趣味性。