设计风格指南
什么是 Material Design 1.0？
Material Design 为谷歌分散的数字世界赋予了一个统一的物理隐喻——会漂浮的界面层、诚实表达层级的投影，以及每一分饱和度都有所依凭的色彩。
Material Design 1.0 速览
Material Design 1.0 是谷歌于 2014 年推出的设计语言，旨在为 Android、移动网页与 Chrome OS 构成的庞大生态带来视觉连贯性。其哲学核心是一个单一隐喻：屏幕是一个被照亮的表面，数字纸张在不同高度上层叠排布。这些纸张——卡片、应用栏、底部抬起层、对话框——投下与其所在高度相称的阴影，创造出用户无需刻意学习便能直觉感知的空间层级。
这套体系的独特之处在于将扁平美学与物理深度融为一体。2010 年代中期的设计界已大体抛弃了 iOS 6 时代的拟物纹理，转向更为抽象的扁平视觉语言。Material Design 接受了扁平，却拒绝让屏幕感觉失重。每个界面层都有其在堆叠中的位置，每个高度层级投下特定的阴影。触摸交互触发的墨水涟漪动画从接触点向外扩散，强化了用户是在按压一种有回应的材料而非点击玻璃上所绘按钮的隐喻。
这套体系还引入了远超隐喻层面的严格结构规则。一套以八为基本单位的基线网格在各个尺度上统御间距。严格的双色模型——一种主导性的主色与一种形成对比的强调色——让界面保持聚焦而不显嘈杂。以强调色呈现的悬浮操作按钮（FAB）将每个页面最核心的操作锚定于视觉焦点。字体系统从展示级标题到说明文字被组织为一套命名层级，每一级都有明确的尺寸关系与字重，使所有基于该体系构建的应用程序拥有立即可感的秩序感。
Material Design 1.0 从何而来？
Material Design 的故事始于 2014 年 6 月的 Google I/O 大会。Matias Duarte——这位曾塑造 webOS 视觉语言及早期 Android Holo 主题的设计副总裁——登台宣布了一套覆盖公司全系产品的统一设计系统。这一宣布发生在谷歌视觉形象陷入真实危机的时刻。到 2013 年，Android 已积累起一套拼凑而成的不一致界面：Gmail 与 Google 地图毫无视觉关联，Play 商店有自己的设计惯例，Chrome 又是另一套。在网页端，谷歌的各个产品同样四分五裂。建立一套单一、连贯、可扩展的系统的需求极为迫切。
Duarte 与谷歌设计团队从多个思想传统中汲取养分来构建这套系统。纸张与墨水的隐喻经过深思熟虑地选定，旨在唤起物理世界的可读性——人类阅读纸张已有数百年历史，层叠纸张之间的空间关系对人而言是直觉性的。但团队将隐喻推进得更远，超越了简单类比：他们为这种数字材料设定了一套物理规则，规定了界面层如何移动、叠加与变形。界面层可以伸展与重塑，但永远不能相互穿透。光线从正上方投射，阴影以一致的角度向下落，并附带柔化硬边的环境光分量。这套物理规则赋予了 Material Design 不寻常的内在一致性：因为行为遵循规则，在不同谷歌产品上工作的设计师能做出局部正确的决策，而这些决策在整体上仍然感觉连贯。
色彩系统则来自不同的灵感。谷歌的品牌长期以来以其标志的红蓝黄绿四色为特征，而 Material Design 的色彩系统将其扩展为一套综合的色板体系：十六种色相，每种各有从近白到近黑的十个色调步级，外加一列饱和度极高的强调色，专用于悬浮操作按钮与交互高亮。其逻辑是明确的：应用程序应从某一色相家族的中间调中选取一种主色，再从对比色相中选取一种强调色，界面框架不使用其他任何色彩。这种克制确保了在该体系内构建的任何应用程序看起来都是有意为之的，而非随意拼凑的——即便其开发团队没有专职设计资源。
Christian Robertson 设计的 Roboto 字体于 2011 年随 Android Ice Cream Sandwich 首次亮相，成为 Material Design 的字体基石。Robertson 将 Roboto 设计为一款兼具机械易读性的几何无衬线字体，同时保留了人文主义字体的部分温度——这种平衡使其在小号说明文字中依然清晰可辨，在大号展示应用中同样易读。Material Design 将 Roboto 组织为一套带有命名层级的字体尺度体系，从顶部粗犷宽松的展示级风格到底部紧凑密集的说明文字级风格，每一级都有明确的角色定位。这种层级化组织意味着遵循该体系的任何界面都将拥有一致的阅读节奏，无论其承载的内容是什么。
Material Design 1.0 的视觉特征是什么？
高度与投影
Material Design 中的每个界面层都在共享的纵轴空间中占据特定的高度。一个界面层距背景越高，其投影就越大越漫散。应用栏以较低高度悬浮，投下适度的阴影；对话框以较高高度悬浮，投下更为显著的阴影。这套投影系统并非装饰性的——它是一种空间传达工具，让用户一眼便能分辨哪些元素可交互、哪些是上下文性的、哪些是永久存在的。投影本身由两种光线分量构成：产生主要方向性阴影的主光源，以及柔化整体效果的环境光。
墨水涟漪与动效
Material Design 将动效视为信息而非点缀。墨水涟漪——从触摸接触点向外扩展随后消散的圆形波纹——向用户确认其输入已被捕获，并标识出该输入的精确位置。除涟漪之外，该体系为常见过渡定义了运动曲线与时长：元素沿弧线而非直线进场与退场，跨屏幕的共享元素朝一致的方向移动，过渡时长与移动距离成正比。这一切传达了屏幕与状态之间的空间关系，使导航感觉有方位感而非任意的。
主色加强调色的色彩模型
Material Design 的色彩规范建立在刻意克制之上：一种主色用于工具栏、状态栏与大面积背景区域；一种强调色——通常来自对比色相家族、饱和度较高——用于悬浮操作按钮、开关、滑块与交互高亮。界面框架中不应引入其他任何色彩。主色承载品牌特征并确定整体基调；强调色标示可交互性，并将视线引向每个页面上最重要的操作。色板将这一逻辑延伸为同一色相家族内的亮色与暗色主色变体，以实现界面内的微妙层次。
以八为基本单位的空间网格
Material Design 中的所有间距——卡片之间、组件内边距、图标与标签之间、屏幕边缘——均遵循某一单一基本单位的整数倍。这种一致性创造出可被感知但无需刻意察觉的视觉对齐：相关元素感觉靠近，无关元素感觉分离，整体布局在每个缩放层级上都保持内在逻辑。图标与触控目标遵循源自同一基本单位的一致尺寸规则，确保交互区域始终大到足以可靠地被手指激活，同时在视觉上保持比例协调。
字体排印层级
Material Design 将字体组织为一套命名层级，覆盖从全屏展示级标题到密集说明文字的所有使用场景。层级中的每个级别与其上下相邻级别之间都有明确的尺寸关系、特定的字重，以及清晰的角色定位。展示与标题风格使用较大尺寸与细体或常规字重以创造开阔感；正文使用针对阅读优化的尺寸与字重；说明文字与上划线风格使用紧凑尺寸，专用于补充性信息。其结果是：在该体系内构建的任何页面都自动拥有阅读层级——最重要的文字最大，最不重要的最小，各级之间的步进是一致的。
基于卡片的内容界面
卡片——具有圆角、一致内边距与高度投影的自包含界面层——成为 Material Design 的标志性组织单元。一张卡片将属于同一主题的相关信息与操作集合在一起，通过背景平面而非分割线将其与相邻卡片区隔。卡片隐喻直接延伸了纸张类比：每张卡片都是承载一段连贯内容的独立纸页。这一方式使 Material Design 尤其适合基于信息流和列表的界面——在这类界面中，同一结构模式需要以可变的组合方式容纳文字、图像、操作与元数据。
悬浮操作按钮
悬浮操作按钮（FAB）——一个以强调色呈现、始终以较高高度悬浮于内容之上的圆形按钮——是 Material Design 最具辨识度的创新。其作用是结构性的：每个页面最多只有一个主要操作，FAB 使这一操作在视觉与空间上占据主导地位。圆形形态、强调色与高度投影三者共同确保 FAB 无论其下方内容如何变化都能被轻易找到。在不存在单一主要操作的页面中，FAB 缺席。这种克制将对 Material Design 的真正运用与对这一组件的表面借用区别开来。
谁塑造了 Material Design 1.0？
Duarte 是在概念层面与传播层面对 Material Design 贡献最大的设计师。他于 2010 年加入谷歌，此前曾塑造 Palm webOS 的视觉语言——webOS 已经探索过基于卡片的空间界面。在谷歌，他领导了构建这套体系的团队，并通过主题演讲、访谈与设计规范本身，对纸张与物理隐喻进行了清晰的公开阐释，赋予了这个项目连贯的哲学身份，使其超越纯粹的技术规范工作。Duarte 在 Material Design 1.0 时代担任谷歌设计副总裁，并持续参与其演化。
Robertson 设计了 Roboto——支撑 Material Design 字体系统的字体。Roboto 最初为 2011 年的 Android 4.0 Ice Cream Sandwich 而创作，并于 2014 年为 Material Design 修订。Robertson 的设计挑战是创造一款能在 Android 全系屏幕密度与尺寸范围内——从手表显示屏到平板界面——保持易读性，同时具备足够个性，让人感受到鲜明的谷歌气质而非中性通用的字体。这款字体此后成为网络上使用最广泛的字体之一，也是 Material Design 在各个尺度上进行视觉传达的基础性元素。
Material Design 规范是谷歌一个大型跨职能团队的成果，成员涵盖视觉设计师、交互设计师、工程师与研究员。团队不仅制定了视觉规范，还提供了全面的组件库、图标设计规范与动效规范——全部以开放文档形式发布。这一文档工作的规模与开放性本身意义重大：通过将整套体系作为公共资源发布，谷歌使 Material Design 能够被在 Android 与网页端构建应用的广大第三方开发者使用，有效地将这套视觉语言传播到谷歌自身产品之外。
在设计领导层定义体系原则的同时，Android 工程团队将 Material Design 转化为 2014 年 11 月随 Android 5.0 Lollipop 发布的运行时组件。这包括高度投影的原生实现、涟漪触摸反馈系统，以及驱动屏幕间共享元素动画的过渡框架。技术实现与设计规范同样至关重要：通过将系统构建在平台层而非仅作为一套可选指引，Android 确保了任何面向 Lollipop 的应用程序都能自动继承核心行为，而无需每位开发者从头重建。
Material Design 图标集——数百个按照一致几何规范绘制的产品与系统图标——是这套视觉体系中常常被忽视的关键组成部分。图标规范定义了共享网格、一致的描边粗细、内边距规则，以及基于圆形、正方形与对角线几何的构建词汇。在各处统一应用时，图标集在小尺寸层面赋予了体系视觉连贯性，与字体和色彩系统在较大尺度上形成呼应。完整的图标库以开源形式发布，成为 Android 开发的基础性资源，并通过网页组件库，成为一代受 Material 影响的网页界面的共同基础。
今天怎么用 Material Design 1.0？
Material Design 1.0 是当代视觉文化中辨识度最高的设计系统之一，真正运用好它需要理解其内在逻辑，而不仅仅是借用最显眼的组件。该体系最具标志性的元素——高度卡片、墨水涟漪、强调色 FAB、命名色板——是一套关于界面层、深度与层级的连贯哲学的产物。当这套哲学被理解后，这些元素可以被自信地使用或改编。当它被借用而缺乏这种理解时，结果通常是一个具备 Material Design 外观但缺少其空间清晰度的布局。
在演示文稿中，Material Design 能有效转化应用于封面与内容页。封面可利用该体系大胆的色彩逻辑：将幻灯片背景设为中间调主色，将标题以对比明亮的色调在较大尺寸下呈现，并以强调色克制地用于单一支撑性元素，如分割线或行动号召标签。内容页应当被当作卡片表面处理：每张幻灯片是一张只承载一个核心概念的独立高度纸页。使用字体层级区分标题、正文与说明文字；避免装饰性边框或背景纹理。数据页从该体系的示意图式清晰度中获益——以主色和强调色呈现的图表感觉目的明确而非装饰性，一致的网格对齐使跨幻灯片的比较感觉连贯。
对于网页界面，Material Design 尤其适合层级、可扫描性与空间定向感是首要关切的仪表板、管理工具与企业软件。严格应用双色模型：一种主色用于导航框架、标题栏与主导性交互状态；一种强调色用于每个视图上优先级最高的单一操作。在卡片与模态框上使用高度投影来传达哪些内容处于基础平面之上。将 FAB 模式保留给确实只有一个主要操作的页面——将其添加到每个页面而缺乏这种原则，会削弱其传达价值。导航抽屉、底部导航栏与应用栏应遵循体系的比例规范而非随意调整尺寸。
对于编辑版面与营销材料，该体系的卡片结构与大胆色块在基于章节的页面设计中效果良好。以 Material Design 语汇构建的落地页使用全宽彩色带与白色卡片表面交替排列，在每个章节末尾以一致的强调色行动号召按钮收尾，并以字体层级区分章节标题与正文，而无需依赖装饰性的字体处理。该体系强劲的网格对齐在较宽屏幕上支持多列布局，同时能优雅降级为移动端单列——对于需要跨断点运行的编辑内容，这是一个实用的品质。
应用 Material Design 1.0 时最常见的错误，是将组件库当作体系本身。在未内化高度与色彩规则的情况下采用 Material 组件实现的开发者，往往会产出这样的界面：每个组件单独看起来是正确的，但整体页面缺乏空间连贯性——界面层似乎以任意高度悬浮，主色与强调色被互换使用，字体尺度的应用也前后不一致。体系的组件是其规则的表达；规则必须首先被理解。另一个常见错误是将色彩模型扩展超出既定的双色约束——为不同内容类型引入第三种或第四种独立色彩，通常会产出一个感觉装饰性而非结构性的界面。
Material Design 1.0 · 常见问题
Material Design 1.0 与 Material Design 2 及 Material You 有何不同？
2014 年随 Android 5.0 Lollipop 发布的 Material Design 1.0 建立了纸张物理隐喻、高度投影系统、双色模型与 FAB 模式。2018 年推出的 Material Design 2 将体系精炼为更轻盈、更开阔的美学——界面层更趋近白色，阴影更为微妙，圆角更为突出。2021 年发布的 Material You 带来了最为根本的变化：引入了从用户壁纸中动态提取颜色的机制，使系统色板可以被个性化而非固定不变。核心空间逻辑——界面层、高度、投影——在三个版本中一以贯之，但 Material You 大幅放宽了原版严格的双色约束。
Material Design 1.0 能用于非谷歌产品吗，还是感觉过于品牌专属？
这套体系在色彩层面被有意设计为可定制的，正是为了让非谷歌产品能够采用其结构逻辑而不显得像谷歌的应用程序。双色模型允许将任何品牌色板作为主色和强调色代入，组件形态、高度系统与字体层级足够中性，能够承载不同的品牌身份。品牌关联的风险是真实存在的，但可以管控：FAB、导航抽屉与底部导航栏与 Android 的关联如此强烈，以至于在移动场景之外使用这些元素会显得生搬硬套。在网页产品与演示场景中，结构性元素——卡片、高度、字体尺度——能够很好地迁移，而不会触发 Android 品牌联想。
Material Design 1.0 为何使用如此高饱和度的强调色？
Material Design 1.0 中的强调色——最为鲜艳的粉红、蓝绿、黄绿、琥珀——被选定以执行特定的传达功能：它们需要在与任何主色配对时都能被识别为可交互的可供性标志，并且需要在浅色与深色背景表面上均保持可见度。饱和度较低的强调色可能会被主色吸收，或在浅色背景上失去对比度。这套体系也反映了 2014 年的屏幕技术：OLED 与 AMOLED 显示屏在那个时代的 Android 设备中日益普及，对高饱和度色彩的渲染具有特别的鲜艳度，色板的校准就是以这些显示屏为参照的。在当代经过校准的显示屏上，原版强调色可能显得过于强烈；在保持色相家族不变的前提下略微降低饱和度，是一种常见且合理的改编方式。
墨水涟漪动画对这套体系是否不可或缺，还是可以省略？
在以触摸为主的场景中，涟漪在确认输入捕获方面具有结构性的重要意义——在移动端，用户无法依赖悬停状态来预览可交互性，涟漪提供了界面已作出响应的反馈。在基于指针的场景中——桌面网页、演示软件——悬停状态与光标变化执行着类似的功能，涟漪的必要性因此降低。在网页端省略它是常见的，通常也是可以接受的。但在不放弃体系空间逻辑的前提下不可省略的，是高度投影结构：涟漪是一种反馈机制，而投影才是向用户传达界面层相对位置的根本性空间传达工具。
鉴于 Material Design 1.0 是为浅色背景设计的，它应如何处理深色模式界面？
Material Design 1.0 以浅色背景作为标准界面层设计，而依赖浅色背景上深色阴影的高度投影系统不能直接反转。在原版系统中，深色表面仅选择性地用于应用栏与状态栏以强化主品牌色。Material Design 2 后来通过界面层着色方案明确应对了深色模式：较高高度的界面层略微变亮而非投下更深的阴影，强调色也略微降低饱和度以减少刺眼感。将这一逻辑回溯应用于 Material Design 1.0 的工作中——以微妙的界面层变亮取代基于投影的高度表达，使用主色的暗色变体作为标题背景——是在原版体系空间框架内进行深色模式适配最为连贯的方式。
