SPT术语库

黏土拟态 Claymorphism

当一个面向普通用户的健康、生活或个人效率页面需要亲近、轻松又可操作时,Claymorphism 用柔和材质把目标、状态和下一步包在可读的实体感模块里。

设计风格约 8 分钟 · 从真实需求理解

1先让今天变得轻一点,再告诉人下一步做什么

Small plans still deserve a thoughtful finish.
MELLOWDAY 07 · TUE
A GENTLER DAILY ROUTINE

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.”
TUE · 08:30TODAY'S FOCUS
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 STREAK
08:45
Short walk12 min · Outdoors
11:30
Drink some water250 ml · By the desk
18:20
Put the phone down20 min · Quiet time
A gentle rhythm, not a perfect standard
5 / 7TODAY'S FOCUS
MADE FOR A SOFTER START

Claymorphism 不是把所有元素做成鼓起的糖果。它用低对比的底色、柔和的外阴影和内凹阴影,把页面里的目标、状态和行动变成像黏土一样有体积的实体;但信息仍然要像一个认真工作的健康计划页面一样可读。

  • 主目标使用更完整的凸起表面和更大的体积,让用户先知道今天要完成什么。
  • 进度、输入或已完成状态可以用内凹表面表达被记录的关系,不要只用一条浅色线暗示状态。
  • 真正需要点击的行动才使用清楚的高亮色和轻微凸起,避免每个模块都像主按钮。
  • 圆角、阴影和柔和色彩必须服务层级;正文、数字和按钮文字仍要有足够对比,不能被“可爱”掩盖。

2设计原则

Claymorphism 最容易被误解成“圆角越大越可爱”。如果每个区块都有厚重阴影、每个文字都放在浮起的卡片上,页面会失去信息层级;如果只剩渐变背景和气泡,也没有真实对象说明这些表面为什么存在。

  • 凸起表面负责让主目标或主要行动被看见,内凹表面负责表达输入、进度或已经被记录的状态,两者不能随意互换。
  • 一个页面应该只有少数高亮体积;辅助内容可以落在同一柔和背景上,让用户知道哪里重要、哪里只是上下文。
  • 柔和阴影改变的是层级和触感,不是文字对比度;数字、标签和按钮仍然要能在 390px 和 320px 下快速读出。

先问每个圆角和阴影在解释什么关系,再决定它的厚度、颜色和位置。健康、食谱和预算页面可以共享黏土感,但不能共享同一组卡片比例和内容顺序。

3典型使用场景

  • 每日习惯工作台
MELLOW / DAYDAY 07 · TUE
A GENTLER DAILY ROUTINE

Prepare a more thoughtful plan for the day ahead.

Five minutes outside, a glass of water, and room to breathe.

START WALK →OPEN JOURNAL
STREAK06 DAYSNEXT08:45
  • 一周食谱计划
TABLE / COOKWEEK 42 · 05
A JUST-RIGHT MENU

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
PREP TIME1 HR 45 MINSERVES02 PEOPLE
MON · DINNERLemon chickpea bowl20 min · Use pantry first8 INGREDIENTS
WED · LUNCHMiso greens and rice25 min · Prep ahead6 INGREDIENTS
FRI · DINNERTomato butter beans30 min · One pot5 INGREDIENTS
SHOPPING LIST19 ingredientsGrouped by aisle for Saturday.VIEW LIST
  • 月度预算回顾
NEST / MONEYOCTOBER · 31
SEE THE MONEY CLEARLY

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,不允许横向滚动或裁切。

社区延伸

看别人真实遇到过什么

社区帖子还没有关联到这个词条。