触感可变形界面Tactile Digital / Deformable UI
元素像软胶一样可压、可拉、可回弹，材质高光随位移变化，配合触觉反馈。手感极佳，但性能与可用性风险都高。
典型场景实验性产品 · 品牌互动 · 移动端彩蛋
编号60
年代2025+ Tactile Era
复杂度Medium
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
元素像软胶一样可压、可拉、可回弹，材质高光随位移变化，配合触觉反馈。手感极佳，但性能与可用性风险都高。
关键词
Jelly buttonschromeclaysquishydeformablebouncyphysicaltactile feedbackpress response
效果与动效
Press deformation (scale + squish), bounce-back (cubic-bezier), material response, haptic-like feedback, spring physics
设计系统变量
--press-scale0.95--bounce-duration400ms--spring-stiffness300--spring-damping20--material-glossylinear-gradient(135deg, white 0%, transparent 60%)--depth-shadow0 10px 30px rgba(0,0,0,0.2)配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Gradient metallics, Chrome Silver #C0C0C0, Jelly Pink #FF9ECD, Soft Blue #87CEEB
辅色 / Secondary
Glossy highlights, shadow depth, reflection effects, material-specific colors
强调色在页面底色上的对比度约 5.1:1，可用于正文与图标。
适用场景
适合 / Best For
- Modern mobile apps
- playful brands
- entertainment
- gaming UI
- consumer products
- interactive demos
避开 / Do Not Use For
- Enterprise software
- data dashboards
- accessibility-critical
- professional tools
框架兼容
framer-motionreact-springgsap
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向极强Very High
渲染成本低无额外开销
无障碍风险需实测contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Press effect visible,
- Bounce-back smooth,
- Material feels tactile,
- Spring physics tuned,
- Mobile touch responsive,
- Reduced motion option
CSS / 技术关键词
transform: scale(0.95) on active, animation: bounce (cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow: inset for press, filter: brightness on press, spring physics (react-spring/framer-motion)
AI 提示词
Design a tactile deformable interface. Use: jelly/squishy buttons, press deformation effect, bounce-back animations, chrome/clay materials, spring physics, haptic-like feedback, material response, 3D depth on interaction.