设计思考与核心理念
HOE DESIGN LAB•2026-06-28
* 声明：文稿、设计思考、创意想法全程无 AI 参与，仅代码实现环节有 AI 辅助。
核心理念：整个开头动画是围绕滚动条来做的，在这个页面里面，滚动条不单单是一个提示当前页面位置的工具，它同时还是一个灵动的、和我们交互的道具。页面的大多数元素都不是凭空出现的，下面我想分享一下我的思考。
Page 1
卡片由开场动画自然带出，之后经过反转动画缩小过渡到右侧，自然切换为滚动条，此时完成了从无到有。
Page 2
这里有我最喜欢的设计，我几乎在我的每一个内容站都用了这个设计（不小心暴露弃坑了很多内容站），这里就是文字切换，这里是滚动条变换为扫描线，从右往左边扫，然后滚动条自然过渡到左边。被扫过的文字发生变化，比如从 Frontend 变为 develop、从 design 变为 system、从 create 变为 future。这里我想表达的一个含义就是，我们每一个好看的页面，每一个优雅的设计，背后都是精密的系统。暗示文化与科学互相依赖，齐头并进。
Page 3
这个页面看起来没有前两个页面那么惊艳，因为我把设计藏在了一个不容易注意到的地方，如果你仔细看了滚动条，你会发现它的颜色会不停的变化。滚动条默认是白色滚动条，从滚动条“出来”第一个红色卡片的时候，滚动条变为青色（蓝 + 绿），第二个绿色卡片出来后，滚动条变为蓝色，最后蓝色滚动条直接变为最后一个卡片。这里暗示了光的三原色变化，退场也是如此，红色卡片先退场，变为红色滚动条，然后绿色退场，滚动条变为黄色，最后变为白色，同时滚动条又从左边变到了右边。
Page 4
这里是项目展示页面，所以没有太多的效果，滚动条从侧边“平铺”到横面，作为项目进度条展示进度。