项目案例

落地页动效系统

一套为技术产品落地页设计的轻量动效语言,在增强生命力的同时保持清晰和性能。

设计系统2025
MotionTailwindNext.jsFigma

Project Overview

这个系统研究的是:在暗色产品页面里,怎样的动效会让页面“活着”,但不会损失信任感。

Problem

很多技术网站动效太多,看起来很炫但不稳;另一些又太静,完全没有产品正在运转的感觉。

Approach

我把范围限制在几个模式里:入场淡入上移、卡片轻微上浮、首屏缓慢漂移,以及对 reduced motion 的尊重。

Design System

动效不应该是补丁,而应该是系统的一部分。它需要有统一的时长、节奏和边界。

Tech Stack

Motion、Tailwind、CSS 变量,以及一组可复用的组件级交互模式。

Result

最终效果是页面有生命感,但不会抢走内容本身的注意力。

Next Step

继续做和滚动状态联动的 section-level 动效。