产品体验微交互(三)

1 评论 9163 浏览 12 收藏 15 分钟

编辑导语:产品页面有时需要根据特定的时间进行相应设计,一方面,这可以呼应节日氛围,另一方面也体现了不同产品当中的设计思考。本篇文章里,作者结合时事,对不同产品的设计交互细节进行了一定分析,一起来看一下。

前言

2021年7月1日是党成立100周年纪念日,为了庆祝建党100周年,互联网头部产品都针对这一值得庆祝的日子做出了相应的适配。笔者在这里挑选了几组值得借鉴产品共大家参考,有趣的是在面对同一时事不同类型的产品中内容适配的方式也有所不同,我们可以在其中看到许多的产品思考。

案例目录:

  1. 优酷
  2. 百度
  3. 网易有道词典
  4. 今日头条
  5. 爱奇艺
  6. 腾讯视频
  7. bilibili
  8. 喜马拉雅
  9. 得到
  10. 小红书
  11. 电商

一、优酷建党一百周年适配

1. 适配方式

顶部氛围层、建党百年视频专区、快捷搜索、推荐内容、专题页面。

2. 产品思考

优酷在产品首页的核心位置几乎都专门设立了百年的相关入口。

首先是顶部氛围层,其次是搜索框的内容提示将「建党100周年」作为搜索引导。在搜索框的左侧设立了「建党百年」的专题页面,在精选的banner运营区域将建党的相关内容作为运营位首位,在运营位的下方设立了「五个一百」快捷入口。

在笔者收集的诸多产品中,优酷适配的入口是做得最丰富的。从常用功能到快捷入口再到运营都有所覆盖。

3. 借鉴点

优酷针对百年内容的适配能给我们最大的借鉴点是在首页的入口上。在面对重要的节日或者热门事件时,我们可以参考这次优酷在哪些地方作出了适配。

比如搜索框的样式,以及搜索框的内容提示,将相关运营的banner放在了运营位的首位,专门为专题页设立了快捷入口,这些设计非常值得借鉴。

二、百度适配

1. 适配方式

顶部氛围层、品专区域、热门内容、底部tab栏。

2. 产品思考

百度搜索的首页顶部设立了专门的氛围区域,用于烘托百年气氛。在底部tab栏中也做了相应的适配,中间的语音输入按钮以红色常驻在页面中。点击顶部氛围层即可跳转到「建党百年」的搜索内容。

百度搜索专门为「建党百年」设立了品专区域,将相关的专题以及活动安排放在了首屏幕,将核心知识内容以金刚区的形式呈现。

3. 借鉴点

为了让更多的用户能够了解到建党100周年的相关信息,百度将建党百年的快捷搜索方式直接外露在了首页,当用户进入产品,会被顶部氛围层吸引,点击氛围层即可快捷搜索。

这一设计有利于增加「建党百年」信息的热度,让全民都热烈参与到百年庆典的氛围中。

三、网易有道词典适配

1. 适配方式

专题页面、联合中央编译出版双语热词。

2. 产品思考

与普通的方式不同,在氛围层中有道词典加入了【去参与】的按钮。这个按钮的位置与颜色非常具有引导。用户在进入了产品之后首先会被氛围层吸引,其次就会看到【去参与】的按钮,点击之后就会进入建党百年的专题页。

值得一提的是有道词典联合中央编译出版社权威发布建党100周年中国特色词汇标准英译,并作为专题页的第一个宣传视频进行播放。

但有道词典并没有单纯地制作相关的视频专辑,视频内容不是英语APP最有利的区域,有道另辟蹊径抓准了自己英语学习、翻译的定位,将英语学习与百年时事相结合,推出了建党一百周年中英双语热词翻译。这不仅加强了用户对于有道的品牌认知,同时还提高了产品的影响力与权威性。

四、今日头条适配

1. 适配方式

顶部氛围层、专题页。

2. 产品思考

头条与百度同为信息类产品,在适配上稍有不同。

头条在顶部同样放置了「建党百年」的氛围层,但想要查看相关信息则需要点击搜索框手动输入。用户可通过品专区域进入百年的主题页。

五、爱奇艺适配

1. 适配方式

顶部氛围层、视频专题区。

2. 产品思考

爱奇艺在适配上同样在首页采用了顶部氛围层进行氛围的烘托,其次是在顶部标签栏中加入了「建党百年」的视频专题页。在专题页中分别设立了「重点关注」「百年逐梦今朝圆」「时代骄傲出行拟炬」等相关内容。

可以看出爱奇艺的主要发力点是在建党百年的视频专区中。将相关视频合集整理在视频专区中,让观众回顾建党的历史。

六、腾讯视频适配

1. 适配方式

顶部氛围层、适配专区、顶部icon。

2. 产品思考

除了顶部氛围层,腾讯视频在右上角的icon上做了非常细致的适配,特别是最右侧的建党icon,在设计语言上与百年的元素进行的结合。

进入腾讯百年视频专区,能看到整个产品页面的背景色都做了适配,这能够让用户在该区域浏览的时候更加沉浸,并且顶部的海报完美地与底部的颜色进行了融合,这种海报与底部产品颜色进行融合的处理方式非常值得大家借鉴。

往下是八个短片入口在运营区,其次是将“理想照耀中国”优秀电视剧放在了运营位下方,再往下走都是与百年相关的视频内容,腾讯视频将所有内容进行了分类并且分了优先级展现给了用户。

七、bilibili适配

1. 适配方式

顶部氛围层、顶部标签栏、底部tab栏、主题影片。

2. 产品思考

bilibili在适配上主要的发力点是底部的tab栏以及顶部的标签栏。在顶部标签栏中专门设立的「建党百年」的专区。

值得一提的是,在这视频专区中,B站团队专门为「建党百年」制作了动画短片《为了出发的纪念》,不得不说使用动画短片的方式来庆祝这一盛事可以说是非常符合bilibili的产品定位。

在整个视频专区中同样将核心的相关内容以金刚区的形式呈现,每个金刚区中都内置了丰富的视频内容。

在笔者所收集的案例中,bilibili的底部tab栏可以说是专门做了适配,仔细看每个tab中的形象姿势等都专门做了精心设计,分别是学生敬礼的姿势以及拥抱未来的姿势,bilibili在tab细节上的处理还是值得借鉴的。

八、喜马拉雅适配

1. 适配方式

顶部氛围层、顶部标签栏。

2. 产品思考

与大多数产品的适配内容略有不同,喜马拉雅专门设立了听书专区,贴合产品定位,其中的内容都与「建党百年」相关。喜马拉雅利用了自己丰富听书内容的优势,将相关的听书内容在专题页面中形成了聚合。

在专题页面中还内置了具有不同内容的金刚区,有意思的是喜马拉雅将内容区分为了「为何学」「学什么」「怎么学」的区域。这可以帮助用户从为什么、是什么、怎么办三个角度去学习相关内容。

并且还专门内置了少儿党史的内容,之所以有这块内容是因为喜马拉雅的用户中有一部分用户是有给宝宝听故事的场景需求。可以看出喜马拉雅在产品目标上包含满足多用户多场景的内容需求。

九、得到适配

1. 适配方式

运营位、专题页。

2. 产品思考

点击得到首页运营区banner即可进入百年的专题页面。推荐的内容形式乍一看与喜马拉雅一样都是听书的内容,但仔细观察会发现也有略微的不同。

由于喜马拉雅用户职业范围更广,年龄跨度更大,因此推荐的内容必须满足多用户多场景的需求。反之得到的用户更为垂直,大多数都是已工作的都市上班族,更加渴望提升自我能力与修养,因此推荐的内容与单纯的学习百年资讯和相关内容不同。

得到推荐的内容更像是学习历史人物本身,得到推荐的书单有《想开过领袖学习功过方法》《决战》《党史商鉴》,其实我们可以从这里的书单中看出,得到想通过百年这一时事让当今的年轻人学习和了解更多的历史伟人。

十、小红书适配

1. 适配方式

底部tab栏。

2. 产品思考

对于大多数产品丰富的适配方案,小红书的做法则是聚焦在产品的底部tab栏。

首先我们可以看到底部四个tab的图标都采用了非常具有中国特色的标志物。其中有天安门、灯笼、华表以及国旗。其中天安门的图形作为了首页,在国外的产品中,首页的单词是“home”。而小红书将中国最能象征着家国的建筑天安门作为首页“home”的图标可以说是非常的巧妙。

其次是使用灯笼的图形作为商城的图标也非常贴切。因为灯笼一般会出现在灯会集市等活动,每当有灯笼的地方就会非常的热闹繁华,这其实也正好符合商城想要传达给用户热闹的气氛相契合。

十一、电商适配

1. 适配方式

顶部氛围层。

2. 产品思考

在电商相关的产品中同样都采用了顶部氛围层的方式进行气氛的烘托,也不约而同地同样采用了国庆的纹理作为氛围层的主要基调。

十二、结语

笔记在这里为大家收集了此次时事的产品适配细节集合,目的是给予大家更多纬度的参考。

面对同样是时事,不同的产品根据自己的产品目标、定位、内容以及用户做出了不同的适配策略。就算是相同定位的视频播放应用在适配上都做了不同的区分。

当我们自己在面对日常需求,不能只是单纯地思考产品需求,更应该依据自己产品的目标和定位专门定制设计策略,从而自己的设计能从诸多产品中拉开差距。

 

本文由 @黑羊 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 沙发🛋️

    回复