通过前几篇文章的案例介绍可以看到,基于SVG技术的图文具有超强互动性,内容输出上也极具创意的表达,相比于H5拥有较低的制作成本却同样展现出色的交互性。今天给大家带来的佳作是由「小编备用」开发的拟态h5换装游戏创意图文,以交付梅赛德斯—AMG《听说你很会“装”》为例。
本篇模拟H5合成海报换装类游戏,用户只需通过简单的点击选择,DIY自己的海报作品。这是基于<foreignObject>和<svg>嵌套编组呈现元素的多层次变化,形成交互层级选择变化效果,实现用户自定义选择的个性化操作。而本文较为可贵之处在于,我们将创建海报的过程分成4步,通过最简单交互设计消除不必要的选择内容,让用户按照一定的步骤在每一页少做选择,营造了一种较为舒适的用户交互体验。在用户交互心理学的席克定律上,「人在面临选择越多的时候,所要消耗的时间成本越高」,所以我们需要保持足够简洁的交互设计,减少了用户所消耗的成本,提高推文阅读效率也有效的传达信息,就能让用户快速执行达到交互效果。
基于以上所述,「小编备用」还为品牌方交付了多种拟态H5换装游戏类优质交互图文:
1、爱学习平台《哈哈哈哈哈全国老师都长这样吗?》
2、费森尤斯卡比中国《今年的感恩节祝福,只需要点点点点点...》
最后,期待我司的SVG技术的开发者们,给我们带来更多极具创意的交互技术孵出出色精彩的推送。