新拟态 2.0 · 可用性优先

柔和的深度,清晰的层级

保留 Soft UI 的温润触感,换上 4.5:1+ 的对比度、8–12px 圆角与 200–300ms 顺滑动效——让柔和第一次真正可用。

今日步数

8,426/ 12,000 步

正念时刻

冥想 21 分钟 心率 62 睡眠 7.5 小时

风格信息

  • 类别通用风格
  • 年代2020s 现代
  • 复杂度
  • 最适合企业应用 / SaaS / 健康健身

进化了什么

比扁平多一分深度,比新拟态多一分清晰——这是柔性 UI 的第二代答案。

改良双层阴影

近距离一层锐、远距离一层柔,再加顶部高光,深度可感知、边界不模糊。

对比度达标

粉彩只作点缀,正文一律深墨青;文字对比 4.5:1 起步,WCAG AA+ 全线通过。

200–300ms 微动效

悬停上浮、按压内凹回弹都在 240ms 内完成,焦点环全程可见、从不失踪。

按钮与控件

凸起可点、内凹已按:状态用深度讲述,用对比确认。

新版 v2.0

表单示例

输入框微微内凹、边界清晰,聚焦时亮起 3px 行动蓝焦点环。

用于同步你的健康周报。

配色板

改良对比的粉彩体系:柔在装饰,稳在文字。

天空蓝 · 粉彩#87CEEB
樱花粉 · 粉彩#FFB6C1
嫩芽绿 · 粉彩#90EE90
行动蓝 · 主色#0F609B
墨青 · 文字#1F2A37
雾蓝 · 底色#E9EFF6

字体级阶

柔和而清晰显示级 · Nunito ExtraBold · clamp(35–48px)
深度为层级服务标题 · Nunito ExtraBold · 26px
正文使用 Nunito Regular,圆润字形与柔和界面同气质,对比度稳守 4.5:1 以上。正文 · Nunito Regular · 17px
Soft Label · 柔性标签标签 · Nunito ExtraBold · 14px · 字距 0.12em