NAYO · Design archive

三版设计 · 整页并排对比

三个版本各自是一份独立的单文件 HTML,共用同一套素材 assets/(32 个文件)与同一段首屏视频 hero.mp4。下面把三页整页展开、并排成一行,同一屏从上到下逐段对照;点任意一列打开该版本。

从首屏一直读到页脚,三列的段落边界是对齐的,可直接横看比较 原 01 Clean Blue 已下线,编号沿用 02 / 03 / 04 以对应历史沟通
02Split Navy 深蓝分屏打开 →
Split Navy 整页
深色段 / 白段交替7 条竖幅应用
03Orbit 圆弧构图打开 →
Orbit 整页
视频钉住后圆弧掀开2×2 技术白卡
04Original 原版官网打开 →
原版官网整页(前五块为清蓝版式)
前五块清蓝版式,后半段原版混合对照版

02 Split Navy | 深蓝分屏

NAYO-SplitNavy_深蓝分屏.html

深色段与白段交替,技术与产品都是「图左 / 参数右」分屏卡,偏工业设备气质。

03 Orbit | 圆弧构图

NAYO-Orbit_圆弧构图.html

圆点标题语言贯穿全站;首屏视频先钉住,圆弧升起后再随页面上滑。

04 Original | 原版官网

NAYO-Original_原版官网.html

混合版:导航 / 首屏 / 数据 / 关键技术 / 产品五块用清蓝版式,模块架构之后保留原版的整图切片与交互。

后续修改约定

① 三页共用 assets/,改图直接替换同名文件,三个版本同步生效;要单独给某一版换图,把图片改成新名字再引用。
② 每个页面样式都内联在文件内 <style>,不依赖构建工具,保存后刷新即生效。
③ 版本 02 / 03 的色彩集中在 :root 变量:--blue #0D2D8A、--deep #07377C、--accent #2F6FE4、--tint #F4F8FD,改一处全局换色。
④ 产品图为透明底 webp,产品卡使用 object-fit:contain,改成 cover 会裁掉机器本体。
④·补 首屏视频放在 assets/hero.mp4,三页共用;现为 32 秒无字幕版本(三段素材拼接),改完视频记得同步换 hero_poster.jpg。
⑤ 模块顺序三版一致:导航 → 首屏 → 数据 → 关键技术 → 产品 → 模块组装 → 应用场景 → 转化 → 页脚。
⑥ 本页三张整页长图存于 previews/full-*.jpg,改了页面后重新生成即可(同一宽度截取,保证三列可比)。