“我的小世界”——微博数据盘点H5设计探秘

111天前发布

原创文章 / 多领域 / 观点
微博BODC 原创,如需商业用途或转载请与微博BODC联系,谢谢配合。

微博年终盘点H5,是一年一度的个人数据总结项目。项目汇聚了用户一年来在微博上的生活点滴,引发他们的感知与回忆。

undefined


微博年终盘点H5,是一年一度的个人数据总结项目。项目汇聚了用户一年来在微博上的生活点滴,引发他们的感知与回忆。活动目的在于刺激用户活跃度,加强用户对微博的品牌认知。

2018年的项目创意方向,我们提出:年终数据,是用户一年来在微博的行为记录,它们组成了用户的微博空间。每个人都有与众不同的空间,就像属于他们自己的小世界一样。“小世界”的概念由此诞生。

这一年中,微博这个“大世界”分外精彩,世界杯、明星婚讯、毒疫苗。。。有喜有怒、有高潮有低落,用户的每一次发声,汇聚“大世界”的同时,也在形成自己的“小世界”。



1.超现实场景构思

我们将“微博小世界”定义为“来自于现实,又超越现实”的数据世界,并将这个概念贯穿在整个H5页面的构思、配色、转场与配乐中。

小世界的外观是一个“魔方”般的多维空间体,由9个“超现实”主题场景组成,每个场景承载着“展示用户不同数据”的作用。


在每个主题场景中,我们都加入了微博的标志性元素,搭配魔方、城市、宇宙星球等,寓意着:当下多元化的社会中,用户可以从多个维度来感受生活。


场景1.转评赞城市

城市代表生活,生活充斥着人与人之间的互动和交流。我们用虚拟城市这个场景来表现“转评赞”的数据。作为视觉中心的展示牌,显示着用户互动量最高的一条微博。


场景2.视频放映厅

这个场景模拟电影放映厅,安静、神秘,在暗色的场景中悬浮着大大小小、各种各样的视频,代表着用户一年来浏览或制作的视频数据。

undefined



2.配色与质感相结合打造梦幻世界
每个场景都采用统一的画面风格和质感,展现出相同的“超现实”基调。主色调烘托出每个场景独特的奇幻氛围,细腻的噪点与色块相结合,加强了场景空间感;辅色与主色产生对比,可以更好的突出画面视觉中心。

同时,用户化身为画面中的小人,穿插于场景中,随着H5页面的切换,仿佛自身去体验每一个神奇场景。



1.H5页面奇幻“不走寻常路”

小世界中,每个虚拟场景之间的切换,都需要“超现实”的表现方式,空间之间相互独立却又彼此联结。每一个画面都有一个“任意门”通往下一个空间,形式各样,可能是一本书、一扇门、一个窗口,或是一片星空、一束光、一面投影......每一次灵活的转场形式,都能带给用户意想不到的惊喜感。

undefined


2.动态化转场的实现难点

这个H5的转场动画,需要靠代码实现,我们在场景构思阶段,先制作出了动效demo,便于开发确认制作周期。同时,基于这个demo,我们共同制定了实现方案——页面的动态效果、转场动画,使用代码实现;元素内部动效,使用序列帧。

动画转场会涉及到很多视觉元素,元素之间的运动关系和位置都需要与开发详细沟通、尝试,以达到最佳效果;同时,为了保证动画流畅度,需要控制设计元素的大小和序列帧帧数,这也是在后期反复调整的难点之一。



“2018我的小世界”在上线第2天就达到了125万+的分享量,“2019年度关键词”深受用户的喜爱。关键词的打造中,我们将内容与微博用户诉求巧妙结合,用幽默的语言满足用户对自己的希冀,如:“帅的一无所有”、“因存款10亿而登顶热搜”、“同事脱发你脱单”等。


这些极具网感和洞察的创意点为用户带来了良好的体验,更能激发他们的传播和分享热情。同时,“换个预测词”的功能也满足了用户自主选择预测词的需求,激发用户多次传播,为品牌传播助力。


129
- 1位站酷推荐设计师推荐 -

    文章信息

    • 文章标签

    没有新消息