内部参考 潮酷街头系 大世界 ARPG 系 6 款产品 可运行动效 Demo

把「演出」
变成「界面」

《凡应》的长板是影视级演出——抽卡要跨世界、送礼要 QTE、剧情几乎不给对话框。
但演出是一次性的,动效是可以复用的。这份报告要解决一件事:如何把「看一遍就没了」的演出资产,降维成一套贯穿全局、可复用、可交接的界面动效语言。

报告对象
《凡应》UI / 动效线
竞品方向
潮酷街头系 + 大世界 ARPG 系
拆解维度
节奏 · 缓动 · 空间 · 反馈 · 听觉
产出日期
2026.10.14
00

先统一一套拆解语言

看录屏不能只看"好不好看"。下面五个维度是本次拆解所有竞品的统一尺子——每个竞品章节都按这个顺序走,方便横向拉平比较。

1
节奏 Timing —— 多快算快 界面动效的"快"不是含糊的感觉,是可标注的毫秒。行业基线:即时反馈 50–100ms / 常规反馈 150–300ms / 状态切换 250–400ms / 页面级转场 400–600ms / 仪式感揭示 600–1000ms+。铁律:退场比进场快 20–30%(exit < enter),否则用户会觉得"点了没反应"。
2
缓动 Easing —— 情绪藏在曲线里 同样的位移,曲线不同气质完全不同。ease-out 进场(减速抵达)/ease-in 退场(加速离场)/cubic-bezier(.34,1.56,.64,1) 回弹(潮酷/卡通感)/近乎 linear + 分段(机械感)。潮酷系的曲线特征 = 大 overshoot + 快速 settle,克制系则是几乎零过冲。
3
空间 Spatial —— 是在"翻页"还是在"运镜" 这是二游 UI 动效的分水岭。2D 平铺式:界面在原地淡入淡出、左右滑。空间化:镜头推拉、视差分层、界面挂在 3D 场景里。空间化 = 更高沉浸感,但也 = 更高成本 + 更高眩晕风险。
4
反馈 Feedback —— 分不分层级 好的体系会分三级:一级(核心操作/关键确认)给重反馈(粒子 + 震动 + 音效 + 形变);二级(常规按钮)给轻反馈;三级(装饰)只做循环待机。如果所有按钮反馈强度一样,等于没有反馈。
5
听觉 Audio —— 动效的另一半 终末地给我们的最大启发不是视觉,是"点击反馈音 + 机械运转音"和动效的同步咬合。动效做到 90 分再配一个错拍的音效,体感直接掉到 60 分。这一点在本次所有竞品里都是加分项,也是最容易被我们忽略的一项。

时长基线表(可直接作为内部评审标尺)

场景时长缓动
按钮按下回弹100msease-out
微交互 / 勾选 / Hover100–150msease-out
常规面板浮现200msease-out
同模块界面切换250msease-in-out
卡牌翻转 / 状态变更300msease-in-out
跨模块页面转场400–500mscubic-bezier(.16,1,.3,1)
抽卡 / 成就 / 掉落仪式1000–2000ms自定义 bounce
成就徽章弹出500msspring

四个必须先对齐的工程底线

只用transform 和 opacity 做动画。动 width / height / top / left 会触发 layout,移动端必掉帧。
100ms 内任何点击都必须在 100ms 内有可见变化,否则用户会二次点击。
60fps单帧预算 16.6ms。演出级资产(粒子、多层视差)要按机型分级降级。
可关闭必须提供"减弱动态效果"开关,去掉视差与自动播放动画——这是无障碍要求,不是选项。

缓动曲线图鉴 —— 情绪就藏在这条线上

同样的位移、同样的时长,换一条曲线,气质完全不同。左边是曲线的数学形状(灰框 = 起止范围,虚线 = 线性参照,蓝点 = 贝塞尔控制点), 右边是同一条轨道上的实时对照:橙块按该曲线跑,斜纹灰块按线性跑——两者拉开多远,就是这条曲线为你争取到多少"戏"。

全部曲线周期相同,点「全部重播」后它们起点对齐,可以直接横向比谁先到。
按该曲线运动 线性参照(匀速)
匀速 · linearlinear
只给连续旋转、进度条推进这类"机器在运转"的场景。UI 里用线性做进出场,会显得又笨又机械。
减速进场 · ease-out0, 0, .2, 1
元素进场的默认答案。快出来、慢落定,符合物体被"送进来"的物理直觉。
加速退场 · ease-in.4, 0, 1, 1
退场用。起步慢、离场快,像东西"被抽走"。退场时长要比进场短 20–30%,否则玩家会觉得点了没反应。
标准状态切换 · ease-in-out.4, 0, .2, 1
两头都有缓冲,位置变化、选项卡互切、列表位移的通用解。记不住别的就记这条。
跨模块转场 · Expo Out.16, 1, .3, 1
快到近乎"甩"出去,然后长距离缓缓收尾。跨模块页面转场用它,会有明显的"推送感"。你会在几乎每家头部产品的转场里看到它。
回弹 · Spring.34, 1.56, .64, 1
潮酷系的核心曲线。冲过头再弹回来——这个"多出来的一点"就是记忆点。建议凡应把一级反馈(核心按钮、关键确认)统一到这条上。
预备 + 过冲 · Bounce.68, -.55, .27, 1.55
先往回"蓄力"、再冲过去、最后回落。戏剧性最强,也最容易腻——只给抽卡开奖、成就弹窗这类一次性仪式用,别用在日常按钮上。
机械咬合 · Industrial.72, 0, .28, 1
起步与收尾都"硬",中段飞快——像零件咬合到位。终末地的骨架曲线,凡应做"精密/机械"质感的功能界面可以借它当对照。
喷漆入场 · Spray In.2, 1.32, .36, 1
本报告为凡应建议的品牌曲线——比标准 ease-out 多一点冲劲、收尾更干脆,配合喷漆/涂鸦母题,一张面板"拍"上去的感觉。

曲线选择决策表(可直接抄进规范)

场景推荐曲线为什么是这条时长参考
元素进场cubic-bezier(0,0,.2,1)减速抵达,落点柔和,符合"被送进来"的物理直觉200–300ms
元素退场cubic-bezier(.4,0,1,1)加速离开,像被抽走。退场比进场短 20–30%150–220ms
位置变化 / 选项卡互切cubic-bezier(.4,0,.2,1)两头都有缓冲,怎么用都不会错150–250ms
跨模块页面转场cubic-bezier(.16,1,.3,1)快起慢收,产生"推送感",头部产品通用解400–500ms
核心按钮 / 关键确认(L1)cubic-bezier(.34,1.56,.64,1)过冲回弹,记忆点最强。潮酷系必备100–350ms
抽卡开奖 / 成就弹窗cubic-bezier(.68,-.55,.27,1.55)预备 + 过冲,戏剧性拉满。只用于一次性仪式500–1200ms
精密 / 机械质感界面cubic-bezier(.72,0,.28,1)起收都硬,像零件咬合到位200–300ms
凡应品牌曲线(建议)cubic-bezier(.2,1.32,.36,1)比 ease-out 更有冲劲、收尾更干脆,配喷漆母题380–450ms
连续旋转 / 进度推进linear只有"机器在运转"才该匀速视内容而定
三条纪律:① 同一层级只用一条曲线——如果 L2 里的按钮各用各的曲线,整套动效立刻散架; ② 过冲幅度要跟重要性挂钩——一级反馈 overshoot 8–15%,二级 3–5%,三级直接不做; ③ 先定曲线再定时长,反过来会一直调到怀疑人生。
01

凡应现在站在哪

先把自己的坐标定准,才知道该往谁身上抄。以下基于二测(EP02,2026.08.28)的公开评测与实机信息整理。

已经拉满的长板(守住的)

  • 把功能界面做成电影。抽卡不弹教程,而是做一整段跨越"与狭间"的空间折叠演出;角色 UP 还单独配人物 PV 进卡池——这在一线二游里都极少见。
  • 好感度系统几乎全动画覆盖。角色偶遇、送礼互动、QTE 小游戏,没有对话框。
  • 章节级的风格突变。第二章遇到潮酷敌方势力时,演出无缝切到涂鸦特效 + 摇滚伴奏——这正是我们"潮酷"标签最值钱的资产。
  • 美术与剧情逻辑深度绑定。黑欲主被击败后残液化为角色衣裙,这种"设计即叙事"的手法本身就是动效的富矿。

二测暴露的机会点(就是动效的活儿)

  • 演出与界面之间的"断崖"。主线演出规格是 9 分,但养成、星象、编队、背包这些高频功能界面如果还是常规滑动淡入,玩家一天里 80% 的时间其实活在那个 6 分的世界里——品牌感知是按时长加权的,不是按峰值加权的。
  • 潮酷只活在剧情里,没活进 UI 母题里。涂鸦、摇滚是章节级的一次性演出,还没有沉淀成贯穿全局的反馈符号(比如统一的涂鸦喷溅反馈、手写标签、脉冲音波)。
  • 箱庭探索的引导动效待验证。箱庭式地宫 + 海巡兽移动,空间引导比开放世界更难,弱引导动效(地面指引、远景光柱、轮廓描边)会是重点。
  • 四人小队实时轮换的战斗 HUD。切人、破韧、弹反、极限闪避——这四个动作的反馈强度必须有明确层级,否则战斗会"糊"。
一句话命题:凡应不缺"演出能力",缺的是把演出能力工业化、模块化、界面化的一套语言。竞品里真正该学的不是"谁更炫",而是谁把风格变成了可复用的规范——这也是本次拆解的核心判据。
02

竞品地图:两条轴,六个落点

横轴是风格强度(克制冷灰 → 高饱和潮酷),纵轴是动效形态(2D 平铺 → 空间化/镜头驱动)。凡应要去的方向是右上角——这恰好是最拥挤、也最难做的象限。

凡应要去的位置 克制冷灰 / 工业机能 ───────────── 高饱和 / 潮酷街头 2D 平铺 ───── 空间化 / 镜头驱动 终末地 空间化 + 极致克制 绝区零 80% 交互走镜头 异环 NTE 拟物手机壳 · 抽卡棋盘 无限大 GTA 式跨视角切换 鸣潮 视差分层 · 科技 HUD 归龙潮 凡应(现状) 目标位
读图:凡应现状的"风格强度"已经到顶(涂鸦 + 摇滚 + 高饱和),但"空间化程度"偏低——功能界面还在左侧。目标不是往绝区零硬追,而是用更低的成本把空间感拉到 3.5–4 分区间。
03

逐款拆解

按"可抄程度"从高到低排序。每款给出:风格关键词 / 动效特征 / 标志性案例 / 该抄什么 / 别抄什么。

01

绝区零(Zenless Zone Zero)

最该对标的对象 · 潮酷街头系的天花板

9.2可抄度 / 10
磁带未来主义美式街头涂鸦 高饱和 × 深色底旧电视机母题

绝区零和凡应是最同频的一个:同样是"深色打底 + 高饱和亮色点缀 + 涂鸦与手写体 + 强节奏"。但真正的差距不在美术,在它把美术风格变成了动效语法——无论哪个界面,你都能感到同一套逻辑在运转。

核心动效特征

① 镜头就是交互本身

全游戏 80% 以上的交互操作都运用了镜头运动。主界面 → 剧情关卡不是硬切,而是黑色过渡 + 镜头旋转把两个界面"空间缝合",玩家不会因为切换而忘记上一步操作。二级页面则通过镜头把一级界面"拖拽到近景"再与关卡选择产生关联——用运镜让用户自然理解界面层级关系。这套做法实现成本低、可复制性极强。

② 母题符号承担反馈职能

Roguelike 的每个可探索格子都是一台老式电视机;关闭的一瞬间直接用老式电视机关机的动效做交互反馈。更狠的是:同样是红色"危"字,它靠电视信号闪烁失真的程度来暗示危险等级——同一个母题,只调强度就能表达分级信息。这是最高效的反馈体系设计。

③ 角色界面 = 全动态演出

每切换一个菜单栏就变换一次运镜,角色会转身、重新摆姿势(不是切不同角度的摄像机),而不是静态立绘切换。搭配节奏感极强的电子 BGM,界面张力来自"角色真的动了"。自定义镜头甚至被团队称为"第二动画师"——大招镜头、站场招式相机运动都是逐角色手配的。

④ 战斗反馈零等待

切人被彻底移除 CD,上一个角色还在放技能、下一个已经出场,衔接几乎无延迟。这种"反等待"设计把战斗节奏直接拉高了一个档位,也让技能的演出感不被机制打断。

标志性案例:剧情关卡入场用黑色过渡 + 镜头旋转缝合界面;Reward 选择用电视机开/关动效;色相偏移 + 色差(Chromatic Aberration) 大量用于营造赛博不稳定感;低频鼓点落下时配合屏幕震动或瞬间色相反转。

该抄

  • 把母题符号做成反馈载体——凡应有涂鸦、喷漆、警示带、手写标签、脉冲音波,任选一个做成"强度可调"的统一反馈符号,一次性解决全站反馈语言不统一的问题。
  • 用镜头缝合界面层级,替代硬切。低成本、高感知,直接解决"演出与界面断崖"。
  • 角色界面配逐角色运镜——凡应已有大量 CG 和角色动画资产,这是最省成本的降维复用。
  • 色相偏移做"不稳定感"——极适合表达战斗危急、异常状态、道具腐蚀这类信息。

别抄

  • 高对比黑白的可读性代价。玩家反馈存在视觉不适、分类不清、指引不明确、信息层级混乱的问题。凡应的潮酷底色比绝区零更"花"(涂鸦 + 高饱和混色),如果不加信息层级约束,可读性问题会比它更严重。
  • 过度依赖运镜。移动端长时间镜头运动会带来眩晕,且每次转场都吃性能——必须给低频操作留"直切"通道。
  • 让玩家花时间适应 UI 系统。风格探索值得敬佩,但二次元用户的耐心很短。
02

异环(Neverness to Everness / NTE)

最值得学"包装手法"的对象 · 都市奇幻

8.0可抄度 / 10
拟物化外壳棋盘式抽卡 HUD 克制城市即界面

异环的 UI 设计有一个非常聪明的核心决策:主界面被包装成"游戏内的一部智能手机",城市经营、角色名册、背包、地图全部原生集成在手机壳里。

核心动效特征

① 用一个容器统一所有深层菜单

所有系统都被塞进"手机"这一个具象容器里,层级再深也不会让人觉得是"打开了一个新界面",而是"在手机里翻了下一页"。这是解决复杂养成系统层级混乱的经典思路——用容器叙事替代功能列表。

② 抽卡 = 棋盘小游戏

抽卡界面叫 "Fair Exchange",完全抛弃传统静态许愿界面,改成掷骰子走棋盘的交互式玩法,最多一次走 10 格,落在有奖格的格子上就出奖励。"看着棋子慢慢靠近高级奖励"比"点一下立刻出物品"情绪张力大得多。注意:这和凡应"跨世界抽卡演出"是同一种追求——把功能仪式化,但异环用了更低的成本做成了可反复玩的循环,而不只是一次性演出。

③ 战斗 HUD 极度克制

游玩中 HUD 保持清爽不侵入:小地图、任务追踪、Esper 轮转能量槽、元素反应指示器——信息全在,但视觉噪音极低。非侵入 HUD 是都市开放世界的必修课,因为城市背景本身就视觉信息过载。

④ 跨端与无障碍做得比同行深

键鼠与触屏双适配、UI 缩放、色盲滤镜(针对战斗关键指示器)、字幕的字号/颜色/不透明度/背景对比度全可调。这类"不起眼"的选项,恰恰是长线产品口碑的隐性来源。

标志性案例:主界面 = 游戏内智能手机;抽卡 = 掷骰走盘。注意:媒体与玩家评测的共同短板正是"UI 过于拥挤、菜单迷宫化、简单操作(如角色升级)路径太长、且像是专为触屏设计的"。

该抄

  • "容器叙事"思路。凡应的"隆舶"是巨兽背上的移动家园——这是一个天然的、比手机壳更有想象力的容器。把养成/家园/编队做成"在隆舶上走动"的空间界面,风格和世界观双赢。
  • 把抽卡变成可玩循环,而不只是一次演出。凡应已有"跨世界救援"的演出,可以再往前一步:让玩家在"与狭间"里做一次短交互,把观赏变成参与。
  • 仪式感前置 + 低成本。棋盘是 2D 的,成本远低于跨世界运镜,但情绪回报率极高。凡应可以做一个"净海沙流"式的低成本骰盘。

别抄

  • 为触屏设计的菜单结构硬上 PC。这是异环被点名批评最多的问题。
  • 系统数量超过界面承载能力。"菜单迷宫"是养成系统的头号杀手——先砍系统,再谈动效。
  • 动画流畅度不够时不要做拟物容器。拟物容器的可信度完全依赖动效精度,动效一"飘",拟物就变成廉价贴图。
03

无限大(ANANTA)

学"跨视角切换" · 都市开放世界

7.4可抄度 / 10
跨角色视角GTA 式镜头调度 现实城市映射无抽卡

无限大最有借鉴价值的不是界面本身,而是"角色切换"被做成了空间级的镜头调度。

核心动效特征

① 视角切换 = 一段镜头旅程

从主角切到"里希"时:视角缓缓拉高 → 越过城市天际线 → 最终落位在里希所在位置,玩家随即以她的身份继续探索。另一个镜头里,玩家在楼内与敌人对峙时切到里希视角,画面直接来到远处高空直升机内完成狙杀。空间连续性 让"换人"这个功能动作变成了叙事情节。

② 角色即玩法框架,不是换皮

每个可操控角色(巡察官/天才黑客/配送员/内容创作者)有独立的玩法、任务、剧情与交互选项(盘问、拘捕、开罚单、药物测试)。设计目标不是"从众多角色里挑一个做任务",而是"这样的任务就得由这个角色完成"——这直接决定了切人界面的信息架构必须是"身份展示"而非"数值对比"。

③ 全景切换动画本身就是卖点

行业评测直接指出"这个切换动画本身就非常具有 GTA5 的味道"。也就是说,一段做得足够好的切换动效,可以被当作宣传物料使用——这是动效投入最容易被低估的 ROI。

④ 现实城市映射带来的 UI 机会

上海/杭州地标入城、NPC 在静安寺门口刷手机、主角"房贷还没还完"——这种"社畜感"调性让它的界面更适合走"日常 App 拟物"而不是"游戏菜单"。风格路线和凡应差别很大,但思路可借:找到一个与玩家现实经验同构的界面隐喻。

标志性案例:跨角色城市级镜头调度;摄影/骇客类角色带专属界面滤镜与信息层。缺点:跨角色内容产能压力极大,长线一致性存疑。

该抄

  • 把"切换"做成旅程。凡应是四人小队实时轮换——如果每次切人都只是按键切模型,就浪费了。可以做一次极短(200–300ms)的镜头推拉:从当前角色背后快速擦过 → 落在新角色侧后方,让切人有"接管"感。
  • 给切换动效独立预算并当物料用。一段 2 秒的高质量切人镜头,可以剪进 PV、可以做成 GIF 传播。
  • 身份化界面。凡应角色各有阵营与身份,界面可以随角色切换微调配色/装饰母题,而不是所有角色共用一个通用面板。

别抄

  • 城市级镜头调度放在战斗里。那是过场/探索级的手段,战斗节奏下会直接打断操作。
  • 内容产能透支。每个角色独立玩法 + 独立界面 = 长线地狱。凡应还是要靠"一套规范 + 角色化皮肤"来摊薄成本。
04

鸣潮(Wuthering Waves)

大世界 ARPG 的"不出错基线" · 视差与信息密度

7.0可抄度 / 10
视差分层科技感 HUD 克制冷灰基调专武唤取动画

鸣潮代表的是"行业下限保障":它的界面动效不追求风格突破,但把信息传达效率和跨端可读性做到了稳定水准。凡应作为 ARPG,战斗与养成 HUD 至少要不低于这条线。

核心动效特征

① 三层视差 = 最廉价的"空间感"

背景层、角色层、UI 层以不同速度滚动制造景深。参考系数区间 0.3–0.7,实测约 0.52 最符合人眼舒适度。这是把 2D 界面做出 3D 纵深感的性价比之王——不需要真的建 3D 场景,只需要三层位移速度不同。

② 用几何图形承载信息层级

大招 CD 与能量槽通过内外双圈做细节区分;角色图标从正脸改为更有代表性的侧脸、去掉名字、增加协奏能量累积槽,直接为连携攻击服务。原则:图形结构先于动效,动效只是把结构变化讲清楚。

③ 动画曲线走"物理弹跳衰减"

按钮点击反馈不用线性插值,而用模拟物理弹跳衰减的曲线,衰减周期约 3 次——这样"抽取"按钮按下时的回弹感才够真实。这条可以直接抄进凡应的规范:核心按钮 = 3 次衰减的 spring;次要按钮 = 1 次。

④ 专武也配唤取动画

部分五星武器在获取时播放专属唤取动画,视觉冲击力"不亚于角色出场",并承诺为老角色补齐。凡应的"星轨"是装备卡牌——这是天生的动画载体,卡牌翻面/展开的动效必须重点做。

标志性案例:三层视差滚动;技能栏内外双圈 CD 表达;专武唤取动画。被诟病点是"角色图标风格反复调整、系统界面整体感不足"——说明风格统一性比单点华丽更重要。

该抄

  • 三层视差(背景 / 中景 / UI,速度比 0.3 : 0.5 : 1)——最低成本给凡应的功能界面补上"空间感"。
  • 衰减 3 次的 spring 曲线用于核心按钮;1 次用于次要按钮。用曲线差异直接建立反馈层级。
  • 内外双圈结构表达"冷却中 / 已就绪"——不用文字和颜色,形状变化即可。
  • 装备卡牌的获取动画。星轨卡牌天生适合做"抽卡式展开 + 悬浮 + 翻转"的动效序列。

别抄

  • 为极简而极简。鸣潮一测就吃过大亏:小地图为极简风过度简化导致看不清,后被迫回退。
  • 图标风格反复迭代。动效规范要在美术定稿前锁定,否则整套动效要返工。
  • 没有风格母题的通用科技感。凡应如果也做"通用科技蓝 HUD",就同时丢掉了潮酷标签——这是最危险的中间地带。
05

明日方舟:终末地

反向参照系 · 学它的"规范",别学它的"温度"

6.5可抄度 / 10
工业机能克制 / 精密 / 秩序 空间化运镜叙内界面

终末地的气质和凡应几乎相反(黑白灰 + 柠檬黄 vs 涂鸦 + 摇滚),但它给出了目前二游里最完整的一套动效规范体系。值得抄的是它的结构与纪律,而不是它的调性。

核心动效特征

① 全剧统一:一套时长 + 一套曲线 + 一套符号

全游戏采用统一动效规范、统一时长、统一缓动曲线,配合小幅线性运动;黄色线条、网格扫描、glitch 符号贯穿全局。位移/展开/旋转以直线折线为主,缓动柔和但不绵软——"克制为基,秩序为纲"。这是把动效从"每个界面各自发挥"提升为"体系"的关键动作。

② 层级化的转场语法

同模块切换:位移退场 + 新面板滑入(联动,无硬切)。跨模块切换:"模块折叠收缩"——当前界面以几何模块为单位折叠收缩快速隐去,新界面同步线性展开。列表/信息加载:依次延迟入场,避免全屏同时加载的杂乱感,引导视线。这三条是可直接落地的模板。

③ 空间化 + 叙内界面

角色界面切换时镜头同步调整视角,UI 面板随镜头运动同步展开,实现运镜与动效强绑定。主菜单以"手腕全息终端"为载体,UI 完全融入场景——即"画内界面"(让界面成为游戏角色也能看到的东西)。

④ 潜能把收藏做成情绪价值

潜能界面被玩家称为"鬼才设计"——用模拟桌面的形式呈现,既满足收集党又给真爱党情绪价值。角色升级界面用地面 HUD 样式,线性/放射状线条引导视觉并与数据可视化结合,制造纵深感。这是"界面即情绪价值"的最佳样本。

反面对照(对我们最重要):玩家与专业分析一致指出其短板是 "克制过度、速度过快、记忆点不强"——普通按钮反馈太轻、重要操作与普通点击差异极小、操作成功后无明确完成提示(玩家会怀疑自己点没点上);战斗里异常状态动效幅度小不醒目、技能就绪提示强度不足、血量危险缺少急促型提醒、连击破招反馈偏弱,既影响信息传递也降低战斗爽感。

该抄(结构与纪律)

  • 先写规范再动手。统一时长表 + 统一曲线库 + 统一符号库,三件套。这样动效才能跨界面复用、跨人交接。
  • "折叠收缩"跨模块转场——非常适合凡应的"箱庭/隆舶"结构,可以用"沙流聚合/崩解"替代几何折叠。
  • 依次延迟入场(stagger 40–80ms)。列表和卡牌网格一律用,成本极低、质感提升明显。
  • 界面承载情绪价值——凡应的星轨卡牌、好感度档案,都可以做成"收藏馆/档案柜"式的可翻动界面。

别抄(这正是我们的机会)

  • 克制过度。凡应走潮酷路线,反馈本来就该"重"。终末地的短板恰好是我们该发力的地方——把反馈做强、做满、做出三级差异,就是我们相对它的记忆点优势。
  • 速度过快导致无法感知。潮酷不等于"快",而是"有节奏":需要有停顿、有 overshoot、有 settle,让用户"看见"反馈。
  • 操作成功不给确认。核心操作必须有明确的完成态(一次爆发 + 落定 + 简化音效),这一点无论什么风格都不能省。
06

归龙潮

潮酷/国潮方向的风险提示 · 负面参考

4.5可抄度 / 10
国潮赛博仿古卷轴 × 电路板 深色重花纹

它和凡应共享"潮流化包装"这条路线,但在 UI 上的落地效果提供了非常有价值的前车之鉴——尤其"文化元素外化"和"搭配感失控"这两件事。

做得好的

① 文化元素与玩法语义对应:爬塔玩法界面参考三星堆青铜神树,因为"建木"在《山海经》中即沟通天地的天梯,与爬塔语义高度一致。② UI 做成仿古卷轴与电路板的混合形态,母题统一。③ 角色总览页横排半身立绘 + 错落背景色,被玩家单点好评。这三点说明:母题与功能语义对齐时,风格才立得住。

踩的坑(凡应必须避开)

玩家直接点评:"UI 设计颜色偏深色、重花纹、加入英文,会有些不伦不类,整体搭配感不好,但实用度不错。" 还有:按键偏小且不能自动调整,横版下容易误触;固定镜头导致角色被手指遮挡;角色模型过小且无边缘强化,战斗中会"找不到自己"。

对我们的三条硬提醒:① "重花纹 + 英文 + 深色"三件套堆在一起 = 不伦不类——凡应同时具备涂鸦(重图形)、高饱和、以及大量世界观生造词,风险完全一致,必须靠"留白预算"和"信息层级"来压。② 按键尺寸与安全区是所有横屏动作游戏的死穴,动效不能只做"好看",还要保证 44px 起可点、不被手指遮挡。③ 战斗中角色必须有边缘强化/轮廓区分——这是可读性动效(不是装饰动效)的典型案例。
04

横向对比矩阵

左侧六个维度按"凡应最缺什么"排序。雷达图为主观评估(基于公开资料与录屏特征),用于定位差距,不是精确测量。

对比矩阵 · 六款产品一览

产品风格调性转场形态反馈强度镜头运用时长倾向标志性符号最大短板
绝区零涂鸦美漫 × 磁带未来主义镜头缝合 / 空间拖拽中高极强
80% 交互
中长
400–600ms+
老电视机开/关、警示带、色差可读性与层级混乱
异环 NTE都市霓虹 × 拟物手机容器内翻页中中
探索/切换
中
250–400ms
手机壳、骰子棋盘菜单迷宫、触屏化设计
无限大现实城市 × 日常 App跨视角镜头旅程中强
角色切换
中长
500ms+
城市天际线、身份界面内容产能压力
鸣潮克制冷灰 × 科技感2D 平铺 + 视差中弱
战斗内
短中
150–300ms
内外双圈 CD、视差层风格统一性弱
终末地工业机能 × 黑白灰模块折叠收缩弱强
空间绑定
短
150–250ms
黄色线框、网格扫描、glitch克制过度、记忆点弱
归龙潮国潮赛博 × 卷轴电路板2D 平铺中弱中仿古卷轴、青铜神树搭配感差、可读性
凡应(现状)涂鸦摇滚 × 高饱和剧情级演出,界面近平铺中弱
界面内
不详涂鸦特效、跨越世界演算演出与界面规格断层

时长列为量级估算(基于公开录屏与评测描述目测),非官方参数,仅用于判断"快/慢"倾向。

差距最直观的一项:各产品"风格标签是否贯穿功能界面"

这不是"好不好看",而是"玩家一天里 80% 的操作时间是否活在你的风格里"。

绝区零
88
终末地
86
归龙潮
62
异环 NTE
58
无限大
52
鸣潮
45
凡应(现状)
38
凡应(目标)
82

计分口径:剧情演出之外的高频功能界面(养成 / 编队 / 背包 / 商店 / 图鉴 / 设置)中,风格母题与专属动效语言的覆盖率主观估算。凡应现状扣分主因是长板集中在一次性演出,未沉淀为界面语言。

05

动效实验室:把方案跑给你看

下面六个动效都是真实可运行的(不是视频、不是 GIF)。点"重播"直接看体感差异——左边三个是建议凡应采用的潮酷语法,右边三个是对照组,用来校准"该有多重"。

① 喷漆式入场

建议采用
PANEL
Spray In · 涂鸦母题
440mscubic-bezier(.2,1.32,.36,1)

② 摇滚脉冲反馈

建议采用
PRESS
Punch Feedback · 一级反馈
340mscubic-bezier(.34,1.56,.64,1)

③ 警示带扫过

建议采用
ALERT
Caution Tape · 状态提示
520mscubic-bezier(.6,.02,.25,1)

④ 磁带故障转场

建议采用
SIGNAL
VHS Glitch · 危险/异常
460mssteps(9,end)

⑤ 镜头推拉层级切换

对照 · 绝区零式
SUB PAGE
Camera Dolly · 空间化
500mscubic-bezier(.16,1,.3,1)

⑥ 机械咬合折叠

对照 · 终末地式
Mech Fold · 克制 / 秩序
260ms ×4stagger 60ms

怎么对比着看

先把②和⑥连点几次:②有 overshoot、有顶点回弹、有 settle;⑥几乎零过冲、速度均匀、干净利落。②就是潮酷系的体感,⑥就是克制系的体感。凡应应该整体站在②这一侧,但不是所有元素都上②——一级反馈用②,列表入场用①②混合,设置页这类"低压场景"可以直接用⑥,避免疲劳。

别把"潮酷"做成"吵"

①③④三个建议方案都有明确的使用配额:①用于面板/卡牌入场(每次转场最多 1 次);③只用于状态提示与警告;④只用于异常/危险/腐蚀类信息。全部高频按钮都上 ④ 的话,界面会变成迪厅。

别忘了给它配声音

②的脉冲最好配一声短促的电子低频;③扫过时配一段磁带/警示蜂鸣;④的抖动点必须卡在音效的失真拍上。先定音效节拍,再定动效时长,比先做动效后期配乐效果好得多。

06

给凡应的落地方案

三条动效语言支柱 + 一张规范表 + 一份母题清单。目标不是"追上绝区零",而是用更低成本把风格从"剧情里的彩蛋"变成"每个界面都在说的话"。

支柱 一

演出即界面

把已经做好的 CG、角色动画、运镜方案降维复用到功能界面。抽卡已经这么做了,复制到编队、养成、星轨、好感度。

具体动作角色界面切换沿用逐角色运镜;编队界面用"角色登场"短镜头;星轨卡牌用获取动画的简化版
成本低(资产已在)
收益高(直接补上 80% 时间的品牌感知)
支柱 二

涂鸦即反馈

建立一套强度可调的涂鸦符号系统作为全站统一反馈语汇——这是凡应相对终末地(母题太克制)和鸣潮(没有母题)最大的差异化机会。

具体动作喷漆/贴纸/手写标签/警示带/标记笔,各绑定一到两级反馈强度,全局复用
成本中(一次性建立规范)
收益极高(统一性与记忆点一次解决)
支柱 三

摇滚即节奏

用 BGM 节拍驱动界面动效:低频鼓点 = 屏幕微震/色相反转,高频电子音 = 速度感与切分节奏。这是把"潮酷"从视觉做成体感的关键一步。

具体动作先出音效节拍表,再按拍点标注动效时长;战斗 HUD 的强化反馈卡在鼓点上
成本中
收益高(体感差异极大,竞品普遍没做透)

建议的动效规范表(可直接作为评审标尺)

层级适用场景时长缓动叠加元素声音可叠加数量
L1 核心重 抽卡开奖、大招就绪、破韧处决、弹反成功、关键任务完成 400–1200ms
仪式类可 2000ms
自定义 bounce
overshoot 8–15%
粒子 + 形变 + 色相偏移 + 镜头微推 + 屏幕震动 专属音效 + 独立 BGM 层 全部可叠
L2 常规中 面板切换、选项卡、按钮按下、列表入场、角色切换 200–400ms cubic-bezier(.34,1.56,.64,1) 喷漆/贴纸反馈 + 1 层视差 + 轻微形变 统一 UI 音效库 最多 2 种
L3 轻弱 Hover、勾选、数值滚动、设置页交互、滚动吸附 100–180ms ease-out 仅 opacity + transform 极轻的点触音或静音 1 种
L0 待机循环 主界面装饰、呼吸感、背景氛围、可交互元素暗示 2–4s 循环 ease-in-out 往复 极低幅度(≤3%)的缩放/位移/透明度 环境音层 同屏 ≤2 处
三级反馈的核心纪律:一级和三级之间的强度差必须"肉眼可辨"。终末地最大的教训就是——它把一级操作做成了三级强度,导致玩家点完怀疑"我点上了吗"。宁可 L1 过重一点,也不要做成温吞水。

贯穿全局的母题清单(建议收敛到 5 个以内)

喷漆 / 涂鸦喷溅

主反馈符号。喷溅范围 = 强度;用于按钮、面板入场、状态标记。

警示带 / 斜纹

警告与限时。扫过速度 = 紧迫度。

手写标签 / 贴纸

信息标注层。用于活动角标、NEW、限时、推荐。

脉冲音波 / 声纹

摇滚属性载体。用于技能冷却、能量累积、节拍提示。

沙流 / 颗粒聚散

凡应专属(净海沙体)。用于转场聚散、加载、地图边界。这是最有辨识度的一个。

落地优先级建议

优先级动作为什么先做这个验收标准
P0锁定统一时长表 + 曲线库 + 母题清单(本报告 Ch.00 / Ch.06)规范不先定,后面每做一个界面都要返工一张能被所有 UI 同学背下来的表
P0建立三级反馈纪律,重点强化 L1终末地的教训 + 战斗爽感直接挂钩玩家测试中"点完是否确认生效"零疑问
P1高频功能界面(养成 / 编队 / 背包 / 星轨)整体动效返修占玩家 80% 时间,品牌感知权重最高录屏与主线演出并排看不出"两个游戏"
P1战斗 HUD:切人 / 破韧 / 弹反 / 极限闪避 四动作分级反馈直接影响战斗信息传达与手感四者在录屏里能靠动效区分出来
P2三层视差(0.3 : 0.5 : 1)铺到所有二级界面最低成本补空间感界面有纵深,且不牺牲可读性
P2音效节拍表前置,动效卡拍体感提升性价比最高、竞品普遍没做透抽卡/大招段落的动效与音效同拍
P3可访问性:减弱动态效果开关、UI 缩放、色盲友好长线口碑与合规;异环在这项上明显领先开关打开后无眩晕性动效残留
07

实录图墙

前面所有分析都建立在"我告诉你竞品怎么动"上。这一节把它们换成真机录屏——不是截图、不是还原动画,是实际的界面循环片段。鼠标移上去就会播,用来核对我上面的判断准不准。

素材来源与使用边界:以下录屏抓取自第三方 UI 参考平台 lemooui.com「游戏参考」 栏目的公开预览流(该栏目可按游戏名 / 题材 / 类型筛选,是行业里常用的动效参考源)。 版权归各游戏厂商及原上传者所有,仅供《凡应》项目组内部竞品研究使用——请勿对外分发,请勿用于任何对外发布物料。如需用于正式材料,请另行取得授权或使用自有录制素材。
转场
转场-战斗入场
绝区零转场
转场
转场 Loading
绝区零转场
主界面
主界面_总览
绝区零主界面
角色
角色-安比-属性技能页签切换
绝区零角色
抽卡
十连抽(出金)
绝区零抽卡
主界面
主界面_入场
终末地主界面
反馈
反馈_突破
终末地反馈
干员
干员_能力扩延
终末地干员
抽卡
集市_进入棋盘
异环集市
主界面
主界面_入场
异环主界面
唤取
唤取_十抽
鸣潮唤取
反馈
反馈_获得成就
归龙潮反馈
打开完整图墙 · 344 段录屏 覆盖绝区零 80 / 终末地 90 / 异环 68 / 鸣潮 54 / 归龙潮 52 段,按游戏与界面分类筛选,支持搜索与 0.25×–2× 倍速逐帧核对 进入图墙 →
怎么用这张图墙最有效:把上面这 12 段按 「转场 → 主界面 → 角色 → 抽卡」 的顺序连看一遍,你会直观看到绝区零的镜头语言是怎么贯穿整条链路的;再看终末地的三段,同样一条链路,气质完全是另一套。这就是本报告 Ch.06 里"统一动效语言"那句话的实际样子。图墙里还有「战斗」「弹窗」「剧情关卡」「活动」「商城」等分类,做具体模块时可以按需调取。
08

参考素材索引

这份报告的所有判断都可回溯。下面是我实际用到的资料,你可以顺着继续往下挖。

录屏 / 动效参考(你给的站点)

  • LemooUI · 游戏 UI / 动效学习分享平台(lemooui.com) 站内主分类为「作品-动效设计 / 2D动画 / 写实特效」与「资源-虚幻 / Unity / GUI界面 PSD」。建议检索关键词:终末地、ZZZ / 绝区零、异环、鸣潮、UI 动效、转场、二次元。站内同时有 UE5 蓝图可交互转场、可交互卡牌与枪械、UGUI/UMG 动效插件等可下载资源,适合让动效同学直接拆解实现方式。
  • ▶ lemooui.com「游戏参考」栏目 —— 本报告实录素材的来源 导航栏「游戏参考」入口。可按游戏名 / 题材(二次元、赛博朋克、国风…)/ 游戏类型(动作RPG…)筛选,收录各游戏的真机界面录屏,并按界面模块细分(转场 / 主界面 / 角色 / 抽卡 / 反馈 / 战斗 / 弹窗 / 商城 等)。
    本项目已抓取其中的:绝区零 80 段、终末地 90 段(含早期版本)、异环 68 段、鸣潮 54 段、归龙潮 52 段,共 344 段,落盘在 assets/lgck/,可通过 实录图墙 浏览。
    注意:该栏目下的「下载」需要消耗站内乐魔币,属付费资源;本报告仅使用其公开预览流,未获取付费下载内容。
  • ▶ 知乎专栏「COTA五号」动效与竞品内容索引(本报告配套 · 116 篇) 作者李世钦(前游戏蜗牛 / CCP / 腾讯,现心动资深游戏界面动效设计师)。中文圈里少见的成体系的游戏界面动效方法论来源,共 116 篇、约 26.7 万字、1487 张动图,已全部抓取归档并重新按主题组织。
    本报告的多处结论可在其中找到更深的展开:转场四篇(039/041/043/045)、动作曲线两篇(097/099)、轻重缓急(086)、基础规则·时间(067)、卡通风格动效五篇(032–042)、写实类动效(055/063/068)、风格杂糅元素比例(077)、科技风格不土(121)。索引页内附「给凡应的阅读路线」与必读 12 篇。
  • UE5 蓝图可交互日式二次元转场 日式二次元转场的 UE5 可交互实现——凡应同引擎(UE5),可以直接参考工程结构。
  • UE5 动效练习 — 可交互卡牌与枪械 卡牌交互动效,对应凡应「星轨」卡牌界面的动效需求。
  • 卡通动效练习 — 通行证 通行证 / 战令这类"重商业化界面"的动效包装参考,属于 L1 级仪式感场景。
  • 「是好项目纪念一下」(站内高热度动效作品) 站内浏览量最高的动效作品之一,适合作为"当下从业者水平"的横向校准。

拆解文章与评测

方法论参考

数据口径声明:本报告中所有时长、曲线、评分均为基于公开资料与录屏的主观估算,用于团队内部定位与讨论,未经厂商官方确认。雷达图与覆盖率条形图为定性评估,不作为精确测量数据使用。