分享几个SVG思路,让交互为你的内容加分

举报 2022-12

| 写在最前:

SVG是一种交互图文形式,

但我们做SVG又从不止于交互本身,

让交互服务于内容,

提升内容阅读体验与信息感知,

才是合格有效的SVG交互。


|  图层重叠,镂空填充,形成对比感受


当有了某个品牌的加持后,不同人的生活会发生什么样的改变?这是一个很常见,但又必须不断去沟通的逻辑。

那怎么让用户更愿意接受和理解呢?我们以品牌颜色“橙”作为桥梁,“黑白画面”寓意人生的困难,当橙色注入生活后,问题便有了解决的思路。交互形式与内容相辅相成,实现有效传播。

1679456781709555.png

案例直达传送门


|  从一个主体不断发散,自动展开多层含义


深圳是一个怎么样的城市?不同人有着不同的印象和理解。借助自动伸长弹出的形式,丰富涵义逐一出现,给读者带来极强冲击感。搭配深圳这一特殊城市,充分调动国民自豪感,为内容带来高度认可。

1679457032548236.png

案例直达传送门


|  拟真老虎机,强化活动参与意愿


活动奖品多种多样,要怎么让用户感受到自己有机会获取到不同奖品?活动通过小程序参与,推文又该如何强化用户的参与意愿,避免流失?

我们的答案是从推文开始玩,通过定制老虎机交互样式,用户在推文里就能提前预测了解奖品,从而更愿意前往参与。

1679457180755241.png

案例直达传送门


|  多层展开,将剪彩作为交互无缝融入


随着第100家分行的开业,将前99家按地区划分并定制逐一点击展开的交互,进行一次全盘回顾。最后以共同“剪彩”作为交互点,邀请用户点击剪彩,共同开启100新征程。

1679457305926019.png

案例直达传送门

| 信息融入场景,随着用户阅读层层揭开


制作一个充满书籍的场景,众多线索埋藏其中。随着用户的滑动,逐一出现揭秘,让阅读更顺畅有趣。

1679457508306799.png

案例直达传送门

|  以影院为场景,揭幕交互感受精彩


一场重磅发布会,就像一出好戏揭幕,为观众呈现精彩。以“筑梦剧场”作为包装,邀请用户前来观赏,点击画面播放动画揭幕,整体收缩后进一步展开发布会中的一个个环节,正如一幕幕精彩画面。

1679457544617745.png

案例直达传送门


|  滑动“撕开”创意祝福


面对开工节点,结合开工送福这一大众有共性的传统习俗,定制撕福纸的创新互动,还原真实场景与动作,丰富读者的阅读体验。

1679457579754141.png

案例直达传送门

|  放映机形式,回顾历史关键画面

点击图片跳转查看


|  随机结果,实现抽签结果

直接点击图片跳转查看


|  用下滑形式,巧妙实现关灯与背后心里话

直接点击图片跳转查看


中国平安

Energy Trust 安瑞信杰

Energy Trust 安瑞信杰

 
数英评分
9.8
我的评分
谢谢
数英评分
9.8
我的评分

    专业评分

    专业评分已截止

    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    全部评论(3条)