SVG微信交互图文|一周案例汇总,一起回顾上周新鲜出炉的优质案例

从本期开始,每周汇总「小编备用」一周优质商业案例,一起探讨交互技术如何为品牌服务,呈现缤纷多彩的推送内容。通过笔者筛选,根据交互技术分类上一周的商业案例,下面来回顾上一周又有哪些炫酷的出色作品:

一、公众号轮播banner(手动切换)

小编备用《@全体客户 你们要的 Banner 来啦!》

应客户交互需求,「小编备用」首席设计师2H操刀开发设计仿真网页banner。效果如上所示,实际上展示的图片切换技术,可以实现由用户自主控制的,不限方向的轮播切换(A←B←C←A→B→C→A)。主要效果:点击左右箭头,图片切换后,左右两侧内容透明度自动降低;点击画面中央,跳转对应链接,除此之外点击底部圆点,也可以实现跳转画面。无限次循环切换,满足你对banner 的一切想象!

此类效果适用于:多组图片展示,产品图、现场图等;往期文章汇总,设置跳转链接;文章首尾Banner,每期推送的固定组件设计。


二、连续点击:

点击触发的交互技术并不少见,比如上周「小编备用」交付于品牌方的梅赛德斯奔驰和华为终端云服务的作品案例,都是基于点击效果,连续触发不断与界面产生交互同时获取新的信息。而下面推荐的这两篇图文巧妙之处在与内容的结合,与点击互动相契合,视、触觉双重展示模拟真实翻页效果。除此之外,点击切换大大降低了学习成本,用户会基于操作惯性,自行寻找触发位置,使得简单点击切换效果发挥最大效能。

华为终端云服务+《点击开启2020美好回忆》
梅赛德斯-奔驰《忍不住,想安利一本书》


三、穿透触发弹出大图:

穿透触发弹出大图的技术也是结合了点击切换图片的效果,通过点击弹出所见区域外的图片,也帮助用户快速获得交互惯性,自行寻找触发区域获取信息的惊喜感。在宝马的推送中利用了穿透触发效果,将精美的图片壁纸融入推文里,实际上是种彩蛋的设计,丰富了用户的阅读体验。另外在新加坡旅游局的推文里,GIF图片里嵌入穿透触发区域,制造出漂流瓶的娱乐效果,利用用户的好奇心去执行交互行为。

宝马中国《该怎么去形容你?冬天》
新加坡旅游局《“黑石号”沉船文物国内首展最后召集│打开沉没海底千年的时间胶囊!》


四、多级展开:

基于「小编备用」研发的图文高度拉伸展开效果的迭代升级,现推出了连续点击图文多级展开效果,通过多个高度拉伸模块叠加实现,可以在内容展开后,再嵌入多组展开效果。这类套结构适用于内容递进展示,比如威马汽车推送中,将产品福利持续加码在向下展开的内容里,阅读逻辑具有推进关系,可以持续激发用户的阅读兴趣。其次,也适用类似好利来推文中内容分段展示的效果,将一个产品的多种特性分段展示,通过多级展开一一罗列。

威马汽车《双12威马任性购车节,开开开开开奖时刻》
好利来《好利来×KitKat,圣诞限定巧克力脆脆系列,一起咔嚓咔嚓》


五、➡️滑动➡️

滑动布局是交互图文中较为简单的一类效果,技术原理上是利用了<dir=“rtl”>属性控制文本的左右排列实现右滑效果,例如腾势电动汽车推送所示。基于以上技术原理,「小编备用」首发了图文内的滑动分割创意,参考一加科技推文交互效果,用户可以滑开视频露出底图,保留部分前景元素在屏幕中,与滑开露出的内容构成新的信息展示,使整篇文章交互体验非常流畅,顺其自然。

腾势电动车《这个冬天,稳了!》
一加科技《七周年,我们的 7 个关键词》

如想了解更多精彩案例,持续关注「小编备用」!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容