设计风格指南
什么是 Android Lollipop (Material 1.0)?

Material Design 将屏幕变成了层叠的纸张——每一次触碰都绽放成涟漪,每一张卡片都投下真实的阴影。
Android Lollipop (Material 1.0) 速览
2014年11月发布的 Android Lollipop 带来了 Material Design 1.0——谷歌首次尝试将旗下所有界面平台(手机、平板、手表、电视与网页)的视觉语言统一在同一套连贯体系之下。核心隐喻是纸张与墨水:界面由层叠的数字材料纸张构成,每一张纸在三维空间中占据独特的高度。阴影不是装饰性的,而是信息性的,传达哪个界面层位于哪个界面层之上,以及相差多少。
这套体系与早期触屏设计的拟物化纹理彻底决裂,同时也有别于作为拟物化反动而兴起的纯粹二维扁平极简主义。Material Design 保留了后拟物化时代的平面、色彩鲜明的界面,但通过数学上精确的阴影与分层恢复了物理层级感。结果是一套具有真实空间逻辑的设计语言:组件可以在空间中运动,叠放在彼此之上,并随着高度变化而投射出不同的阴影。
色彩浓郁而有目的性。Material 色板将色相按饱和度数字编排,标准用法要求使用大胆、直率的主色与强调色——那种在明亮移动屏幕上显得自信的高饱和色彩。动效同样有原则:每一次过渡都遵循真实世界的物理规律,元素的加速与减速方式让人感到自然而非机械。浮动操作按钮——一个悬浮于内容层之上的圆形元素——成为这个时代的标志性图标,其形态至今仍能让人立刻联想到 Material Design。
Android Lollipop (Material 1.0) 从何而来?
Material Design 的故事始于2010年代初谷歌分散的设计文化。到2012年,谷歌运营着数十款产品——搜索、地图、Gmail、YouTube、Play、Chrome、Android——每款产品都有各自的视觉规范、交互模式与排版体系。Android 生态系统本身四分五裂:设备制造商在操作系统之上叠加各自的皮肤,谷歌自家的应用在不同产品之间外观各异。公司产出了许多独立的精彩瞬间,却没有连贯的体验。
曾在 Palm 和 Danger 主导界面设计、2010年加入谷歌的 Matías Duarte,是这场统一行动背后的核心创意力量。Duarte 有工业设计哲学背景,带来了一种在软件领域罕见的纪律:他坚持认为数字界面应该表现得如同具有物理属性——质量、动量与材料构成。他的团队开始开发他们内部称为「真实运动」与「触觉表面」的概念,这些语言预示了最终体系中纸张与墨水的核心隐喻。Nicholas Jitkoff 贡献了交互模型,Christian Robertson 设计了 Roboto——这款字体将与这个平台永久相连。
这套设计体系于2014年6月在 Google I/O 上以「Material Design」之名正式向世界发布,并于当年11月随 Android 5.0 Lollipop 一同落地。发布同时附带了一份异乎寻常详尽的公开规范——一份覆盖动效物理规律到每个标准组件精确高度值的全面指导文件。这份规范本身就是一件设计作品:它向全球第三方开发者与设计师传达,Material Design 是一套有规则的体系,而非一组松散相连的视觉决策。
Material Design 发布的时机恰逢移动行业的拐点。智能手机市场已走过早期新鲜感阶段,用户开始期待应用感觉连贯且经过深思熟虑。苹果已于2013年随 iOS 7 推出自己的扁平化重设计,整个行业正在寻找一种后拟物化的视觉语言——既要感觉现代,又不能显得冷漠。Material Design 提供了一个系统化、乐观主义的答案,并借助谷歌平台的全部覆盖力推行:它同时在 Android 上发布,通过完整的组件库在网页上落地,并被明确提供给 iOS 开发者使用。
Android Lollipop (Material 1.0) 的视觉特征是什么?
高度与阴影
Material 体系中的每个元素都在虚拟z轴上占据特定位置,其阴影向观看者传达这一位置。静止的卡片投下浅而紧密的阴影;悬浮于页面之上的对话框投下更深、更漫射的阴影。这些阴影不是风格上的点缀——它们编码了层级关系。浮动操作按钮作为所有标准组件中高度最大的元素,获得最强烈的阴影效果,因而在屏幕上所有可交互元素中最先吸引目光。
墨水涟漪
当用户触摸任何可交互界面时,一圈以触点为中心向外扩散的圆形波纹——墨水涟漪——从接触点向外扩散。这个动画具有超越美学的功能目的:它精确确认触摸被系统接收的位置,并传达系统已响应输入。涟漪始终以精确的触点为圆心,使其既是反馈机制,又是对纸张与墨水隐喻的静默诠释。按钮、列表项、卡片与导航标签都共享这一交互特征。
大胆、饱和的色彩
Material Design 的色彩方法将色相按饱和度数字编排,标准用法要求以五百色阶——深沉、鲜明、完全饱和——作为主色界面,以更高强度色阶作为强调色。效果自信而直率:基于这套体系构建的界面不会退缩至中性灰色。强调色通常是与主色形成对比或高对比度的色相,被保留给浮动操作按钮和关键交互状态,在结构性界面与操作可供性之间建立清晰的视觉层级。
基于物理的动效
Material Design 将动效编成设计纪律,而非事后附加的点缀。过渡遵循模拟物理对象行为的缓动曲线:元素以快速加速进入屏幕,以缓慢减速离开,模拟一张纸张被滑到界面上的方式。扩展的元素——如浮动操作按钮变形为全屏对话框——从其原始位置开始展开,保持空间连续性。列表上的交错入场动画强化了项目具有重量、带着动量到来的感觉。
卡片式布局
卡片——包含独立内容单元的、有边界的、具有高度的矩形——成为 Material Design 处理异质信息的主要组织隐喻。卡片允许不同类型的内容共存,无需显式网格线;每张卡片的阴影隐性界定其边界。卡片流可以以任意组合包含图片、文字、操作与媒体,而卡片容器将它们相互之间的视觉重量标准化。这使卡片成为社交信息流、搜索结果、产品列表以及任何内容多样性高的场景的默认选择。
Roboto 与字体层级
Christian Robertson 专为 Material Design 设计的 Roboto 字体针对各种显示尺寸的屏幕可读性进行了优化。其字形在几何精确性与自然、略微紧缩的比例之间保持平衡——比人文主义字体更具机械感,但又足够温暖以避免临床式的冰冷。Material Design 规定了明确的字体层级,以角色命名——展示、标题、副标题、正文、说明——每个层级都与其他层级有推荐的尺寸关系,构建了一套仅通过大小和字重传达层级的体系,无需依赖装饰性区分。
浮动操作按钮
浮动操作按钮——一个悬浮于所有其他内容之上、处于最高标准高度的圆形元素——代表了 Material Design 对界面约定最具建筑感的贡献。它标志着一个界面的唯一主要操作:撰写消息、添加项目、启动录音。其持久可见性和突出阴影确保页面的主要可供性始终清晰无误。按钮浓郁饱和的强调色,与主色界面色板明显区别,将其标记为操作而非内容。其圆形、自包含的形态,成为这十年间最易辨认的界面标志之一。
谁塑造了 Android Lollipop (Material 1.0)?
Duarte 担任谷歌设计副总裁,是 Material Design 的主要创意架构师。凭借横跨工业设计哲学与在 Palm、Danger 的软件界面工作背景,他为数字设计带来了一种异乎寻常的物理感性。他坚持认为界面应该表现得如同具有质量、动量与材料构成,这一立场赋予了 Material Design 其定义性的概念框架。他领导的团队发展出纸张与墨水的隐喻,并推动了那份全面的公开规范——正是这份规范使 Material Design 成为跨平台标准,而非仅仅是 Android 的视觉更新。
Robertson 设计了 Roboto——这款字体与 Material Design 及 Android 平台永久相连。Roboto 的诞生是为了应对一个具体挑战:在 Android 生态系统极度多样的屏幕尺寸、像素密度和使用情境中实现排版清晰度与温度的统一。其均衡的几何感——精确到感觉系统化,自然到在小尺寸下感觉易读——使其成为数字设计史上部署最广泛的字体之一。Robertson 还参与制定了定义 Material Design 字体层级与字重体系的更广泛排版指南。
Jitkoff 是 Material Design 团队的核心交互设计师,为赋予体系物理连贯性的行为模型做出了贡献。Duarte 塑造了概念与视觉框架,而 Jitkoff 则专注于支配元素如何进入、离开界面并在界面中运动的交互原则。他在动效与过渡上的工作帮助将纸张隐喻从视觉描述转化为行为规范——这些规则能够在基于该平台构建的数千款应用中被一致实现。
Lockheimer 在 Lollipop 发布时担任 Android 工程负责人,负责确保 Material Design 作为一个功能完备的体系落地,而非仅停留于设计愿景文件。挑战是巨大的:Android 在数千种设备配置上运行,涉及不同的屏幕尺寸、硬件能力与制造商定制。Lockheimer 的领导力确保了高度模型、动效体系与组件库在平台层面得以实现——使每位平台应用开发者都能直接使用,而无需各自团队独立构建。
Wiley 主导了谷歌搜索的设计工作,是推动将 Material Design 连贯性引入谷歌网页端体验的早期倡导者之一。他的工作帮助确保 Material Design 不是纯粹的移动原生体系,而是延伸至构成谷歌用户接触点大多数的浏览器端体验。将高度与阴影模型——为移动屏幕相对受限的尺寸而构思——平移到网页可变宽度与滚动行为中,需要大量适配工作;Wiley 的团队开发了许多如今已成为网页版 Material Design 标准的响应式网格与断点约定。
今天怎么用 Android Lollipop (Material 1.0)?
当 Material Design 1.0 的空间逻辑被理解而非表面复制时,它能够清晰地转化为当代演示工作。该体系的高度层级是幻灯片最有用的组织原则:将背景视为最低层,内容块视为中等高度的界面,关键引用或数据点视为需要吸引注意力的高层元素。以此方式构建的幻灯片具有内在深度,无需依赖任意的装饰性元素——被突出的卡片的阴影完成了彩色边框以较不优雅的方式所做的工作。
在演示封面与章节分隔页上,Material 美学支持大胆的全出血色彩界面,使用深饱和主色系,白色或近白色大号文字与之搭配。浮动操作按钮的视觉语法——一个高对比度圆形元素悬浮于彩色背景之上——可以被改编为标志锁定或章节过渡页上的大数字。内容页应遵循卡片式纪律:每个要点包含在自己的有界面中,间距承担分隔的功能,而非依赖分割线或边框。
在网页界面设计中,Material 1.0 特别适合仪表板、分析界面与结构化数据产品。卡片隐喻优雅地处理异质数据类型——指标、图表、表格与警报各自居于不同高度的有界容器中,版面不会因此显得杂乱。对于定价页面,高度模型为等级区分提供了自然的可供性:推荐方案可以通过更深的阴影在视觉上高于其他方案,无需不同颜色或任意徽章。导航应遵循 Material 标签页与侧边栏约定——水平标签页用于主导航,侧边抽屉用于次级路径。
Material Design 的编辑与营销应用在拥抱而非中和其色彩自信时效果最佳。特色文章版面可以使用全宽深饱和主色作为标题界面,白色展示级别文字,向下过渡至正文内容的白色卡片。营销页面受益于体系内置的操作与内容之间的对比:强调色的行动号召从正文内容界面中脱颖而出,无需额外视觉复杂性。涟漪交互特征,即使模拟为按钮后的静态圆形光晕,也能立即传达设计语言。
应用 Material Design 时最常见的错误是将阴影体系用作装饰性的而非信息性的——给所有内容都添加最大高度的阴影以创造丰富感,而非将深阴影保留给真正高于其他组件的元素。这会破坏体系所依赖的层级结构,产生感觉繁忙而非分层的版面。同样,同时使用饱和色板的全部范围——在单一界面中使用许多不同的大胆色彩——违反了体系逻辑:该逻辑要求一种主色、一种强调色和审慎的中性色。Material Design 的视觉张力来自对大胆原材料的克制应用,而非单纯的大胆本身。
Android Lollipop (Material 1.0) · 常见问题
Material Design 1.0 与同期兴起的扁平化设计运动有何区别?
以 Windows Phone 和 iOS 7 为代表普及的扁平化设计,将二维性作为审美目标:所有界面存在于同一视觉平面,阴影被完全消除,深度不在视觉词汇之列。Material Design 同样拒绝拟物化纹理与渐变,但将深度作为系统化、信息性的元素重新引入,而非装饰性元素。结果有时被称为「材料扁平」——界面干净而具几何感,但在空间中叠放,其空间关系承载着意义。卡片下方的阴影不是装饰;它告诉你卡片悬浮于背景之上。
Material Design 1.0 适合高端或奢侈品类的产品场景吗?
Material Design 1.0 是乐观的、大胆的、民主的——其视觉性格传达的是亲和力与平台一致性,而非排他性。对于奢侈品定位至关重要的场景,饱和主色板与高对比度组件可能被解读为实用主义而非精致。当色板被限制为单一深色主色与近中性强调色、字体层级使用保守、高度模型简化而非完全展开时,该体系能更好地适应高端场景。在实践中,许多奢侈品数字产品倾向于比 Material 1.0 原生提供的具有更多排版精致度与更中性色彩纪律的体系。
Material Design 1.0 如何处理深色模式或深色背景版面?
Material Design 1.0 被构思为浅色界面体系——白色与近白色卡片在浅色背景上是标准形态。深色模式不是原始规范的定义部分;它在2018年的 Material Design 2 中被系统性引入。将 Material 1.0 美学应用于深色背景需要大量适配:阴影在深色界面上失去传达价值,因为它们依赖与浅色背景的对比。深色界面上的高度必须通过叠加色彩色调来传达——高度越高,色调越浅——这偏离了原始体系。饱和强调色在深色背景上仍然有效,但主色板通常需要降低饱和度以避免视觉攻击感。
Material Design 1.0 适合非谷歌、非 Android 的产品吗?
Material Design 从一开始就被明确设计为开放体系,谷歌从一开始就鼓励其在 Android 以外被采用——网页组件库与跨平台规范面向任何开发者或设计师。2010年代中期,许多非谷歌网页应用、渐进式网页应用乃至 iOS 应用都完整或经改编地采用了 Material 组件。风险在于归属感而非美学:以严格 Material 1.0 约定构建的产品会被解读为谷歌系,这与产品的自我定位可能一致,也可能不一致。对于有独特品牌语境的产品,该体系最有效的用法是作为结构性基础,其色彩、字体与具体组件被充分定制以形成独特身份。
Material Design 1.0 与后续 Material 版本有什么关系?
Material Design 自2014年以来经历了大量演进。2018年发布的 Material Design 2 改进了高度模型,引入了深色模式,扩展了色彩体系的灵活性,并软化了许多体系的硬边特征——圆角变得更普遍,浮动操作按钮的突出性被降低。2021年以「Material You」名义发布的 Material Design 3 引入了动态色彩——从用户壁纸衍生完整色板的能力——并将体系大幅推向个性化,远离了原始版本大胆、固定的色板。原始 Material Design 1.0 美学如今是三个版本中视觉上最具辨识度的:其锐利直角、深阴影与高饱和固定色板立即让人联想到一个特定的历史时刻,而非通用的当代界面风格。