热评 云Pro

感觉产品设计里用点小比喻真挺妙,这个飞机图标飞来飞去,一下就让用户懂了啥是飞行模式,既好玩又好记,设计就得这么贴心接地气!

优设主编出品!盘点8个让人印象深刻的产品隐喻设计细节

大家好,我是优设独家栏目「细节猎人」的主编小白@-AmberDu 白-

本期《主编出品!盘点产品设计细节》系列,将带您探索 App 产品设计中别致的「隐喻设计」实例。在设计领域,「隐喻」(Metaphor)是通过比较或类比不同但相关联的概念,将用户熟知的事物和概念与产品的功能及操作相融合。这种手法能让陌生复杂的操作变得简单易懂,助力用户更快上手。不仅能提升产品的易用性与亲和力,帮助用户更深刻地理解信息,优化使用体验;还能增强产品的记忆点,触发用户的情感共鸣。

一、从「月之暗面」到「月之亮面」

Moonshot AI 团队独具匠心,将「Kimi 智能助手」的浅色模式命名为「月之亮面」,深色模式则称作「月之暗面」。这一命名既与公司中文名「月之暗面」相契合,又赋予科技以诗意。整体设计上,巧妙引入「月相」隐喻,每种模式配以相应的月相 emoji 图形,创意与趣味并存。这种与品牌相关的隐喻选择,不仅增强了用户的情感共鸣,更成功塑造了品牌的独特个性。

优设主编出品!盘点8个让人印象深刻的产品隐喻设计细节

二、怎样通过用户熟悉的物理意象来展现抽象的交互行为?

当启用 iPhone 的「飞行模式」时,你会看到一个小飞机图标优雅地从屏幕顶部状态栏左侧飞入视野;而当你关闭此模式时,这架小飞机则会向屏幕右侧飞去,直至消失在天际。同样,当你将手机调至「勿扰模式」时,页面顶栏会上演一场月蚀动画,取消该模式时,月蚀图标则会慢慢淡出视线。这些精致的动画效果,都巧妙地运用了用户熟知的物理意象,将抽象的交互行为具象化,使得手机模式的切换变得直观且富有情趣。通过这种隐喻手法,复杂的手机功能被转化为更易懂、更亲近的视觉符号,帮助用户更快地理解与掌握。

优设主编出品!盘点8个让人印象深刻的产品隐喻设计细节

三、如何巧妙将品牌元素融入会员等级设计?

「网易云音乐」的会员成长等级及特权展示,结合了贯穿产品始终的黑胶唱片转动元素来做信息可视化呈现。不仅为翻看不同会员等级的交互过程增加了趣味性,每次等级切换都如同转动黑胶唱片,更在视觉与交互上保持了产品的概念与元素统一,进一步强化品牌形象。这种与品牌紧密相关的隐喻设计,不仅增添了用户体验的丰富性,也进一步传达了「网易云音乐」独特的品牌个性和核心理念。

优设主编出品!盘点8个让人印象深刻的产品隐喻设计细节

四、充满幽默感的产品操作控件设计

ImgPlay 是一款操作简单有趣的 gif 动态闪图制作 App,可将相册里的视频、照片或者 Live 照片经过裁剪与参数调整加工成需要的 gif 动画。在 gif 制作界面,速度调节控件以兔子和乌龟为图标,分别象征快速和慢速,这种幽默的设计不仅为操作过程增添乐趣,更巧妙地通过隐喻将抽象的速度概念转化为直观易懂的图形符号。类似的设计理念在 bilibili 和 iOS 系统中也有所体现,都是「隐喻」在交互设计中的巧妙运用。

优设主编出品!盘点8个让人印象深刻的产品隐喻设计细节

五、bilibili 播放界面的图标 hover 小彩蛋

bilibili 播放界面下方的小图标,在 hover 状态下都拥有精巧的微交互动画。当调节音量时,小喇叭图标会呈现声波震动的动态;切换到宽屏模式,图标则形象展示拉伸效果。这些微妙而动感的设计,虽不复杂,却为交互过程增添了趣味性和生动感,使操作更加自然顺畅,也更符合用户的心理预期和直觉。

优设主编出品!盘点8个让人印象深刻的产品隐喻设计细节

六、b 站「弹幕设置」里的奔跑小人儿

在 bilibili 的弹幕设置中,我们再次见证了隐喻设计的巧妙运用。当调节弹幕速度时,界面上奔跑的小人儿代表「快速」弹幕,而慢走的小人儿则象征着「慢速」。这种设计与之前提到的画面速度调节中的兔子与乌龟图标异曲同工,都是通过隐喻的手法,将抽象的速度概念转化为直观、易懂的图形符号。这样的设计不仅使用户对速度调节有更直观的感知,同时也为交互过程增添了不少趣味性,让用户在享受便捷操作的同时,也能感受到设计的巧思与温度。

优设主编出品!盘点8个让人印象深刻的产品隐喻设计细节

七、电子书也有包书皮的仪式感

「蜗牛读书」为电子书的管理设计引入了「包书皮」的概念。在「我的书桌」页面,点击右上角的「整理」按钮,会呼出「包书皮」的选项界面。用户可为电子书披上精美书皮,既美化阅读界面,又能通过同款主题(如「想读」、「二刷」、「已读」)对书籍进行有序分类,既美观又实用。此举不仅增添了仪式感,还巧妙地将常规分类书签与包书皮结合,既减少了用户主动分类的繁琐操作,又通过这一富有趣味性的方式,激发用户的整理欲望,轻松完成书籍分类。

优设主编出品!盘点8个让人印象深刻的产品隐喻设计细节

八、网易云音乐暖心的「抱一抱」彩蛋

在「网易云音乐」的评论区,隐藏着温馨的「抱一抱」彩蛋。只需在任意歌曲评论区,用双指轻轻捏合,便会触发两个小人拥抱的动画,同时被拥抱的评论区作者头像上会显示「收到了抱抱」的提示,这一设计充满了温暖和爱意。通过将隐喻与手势交互的巧妙结合,不仅为设计注入了情感,更深化了品牌的核心价值观与理念,传递出「网易云音乐」对用户的深切关怀。

优设主编出品!盘点8个让人印象深刻的产品隐喻设计细节

以上就是本期的内容,希望能为大家带来启发和收获。请不吝点赞、收藏或留下宝贵评论,大家的支持将是我持续创作的动力。同时,诚挚邀请更多小伙伴加入我们,成为「细节猎人」作者团队的一员,一起发现产品设计的美好 :)

微博:@-AmberDu 白-
qq:1662900478
「细节猎人」主页 https://www.uisdc.com/hunters
「产品知识索引」 https://www.uisdc.com/alltopics#app
「细节猎人」投稿通道 https://www.uisdc.com/contribution?type=hunter

收藏 21
点赞 50

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。