Material Design 3 的形状系统详解
M3 的形状系统是其美学革新的一部分，它为设计师提供了更丰富、更灵活的工具来定义界面的视觉特征。与 M2 相比，M3 不再强制所有组件都采用统一的圆角矩形，而是允许更多的形状表达，从而更好地传达组件的用途、层级和品牌调性。
1. 形状的原理与作用
形状在界面设计中扮演着重要的角色，不仅仅是装饰，更是功能和感知的载体：
视觉识别与区分： 不同的形状可以帮助用户快速识别和区分不同类型的组件。例如，一个圆形浮动操作按钮（FAB）与一个矩形按钮在视觉上就能立刻区分开，暗示了它们功能上的差异。
传达层级与状态： 形状的变化可以暗示组件的层级关系或当前状态。例如，一个带有尖角的对话框可能表示这是一个需要立即关注的警告，而一个圆角的卡片可能表示一个普通的信息展示。
品牌个性化： 形状是品牌视觉语言的重要组成部分。通过选择和应用特定的形状样式，设计师可以将品牌的独特个性融入到产品界面中，增强品牌识别度。
引导用户注意力： 独特的形状可以吸引用户的注意力，引导他们关注界面的特定区域或交互元素。
提升用户体验： 恰当的形状可以改善用户体验。例如，适当的圆角可以使组件看起来更柔和、更友好，而太锐利的边角可能会给人带来紧张感。
2. M3 的七种角形状样式 (Corner Shape Styles)
M3 定义了七种主要的角形状样式，它们涵盖了从完全直角到完全圆角的所有可能性。这些样式可以应用于组件的任意一个或所有角。
None (无): 0dp 圆角。表示直角。
适用场景： 需要清晰、直接、硬朗的视觉效果，例如表格边框、某些数据可视化图表。
Extra Small (特小): 4dp 圆角。
适用场景： 微妙的柔化效果，适合需要一点点圆润感的较小元素，如某些输入框、小标签。
Small (小): 8dp 圆角。
适用场景： M2 中常见的默认圆角，提供适度的柔和感，适用于按钮、较小的卡片。
Medium (中): 12dp 圆角。
适用场景： 更明显的圆角，适用于中等大小的卡片、对话框。
Large (大): 16dp 圆角。
适用场景： 较强的圆润感，适合较大的信息卡片、工作表。
Extra Large (特大): 28dp 圆角。
适用场景： 非常圆润，用于浮动动作按钮（FABs）、大型容器。
Full (全圆): 完全圆角。通常用于圆形或椭圆形组件，如头像、某些芯片。圆角半径等于组件短边的一半。
适用场景： 头像、圆形图标、浮动操作按钮 (FAB)。
3. 应用形状的原则
一致性与变化： 在一个应用中保持核心形状风格的一致性很重要，但也可以通过应用不同的形状样式来区分不同类型的组件或其重要性。
语义与功能： 形状的选择应与组件的功能和语义相符。例如，一个交互性强的按钮通常会比一个纯展示性的信息卡片有更明显的形状。
品牌表达： 形状是传达品牌个性的有力工具。一个强调创新和未来的品牌可能倾向于使用更具几何感的形状，而一个强调亲和力的品牌可能更喜欢圆润的形状。
可访问性： 形状的变化不应影响组件的易用性或可读性。确保不同形状的组件在视觉上依然清晰可辨。
例子
我们通过一个社交媒体应用的界面来展示 M3 形状的应用。
1. 主页动态流
用户头像： 通常使用
Full(全圆) 形状。效果： 明确识别为个人形象，突出头像的圆形特征。
帖子卡片： 可以使用
Medium(12dp) 或Large(16dp) 圆角。效果： 让帖子卡片看起来更友好、更柔和，与背景有良好的区分度。
点赞/评论按钮： 这些小按钮可以使用
Small(8dp) 或Extra Small(4dp) 圆角。效果： 略微柔化边缘，让它们看起来更易于点击，但又不至于过于圆润。
2. 个人资料页面
个人资料背景横幅： 可以使用
None(0dp) 或Extra Small(4dp) 圆角。效果： 如果是全宽的背景图，直角能提供更强的视觉冲击力；微小的圆角则能稍微柔化边缘。
个人信息卡片 (如“关于我”, “我的相册”): 可以使用
Large(16dp) 或Extra Large(28dp) 圆角。效果： 更大的圆角可以使这些信息块看起来像“浮动”在页面上，更具视觉吸引力。
3. 发布内容界面
浮动动作按钮 (FAB) (如“发布”按钮): 典型地使用
Full(全圆) 或Extra Large(28dp) 圆角。效果： 作为主要动作的入口，圆形或高度圆润的形状使其非常突出和易于识别。
文本输入框： 可以使用
Small(8dp) 或Medium(12dp) 圆角。效果： 柔化输入框的边缘，使其与内容区域更好地融合，同时保持清晰的输入区域边界。
4. 底部导航栏
导航栏容器： 通常可以使用
None(0dp) 或Extra Small(4dp) 圆角（如果它延伸到屏幕边缘）。如果底部导航栏是浮动的，它可以使用Medium或Large圆角。效果： 直角使底部导航栏看起来是屏幕的“一部分”；如果浮动，圆角则使其看起来像一个独立的组件。