知方号

知方号

小沐学AndroidMaterial Design设计规范之颜色篇

文章目录 1、简介1.1 Android1.2 材料概念1.3 颜色概念 2、Material Design 12.1 材料设计2.2 颜色 3、Material Design 23.1 材料系统3.2 颜色 4、Material Design 34.1 材料设计4.1 颜色样式4.2 配色方案4.3 Material Theme Builder 结语

1、简介 1.1 Android

谷歌在2007年发布了第一个测试版本的 Android 软件开发工具包(SDK),第一个商业版本的 Android 1.0,则发布于2008年9月。

2012年6月27日,在谷歌I/O大会上,谷歌宣布发布了 Android 版本4.1 Jelly Bean。 Jelly Bean 是一个在功能和性能方面的渐进的更新,主要目的是改进用户界面,

Android 源代码是根据自由和开放源码软件许可证。谷歌发布的大部分代码遵循 Apache 许可证2.0版,Linux 内核的变化遵循 GNU 通用公共许可证版本2。

1.2 材料概念

自Android 2.x时代的拟物设计,Android 3~4的Holo风格以来,Android Design正式更名为Material Design。在Google I/O 2014大会召开,谷歌正式宣布了一种全新的设计风格:Material Design。该设计透露出了大量的扁平(Flat)、层次(Layers)、长阴影(Long Shadow)等元素。

Material Design,中文名:质感设计,是由Google推出了全新的设计语言,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

Material design 是谷歌为旗下全线产品提供的一套完整的设计规范,从2014年发布到现在,Material design 不仅仅是安卓设备阵营的设计规范,这种设计风格甚至被应用在苹果设备和windows设备中。

在扁平风格的基础上加入了Material design 的设计理念 Material Design 在扁平风格的基础上加入了许多物理现实中的隐喻元素,像质感、投影、速度等等,这些设计都让 Material Design 的可用性增加,并且降低了学习成本。

材料设计 Material 是一个适应性强的指南、组件和工具系统,支持用户界面设计的最佳实践。Material 以开源代码为后盾,简化了设计人员和开发人员之间的协作,并帮助团队快速构建精美的产品。Material 于 2014 年推出,多年来不断发展。

Material Design 1 (M1):第一代Material Design于2014年推出,存档并可在以下网址访问:material.io/archive/guidelines。

Material Design 2 (M2):2018 年推出的第二代 Material Design,引入了材料主题和材料组件代码。

Material Design 3 (M3):第三代材质,于 2023 年推出,包括动态颜色等材质。Material You:新的Material 视觉风格和一组功能,满足个人用户的个人和表达需求,是Material Design 3的一部分

材料组件 创建开源 UI 元素,帮助开发人员在 Android、Flutter 和 Web 上实现 Material Design。

材质主题 系统地定制材料设计以更好地反映您产品品牌的能力。方案表示选择或单个样式组的子集,而主题则描述一组组合的多个样式和属性。主题调整全局样式以针对给定的用户上下文或首选项(如低光或高对比度)进行调整。例如,深色主题描述了颜色以外的设计决策,因为对高程和状态的调整也是有效表达深色 UI 不可或缺的一部分。

1.3 颜色概念 颜色:基线方案(Baseline scheme) 基线方案是指构成用于浅色和深色主题的默认颜色值的一组选定色调。颜色:动态颜色(Dynamic color) 一种自定义功能,其中用户生成的配色方案映射到应用的配色方案。动态颜色不仅仅是材质主题生成器的输出或算法配色方案,而是存在一个可更改的颜色角色,该角色根据用户输入动态呈现应用的外观。颜色:扩展颜色(Extended color ) 指定的颜色(除关键颜色外),用于填充自定义方案的颜色角色。扩展颜色是特殊颜色角色和应用的类别,例如品牌表达或常规(语义)含义。颜色:关键色(Key color) 关键颜色不是提取的颜色,而是源颜色的派生。关键颜色是一个有助于理解动态颜色的概念,但不在代码中使用。该术语描述经过源颜色的色相和色度转换的任何颜色。关键颜色是色调调色板的基础。颜色:方案(Scheme) 颜色角色到色调调色板中特定色调的任何映射。方案由多个颜色角色组成。深色方案非正式地使用一组调色板中的色调来描述一组颜色,这些调色板是为深色主题映射的。颜色:源颜色(Source color) 为定义所有五种关键颜色而提取的单一颜色称为源颜色。颜色:色调调色板(Tonal palette) 色调调色板包括一个 13 音范围,作为将音调映射到特定角色的基础。色调调色板提供色调变化,以便配色方案自动在任何颜色组(如原色)中提供对比度和视觉差异。颜色:色调(Tone) 一组色调是具有相同色调和色度的颜色。非正式地说,音调意味着轻盈的程度。 In code: Tone.of(hex code).get(tone) or Tone.of(hue, chroma).get(tone)颜色:用户生成的方案(User-generated schemes) 动态颜色的一个方面,用于描述从单个用户的墙纸选择或 Android 预设颜色派生和应用的颜色。 2、Material Design 1

https://m1.material.io/

2.1 材料设计 目标 创造一种视觉语言,将优秀设计的经典原则与技术和科学的创新和可能性相结合。开发单个底层系统,实现跨平台和设备大小的统一体验。移动规则是基本规则,但触摸、语音、鼠标和键盘都是一流的输入法。 原则 材料是隐喻。物质隐喻是合理化空间和运动系统的统一理论。该材料以触觉现实为基础,灵感来自对纸张和墨水的研究,但技术先进,对想象力和魔力持开放态度。粗体、图形化、有意。基于印刷的设计的基本元素 - 排版,网格,空间,比例,颜色和图像的使用 - 指导视觉处理。这些元素的作用远不止取悦眼睛。运动提供意义。运动尊重并强化了用户作为原动机的地位。主要用户操作是启动运动的拐点,改变了整个设计。 环境 材质设计是包含光线、材质和投射阴影的三维环境。所有材质对象都具有 x、y 和 z 维度。所有材质对象都有一个 z 轴位置。主光创建定向阴影,环境光创建柔和的阴影。 2.2 颜色

https://m1.material.io/style/color.html#color-color-palette 材质设计中的色彩灵感来自大胆的色调与柔和的环境、深阴影和明亮的高光并列。

颜色工具 颜色工具可帮助您创建、共享调色板并将其应用于 UI,以及测量任何颜色组合的辅助功能级别。调色板 此调色板包括可用于插图或开发品牌颜色的主要颜色和强调色。它们旨在和谐地相互协作。调色板从原色开始,填充光谱,为Android,Web和iOS创建完整且可用的调色板。Google 建议使用 500 种颜色作为应用中的原色,其他颜色作为强调色。色彩系统 在材质设计中,原色(primary color )是指应用中出现频率最高的颜色。辅助颜色(secondary color)是指用于突出 UI 关键部分的颜色。 原色(primary color ) 原色是应用屏幕和组件上最常显示的颜色。如果您没有辅助颜色,它也可用于强调元素。要在元素之间创建对比,您可以使用较浅或较深的原色色调。较亮和较深色调之间的对比度有助于显示图面之间的划分,例如状态栏和工具栏之间的划分。 辅助颜色(secondary color) 辅助颜色用于强调 UI 的选定部分。它可以与您的原色互补或相似,但它不应该只是原色的浅色或深色变化。它应该与周围的元素形成对比,并谨慎地用作重音。使用辅助颜色是可选的。如果您使用原色的变化来强调元素,则没有必要。 辅助颜色最适合用于: 按钮、浮动操作按钮和按钮文

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至lizi9903@foxmail.com举报,一经查实,本站将立刻删除。