6
%
安卓设计规范
最后更新于 2024-07-15
#C端设计#知识库#设计知识
安卓设计规范 Material Design 3 中文译本正式上线
开始学习
16
文章数
32.5K
总字数
6
知识点数
2.6K
学习人数
4
学完次数
4
精选笔记
知识库概述

Material Design是由谷歌从2014年就在开发的综合型界面设计指南,涵盖了视觉设计、交互体验及前端开发,主要追求两个关键目标:一方面,通过视觉手段汇集经典设计理念,并展示最前沿的技术与创新;另一方面,基于移动平台出发,确保在不同大小、种类的硬件设备上实现一致性与兼容性。

本知识库重点将最新设计规范 Material Design 3 进行了中文翻译,方便新手设计师进行浏览查阅。

风格
已学会 0/15 · 知识点 0/6
色彩系统
创建可访问的个性化配色方案,传达您的产品层次、状态和品牌 概览 Material 颜色系统包括 内置一组可访问的颜色关系 超过 26 种颜色角色映射到 Material Components 内置深色主题颜色 基础颜色,每个颜色角色分配有默认颜色 动态颜色特征,包括用户生成的颜色和基于内容的颜色 对...
颜色角色
什么是颜色角色? 颜色角色就像数字绘画画布上的“数字”。它们是 UI 元素与颜色位置之间的连接组织。 颜色角色映射到 Material Components 无论您使用的是静态基线方案 还是 动态颜色方案,您都将使用这些颜色角色。如果您的产品包含自定义组件,则需要将它们正确映射到这组颜色角色。 颜色...
选择方案
配色方案描述了产品的所有颜色、颜色角色以及明暗主题的颜色关系。 Material 中有两种配色方案: 静态 动态 了解何时以及如何使用不同的配色方案,包括静态基线、动态用户生成和基于内容的动态配色方案 静态颜色 使用静态颜色与您可能使用过的其他颜色工作流程最为相似。静态颜色不会根据用户输入或应用内内...
静态方案
基准配色 基准方案是默认的静态配色方案。它使用易于理解的颜色搭配,并包含浅色和深色主题的颜色。 使用基线配色方案,最终用户可以看到 具有静态颜色的可访问用户界面 采用静态基准配色方案的音乐应用程序 使用静态基准配色方案的新闻应用程序 基线颜色 使用Material Theme Builder在 Fi...
动态方案
选择来源 您的产品可以通过两种方式获取颜色源: 用户壁纸中生成的颜色 基于内容的颜色,来自应用内内容,例如音乐专辑或书籍封面 两种动态颜色都是可访问和个性化的,因此决定使用哪种类型取决于产品中最重要的内容:内容或用户偏好。 用户生成的颜色 如果出现以下情况,请选择用户生成的颜色源: 您的用户将受益于...
高级颜色
概述 从更改组件的默认颜色映射到创建其他颜色角色,高级定制属于以下三个常规操作之一:应用、定义或调整颜色。 高级自定义功能包括重新映射组件上的颜色;在方案之外定义新的颜色;定义自定义颜色角色;以及为图像应用动态颜色。 应用颜色 你可以在默认情况下没有提供的地方或方式应用颜色。 结合多种配色方案 在相...
颜色资源
材料主题生成器 Material Theme Builder (MTB) 是一个 Figma插件,允许制作者模拟 动态颜色的提取过程并创建自定义色调方案。 MTB 创建了完整的色调方案、对比度检查和标记。 材料主题生成器 Material Theme Builder 可让你创建配色方案,并将其应用到...
多层级
概述 高度适用于所有表面和组件 保持立面故事简单(不要有太多层次) 通过改变表面颜色显示多层级 海拔高度以密度独立像素 (dps) 中 z 轴上组件之间的距离来衡量。 从正面看,一个表面在 1 分高处,另一个在 8 分高处 从侧面看,两个表面的标高相差 7dp 与 M2 的区别 阴影:不要默认在所有...
图标
概述 从fonts.google.com/icons获取 Material Symbols 图标 使用 Material Symbols 变量字体在产品中启用动态样式 您可以更改可变字体图标的粗细、填充、视觉尺寸和等级 资源 设计: https://fonts.google.com/icons ht...
概述
动效让产品更加易用 在过渡和交互中使用动效 强调的是默认的缓和值 使用动作标记来控制缓和和持续时间 动效资源 设计: After Effects Easing Panel  MDC-Android Flutter 最新更新 动效 tokens 缓动tokens分为两组:强调和标准。尽可能使用强调缓动...
缓动和持续时间
建议缓动和持续时间对照表 选择合适的缓动和持续时间组合可能很复杂。作为一个简单的起点,这些是适用于大多数过渡的合理默认值。 缓动类型 在物理世界中,物体不会瞬间开始或停止。相反,它们需要时间来加速和减速。没有缓和的过渡看起来僵硬而机械,而有缓和的过渡看起来更自然。 1:有缓动的变化 2:无缓动的变化...
转场动画
转场动画模式 转场动画是连接应用程序各个元素或全屏视图的简短动画。它们是优秀用户体验的基础,因为它们可以帮助用户了解应用程序的工作原理。设计精良的转场动画能让用户感受到高品质的体验和丰富的表现力。对于一个强大的动作执行来说,它们应该是重中之重。 以下是六种常见的转换模式: 容器转换 向前和向后 横向...
应用转场动画
应用转场动画 什么才是好的过场动画? 精心设计的转场动画应具有以下特征: 遵循无障碍设置 大多数平台都设有简化的动画设置,以帮助对动作敏感的用户。如果启用该设置,过渡应该: 使用微妙的淡入淡出动画,而不是强烈的滑动或缩放动画 禁用视差或形状变形等装饰效果 1:默认动作设置的转场 2:已打开减少动画设...
形状
概述 边角形状从完全圆形到方形 您可以自定义容器顶部、底部、起始或结束角的形状 圆形和药丸形状应定义为容器高度值的 ½ 与 M2 的区别 扩展的 M3 形状系统使用基于尺寸的尺度,具有七种样式。样式根据所需的圆度或切角量分配给组件。对于圆角,方角形状为“无”,略圆的形状为“超小”,而完全圆的形状为“...
字体
概述 文字样式包括:显示、大标题、标题、正文和标签 使用可变字体应用排版,提供更多控制 使用Tokens定义字体、行高、大小、轨迹和粗细 资源 设计: Design kit (Figma) Google Fonts MDC-Android Flutter 高亮 字体变体 Roboto Flex 和 ...
推荐笔记
UX小学生
2024-08-02
好复杂,非设计专业的,看的头晕😵‍💫