黏土拟态 Claymorphism
当一个面向普通用户的健康、生活或个人效率页面需要亲近、轻松又可操作时,Claymorphism 用柔和材质把目标、状态和下一步包在可读的实体感模块里。
设计风格约 8 分钟 · 从真实需求理解
1先让今天变得轻一点,再告诉人下一步做什么
Small plans still deserve a thoughtful finish.
Leave a little room for today.
See the next step, what is done, and what can wait in a softer planning rhythm.
START TODAY →OPEN JOURNAL
“You do not have to finish everything today.”
72%5 / 7 COMPLETED
Slow down and take one small step at a time.
Three gentle actions are enough for today.
Soft progress is still real momentum.
UP NEXTKeep a gentle rhythm.
06 DAY STREAK08:45
Short walk12 min · Outdoors
✓11:30
Drink some water250 ml · By the desk
·18:20
Put the phone down20 min · Quiet time
·Claymorphism 不是把所有元素做成鼓起的糖果。它用低对比的底色、柔和的外阴影和内凹阴影,把页面里的目标、状态和行动变成像黏土一样有体积的实体;但信息仍然要像一个认真工作的健康计划页面一样可读。
- 主目标使用更完整的凸起表面和更大的体积,让用户先知道今天要完成什么。
- 进度、输入或已完成状态可以用内凹表面表达被记录的关系,不要只用一条浅色线暗示状态。
- 真正需要点击的行动才使用清楚的高亮色和轻微凸起,避免每个模块都像主按钮。
- 圆角、阴影和柔和色彩必须服务层级;正文、数字和按钮文字仍要有足够对比,不能被“可爱”掩盖。
2设计原则
Claymorphism 最容易被误解成“圆角越大越可爱”。如果每个区块都有厚重阴影、每个文字都放在浮起的卡片上,页面会失去信息层级;如果只剩渐变背景和气泡,也没有真实对象说明这些表面为什么存在。
- 凸起表面负责让主目标或主要行动被看见,内凹表面负责表达输入、进度或已经被记录的状态,两者不能随意互换。
- 一个页面应该只有少数高亮体积;辅助内容可以落在同一柔和背景上,让用户知道哪里重要、哪里只是上下文。
- 柔和阴影改变的是层级和触感,不是文字对比度;数字、标签和按钮仍然要能在 390px 和 320px 下快速读出。
先问每个圆角和阴影在解释什么关系,再决定它的厚度、颜色和位置。健康、食谱和预算页面可以共享黏土感,但不能共享同一组卡片比例和内容顺序。
3典型使用场景
- 每日习惯工作台
Prepare a more thoughtful plan for the day ahead.
Five minutes outside, a glass of water, and room to breathe.
START WALK →OPEN JOURNAL
- 一周食谱计划
Make this week a little easier.
Three dinners, one warm lunch, and a shopping list that knows when to stop.
BUILD SHOPPING LIST →SWAP A DISH
- 月度预算回顾
Leave more room for what matters.
Read this month clearly, then set a useful limit for the next one.
AVAILABLE BALANCE¥4,280After planned bills
SET OCTOBER GOAL →VIEW TRANSACTIONS
- 每日习惯工作台:用主目标、完成度和下一项任务把亲近的情绪入口落到一个具体行动。
- 一周食谱计划:用日期、菜品和准备时间组织柔和但有节奏的采购流程。
- 月度预算回顾:用余额、分类和储蓄目标说明柔软视觉不能牺牲金额关系。
4怎样把 Claymorphism 需求交给 Agent?
请制作一个真实的个人生活或效率页面:先确定用户要完成的目标,再用低对比背景、柔软凸起模块和内凹状态区把目标、证据和下一步行动排出优先级。圆角、阴影和高亮色必须说明页面里的真实关系,不能把所有内容都做成同样厚度的气泡。主目标使用可辨认的凸起体积,状态或已记录内容使用内凹关系,主要 CTA 才使用有限的高亮色;正文、数字和按钮文字必须清楚,不能因为浅色背景、内阴影或低对比而难以阅读。健康、食谱、预算等不同页面要根据任务重排内容对象和版式节奏,不复用同一套卡片模板。在 390px 和 320px 下保留页面标题、关键数字、主任务和入口;检查所有标题换行、按钮边界和 scrollWidth,不允许横向滚动或裁切。
社区延伸
看别人真实遇到过什么
社区帖子还没有关联到这个词条。