一次公司官网改版中的设计取舍

2026 年 8 月，我接手了公司官网的改版迭代任务。拿到手的网站，是同事用 AI 根据宣传 PPT 物料初步还原的网页，已有首页、产品介绍、生态合作和关于我们等页面。

页面里的信息不少，每个区块都有标题、说明和图，连续看下来却不容易分清重点。这一轮我主要调整内容层级、页面布局和动效，文案与配图也一起修改。这篇文章讲讲其中几个比较有意思的设计。

让痛点随着滚动被划掉

产品页的痛点区原来只是列出几项问题。我把它改成一组随滚动变化的对照：进入这个区块时，先看到“经验留不下”“协同连不起来”等痛点，右侧暂时留空。

继续向下滚动，左侧文字逐条退成灰色，删除线从左向右划过去，中间长出箭头，右侧再出现对应的解决方式。例如“经验留不下”对应“交互与操作沉淀为组织资产”。题头也从问题切换到解决后的表述。

痛点一直留在原来的位置，解法在同一行出现。读者可以直接看到两者的对应关系，不必翻到下一屏再回忆前面的问题。

这段效果用 GSAP 的 ScrollTrigger 控制。桌面端进入区块后，通过 pin 暂时固定这一屏，再用 scrub 让滚动位置控制时间轴。题头切换、每行的退灰与删除线、箭头和右侧文字，都安排在同一条时间轴上。

我让删除线稍微划过词尾，避免刚好停在最后一个字里。额外长度按字号计算，放大或缩小后仍保持相近比例。箭头与删除线接近同时起步，在右侧文字完全出现之前画完，读起来才像从问题指向解法。右侧文字沿水平方向擦出，没有再叠加向上浮动。

题头最后采用淡出、留出短暂间隔、再淡入的切换。两版标题长度不同，中途拼接容易形成奇怪的半句话；小标题 WHY LEAPCORE 则保持不动。

还有一个容易忽略的地方是滚动距离。刚做完时，区块固定后要滚一段才开始变化，看完整段也太长。我同时缩短了 ScrollTrigger 的总滚动行程和时间轴里的开场、行间及收尾空档。只改时间轴里的时长，总滚动距离不会变，动画只是被重新摊到原来的距离里。

窄屏、不运行 JavaScript 或用户偏好减少动态效果时，直接展示完整的痛点与解法，不需要经过这段滚动才能读到内容。

信息关系与页面布局

产品卡片的排布也需要比较。三张卡片并排放置时，我想过把中间一张放大，做出错落感。比较几种排布时，我也要检查中间卡片的强调，会不会让另外两款产品显得次要。

首页的调整因此包括两部分：区块之间增加留白，区块内部重新安排内容层级。只把 section 拉高可以缓解拥挤，但标题、说明、指标和图片之间仍然需要区分主次。

配图也跟着内容调整。有些图片画风不同，有些包含过多信息。我让一部分内容直接用文本、图标和箭头排出来。例如几层能力逐步积累的关系，可以在页面上展开，不必继续压进一张复杂插画。

从首页确定整站风格

首页确定后，我让 Agent 总结页面和配图风格，再去调整其他页面。子页先保留内容，统一布局与样式，避免每个页面分别设计。

统一风格需要落实到具体元素。有些 section 小标题带下划线，有些不带；按钮的 hover 有些发光，有些出现阴影。我要求按钮统一为少量位移与文字、背景颜色变化，过渡约 100ms，保持清楚而简短的反馈。

需要比较的部分放进开发环境的 Dev Lab。候选方案保留完整页面，只替换正在讨论的区块，直接滚动就能看到它与导航、相邻内容和页面宽度的关系。

还没决定的方案继续在 Lab 中比较，正式页保留已选定的版本。定稿后，把修改整理回正式页，删除对应候选，历史版本交给 Git 保存。

动效与页面状态

对于产品和市场提出的 GSAP 入场效果，我先让 Agent 制作候选，也找了一些样例对照页面风格。具体是否采用，仍然要看区块需要怎样的运动。

数据流图的问题比较明确：圆点沿连接线移动，到一半却消失了。画面上的路线连续，动画的几段运动没有衔接起来。这种地方适合使用 GSAP 的路径控制，用完整 SVG path 表达路线，再让圆点沿路径移动。候选实现还处理了圆点穿过卡片时的遮挡，以及窗口缩放后重建路径。

普通按钮只需要短过渡，首屏已经可见的元素也不必全部增加淡入。相比统一替换动画库，我更倾向于按区块确定需要的效果。

导航需要反映页面状态。顶部与首屏融合，页面向下滚动后，变成贴着视口上边的胶囊，只在两个下角保留圆角。

导航放到关于页的合照背景上后，文字对比度又变得不足。我要求连同图片、遮罩和 Logo 一起调整：顶部使用白色 Logo，滚动到浅色导航背景时切回深色。相同的导航样式，需要在不同页面背景上检查可读性。

产品演示的任务过程

产品页的早期候选虽然切换了几个场景，观看时仍然接近几张介绍 PPT 依次播放。我希望这里能表现实际交互，让读者看清任务如何发起、处理和交接。

跨部门协作的候选设计就围绕一项任务展开：一个部门发起客户续约任务，Agent 将工作派给销售部门；切换到销售会话后，出现同一个任务卡，随后展示处理过程和返回的初稿文件。

布局由任务过程决定。左侧是部门列表，右侧是当前会话。部门切换有明确原因，任务卡在切换前后保持对应，结果文件也有自己的出现时机。

消息状态分别处理：任务直接出现，回复逐步输出；思考结束后折叠，下一条消息继续在原位置排列。结果文件出现后多留一点时间，让读者看清再切换。

另一版候选的工作台结构比较完整，却与实际产品 UI 有不小差异。我要求进一步抽象，保留会话、任务卡和结果，减少无关控件。这一段需要解释的是协作过程，过多的界面细节会分散注意力，也容易让读者把候选界面当成产品实际外观。