TACTILE · 2025+ 触感时代

按下去会回弹的界面

每个组件都有物理属性:果冻会挤压 (scale 0.95),铬金属反射高光,黏土留下指印。按压 → 形变 → 弹簧回弹,一气呵成 400ms。

风格信息

类别通用 General 年代2025+ 触感时代 复杂度 最适合移动应用 · 娱乐游戏 · 消费产品 · 互动演示

三种可形变材质

点按下方卡片,感受不同材质的按压响应与回弹曲线 cubic-bezier(0.34, 1.56, 0.64, 1)。

果冻 Jelly

半透明弹性体,按压时横向鼓起、纵向压扁,松手后过冲回弹两次才归位。

弹性 ★★★★★

铬金属 Chrome

液态金属渐变模拟环境反射,高光随悬停位移,硬质但仍保留轻微弹性。

光泽 ★★★★★

黏土 Clay

厚实哑光体,内外双阴影塑造揉捏感,按压后缓慢恢复,像真实橡皮泥。

触感 ★★★★★

按钮与控件

hover 放大 1.06 悬浮,active 挤压变扁并出现内凹阴影,disabled 失去弹性。

按钮状态
开关与徽标(按住开关看旋钮被压扁) Q 弹认证

预约触感体验

输入框聚焦时会轻轻鼓起 1%,这是它在回应你。

配色板

金属灰阶 + 果冻粉蓝 + 黏土暖橘,一套能捏的调色盘。

铬银#C0C0C0
果冻粉#FF9ECD
软糖蓝#87CEEB
黏土橘#FFD9C7
弹簧紫#6D28D9

字体级阶

显示级 · Baloo 2 800 · 48px

软软的标题

标题 · Baloo 2 700 · 28px

圆润饱满有弹性

正文 · Nunito 400 · 16px

可形变界面把物理世界的材质记忆带回屏幕:挤压、回弹、光泽与指印,让每次点击都有确定的手感。

标签 · Nunito 800 · 13px

SQUISHY · NO.60