Zack Design Skills examples / before-after

同一款 Foyton，两种设计判断

两份文件共享同一套产品事实——同样的 47 个模型、同样的价格、同样的 SLA、同样的文案意图。 左边按 AI 生成的平均水平写，右边按一套写下来的设计规则重写。差别不在审美，在于有没有做决定。

怎么看这一页

  1. 先停在 桌面 1440，两栏左右对照，看首屏信息密度和分区节奏的差异。
  2. 切到 手机 390，看右侧是否真的重新排版，而不是把字号调小。
  3. 打开 同步滚动，两栏会停在同一个纵向位置，方便逐段比。
  4. 滚到下面的对照表，每一条都写了「为什么」。
视口宽度
模式
缩放 100%
改前

AI 味

Inter / Arial · 渐变铺满 · 全居中 · emoji 图标
改后

有判断

serif 展示字 · 单一琥珀 · 非对称 · SVG 图标

两个 iframe 都以所选宽度真实渲染后等比缩放，不是截图；可以在框内直接滚动。

21 处最显眼的改动

每一条都对应 after.html 里的一个 data-rule。“为什么”写的是设计理由，不是风格偏好。

改前（before.html）→ 改后（after.html），按视觉显著性排序
项目 改前 改后 为什么
首屏背景 紫→蓝→粉大面积渐变铺满整屏 暖白底 #FAF8F3，颜色只出现在图表和数据上 全屏渐变把视线拉向背景而不是内容，而且与产品本身没有任何语义关联；大色域的饱和度还会压掉正文的可读性。
主标题断行 46px 塞进 400px 容器，折成 6 行 clamp(2.75rem,6vw,5rem)，桌面用 <br> 锁死 2 行 标题行数是层级的第一信号。6 行的标题在视觉上退化成一段正文，用户第一眼抓不到重点。
标题着色 渐变文字 background-clip:text（白→黄→粉） 单一墨色 #17150F，靠字号和字重分层级 渐变文字在低色深屏幕和缩放下会出现色带，同时削弱字形轮廓，等于用装饰换掉可读性。
字体栈 Inter, Roboto, Arial, sans-serif 展示字 ui-serif, Georgia + 界面字 -apple-system, Segoe UI 只有一套无衬线时，所有文字重量相同，层级只能靠字号；衬线展示字与无衬线正文的对比本身就是层级。
首屏视觉 没有产品画面，纯文字居中 SVG/CSS 手绘控制台：面积图 + 密钥表 + 延迟趋势线 首屏要回答“这东西长什么样”。抽象宣言无法让人判断这是监控工具还是聊天机器人。
行动按钮 “了解更多” + “立即体验”，同权重，都带重投影 琥珀实心主按钮 + 描边次按钮，语义明确 两个视觉等价的 CTA 等于没有 CTA。用户需要知道哪一个是推荐路径。
圆角 所有元素 rounded-full / rounded-2xl 8 / 12 / 16 / 22px 四级语义圆角 圆角一旦成为全局默认值，就不再传递“这是一个按钮”或“这是一个容器”的信息。
特性区结构 3 张等高居中的卡片，无层级 变跨度 bento：7 种单元格（图 / 统计 / 代码 / 图表 / 引言 / 清单） 等权重网格抹平了“哪个能力最重要”。变跨度让布局本身表达优先级，同时避免留白空洞。
图标 emoji 当图标，共 6 类：火箭 / 火花 / 火焰 / 灯泡 / 闪电 / 靶心 1.5px 描边线性 SVG，继承 currentColor emoji 在各系统渲染成完全不同的图形，无法继承文字颜色，也无法与描边粗细对齐。
小标签 “FEATURE 01 / SECTION 02 / STEP 03” 语义化 eyebrow：“平台能力 / 定价 / 可用性” 编号是模板的自证，为写的人服务；用户需要的是“这一段在讲什么”。
社会证明 5 个灰色 LOGO 占位方块 + “1000+ 企业信赖” 7 个排版 wordmark，附行业注释 + 4 项带口径的统计 占位方块证明的恰恰是“我没拿到授权”。排版 wordmark 至少是真实文字，且能带上使用场景。
数字 价格全部是“—”，三档都写“联系我们” ¥0 / ¥299 / ¥1,499，超出单价也给出 隐藏价格会让有预算的用户直接离开；给出数字反而筛掉了不匹配的线索，降低双方成本。
对比表 没有对比表，三档并列即全部信息 12 行功能对比，数值右对齐、等宽数字 没有逐项对比，“推荐”标签就只是一个视觉装饰；有了对比，推荐才成为结论。
客户评价 5 条文字完全相同的五星好评 1 条带具体结果与职务的引言 可复制的评价等于不可信。一条“季度对账从 3 天压到 40 分钟”比五颗星更有说服力。
分区节奏 每个 section 都是 96px 内边距 + 全居中 约束容器与全幅交替，含一段全幅深色面 节奏不变，滚动就失去章节感。深色面是低成本的段落分隔符，比加分割线更有效。
深度与投影 0 10px 15px rgba(0,0,0,.1) 硬投影 发丝描边 rgba(23,21,15,.055) + alpha ≤ .06 的大模糊扩散阴影 硬投影把元素“贴”在页面上，扩散阴影才是“浮”起来。深度应该来自色阶与描边，不是黑色块。
动效曲线 transition: all .3s ease-in-out，部分元素零过渡 140–200ms + cubic-bezier(.22,1,.36,1)，只过渡具体属性 all 会连带布局属性一起插值，触发重排掉帧；ease-in-out 起步慢，交互反馈会显得迟钝。
滚动揭示 无 IntersectionObserver，位移 10px + 透明度淡入 位移超过约 12px 就会被读成“元素在飞”。小幅位移只用来提示“这里是新内容”。
键盘可达 outline: none，没有任何焦点样式 :focus-visible 琥珀描边 + 跳转链接 + aria-label 去掉 outline 而不给替代方案，等于让键盘用户彻底失去当前位置感。
动效降级 公告条无限滚动，完全忽略 prefers-reduced-motion 该系统偏好下关闭全部过渡、位移与动画 前庭功能敏感的用户会因为持续滚动和位移动画产生不适，这是可访问性问题而非偏好问题。
页脚 12 个 href="#" 死链 4 组按信息架构分类的真实入口 + 状态行 死链页脚是“这个站点还不存在”的证据；分组页脚同时承担了站点地图的职责。
公告条 亮紫色 marquee 无限滚动，带 emoji 改成导航栏内一行常驻状态：“全部区域正常 · 99.98%” 滚动公告是注意力税，用户无法控制它的节奏。同样的位置用来播报系统状态，信息价值更高。