「高级感」是一个模糊但又美妙的需求,在公众号高级交互排版中往往为我们所追求但又捉摸不透。而 E2 编辑器官方认为,所谓「高级感」其实可以被分解为视觉秩序、交互节奏与品牌调性的设计平衡。那么其中具体涉及哪些操作细节?本期为你解读。
缓动函数
高级感动态的数学密码
根据中华人民共和国《融媒体SVG交互设计技术规范》T/CASME 1609—2024 指导,SVG 设计“宜优先选择具备缓动函数的动画表达,能体现物理加速、阻尼感的动画为佳,动画细节宜尽可能表现出物理特性的生动感”。
知其然更知其所以然——“缓动函数”是对物理世界运动规律的创造性重构。缓动函数(Easing Functions)作为控制动画速度变化的数学公式,直接决定了用户对交互的心理感知。而“突兀” 是高级感的绝对天敌——线性动画(Linear)因缺乏节奏变化,常给人以直来直往的机械感;过度夸张的弹性动画(Bounce)则又回会消解品牌的庄重性。
所以在 E2 编辑器中,你基本不会发现纯匀速的动画模板或过分夸张的强烈视效,对于缓动函数我们主要研发采用如“0.42 0 0.58 1.0”、“0.76 0 0.24 1”这类兼容性佳同时体验自然的运动阻尼参数。
有时,用户会带着其他 SVG 效果向平台咨询是否可以增加某些看起来“生硬”的模版?但 E2 平台更多会以品质为立足点,站在真正关怀用户的视角有选择、有原则地确定平台内模板的具体类目及其特性。
如需了解平台中各色轮播等自动动画效果,可点击阅读《以SVG展示商品?26款轮播/滑动模板任你选择。》和《大开眼界:SVG轮播图创意组合设计》进行学习。
少即是多
以克制传递价值
早年在著名交互设计工作室 JZ Creative Studio 的《奢侈品公众号花式排版指南》分析中有所点明——最高级的动画往往最质朴。滚动广告、差速滚动广告、收缩滚动广告是 E2 编辑器中最为奢侈品、3C 数码品牌惯用的 SVG 轮播类型。而切换、渐现等是 E2 编辑器中最为奢侈品、3C 数码品牌惯用的 SVG 变化类型。
所谓「高级感」,很多时候已经体现在品牌方设计物料上。让动态元素服务于视觉焦点的构建,通过 SVG 交互设计适当强化阅读的仪式感,自然能让读者因格式塔心理学中的“闭合原则”而主动参与完成交互,对内容产生更强的心理认同。
尤其当下融媒体设计工作中,交互页面往往涉及多端同步,小程序、H5、SVG 都需要趋同,遵循“奥卡姆剃刀”原则以确保 Layout 能在多平台具备技术可行性。因而克制但鲜明的动画不仅能更直观呈现视觉物料品质,更能为交互设计提供安全的技术框架。
菜单交互
拒绝冗余和繁杂
以往在没有 SVG 加持的条件下,商品图文自上而下的堆叠往往显得冗长,平面设计师费尽心思才能勉强在一个维度下梳理所有的信息。得益于包括「无限选择器」等 SVG 模型在 E2 编辑器中的上架,其层级架构的精密性、触发方式的仪式感、反馈机制的精准性都得到了前所未有的提升。
对于微信高级交互排版而言,SVG 的引入既保持了页面的整洁性,赋予用户自主发现的乐趣,让操作本身成为一种享受。更重要的是,帮助读者明确当前所处的逻辑位置,避免迷失在信息中。正如设计师迪特・拉姆斯在“设计十诫”所表述:好的设计是显而易见的,它不会让用户产生困惑。
以下提供部分采用「无限选择器」菜单 SVG 交互的图文:
《父爱,可超越极限》
《画春天?来试试》
《有点新意》
《游园寻宝》
《大疆发布经纬 M30 系列、大疆司空 2、大疆机场及禅思 H20N》
结语
打造 SVG 图文的 “高级感”,本质是在代码精确性与创意突破性之间找到平衡点。无论缓动函数的合理应用,动画效果的克制选择,交互菜单的积极引入,都实则是品牌性格的量化表达。
最终,每一个像素的移动,每一处按钮的反馈,都应服务于品牌价值的传递。也由此,视觉秩序、交互节奏与品牌调性能真正实现平衡。