Gallery风格库

Material Design 1.0

ProMax

About Material Design 1.0关于 Material Design 1.0

Material Design 1.0 is Google's foundational design language, launched in 2014 to unify Android, web, and Chrome OS under a single coherent system. It introduced the "digital paper" metaphor — surfaces that stack with real elevation shadows, respond to touch with ink ripples, and obey consistent spatial rules on an 8dp grid.

The system married flat aesthetics with physical depth: cards float above backgrounds, FABs anchor primary actions, and a strict primary-plus-accent color model keeps interfaces focused. Roboto, Christian Robertson's modernist sans-serif, provided the typographic backbone at every scale from 96px thin displays down to 12px captions.

Material Design 1.0 是 Google 于 2014 年推出的基础设计语言,旨在以统一的视觉体系连接 Android、Web 和 Chrome OS。它创造性地提出"数字纸张"隐喻——界面元素如同不同层叠的纸面,通过真实的投影传达层级,通过墨水涟漪回应触摸交互,一切遵循 8dp 基线网格的空间秩序。

这套体系将扁平美学与物理深度融为一体:卡片悬浮于背景之上,悬浮操作按钮(FAB)锚定核心操作,严格的主色加强调色模型让界面始终保持克制与聚焦。由 Christian Robertson 设计的现代无衬线字体 Roboto 贯穿从 96px 轻量标题到 12px 说明文字的全部层级。

The Material Design 1.0 design system traces back to Announced Google I/O June 2014; shipped Android 5.0 Lollipop November 2014; canonical through ~2018 Mountain View, California. Key figures behind it include Matias Duarte, Christian Robertson, and Google Design team. It belongs to the Flat-with-depth design, Paper-metaphor UI, and Design-system-as-product movements.

Material Design 1.0 这套设计系统溯源至 Announced Google I/O June 2014; shipped Android 5.0 Lollipop November 2014; canonical through ~2018 年的美国加利福尼亚州山景城。代表人物包括 Matias Duarte、Christian Robertson、Google Design team。所属流派:Flat-with-depth design、Paper-metaphor UI、Design-system-as-product。

  • Origin来源Mountain View, California美国加利福尼亚州山景城
  • Period年代Announced Google I/O June 2014; shipped Android 5.0 Lollipop November 2014; canonical through ~2018
  • Designer代表人物Matias Duarte · Christian Robertson · Google Design team
  • Movements所属运动Flat-with-depth design · Paper-metaphor UI · Design-system-as-product

Web examples网页示例

3

Slide examples幻灯片示例

3