「小宇宙」App新上线「随声听」功能,解救选择困难症用户,方便大家探索更多有趣节目。「随声听」功能在交互与视觉设计方面,借鉴了老式收音机调频的界面以及左右滑动更换频道的交互效果。操作简单流畅又拥有情怀感和趣味性。
b站播放界面下方设置声音、画面、播放模式等的小图标的hover状态,都有可爱的微交互小动画来反馈当前的操作。虽然都是不复杂的小动效,比如调节音量小喇叭图标会有声波震动,宽屏模式图标会有形象的拉伸效果等等,但这些小心思的加入让发生交互的过程立马变得生动有趣起来。「优设」和「优优网」也有类似的hover交互小彩蛋,大家有发现吗?
「pott」是一款用照片打卡去过的地方并生成专属足迹地图的App。它的滤镜是基于用户可能游玩打卡的场景进行分类设计的,比如「咖啡馆」「火锅店」「市集」「艺术区」等。切换滤镜的动画也做的特别有意思,如同拆开一个一个锡纸包装的零食袋。
看多了近几年流行的扁平化UI界面设计,偶尔在产品里加入一些拟物化的设计会让人有眼前一亮的感觉。「喜马拉雅」App的「我要录音」功能界面就使用了拟物化设计,模拟了开盘录音机的样子。开盘录音机从20世纪出现开始就被广泛应用于录音棚、电台、唱片公司、电影公司等各个录音相关的专业领域,被发烧友们誉为「终极音源」。
ImgPlay是一款操作简单有趣的gif动态闪图制作App,可将相册里的视频、照片或者Live照片经过裁剪与参数调整加工成需要的gif动画。在gif的制作界面,画面速度调节的控件图标被设计成了兔子与乌龟的图案,用幽默的手法表现调节速度的快慢,增添了交互过程的趣味性和情趣。利用了类似手法设计操作控件的还有bilibili和iOS系统。
「QQ」的字体大小设置十分人性化,通过显示聊天与信息主页两个主要使用场景的界面,来让用户直观地感知当前文字的大小。修改文字的方式也很简单,拖动页面下方的调节滑块就能查看不同size的文字显示效果。选择合适的字号后退出当前界面即可,系统会自动保存设置结果无需进行额外操作。
为了纪念「哈利波特」20周年,「网易有道词典」App上线了「哈利波特的魔法词单」特别专题。在「有道词典」搜索「魔法世界」,即会出现一份重返霍格沃兹必备的魔法词单。将词单添加到自己的单词本进行学习背诵时,你会发现在搜索和学习魔法咒语的页面,会触发当前咒语实施在单词上的动效。
「即刻」App信息流的点赞图标会根据其所属圈子的属性变成不同的图形。之前的细节文章有提到过,关于平台团宠猫果果的相关话题圈子,点赞的图标会变成小鱼干点赞后icon还会变成鱼骨头。最近发现,其实很多圈子的点赞图标创意都很有趣:比如在名为「浴室沉思」的圈子,点赞图标是代表灵光一现的小灯泡;如果是「今天不开心」话题圈子,点赞图标为倒置的笑脸;在「拖延症互助会」的圈子,点赞图标则变成了小闹钟。
进入到「樊登读书」App的个人主页,如果尚未签到的话,签到icon呈现方式是倾斜的,给人一种不稳定感。左右摇晃手机会发现签到icon也会随着一起晃动,增添了趣味性的微交互更能吸引用户的眼球,也更能引导用户进行操作。在用户签到完成后,签到icon则会立即恢复到水平方向,文字也从「签到有礼」变成「签到完成」。
「得物」App 是sneaker和运动潮流文化网购社区,也是有名的第三方线上潮物鉴定平台。它的「发布鉴定」页面设计得十分人性化:为了避免用户不明确需要为申请鉴定的物品拍摄哪些细节图,上传照片的页面被拆分成多个照片添加框,并搭配了寓意明确的图标与提示文案。用最直观的图文呈现方式与步骤拆解,降低了用户进行陌生操作的门槛,将原本复杂的上传照片过程变得简单易操作。
打开「ZARA」App进入「本周新品」的页面,时尚感爆炸的大图会以瀑布流的形式展示出来,如同打开了一本时尚画报。通过「捏」的手势操作,可以将商品图缩小动态排列,提高了用户浏览商品的效率。商品图中间穿插了模特的名片,巧妙的将商品按照超模的演绎风格进行分类;同时空白卡片的样式则提升了页面的时尚感。
「余音」App是一款小众的音乐播放器,也是一本极简风格的独立杂志。音乐播放页面的动效设计模拟了唱片播放的过程:默认状态会显示音乐唱片的封面图片;点击播放按钮,黑胶唱片则会从唱片封套滑出并开始随着音乐转动。当暂停歌曲时,黑胶唱片会滑回封套与之完全重叠,仅显示封面图片。
「腾讯动漫」最近在icon的操作上简直是玩嗨了,点击日间/夜间切换的控件,会相应的出现太阳/月亮的红色图标。点击切换男女的控件,也会相应出现表示男女的标识。点击底部的金刚区,跳动的动画icon也充满了灵动性,能很好地激发用户的点击欲,增强参与感。
如果过了凌晨你还在Iconfont的网站上面搜索图标,网站的标志形象外星人头像会进入睡眠模式。戴上眼镜熟睡的形象仿佛是在提醒你:夜深了,不要熬夜加班工作了,这样会变成近视眼哦~当点击输入框,熟睡的外星人会立马恢复白天炯炯有神的形象。反复切换的形象变化,会不断的提醒用户注意工作时间,注意休息,非常有爱呢。
在「支付宝」扫码「哈啰单车」后,如果发现单车有问题的话,只需要直接在故障上报页面选择需要保修的部件,就能轻松完成故障报修的程序了。直接在故障反馈页面以拼图的形式列出可能会涉及的单车故障维修部位,避免了文字描述不清楚也很麻烦的过程,极大简化了故障上报的步骤。门槛的降低能鼓励更多人参与到反馈上报中来。
用小游戏模拟叙事,用交互动作推动情节发展是游戏「Florence」的一大创新。让玩家带入感极强的原因之一就是很多的交互动作设计都模拟了真实生活的体验:比如女主起床刷牙,需要左右滑动屏幕模仿真实刷牙的动作来完成(上下刷是不正确的刷牙方式,所以完成任务进度会很慢);而做饭的场景,则需要滑动屏幕里的平底锅,模仿炒菜让食物「受热均匀」的动作以达成任务。没有刻意的炫技,只有符合我们日常生活常态的动作模拟,每一处小细节都充满感动。
我们都知道空状态页面设计主要是告知用户当前页面没有内容,很多产品会通过各种有趣的插图来传达查找不到的空状态。「ONE」的插图使用了一个带有蜘蛛网的空书架来呈现,除了表达没有收藏的内容之外,似乎还有一种久置不理以至于结了蜘蛛网的味道。仿佛在提醒用户:似乎是时候该收藏点东西了。
FIMO是一款复古的胶卷相机应用,全拟物化的视觉设计从每一个细节忠实还原胶片相机的使用质感。它的滤镜切换功能完美模拟了真实相机换胶卷的过程,还还原了换卷和相机开盖的声音,有趣又具有仪式感。对于颜控党和情怀党而言,FIMO真的是宝藏App。
在「爱奇艺」 App预约直播内容后,会弹出一个弹窗页面显示直播相关的信息。这个弹窗页承担了演出活动电子票的作用,并且为了增强观看演出的仪式感,每个预约成功的账号会和线下看演出一样有自己独一无二的座位号(比如402排4号)。虽然线上看直播不需要真实的观看区域和座位需求,但给参与直播活动的用户分配虚拟的座位号码可以营造强烈的沉浸感。
「石墨文档」对于文档的隐私保护十分重视,当未登录或账号未获得授权时点击他人分享的文档链接,会出现「没有权限访问」的提示页面告知权限状态并提醒登录账号。提示页的图案为一道被虚掩着的门透出微光,巧妙地通过隐喻的形象呈现出无权访问的意象。