SPT术语库

材质设计 Material Design

当任务工作台、邮箱、行程或健康服务需要让用户知道内容位于哪一层、下一步在哪里时,Material Design 用表面、动效和浮动动作入口建立连续的操作关系。

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

1材质设计让每个下一步都有自己的表面

MATERIAL / TODAYWORKSPACE / 09
TASK WORKSPACE · TUESDAY

Make room for the next useful thing.

A calm surface for today's tasks, progress, and one clear action.

Add task +
TUE / 14 MAYToday
IN MOTION · 03
09:30Review launch notesProduct / 12 comments
DONE
11:00Share the field reportResearch / 4 readers
OPEN
14:30Plan tomorrow's handoffTeam / 20 minutes
OPEN
tasks need your next stepADD
IN MOTION · 03

Material Design 把数字界面想象成一组有厚度和前后关系的实体表面:应用栏建立坐标,内容纸面承载任务,进度表面解释状态,浮动动作入口在当前上下文中提示下一步。

  • 阴影不是装饰,而是说明哪个表面位于上层、哪个表面仍属于背景或底层。
  • 网格与间距先建立阅读节奏,再用颜色表达重点;不要把所有信息都包成相同的圆角卡片。
  • FAB 只承担一个清楚的主要动作,并且不能遮住任务、指标或关键说明。
  • 动效应当让表面升起、内容定位或动作反馈更容易理解;减少动效时仍要保留完整的状态和结果。

2设计原则

Material Design 容易被缩减成“白色卡片加阴影”。真正的重点是把界面当成一组有空间关系的材料:表面承载内容,间距建立节奏,动作从当前层级中出现,动效帮助用户理解状态如何变化。

  • 每一层 elevation 都要回答它为什么在上面;如果去掉阴影不会损失关系,就不需要继续加阴影。
  • 主表面可以承载连续的信息流,列表行、指标和分组不必全部独立成卡。
  • FAB 是单一主要动作的浮动入口,不是把所有按钮都做成圆形,也不能覆盖用户正在阅读的内容。
  • 动效要解释表面进入、内容切换或操作结果;只做弹跳和缩放而不改变理解关系,仍然不是 Material Design。

它和普通卡片化页面的边界在于:Material Design 关心的是层级、节奏和动作因果,而不是卡片数量;和扁平设计的差异也不在于阴影多寡,而在于空间关系是否帮助用户判断下一步。

3典型使用场景

典型使用场景

  • 收件箱批量处理:让邮件列表、优先级和归档入口处在同一内容表面中。
  • 城市行程规划:用路线表面、票据层和保存动作表达连续的出行流程。
  • 健康计划记录:把指标、时间线和预约动作从数据关系自然引向下一步。

4怎样把 Material Design 需求交给 Agent?

请制作一个有真实页面语境的 Material Design 界面:先定义任务工作台、收件箱、行程或健康记录等完整主体,再用应用栏、内容纸面、有限的 elevation、稳定的网格间距和一个明确的 FAB 或底部动作入口建立前后关系。阴影必须说明表面层级,颜色必须说明状态或行动,动效必须说明进入、切换或反馈,不能只是给普通卡片加阴影。桌面保留表面与动作的空间关系,390px 和 320px 下自然收为单列,核心标题、数据、状态和主要 CTA 必须可读,FAB 不得遮挡内容,页面不得横向滚动或被裁切。

社区延伸

看别人真实遇到过什么

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