ııı motion.md视频风格规范
Webflow / V352

A New Era of No-Code

以球体作为视觉向导，在分层网页、表单和流程空间中穿行。界面不只是截图，而是具有前后距离的可组合平面。

构图与编排 可播放 · 可替换内容
整体编排规则示例
0.00 / 103.53 秒
动作与构图示意 独立打开 ↗
查看 HTML 源码
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>A New Era of No-Code · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#100851}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="sequence"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>
画面元素球体网页平面线框门户表单连接轨迹窗口群
MOTION LANGUAGE

动作与构图

局部动作 · 构图规则

01

网页分层，球体穿过层间

网页分层，球体穿过层间规则示例
0.00 / 9.00 秒
4–13 秒 · 动作示意 独立打开 ↗
查看 HTML 源码
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>A New Era of No-Code · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#100851}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="clip" data-start="4" data-end="13"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>

将网页拆成底板、图片、标题与线框，沿深度方向留距离。小球沿共同透视方向穿行，近处平面移动更快，远处更慢。

02

从抽象空间落到具体界面

门户与透明立方体负责换空间，进入工作台后用输入栏、按钮和控件组建立功能感。蓝紫为主，粉、青、黄只分配给局部内容。

03

用连线解释界面之间的关系

后段让数据轨迹在窗口、表单与用户节点之间流动。路径要有明确起点和终点，球体抵达后才触发下一个窗口的状态。

04

新题材也需要空间中的向导

可换为产品模块或业务卡，但保留一个持续出现的球体或小物件。准备可分层的界面元素，不将整屏图片当成所有空间层。

SEQUENCE

段落与节奏

点击段落，定位到上方编排示意。

0.00 秒的构图参考
0.00s
13.00 秒的构图参考
13.00s
31.00 秒的构图参考
31.00s
48.00 秒的构图参考
48.00s
70.00 秒的构图参考
70.00s
98.00 秒的构图参考
98.00s

画面参考 · 离散静帧

KEEP THE RELATIONSHIPS

制作其他主题

  • 替换网页内容与业务流程；保留球体引导、深度分层与连接。

制作约束

球体 / 网页平面 / 线框 / 门户 / 表单 / 连接轨迹 / 窗口群

  • 将网页拆成底板、图片、标题与线框，沿深度方向留距离。小球沿共同透视方向穿行，近处平面移动更快，远处更慢。
  • 门户与透明立方体负责换空间，进入工作台后用输入栏、按钮和控件组建立功能感。蓝紫为主，粉、青、黄只分配给局部内容。
  • 后段让数据轨迹在窗口、表单与用户节点之间流动。路径要有明确起点和终点，球体抵达后才触发下一个窗口的状态。
  • 可换为产品模块或业务卡，但保留一个持续出现的球体或小物件。准备可分层的界面元素，不将整屏图片当成所有空间层。