把工具目录改写成工作流叙事，用可感知的结果、清晰的产品分层与可信证据，帮助第一次到访的用户更快判断 VanceAI 是否适合当前任务。
工具很多，用户却难以判断从哪里开始
产品能力从单一图片增强扩展到视频、在线工具、桌面端和企业 API 后，旧首页仍用大量同权重入口承载品牌、功能与场景。用户必须逐项阅读，才能理解产品边界与核心价值。
设计判断是让首页先建立“一个工作流”的共同认知，再依次给出任务入口、结果证据与信任信息；需要深度解释的能力则交由二级页完成。首页负责选择，产品页负责说服。
从入口堆叠，转向任务与证据的浏览路径
升级前：功能入口主导
- 品牌、工具、平台和行业方案同时争夺首屏注意力
- 高频卡片使用相似权重，用户需要逐个比对
- 技术实力与隐私等信任信息出现较晚
升级后：任务与证据主导
- 以“每个视频与图片工具，都在同一工作流”建立心智
- 先给任务入口，再用结果、技术与隐私完成验证
- 图片、视频与企业服务各自获得清晰的深入路径
旧版首页同时承载了三种分类方式。
旧版首页内容包含图片增强、修复、Creative AI、电商、免费工具、Web、PC、PWA 与 API。页面同时按能力、场景、产品形态和服务对象组织内容；这些内容各自成立，但主次关系需要从整页中逐层辨认。
按能力
增强、降噪、放大、修复等工具直接并列。
按场景
Creative AI 与 eCommerce 以独立板块展开。
按产品形态
Web、PC、PWA 与 API 作为另一套入口并存。
首页从“列出所有功能”改为“逐步完成一次说服”
新的内容顺序遵循承诺、任务、能力、技术、平台与信任六层结构。用户不需要一次理解所有工具，只需沿着页面不断确认：它能做什么、效果如何、为什么可信、在哪里使用。
统一承诺
首屏只回答一件事：所有视频与图片工具，可以进入同一条工作流。
任务匹配
用修复、上色、降噪、增强、放大等动作词，让用户快速定位当前需求。
效果证明
以大尺寸媒体、动态演示和前后对比，先让用户看见输出。
信任补强
再以技术、平台、隐私与用户规模回答“为什么值得使用”。
品牌识别从“AI 之眼”转向可扩展的平台符号。
随着产品从图片增强工具集合扩展到图片、视频、桌面端与企业 API，品牌识别也从解释单一功能，转向承载一个多产品生态。
AI 之眼
眼睛嵌入 A，橙色渐变单独突出 AI，直观传达视觉处理与消费级创意工具。
独立 V 符号
抽象 V、几何字标与蓝色节点减少对静态图片的限定，为视频、客户端与 API 保留延展空间。
- 品类语义
- 具象的图片视觉工具→抽象的视觉智能平台
- AI 角色
- 显性的功能卖点→贯穿产品体系的底层能力
- 触点适配
- 依赖完整字标→符号与字标可拆分使用
先把产品线讲清楚，再帮助用户找到具体工具
新版导航先区分 Video tools、Image tools 与 Enterprise，图片工具再按 Productivity、Creativity 和 Tools 分组，让用户先判断任务类型，再进入具体页面。
视频工具提升
将修复、放大、补帧与色彩增强独立成一级入口，避免被图片能力淹没。
图片生产力重组
围绕放大、锐化、降噪、修复与背景处理组织高频任务。
图片创作新增
把上色、卡通化与风格转换集中到探索型需求中。
企业能力保留
以统一 API、批量处理和集成支持承接专业团队。
导航是一张两级任务地图
展开态同时承担分类、快速扫描与桌面端产品导流；信息密度高，但通过列标题、图标和纵向节奏保持可读。
- 01第一层：产品形态
Video tools、Image tools 与 Enterprise 先回答用户要处理什么。
- 02第二层：任务类型
图片工具再按 Productivity、Creativity、Tools 分组，避免平铺全部产品名。
- 03第三层：交叉入口
左侧桌面端推广独立于工具列表，用视觉卡片承接跨产品转化。
菜单展开用约 300ms 的 opacity / transform / visibility 过渡；滚动后的导航壳层用约 500ms 改变背景、边框、阴影与圆角。前者强调响应，后者强调场景转换。
如何把复杂 AI 产品组织成一套可浏览的体验
下面以首页、Video Upscaler、Image Sharpener 三类页面为样本展开，覆盖桌面端与移动端。
- 3
- 可复用模板
- 20
- 复用组件搭建界面
- 4
- 拆解维度
同一品牌语法，为三种页面任务切换构图
共享的是深色画布、白色大标题和蓝色主行动；变化的是“证据放在哪里”。
视觉原则
用动态影像从模糊、黑白变成清晰、彩色的过程建立品牌记忆
二级页继承同一套媒体容器、导航、字体和按钮，但根据任务改变内容密度。视频页强调沉浸式动态效果，图片工具页强调输入与输出，企业页强调接入流程和稳定性。
滚动把产品证据固定在视野里
Video Upscaler 使用约 200vh 的滚动区与 100vh sticky 舞台。用户继续滚动时，人物、清晰度分割与场景帧发生变化，标题和 CTA 保持稳定。
叙事作用把“视频增强”从一句技术描述变成可观看的结果。
品牌作用高对比人物、冷蓝环境与单条亮线形成可重复的视觉记忆。
实现取舍Hero 视频 preload 为 auto；页面下方四个视频默认 preload none，把首屏资源优先级拉开。
图片工具把“上传、查看、相信”压缩进同一屏
与视频页的沉浸叙事不同，图片工具让用户直接操作分割线；交互本身就是最短的说服路径。
- 01先展示差异
首屏右侧直接放置可拖动的 Before / After，效果证明早于功能解释。
- 02行动紧贴证据
上传区与对比画面并列，用户看见效果后不需要重新寻找入口。
- 03同一组件重复论证
后续内容继续复用对比分割线，把不同使用场景组织成连续证据。
模块化的单位是“证据类型”
三类页面共享壳层，却用不同证据模块完成任务：视频靠时间变化，图片靠空间对比，首页靠媒体网格建立能力范围。
功能直观展示
移动端重新安排证据顺序
导航收为图标与菜单；多列首屏改成单列任务流；Video 页保留沉浸画面，图片页则先解释与上传，再展示对比。
通过少量稳定组件支撑首页、工具页与企业页面
通过统一模板连接产品、设计与前端
产品经理
确认产品能力边界、重点工具与不同业务入口的优先级。
UI 设计
梳理旧版问题，负责首页视觉方向、关键模块、页面模板和动效表达。
设计协同
用统一模板补充工具页状态、案例素材与不同任务场景。
前端研发
实现响应式页面、动态比较、视频播放和组件状态，并共同完成视觉验收。
产品扩张越快，官网越要帮用户更快判断
首页应该建立统一心智并帮助用户完成第一次选择，二级页再针对具体任务提供足够证据。
