数字花园
高级感住在细节里:三处微交互
大效果谁都会做,细节才分高下
hero 的大标题、粒子星球、滚动叙事——这些是舞台。但观众离场时记住的,往往是走廊里的灯。
这一天做了三处微交互。位置都不起眼,标准只有一个:如果是 Apple,它会在意吗?
一、数字要滚着来
联系区那行 8+ REPOS · 214+ STARS · 25+ FOLLOWERS,之前是静态文字。现在滚进视口时,三个数字从 0 各自滚到终点,1.4 秒,power3 曲线——Apple 发布会成绩页同款。
工程上有个体面的细节:数字先以真实值渲染,进视口才归零滚动。**JS 挂掉、网络差、减动效——数字永远是完整的。**动画是增量,不是依赖。
二、输入框要有光环
搜索框聚焦时:边框从发丝灰弹簧成蓝,外圈泛起一层 4px 的淡蓝光环,放大镜同步点亮微放大。
iOS 输入框的这套语言,本质是告诉用户:你现在在这里。 光标是视线的家,光环是家的门牌。
三、标签要有重量
数字花园里那排标签胶囊,悬停时上浮两像素、描边与底色泛起淡蓝。很小的位移,但指尖能感觉到它”接住了”。
一条收尾的军规
**微交互的预算是两像素和零点三秒。**超了就是表演,不超才是回应。
评论