乙木互动(赵阳)是 NBA 公众号的长期 SVG 技术支持团队,这一篇轨迹动画为主体的伸长式图文融合了大量的微动效设计,可以说是 SVG 动画集大成者,交互体验堪称完满。
由 JZ 为 Tiffany 开发的本作中运用了挤压伸长切换模型,分别展示了 8 款产品内容。该模型能够有效地折叠信息,减少读者的阅读压力,且动画效果丝滑流畅。目前部分效果可以在 SVG 黑科技编辑器(https://www.e2.cool/)中通过「挤压伸长切换」等实现。
JZ 在本期大作中,通过特殊手势
由池灵文化带来了这一期少见的双击手势控制设计。通过模拟手机通知的交互界面,充分贴合了本期主题内容,并以弹出式海报等二层交互结构方便用户高效查阅。
「点击-切换-伸长」纵然简单,在设计时却可见运营人水平高下。网易三三星球的这期读书日主题策划中,长按变化、伸长动画等结构都并不复杂,但伸长结构尾部在设计时细节的出血空间设定,让这个基础的交互结构阅读起来更显人性化。目前该效果可以在 SVG 黑科技编辑器(https://www.e2.cool/)中通过「点击-切换图片-伸长」实现,出血设计的尾部边距由紧跟的「无缝图」实现。
一首诗歌穿越古今,让相似的场景一幕幕重现。这篇网易哒哒宣传诗歌文化的图文,所采用的交互模型非常简单,但通过巧妙的视觉设计,勾勒出了一幅幅别样的历史转场效果。目前该效果可以在 SVG 黑科技编辑器(https://www.e2.cool/)中通过「点击渐现」实现。
CoolSITE360 提供 UI/UX 支持 Copyright © 2013-2023 iSVG
投稿/定制/培训:微信公众号、小红书「iSVG」