SPT术语库

新拟态 Neumorphism

当专注计时、音频控制、健康记录等单一任务页面需要安静、触感化的操作反馈时,新拟态用柔和表面表达“按下、凸起和嵌入”,而不是把所有内容都做成无边界的软卡片。

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

1把触感留给真正的操作

QUIET FOCUSTODAY'S RHYTHM / 04
Soft surfaces serve the current action; status and labels stay explicit.
TODAY'S FOCUS SESSION

Make room for one important thing.

A clear time subject and low-noise control area help you enter the next focus block without hunting for a button.

START TIMERVIEW TODAY'S LOG
CURRENT MODEDEEP FOCUSCOMPLETED TODAY02 SESSIONS
TIME LEFT25:00
START TIMER
MORNING
ORGANIZE RESEARCH NOTES25 min · completed
DONE
NEXT
WRITE THE PRODUCT DECISION25 min · ready to start
UP NEXT
SOFT SURFACE · CLEAR ACTION · QUIET FOCUS17 / 33

新拟态 Neumorphism 让控件像从同色系表面轻轻凸起或压入,通过柔和高光、阴影和圆润边缘制造触感。它的困难也在这里:如果所有元素都和背景一样,用户会分不清按钮、输入区和装饰,所以文字、边框、焦点和状态必须独立成立。

  • 先确定一个单一任务,例如专注计时、音频控制或轻量记录,再让触感围绕主要操作服务。
  • 阴影表达表面关系,不能替代标签、状态词、错误说明和焦点指示。
  • 交互元素使用清楚的边框、强调色或按下状态补足低对比风险,不能只靠光暗变化。
  • 在放大文字、灰度、键盘焦点和窄屏下检查每个操作是否仍然可辨认。

判断页面是否真正新拟态,可以先看它是否有明确的单一任务,再把阴影去掉检查信息和操作是否仍然存在。如果去掉阴影后用户完全不知道哪里能按,说明触感已经越过了信息边界。

2设计原则

新拟态和玻璃拟态、材质设计、拟物化都可能使用层次和材质感,但新拟态的识别点是同色系表面上的凸起与凹陷。它不是把所有区域做成低对比灰色,也不是用阴影隐藏真实的界限。

  • 它和玻璃拟态的差别在于层次来自同色系表面和光源方向,而不是透明、模糊和背景穿透。
  • 它和材质设计的差别在于新拟态强调柔和触感,不能因此放弃清楚的状态、焦点和操作反馈。
  • 它和拟物化的差别在于新拟态不需要复制真实物件细节,只借用凸起、压入和触摸的感觉。
  • 页面越复杂,越要减少软表面数量;重要文字、按钮、错误和选中状态不能只靠阴影区分。

一个实用判断是:先把阴影调成灰度,再检查用户能否找出主按钮、当前状态和下一步。如果不能,就要补充颜色、边框或文字,而不是把阴影做得更重。

3典型使用场景

  • 专注计时器
QUIET FOCUSFOCUS SPACE / 04
TODAY'S FOCUS SESSION

Make room for one important thing.

A clear time subject, mode, and next action help you begin.

START TIMERVIEW LOG
CURRENT MODEDEEP FOCUSCOMPLETED TODAY02 SESSIONS
TIME LEFT25:00
START TIMERPAUSE
  1. PREVIOUSORGANIZE RESEARCH NOTES25 min · completedDONE
  2. NEXTWRITE THE PRODUCT DECISION25 min · ready to startCURRENT
  • 音频播放控制台
SLOW LISTENINGSOUND SPACE / 12
STUDY SESSION · AMBIENT SOUND

Keep the sound at the right distance.

Use tactile controls for volume and progress while attention stays on the current task.

RESUME PLAYBACKOPEN QUEUE
PROGRESS18:42 / 42:00VOLUME68%
NOW PLAYINGCOASTAL WIND
RESUME PLAYBACK
  1. PREVIOUS
    RAIN ON WINDOWAmbient sound · 32 min
    PREVIOUS
  2. CURRENT
    COASTAL WINDAmbient sound · 42 min
    PLAYING
  3. NEXT
    FOREST FOOTSTEPSAmbient sound · 28 min
    NEXT
  • 每日健康记录
DAILY RHYTHMWELLNESS LOG / 07
WEDNESDAY · LIGHT LOGGING

Leave a little room for the body.

Log water, rest, and the next reminder to turn small goals into a steady rhythm.

LOG A GLASS OF WATERADJUST REMINDER
TODAY'S PROGRESS04 / 06
WATER04 GLASSESREST02 BREAKS
04 / 06TODAY'S PROGRESS
09:10MORNING WATEROne warm glass · logged
DONE
13:40AFTERNOON BREAKStep away from the screen for 15 min
TO LOG
18:30EVENING REMINDERNext check-in time
UP NEXT

新拟态的样张要覆盖不同的单一任务:专注计时需要大而安静的时间主体,音频控制需要可触摸的旋钮和进度,健康记录需要低压力的连续反馈。下面三张页面采用不同结构,只共享克制的软表面和清楚的操作状态。

  • 专注计时器:让时间成为唯一的视觉中心,开始、暂停和模式文字保持可辨认。
  • 音频播放控制台:用旋钮、进度和播放列表建立真实控制关系,不用软卡片包住全部内容。
  • 每日健康记录:用柔和表面承载记录节奏,指标和已完成状态仍有独立边界。

4怎样把新拟态需求交给 Agent?

请制作一个新拟态 Neumorphism 风格的完整中文页面,先确定一个单一任务,例如专注计时器、音频播放控制台或每日健康记录,再用同色系背景、柔和高光、外阴影和内阴影表达轻微凸起与按下感。请让标题、数字、按钮、标签、错误和键盘焦点独立可辨认,不要把所有内容都做成无边界的灰色软卡片;阴影不能单独承担状态和可点击性。检查 1440px、720px、390px 和 320px,确认中文标题、计时数字、主要动作和状态不裁切、不拥挤,不要在共享背景里再套一张装饰卡片。

社区延伸

看别人真实遇到过什么

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