数字花园

高级感住在细节里:三处微交互

2026-09-14 · 约 2 分钟 · 设计 · 随笔

大效果谁都会做,细节才分高下

hero 的大标题、粒子星球、滚动叙事——这些是舞台。但观众离场时记住的,往往是走廊里的灯。

这一天做了三处微交互。位置都不起眼,标准只有一个:如果是 Apple,它会在意吗?

一、数字要滚着来

联系区那行 8+ REPOS · 214+ STARS · 25+ FOLLOWERS,之前是静态文字。现在滚进视口时,三个数字从 0 各自滚到终点,1.4 秒,power3 曲线——Apple 发布会成绩页同款。

工程上有个体面的细节:数字先以真实值渲染,进视口才归零滚动。**JS 挂掉、网络差、减动效——数字永远是完整的。**动画是增量,不是依赖。

二、输入框要有光环

搜索框聚焦时:边框从发丝灰弹簧成蓝,外圈泛起一层 4px 的淡蓝光环,放大镜同步点亮微放大。

iOS 输入框的这套语言,本质是告诉用户:你现在在这里。 光标是视线的家,光环是家的门牌。

三、标签要有重量

数字花园里那排标签胶囊,悬停时上浮两像素、描边与底色泛起淡蓝。很小的位移,但指尖能感觉到它”接住了”。

一条收尾的军规

**微交互的预算是两像素和零点三秒。**超了就是表演,不超才是回应。

评论

← 数字花园