上一章 应用转场动画

形状

UX百科编辑部2024-07-04 发布
191人在学·0条笔记
收藏

概述

  • 边角形状从完全圆形到方形
  • 您可以自定义容器顶部、底部、起始或结束角的形状
  • 圆形和药丸形状应定义为容器高度值的 ½

与 M2 的区别

扩展的 M3 形状系统使用基于尺寸的尺度,具有七种样式。样式根据所需的圆度或切角量分配给组件。对于圆角,方角形状为“无”,略圆的形状为“超小”,而完全圆的形状为“满”。

这与M2 形状系统有所不同,其中组件是按容器大小分组的。

新的 M3 形状系统更像是类型尺度,使得 UI 中的形状具有表现力。

刻度上的台阶根据应用于角上的曲线或切割的大小而命名
左侧:M2基于组件容器大小的三级形状比例尺 右侧:M3基于形状边角圆滑度的七级形状量表

形状尺度和Tokens

形状比例

该尺度涵盖七种角形样式,定义切割或圆度的量:无、超小、小、中、大、超大和最大。

量表中的每个角色都定义了两件事:

  • 形状系列(圆形或切割形)

默认情况下,所有角色都使用圆角形状系列。大多数值都以绝对 dp 测量值表示,但完整样式除外,它以百分比表示。

无、超小、小、中、大、超大和最大

基线形状

默认情况下,每个组件都映射到七种形状样式之一。

对称

组件可以具有对称或不对称的角形状。对称形状的所有角的值相同,而不对称形状的角的值可以不同。以“方向修饰符”(例如顶部、底部、起点或终点)结尾的形状标记始终是不对称的。

1:顶部超小 2:顶部大 3:顶部特大 4:底部大

不对称形状的标记包括一个 “方向修饰符”,如顶部、底部、起点或终点。

Shape 系列

组件可以具有以下两种形状系列之一:

  • 圆角
  • 切角
1:圆角 2:切角

自定义形状

基于风格

您可以在形状比例中自定义任何样式级别的形状系列和大小。此类更改会影响映射到该形状样式的所有组件(具有覆盖的组件除外)。

自定义 “中型 “样式的边角尺寸会将更改应用到使用该样式的所有组件,如卡片和小型 FAB

基于特定组件

您可以更改组件映射到的样式级别。

例如,默认情况下,按钮会映射到形状样式“全”。如果您的产品需要较小的圆度,则可以将其重新映射到形状比例中的小或中样式。

将按钮形状重新映射为不同的样式会将更改应用于用户界面中的所有按钮

更改形状系列会影响组件内的内容。

例如,卡片上的大切角会比相同大小的圆角更侵占内容区域,这可能会影响内容布局或剪切图像。为避免意外结果,请结合组件的布局和内容来考虑形状系列和大小的选择。

191人在学·0条笔记
收藏
已学会
2人已学会
下一篇字体
概述 文字样式包括:显示、大标题、标题、正文和标签 使用可变字体应用排版,提供更多控制 使用Tokens定义字体、行高、大小、轨迹和粗细 资源 设计: Design kit (Figma) Google Fonts MDC-Android Flutter 高亮 字体变体 Roboto Flex 和 ...
本章笔记
仅看自己
logo