SuperAPI AI 工具集

google-material-design

设计与创作

查看项目

更新于 10-15 20:28

技能介绍

用途:Material Design 是谷歌开源设计系统,旨在以统一视觉语言衔接物理与数字世界,为跨平台界面提供从设计原则到组件实现的完整框架。资料给出官方参考入口:指南 https://m3.material.io/ 、基础 https://m3.material.io/foundations 、组件 https://m3.material.io/components 、主题 https://m3.material.io/styles 、GitHub https://github.com/material-components 。

主要能力:核心哲学为“Material is the metaphor(材质即隐喻)”“Bold, graphic, intentional(鲜明、图形化、有意图)”“Motion provides meaning(动效传递意义)”“Adaptive design, delightful experiences(自适应设计与愉悦体验)”。体系包含:以 surface、elevation(0–24dp)和阴影表达空间层级的立体系统;Material 3 排版层级(Display、Headline、Title、Label、Body 各级字号);动效令牌(duration 从 short1 50ms 到 long4 600ms,easing 含 emphasized 与 standard 曲线)及容器变换、共享轴、淡入淡出等过渡模式;基于色调调色板(0–100)与 HCT 色彩空间的动态配色,定义 primary、secondary、tertiary、error、surface、outline 等颜色角色令牌;组件解剖(以按钮为例)与 elevated、filled、tonal、outlined、text 五种按钮变体;state layer 状态层(hover 0.08、focus/pressed 0.12、dragged 0.16,禁用态 0.38);形状令牌从 none 到 extra-large(28dp)再到 full。

使用方式:可将颜色、排版、动效、形状以 CSS 自定义属性形式(如 --md-sys-color-primary、--md-sys-elevation-level2、--md-sys-shape-corner-medium)接入界面,并按组件解剖与状态层规范实现交互元素;资料亦给出动态配色的生成思路代码。

适用场景:需要跨平台统一样式、强调层级与动效语义、并要求无障碍对比度的界面设计。

限制:本资料未提供具体安装命令、收费或价格信息、具体组件库版本与授权细节,均暂未提供,需以官方站点为准。