# 黏土拟态（Claymorphism）

镜语 · 版式与界面 / 材质与质感

- 别名：黏土风界面、Clay UI、软糖界面、3D 黏土卡片
- 口语：「像软糖一样鼓鼓的卡片」「粉粉嫩嫩的 3D 按钮」「圆滚滚、可以捏的感觉」
- 一句话：大圆角、粉彩色和内外双阴影，让卡片像一块鼓起来的软黏土
- 是什么：黏土拟态（Claymorphism）用很大的圆角、明亮的粉彩色、外部柔和投影加内侧亮暗双阴影，让卡片和按钮像一块鼓起来、可以捏的软黏土。常和 3D 卡通图标一起出现，适合年轻、友好的产品
- 缺了就不像：超大圆角；内外三层阴影鼓起；粉彩配色
- 加了更像：按下压扁回弹；3D 卡通图标；圆体字
- 适合用在：儿童教育、游戏化学习、记账和习惯打卡等轻松产品；活动页、个人主页里需要可爱、亲切的入口按钮；与 3D 卡通图标、黏土风插画搭配
- 看哪里：看卡片边缘：左上内侧有一圈亮光，右下内侧发暗，外面还有一层带颜色的柔和投影，所以它像悬浮的软糖。按下按钮时它会被「压扁」、阴影收小，松开后弹回
- 注意：严肃的金融、医疗或数据密集界面会显得不够专业；粉彩色太多会失去重点，需要一个更饱和的主色作为主要操作
- 描述示例：做一个黏土拟态风格（Claymorphism）的个人主页卡片：奶油色背景，卡片为粉彩色（淡紫、薄荷、蜜桃），圆角 32px 以上；每块卡片有三层阴影——外部大范围带色投影、左上内侧白色亮光、右下内侧深色暗影，看起来像鼓起的软黏土；按钮圆润饱满，按下时缩小并压扁；配圆滚滚的 3D 小图标和粗圆体字；整体软萌、明亮、可触摸
- 易混：
  - [新拟态](https://idea.ameng.dev/terms/neumorphism.md)：新拟态与背景同色、从背景鼓出；黏土拟态彩色、悬浮在背景之上
  - [黏土风](https://idea.ameng.dev/terms/clay.md)：黏土风是插画与三维造型的材质；黏土拟态只借用这种「鼓起来」的感觉做界面
- 相关：[3D 动画渲染风](https://idea.ameng.dev/terms/3d-render.md)、[弹性出现](https://idea.ameng.dev/terms/elastic-pop.md)、[Bento 网格](https://idea.ameng.dev/terms/bento-grid.md)

## 来源与延伸阅读

- [Hype4 Academy · Claymorphism in User Interfaces](https://hype4.academy/articles/design/claymorphism-in-user-interfaces)

网页版（含演示）：https://idea.ameng.dev/terms/claymorphism