mobile-design-android

此技能面向 Android 16+ 和 Material 3 Expressive。对于面向较旧 Android 版本的应用，请改用标准 Material 3 指南——通用 AI 知识已充分涵盖这些模式。

此技能旨在帮助打造真正贴合平台的 Android 界面，避免 AI 生成的移动 UI 常见的千篇一律的“Material 模板”风格。每项设计决策都应体现对 Material 3 Expressive 的理解，以及对专业应用与业余作品之间差异的把握。

用户会提供 Android UI 需求：一个屏幕、流程、组件或完整的应用界面。他们也可能补充用途、受众或技术限制等背景信息。

设计思路

生成任何 UI 之前，先确定清晰的设计方向：

• 用途：这个屏幕要实现什么？用户进入该屏幕时处于什么情绪状态？
• 个性：选择一种风格方向——鲜明活力、平静专注、温暖亲切、大胆编辑风、极简精准、俏皮灵动、工业实用。M3 Expressive 提供了远超旧版 Material 的个性化工具——善加利用。
• 视觉焦点：找出每个屏幕上值得叠加表现力的 1-2 个元素——同时运用形状变换、弹簧动画、强调排版和丰富色彩。其他内容则保持低调。
• 差异化：怎样才能让它看起来像一款经过精心设计的应用，而不是 Material Components 目录演示？用户会记住哪一个交互？

重要：M3 Expressive 不是“给所有东西都加上弹跳效果”。它是一套有研究依据的系统，六种设计手法——形状多样性、丰富色彩、强调排版、策略性容器设计、流畅的弹簧动效和灵活的组件——彼此协作。目标体验应自然且富有实体感——就像从书架上抽出一本书时，旁边的书会轻轻滑动；或是划掉通知时，能感受到令人满足的触觉震动。专业应用会在视觉焦点处有选择地运用这些手法；业余作品则会把它们无差别地应用到所有地方。

M3 表现力设计指南

重点关注：

• 动效 — 使用弹簧，而非补间动画：每个动画都使用弹簧物理效果，而非 tween(durationMillis)。弹簧可通过从当前速度重新设定目标值，无缝处理动画中断。使用 MaterialTheme.motionScheme 令牌，绝不硬编码弹簧数值。分为两类：用于位置、大小、旋转和形状的空间规格（弹性较强，阻尼约为 0.6）；用于颜色和不透明度的效果规格（临界阻尼，阻尼 = 1.0）。绝不要对颜色/不透明度应用空间弹簧——透明度弹跳超过 100% 会显得异常。
• 动效速度：根据元素大小匹配速度令牌。小型组件（开关、按钮）使用 fastSpatialSpec。部分屏幕大小的元素（底部表单、抽屉）使用 defaultSpatialSpec。全屏转场使用 slowSpatialSpec。开关使用慢速弹簧会显得迟缓；页面转场使用快速弹簧则会显得急促。
• 形状 — 拥抱张力：M3 Expressive 在基本矩形之外新增了 35 种形状，包括 Pill、Diamond、Cookie9Sided、SoftBurst、Clover4Leaf、Heart 等。关键原则是刻意制造对比：将尖锐的棱角形状与柔和的圆润形状混搭。标签使用药丸形，FAB 使用圆角方形，模态框使用更大的圆角半径。到处使用统一形状 = 模板应用。状态转场应使用形状变形（在 RoundedPolygon 实例之间使用 Morph 类），而非简单的交叉淡化。
• 颜色 — 使用全部 48 种角色：扩展后的 ColorScheme 包含 48 种具名角色。请充分使用它们。主要色用于关键操作，次要色和第三色用于辅助层级；12 种固定强调色用于必须在浅色/深色主题下保持外观一致的元素。5 个表面容器层级（从 surfaceContainerLowest 到 surfaceContainerHighest）取代了基于不透明度的高度效果——用它们营造分层纵深感。所有内容都默认使用白底主色，会浪费这套能让元素识别速度提升 4 倍的系统。
• 排版 — 30 种样式与强调变体：字体比例扩展至 30 种样式。新增的 15 种 *Emphasized 变体（字重更高）适用于“编辑式呈现时刻”——标题、CTA、关键信息。全程统一使用 bodyMedium 会让布局显得平淡。可将 headlineLargeEmphasized 用于主视觉内容，并搭配 bodyLarge 呈现辅助文本。强调样式与基础样式之间的对比能营造视觉节奏。
• 新组件 — 替换已弃用模式：SegmentedButton → ButtonGroup（带溢出选项的连接式按钮）。BottomAppBar → Docked/Floating Toolbar（集成 FAB）。堆叠的小型 FAB → FloatingActionButtonMenu（可通过 ToggleFloatingActionButton 展开）。此外还有：用于主要操作 + 次要操作的 SplitButtonLayout，以及使用形状变形多边形而非圆形旋转图标的 LoadingIndicator。
• FAB：现在默认使用圆角方形，而非圆形。提供了新的尺寸配置。FAB 是个性锚点——可自定义其形状和动画。
• 导航：Navigation Bar/Rail 使用药丸形活动指示器。活动标签使用 secondary 颜色，而非 onSurface。进度指示器支持波浪形状选项和可配置的轨道高度。
• 动态颜色：在 Android 12 及以上版本中，通过 dynamicLightColorScheme/dynamicDarkColorScheme 采用从 Material You 壁纸提取的调色板。为旧设备提供与品牌相符的静态回退方案。使用 Material Color Utilities 让品牌强调色与用户的动态调色板相协调。
• 边缘到边缘与预测性返回：Android 16 强制要求采用边缘到边缘布局——内容绘制在系统栏下方，因此需要正确处理 WindowInsets。用户滑动时，预测性返回手势会显示目标页面的预览——应用内转场必须与系统动画协调，而非与之冲突。
• 自适应布局：使用窗口大小类别——紧凑型（<600dp）使用底部导航和单窗格；中型（600–840dp）使用导航栏和列表/详情布局；扩展型（≥840dp）使用永久抽屉和多窗格布局。动效应随屏幕尺寸调整：手机上更快、更紧凑，平板上稍慢、更舒展。

无障碍性不容妥协

• 普通文本的对比度为 4.5:1，大号文本为 3:1——通过语义角色配对强制执行
• 遵循 Remove animations 设置——当 ANIMATOR_DURATION_SCALE 为 0 时，改用 snap() 或简单淡入淡出；从 Expressive 方案切换为 Standard
• 针对高对比度主题，响应 Android 14 的 UiModeManager.getContrast()
• 无论视觉形状如何变化，触控目标最小尺寸均为 48×48dp
• 确保所有弹簧动画都可中断——这是弹簧系统带来的核心无障碍优势

绝对不要这样做（Android「AI 垃圾」标志）

• 对可中断的动效使用 tween(300) 或任何硬编码的 tween——这是头号反模式；弹簧可平滑地重新定位目标，tween 则会生硬地跳变
• 在颜色或不透明度上使用空间弹簧（有弹跳效果）——透明度超出 100%，或颜色闪过目标值，都会立刻引人注意
• 在切换开关上使用 slowSpatialSpec，或在全屏过渡上使用 fastSpatialSpec——速度应与元素尺寸相匹配
• 每个元素都使用统一的圆角矩形——35 种形状的意义就在于变化与对比
• 只使用 primary 颜色，却忽略 secondary、tertiary 和全部 12 种固定强调角色
• 到处都用 bodyMedium，让排版缺乏变化——忽略强调变体会失去让 Expressive 与众不同的编辑质感
• 未检查 Expressive API 是否可用就使用稳定版 1.4.0——新组件需要使用 alpha 版
• 使用固定方向的布局——Android 16 在 ≥600dp 时会忽略方向限制；自适应布局必不可少
• 使用圆形 FAB——M3 Expressive 的默认形状是圆角方形
• 使用旧版 SegmentedButton 或 BottomAppBar，而不采用其替代组件
• 每个列表都使用一模一样的卡片布局——应根据内容类型调整容器、形状和强调方式
• 忽略 MaterialTheme.motionScheme，在代码中硬编码弹簧参数

专业作品与模板的区别

专业的 M3 Expressive 应用会在关键展示时刻综合运用多种技巧：详情页过渡同时通过 Morph 改变形状、通过效果弹簧改变颜色、通过空间弹簧缩放元素，并以 headlineLargeEmphasized 渲染标题。在关键时刻充分展现表现力，同时在其他地方保持克制——这正是精心设计的应用与默认样式的区别。

专业作品的可观察标志包括：根据品牌个性调校的自定义 MotionScheme、在基础矩形之外策略性地使用 MaterialShapes、将完整的 48 角色颜色系统应用于视觉层级、使用 ButtonGroup 和 FloatingActionButtonMenu 替代已弃用的组件，以及在状态过渡时改变形状，而不是简单地切换可见性。

影响最大的采用顺序是：先调整动效方案（投入最少，效果提升最大），然后丰富形状，再扩展颜色，最后采用新组件。每个弹簧令牌、形状变化和强调文本样式都是可用的杠杆——关键在于知道该用哪些，以及何时使用。