宝藏模版
往期推荐(点击阅读):
趣味效果|高大上|可爱风|年终总结I|年终总结II|循环特效|情人节I|情人节II|情人节IIII|妇女节I|妇女节II|儿童节I|儿童节II|儿童节III|618I|618II|父亲节|丝滑动画|端午节I|端午节II|滑动妙用|图片轮播I|图片轮播II|又红又专|中秋节I|中秋节II|双十一I|双十一II|世界杯|感恩节|圣诞节I|圣诞节II|新年|兔年春节|元宵I |元宵节II|愚人节|杂志范儿|520/521I|520/521II|五一旅游I|五一旅游II|母亲节I|母亲节I|多巴胺|微博|夏日氛围|大唐国风|反诈宣传|七夕节|CityWalk|开学季II|开学季II|校园主题|揭露丑恶真相|运动会I|运动会II|十一|万圣节I|万圣节II|冬季氛围|新闻宣传|春节红包I|春节红包II|龙年春节|开工新品|地球日|问答题
各位黑科技编辑器的会员,编辑器内 1700+ 的 SVG 正版组件你们都用过吗?当下人工智能火热,尤其问答式 AI 助手如雨后春笋般涌现,那么如何模拟如 ChatGPT、Deepseek 等产品的对话效果设计 SVG 交互呢?来看看本期推荐吧!
层层伸长
如《来和AI谈谈你的购车需求》所示,AI 问答以短句为主,故可以采用图文层层伸长,露出对话内容的方式进行 SVG 黑科技排版:
点击《黑科技编辑器|层层伸长教程》查看具体的操作方法,所需素材为长图的逐段切片。并且在 黑科技编辑器内你可以根据实际需求选择自动运行或点击运行的不同启动形式喔!
伸长套伸长/多段伸长
伸长的组合方式不仅有层层递进,也有连续嵌套。你可以根据具体的设计效果选择这两类不同的组合方式以表现人工智能问答,正如《发烧友请稍等,AI回答生成中……》所示:
对于伸长套伸长,请务必查阅《黑科技编辑器|伸长套伸长SVG教程》并准确对照图示的参数计算公式;对于多段伸长,则请务必查阅《黑科技编辑器 | 多段伸长教程》中对素材的要求。另推荐 Ceep 的老师相似案例解析。
点击伸长(多次并列使用)
将任何伸长类 SVG 模版并列重复使用,如《今天,涨一点「她知识」》这般也是一种便捷而巧妙的黑科技排版方式:
这种 SVG 互动排版方式也广为其他头部品牌使用,可以通过 Ceep 老师录制的专题视频课看看 Apple 的应用策略。
AI界面动效模拟
通过 GIF、SVG 等手段,运营人也可以采用更高阶的制作手法复现 AI 界面内的各类交互。
如《今天文案失联了,本内容由DeepSeek发出》、《关于AI原生应用,你想知道的都在这儿!》、《今年端午,360智脑“复活”了屈原》较多采用了「连续GIF控制器」等,将预先准备好的动态图连续播放。
而《A I 交 流 群 ,请 进 !》(JZCreative 定制开发级 SVG)、《本条 SVG 由 Deepseek 生成中...》则更上一层楼,显然已经真正通过 AI 介入进行了纯 SVG 动画的开发……
对于高阶的 AI+SVG 式特殊项目定制级开发,黑科技 SVG 编辑器将在新一期的高校「英杰计划」公益免费培训项目中传授。如果你的高校组织有意参与,不妨先行完成免费的「高校机构会员」申请,获取编辑器的全部组件能力(UGC 专区除外)。
点击-伸长/点击-播放GIF-伸长
《嘿!DeepSeek,你觉得 TA 怎么样?》《听说这样拜年,红包拿到手软?》通过简洁明了的单次伸长,同样也能基于优秀的视觉设计呈现出 AI 风格:
点击-收缩切换-伸长
带有收缩特性的伸长,能给用户一种“焕然一新”的氛围烘托,正如《我们让文心一言写了一封邀请函》所示:
在黑科技编辑器的组件搜索功能内查找「点击-收缩切换-伸长」组件即可使用!请查看《黑科技编辑器|点击-收缩切换-伸长(100%)教程》了解它的基本操作方法。
切换图片+伪音频视频
在 SVG 动态的基础上,我们近一步融合 AI 音效体验,参考《全新升级,真正能歌会笑的豆包来啦!》可采用音画同步的方式表现人工智能产品特性:
在黑科技编辑器的组件搜索功能内查找「切换图片-伪音频视频」组件即可使用!请查看《黑科技编辑器 | 切换图片+伪音频视频教程》了解它的基本操作方法。
多叉树答题
《名额有限,点击穿越1950年》是由意符文化开发的定制级作品,让我们共同来欣赏:
在黑科技编辑器内你可以通过如「二叉树答题」在一定程度上模拟,当然页也可以基于「二选一切换」实现单屏单次操作,当然还可以点击《答题型SVG模版汇总》查看更多答题式 SVG 互动的排版策略。
更多海量模板,平均不足 1 元!
黑科技编辑器秉持着让行业“人均 SVG”的生态理念,由多位黑科技排版设计的头部资深开发者共同打造,斩获包括法国设计奖、美国缪斯创意设计奖等诸多国际赛事大奖,帮助更多品牌以可视化形式完成互动式图文创作。如有任何特效灵感和建议,也欢迎通过客服向我们提出,编辑器将竭诚思考代码转化的可行性。
会的比别人多一点