爱码士博客

  • Android开发
你好,爱码士
专注于Android、Kotlin及Linux技术学习及分享
  1. 首页
  2. 未分类
  3. 正文

MaterialA-Z概念简介

2022 年 11 月 21 日 570点热度 0人点赞 1条评论

material design 3

Banner

显示一些重要信息及相关操作

Button

帮助用户初始一些操作,如发送email、分享文档、点赞文章。

Bottom app bar

屏幕底部显示导航和关键操作。

Bottom sheet

从屏幕底部展示内容。

Card

包含与主题相关信息的内容和动作的组件。

Checkbox

允许用户从集合中选择一个或多个项目的组件。复选框可以打开或关闭选项。

Chip

用于帮助用户输入信息、进行选择、过滤内容或触发操作的组件。chips可以在同一区域同时显示多个交互元素,例如可选电影时间列表或一系列电子邮件联系人。

Color: Baseline scheme

基线方案是指组成用于明暗主题的默认颜色值的选定色调组。

Color: Dynamic color

一种自定义功能,其中用户生成的配色方案映射到应用程序的配色方案。

动态颜色反映在接受用户生成方案作为应用中颜色角色输入的应用中。动态颜色不仅仅是材质主题生成器或算法颜色方案的输出,而是一个可改变的颜色角色的存在,该角色可根据用户输入使应用程序的外观呈现动态。

Color: Extended color

为填充自定义方案的颜色角色而指定的颜色(除关键颜色外)。扩展颜色是一个特殊颜色角色和应用的类别,例如品牌表达或传统(语义)含义。

Color: Key color

关键颜色不是提取的颜色,而是源颜色的派生。关键颜色是一个有助于理解动态颜色的概念,但在代码中不使用。该术语描述经历源颜色的色调和色度变换的任何颜色。关键颜色是色调调色板的基础。

Color: Scheme

从色调调色板将颜色角色映射到特定色调的任何映射。方案由多个颜色角色组成。深色方案非正式地描述了一组颜色,使用了一组调色板中的色调,这些调色板被映射为深色主题。
注意:灯光方案与灯光主题不同。请参见主题。

Color: Source color

提取用于定义所有五种关键颜色的单一颜色称为源颜色。虽然代码中可能不需要它,但它对于理解动态颜色方案的根源在于一种起始颜色,即AKA色调、色度和色调,是一个有用的区别。关键颜色是根据源颜色的色调定义的。

Color: Tonal palette

色调调色板包括13个色调范围,作为将色调映射到特定角色的基础。色调调色板提供色调的变化,因此颜色方案自动提供任何颜色组(如原色)的对比度和视觉差异。

Color: Tone

一组色调是具有相同色调和色度的颜色。非正式地说,音调意味着轻快的程度。
代码中:Tone.of(hex code).get(tone) or Tone.of(hue, chroma).get(tone)
在设计指南中:“颜色色调的变化可用于区分交互状态或组件元素的视觉兴趣。”

Color: User-generated schemes

动态颜色的一个方面,描述从单个用户的墙纸选择或Android预设颜色中导出和应用的颜色。

Contrast

颜色之间的差异。对于可访问性,对比度严格指的是色调的差异。色调相差40可保证WCAG对比度≥ 3.0; 色调相差50可保证对比度≥ 4.5.

Customization

对UI进行的修改,反映了应用程序、OEM或个人用户的视觉偏好和品牌。自定义可以关注单个UI元素(例如,设置组件的颜色样式或向模板添加可选操作),也可以全局实现(例如,在整个UI中应用一组样式作为主题)。

Dark theme

深色主题是显示大部分深色表面的低光UI。

Data table

跨行和列显示数据集的组件。

Date picker

允许用户选择日期或日期范围的组件。

Design attribute

设计标记或硬编码值应用于的样式方面,例如颜色或字体。

Design guidelines

指南是描述性的书面和图解文档,主要通过示例演示用法和行为。它们是规范的长形式讨论,帮助设计师和开发人员解决问题和做出决策。

Design specs

规范是带注释的设计和文档,用于指定定义组件或功能编码功能的值和参数。

Design System Package (DSP)

Adobe创建的一种开放格式文件夹结构,用于帮助团队跨工具共享设计系统信息。

Design tokens

设计标记表示一个小的、可重用的设计决策,它是设计系统视觉风格的一部分。令牌用不言自明的名称替换静态值。

Design tokens: Context

标记可以指向非默认值的一组条件(例如,深色主题、密集布局)。

Design tokens: Role

系统令牌名称的缩短版本(例如,Secondary container color; Headline 1)。

Design tokens: Types

  • 引用标记:所有可用的标记化值。(例如,md.ref.palette.secondary 200)

  • 组件标记:组件标记定义组件中元素的设计属性,例如按钮容器的颜色。

  • 系统标记:构成系统的选项或角色,从颜色到排版、标高和形状。(例如,md.sys.colorer.secondary容器)

    Design tokens: Value

    定义设计属性的信息,存储在令牌中或硬编码。

Dialog

在用户流中提供重要提示的组件。他们可以要求采取行动、传达信息或帮助用户完成任务。

Divider

将列表和布局中的内容分组的细线。

Element

应用令牌或值的组件部分,例如容器或标签文本。

Extended FAB

帮助人们采取主要行动的组件。它们比FAB更宽,可以容纳文本标签和更大的目标区域。

Floating action button (FAB)

表示屏幕上最重要动作的组件。他们让关键行动触手可及。

HCT

HCT是色调、色度、色调的缩写。这是启用动态颜色的颜色空间的名称。HCT基于CAM16色调和色度;来自Lab(CIELAB,1976)的亮度的L构造表示为色调的T。

Image list

在有组织的网格中显示图像集合的组件。

Libraries

Material 3支持的开发人员库包括Android和Jetpack Compose,正在为Flutter和Web开发支持。

List

由文本或图像的连续垂直索引组成的组件。

Material Components

为帮助开发人员在Android、Flutter和web上实现Material Design而创建的开源UI元素。

Material Design

Material是一个可适应的指南、组件和工具系统,支持用户界面设计的最佳实践。在开源代码的支持下,Material简化了设计师和开发人员之间的协作,并帮助团队快速构建漂亮的产品。

Material于2014年推出,多年来不断发展。

Material Design 1(M1):2014年推出的第一代材料设计已存档并可访问:Material.io/archive/guidelines。

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

Material Design 3(M3):2021推出的第三代Material包括Material You功能,如动态颜色。

  • Material You
    新的Material视觉风格和一系列功能,包含个人用户的个人和表达需求,是Material Design 3的一部分。

Material Theming

能够系统地定制材料设计,以更好地反映产品的品牌。

当方案表示选择或单个样式组的子集时,主题组合描述一组多个样式和属性。主题调整全局样式,以适应给定的用户上下文或偏好,例如低光或高对比度。例如,深色主题描述了颜色以外的设计决策,因为对标高和状态的调整也是有效表达深色UI的必要条件。

Menu

在临时Surface上显示选项列表的组件。

Mode

系统提供的二进制设置,帮助人们更好地使用设备。示例:聚焦模式、飞机模式和节电模式。

Navigation bar

一种组件,提供了在应用程序中的主要目的地之间切换的持久且方便的方式。

Navigation drawer

为应用程序中的目的地提供人机工程学访问的组件。

Navigation rail

当使用平板电脑和桌面屏幕时,提供对应用程序主要目的地访问的组件。

Progress indicator

显示未指定等待时间或进程长度的组件。

Radio button

允许用户从集合中选择一个选项的组件。

Role

描述设计系统中设计令牌用途的简短昵称。也称为插槽。示例:On surface; Body 1。

Side sheet

包含锚定在屏幕左或右边缘的补充内容的组件。

Slider

允许用户从一系列值中进行选择的组件。

Snackbar

在屏幕底部提供有关应用程序进程的简短消息的组件。

Style

一个或多个属性,通常可自定义,用于定义UI外观的一个方面,例如颜色、排版或形状。

Switch

打开或关闭单个项目状态的组件。

Tab

用于跨不同屏幕、数据集和其他交互组织内容的组件。

Text field

输入和编辑文字的控件。

Theme

一组样式,如颜色、高程和类型,可以全局应用于应用程序的UI组件,作为一种持续调整应用程序外观方面的方式。

Time picker

帮助用户选择和设置特定时间的组件。

Tooltip

当用户悬停、聚焦或轻击元素时显示信息性文本的组件。

Top App bar

在屏幕顶部显示信息和操作的组件。

标签: M3 Material Design
最后更新:2022 年 12 月 15 日

lhzheng0828

我是程序员!我是电影谜!

点赞
< 上一篇
下一篇 >

文章评论

  • lhzheng0828

    很棒,继续加油小伙子!

    2022 年 12 月 15 日
    回复
  • razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
    回复 lhzheng0828 取消回复

    文章目录
    • Banner
    • Button
    • Bottom app bar
    • Bottom sheet
    • Card
    • Checkbox
    • Chip
    • Color: Baseline scheme
    • Color: Dynamic color
    • Color: Extended color
    • Color: Key color
    • Color: Scheme
    • Color: Source color
    • Color: Tonal palette
    • Color: Tone
    • Color: User-generated schemes
    • Contrast
    • Customization
    • Dark theme
    • Data table
    • Date picker
    • Design attribute
    • Design guidelines
    • Design specs
    • Design System Package (DSP)
    • Design tokens
    • Design tokens: Context
    • Design tokens: Role
    • Design tokens: Types
    • Design tokens: Value
    • Dialog
    • Divider
    • Element
    • Extended FAB
    • Floating action button (FAB)
    • HCT
    • Image list
    • Libraries
    • List
    • Material Components
    • Material Design
    • Material Theming
    • Menu
    • Mode
    • Navigation bar
    • Navigation drawer
    • Navigation rail
    • Progress indicator
    • Radio button
    • Role
    • Side sheet
    • Slider
    • Snackbar
    • Style
    • Switch
    • Tab
    • Text field
    • Theme
    • Time picker
    • Tooltip
    • Top App bar
    分类
    • AI / 1篇
    • Android开发 / 15篇
    • AOSP / 2篇
    • Jetpack / 2篇
    • kmm / 1篇
    • kotlin / 1篇
    • kotlin框架 / 1篇
    • Kotlin深入理解 / 4篇
    • Material Design / 4篇
    • 原创 / 1篇
    • 安全与加密 / 1篇
    • 工具 / 1篇
    • 应用架构 / 2篇
    • 未分类 / 5篇
    • 电影网站 / 1篇
    • 系统安全 / 1篇
    • 跨平台 / 1篇
    • 音频系统 / 1篇
    标签聚合
    Lambda表达式 Stream Jetpack Material Design 开源 Android framework Compose 高阶函数

    COPYRIGHT © 2023 爱码士博客. ALL RIGHTS RESERVED.

    Theme Kratos Made By Seaton Jiang

    浙ICP备2021035904号