iSVG

基于开源共享精神的SVG交互图文搜索引擎·无偿使用·公益助力疫情下数字经济复苏

新春盲盒大放送,开启鼠年的第一份好运气|拟态游戏|迪士尼

抽签式 SVG 交互排版还能如何进化?荒村在迪士尼公众号套用了当下时兴的盲盒概念,让用户在图文消息中玩得尽兴。

回到未来|音频交互|迪奥

本文我们在制作过程中融合了包括音频播放器(新版)改造、GIF 控制器、渐进式序列等 CSS 与 SVG 技术,使得全文的互动感极佳。目前该效果可以在 SVG 黑科技编辑器(https://www.e2.cool/)中通过「GIF控制器」、「点击切换」等实现。

探寻星群间的遗落宝藏|动态设计|爱马仕

爱马仕本作通过简单的透明度动画与动静结合的图像设计,增加阅读趣味性的同时,保持了应有的格调。目前该效果可以在 SVG 黑科技编辑器(https://www.e2.cool/)中通过「点击渐现」实现。

怎样一碗面,才算至味海鲜?|轨迹动画|康师傅

康师傅的这款新品速食泡面据悉包含了 8 种海鲜,如何能让用户在阅读过程中充分记住这一产品特性?这一次康师傅选择了最顶级的互动式 SVG 图文排版来打动受众。本作是比较少见的像素风插画设计,上一次圈内的同类型作品大约要追溯到二十世纪福克斯的《8像素闯关小游戏》。不过要注意的是,本作像素设计源自 AI 网格生成,产生了庞大的路径代码。尽管 JZ 在开发过程中已经对大量路径进行了简化合并,但依然对旧版 iPhone 和低版本安卓有极高的负载压力,导致部分机型卡顿明显。所以建议,对于要采用像素风设计的黑科技互动长卷排版,颗粒度不应过细。

AI 已通过您的好友请求|互动测试|宝马

玄虚文案搭配交互技术——但凡宝马与「AI」主题有关的图文,总是呈现出令人百思不得其解的指纹识别、人脸识别、AI 分析等功能。本作又展现了一番 AI 的写作能力,实际上每个选项都捆绑了该题对应的一层二维码矢量点阵(即该二维码本身采用的矢量图形式)。当你把三道题都点选过之后,这个二维码就能完整可见。GL 在其中还增加了不少防误触设计,确保了答案仅能二选一,二维码区亦不可反向触发编组,细节之处见功力。

这是我们刚一起走过的五年|互动游戏|人民日报

人民日报依托熟悉的 2.5D 画风,展示了「十三五」以来中国经济社会的变迁。政务新媒体在长卷和 SVG 应用中已游刃有余。本文运用最基础的位移动画将大段的文字信息得以隐藏,提升了不少易读性。但是仍要指出在本文的位图交互中利用标签会在大量机型上翻车,不妨尝试嵌入位图,交互效果更为保险。

今年别再有遗憾啦。|互动游戏|不会画出版社

不会画出版社在新年来临之际为我们带来一篇佳作,本作是较为少见的一种像素风插画式设计,打造了一个身临其境的悬疑剧情式互动,巧妙结合 GIF 控制器和音频播放器美化,使音效完美配合画面,模拟出互动式视频的效果。同时为了避免加载过慢导致音画不同步的问题,将 GIF 切分为多个动画,进而通过连续触发合为一体。

升级归来 | Hi!很高兴芋见泥|古茗茶饮

本作结合惟妙惟肖的插画设计,生动演绎了一趟「芋见你」的列车旅程 。在每段路程中,将隐藏在每位乘客上的卖点逐步释放,同时配合丰富的细节效果,制作精良。赶紧体验一下由三千喵主持开发的黑科技交互作品吧!

CoolSITE360 提供 UI/UX 支持  Copyright © 2013-2023 iSVG
投稿/定制/培训:微信公众号、小红书「iSVG」

沪ICP备2022011523号