- 移动菜单
从无响应按钮改为完整抽屉、遮罩、Escape 与焦点恢复。 - 901–1179px 溢出
移除 1180px 页面最小宽度，表格改为局部横向滚动。 - 后台移动菜单墙
完整侧栏改为按需展开，不再把主内容推到首屏之外。 - 死链接
离线包内所有主要 CTA 都有本地可访问目标。
Taste redesign / visual audit
从“功能都在”到路径清楚、状态完整
本报告把原始版本与当前版本分开陈列。上一版报告的中线拼接确实让前后版本难以辨认，本版已废弃该表达。当前改动重点是恢复原双轨工具动画、校正工具 Logo 与二维码比例、修复 Lenis 方向反转抽动，并把首屏右侧恢复为官网源码中的“上传、构建、发布成功”动画，只做主题与响应式适配。
00 / 结论
先解决发布阻断，再讨论视觉精修
原始版本已经具备完整业务内容，但几处基础问题会直接阻断移动端使用。新版先处理这些问题，再调整排版节奏、色彩、组件状态和代码边界。
长页面连续使用居中标题、等宽卡片和 eyebrow；首屏原有发布动画具备辨识度，应当保留而不是被替换。
采用暖中性背景、深墨色动作按钮与单一绿色强调。圆角、焦点、错误、加载和空状态统一。
01 / 官网
前后版本分开陈列，不再把两张页面切成一张
上一版报告使用中线滑块，把两张首屏截在同一个画框里，导航、按钮和标题被拼接后很难辨认。这一版改为两张完整截图并排展示，左侧固定为原始代码版本，右侧固定为重设计版本。
证据来源
改版前截图来自最初上传代码的浏览器审计；改版后截图来自重设计代码的浏览器渲染。两张图不是同一页面的左右分栏。
桌面端首屏
完整画面并排显示。先看页面任务、信息密度、CTA 和产品示意，不需要猜中线两边分别是谁。
- 绿色渐变和发光按钮承担主要视觉重量
- 大段工具名单进入 Hero，主任务不够集中
- 右侧为装饰性发布窗口
- 标题收束为“生成网站到线上网址”
- 主次 CTA 和发布结果更明确
- 右侧恢复官网原版上传、构建、发布成功动画，只调整主题色与表面样式
移动端首屏
移动截图同样分别展示，不用拖动，不会出现两个导航栏拼在一起的视觉事故。
- 菜单按钮存在但没有可用的展开内容
- 首屏信息和装饰元素拥挤
- 移动菜单可打开、关闭并恢复焦点
- 标题、CTA 和原版发布动画按单列重新排布
02 / 支持工具
原动画逻辑完整保留，卡片视觉与新版统一
保留原版最有辨识度的双轨、反向移动、42 秒匀速循环、边缘渐隐和悬停暂停。卡片改为与当前页面一致的中性边框和克制阴影，不再用静态网格或近似动画替代。
BEFORE / STATIC GRID
信息齐全，但品牌动作消失
22 个工具被压入固定表格，页面较高，区块缺少原版的流动感；“工具只是起点”没有说明平台接收什么项目、会完成哪些步骤。
- 六列静态网格
- 桌面区块高度约 916px
- 支持范围表达偏抽象
AFTER / DUAL MARQUEE
双轨动画成为兼容范围的索引
第一轨向左、第二轨向右，悬停或键盘聚焦暂停。文案依据《产品定位和产品设计原则测试原则》《网站项目上传与部署说明》《网站托管类型支持说明》，明确 HTML、ZIP 静态包与可正常构建的 React、Vue、Vite 项目。
42s linear infinite，两轨方向相反- 只动画 transform，不触发布局重排
- 加入非官方合作说明
- 减少动态效果时停止并支持手动横向浏览
03 / 细节修正
首屏原动画恢复，二维码回正，滚动只增加一点阻尼
首屏右侧直接恢复官网源码中的浏览器发布动画：上传完成、构建进度和发布成功继续使用原来的 6.5 秒浮动与 5 秒阶段循环。只把背景、边框和文字颜色接入新版设计令牌，并补齐移动端与深色模式。二维码不再把带标题的长图硬塞进正方形容器。页面滚动接入 Lenis 1.3.25，参数刻意偏快，并在滚轮方向反转时清除上一方向的残余位移，避免连续下滑后突然上滑产生抽动。
BEFORE / DISTORTED QR
长图被压进卡片
原素材包含标题区，图片比例为纵向长图；统一宽高后二维码和文字一起发生形变。
- 码图与标题耦合在一张图片里
- 容器尺寸变化时容易压缩
- 文字无法适配暗色模式与响应式
AFTER / SQUARE QR
码图与说明拆开
二维码保持 1:1，使用 object-fit: contain；说明文字由 HTML 排版，不再参与图片缩放。
- 独立 320 × 320 PNG
- 页面固定渲染为 196 × 196，宽高一致
- 移动端与暗色模式保持清晰
LENIS / LIGHT DAMPING
阻尼存在，但不抢内容
只增强纵向滚轮的收尾感。方向反转时先清掉上一方向的未完成位移；触摸滚动保持原生，系统启用减少动态效果时完全不初始化 Lenis。
- lerp
- 0.20
- wheel multiplier
- 0.82
- 方向反转
- 立即清除残余位移
- reduced motion
- 原生滚动
04 / 控制台
响应式不再依赖“突然切换”的断点
原始后台在 901px 仍被强制撑到 1180px，900px 又突然切成移动布局。新版移除页面级最小宽度，桌面侧栏在 900px 以下转换为遮罩抽屉。
BEFORE / 1024PX
页面宽度被锁定
内容区仍按 1180px 排布，小笔记本和分屏场景需要横向滚动。
- 页面级
min-width: 1180px - 主导航长期占用固定侧栏
- 表格和页面一起溢出
AFTER / 901PX
临界宽度连续收缩
内容容器、指标卡和表格分别处理空间，不再制造页面级横向滚动。
min-width: 0贯穿 Grid 子项- 表格仅在容器内部横向滚动
- 卡片在 1080px 自动变为两列
BEFORE / MOBILE
导航占据首屏
所有侧栏分组横向铺开，用户进入页面后首先看到的是菜单，而不是任务。
AFTER / MOBILE
菜单按需出现
导航转换为遮罩抽屉，支持点击遮罩、Escape 关闭与焦点恢复。关闭后主内容回到首屏。
05 / 评分
提升主要来自可用性，不是增加装饰
每张卡片的浅色条为改版前，底部绿色条为改版后。分数来自同一套 Taste 检查项人工复核。
视觉层级
5.5→8.2缩短首屏文案，降低重复标题模板，使用排版与分隔替代无意义卡片。
响应式
3.8→8.8修复 901–1179px 溢出，明确每个多列区块的移动折叠方式。
可访问性
3.2→8.2补充字段标签、错误关联、焦点环、对话框语义、触控尺寸与 reduced-motion。
交互状态
4.0→8.3覆盖 hover、active、focus、loading、empty、success 与 error，不再只做默认态。
内容清晰度
5.8→8.5FAQ 改为页面内展开，CTA 统一动作名称，去除含糊装饰性说明。
可维护性
4.1→7.6引入明确令牌与组件层覆盖。原项目仍保留较大的 legacy.css，后续应继续拆分。
06 / 改动清单
每一项视觉变化，都对应一个使用问题
改版保持品牌、信息架构、业务字段和主要路由意图不变。以下列出最重要的诊断、处理方式与离线包中的验证入口。
| 问题 | 严重度 | 改版前 | 改版后 | 验证入口 |
|---|---|---|---|---|
| 移动官网菜单 | P0 | 按钮显示但没有菜单结构与开关逻辑。 | 抽屉、遮罩、焦点循环、Escape、焦点恢复。 | 新版官网 |
| 后台临界宽度 | P0 | body min-width:1180px 导致页面溢出。 | Grid 子项允许收缩，表格容器独立滚动。 | 用户控制台 |
| 移动后台导航 | P0 | 完整菜单墙位于主内容之前。 | 900px 以下转换为按需抽屉。 | 平台管理端 |
| 表单标签与错误 | P1 | 主要依赖 placeholder，错误用短暂 Toast。 | 显式 label、字段级错误、aria-invalid 与焦点定位。 | 登录页 |
| 焦点与动作状态 | P1 | Hover 明显，键盘焦点和 loading 不完整。 | 统一 focus-visible、按压反馈、禁用和加载状态。 | 发布弹窗 |
| 官网内容节奏 | P1 | 连续 eyebrow 与等宽卡片重复出现。 | 重新组织页面节奏，同时保留原官网发布动画与关键识别元素。 | 支持类型 |
| 支持工具区 | 完成 | 静态网格移除了原双轨动画。 | 保留双轨反向移动、42 秒节奏、边缘渐隐和暂停逻辑，卡片视觉与新版统一，并支持 reduced-motion。 | 查看工具动画 |
| 首屏发布动画 | 完成 | 中间版本误把官网原有动画替换成了新流程插画。 | 恢复源码中的浏览器卡片、上传勾选、构建进度、发布成功和轻微浮动，只适配新版主题与响应式。 | 查看首屏 |
| 二维码比例 | 完成 | 带标题的纵向图片进入固定容器后产生形变。 | 二维码裁为独立正方形资源，说明文字改为 HTML。 | 查看联系区 |
| 页面滚动 | 完成 | 完全原生滚动，长页切换略显生硬。 | 接入轻量 Lenis 参数；触摸保持原生，reduced-motion 自动禁用。 | 体验官网 |
| 颜色对比 | 完成 | 绿色按钮白字与辅助灰文字对比偏低。 | 主动作改用深墨色，绿色承担强调和状态。 | 预览导航 |
| 减少动态效果 | 完成 | 官网动画不响应系统偏好。 | 所有页面支持 prefers-reduced-motion；工具跑马灯停止后可手动横向浏览。 | 系统设置中启用减少动态效果 |
07 / 流程
按 Taste 的重设计顺序执行
这次没有直接替换整套 UI，而是按规范先记录现状、修复基础，再重组关键区块。
读取品牌与路径
保留绿色品牌、Logo、主要业务词汇、套餐信息、网站发布路径和原官网双轨工具动画。
审计八个维度
检查字体、颜色、间距、布局、响应式、状态、可访问性和死控件。
先重建层级
控制标题行数、正文宽度和数字字体，不靠超大标题独撑层级。
再处理节奏
合并重复卡片区，使用列表、表格、时间线与不对称网格区分内容。
补齐交互状态
完善菜单、对话框、表单、上传、筛选、Toast 和空状态。
多视口回检
检查 1440、1024、901 和 390px，确认没有页面级横向溢出。