Android 设计

Android 设计 是做什么的？

如何依据 Material 3 Expressive 设计 Android 应用，并将之转化为决策和 Compose 代码。Expressive 并非独立的设计语言：它是 Material 3 加上 Google 称为“扩展包”的可选 API、组件和设计策略。此处的指南、研究和 API 名称来源于 m3.material.io、Android 设计指南 (developer.android.com/design/ui)、Wear OS 设计指南、Google I/O 和 Android Developers 的演讲以及 androidx 源代码。

核心思路：当重点被刻意分配时，屏幕才显得经过精心设计。 明确屏幕的目标，然后根据首要目标分配大小、颜色对比、形状、排版、容器和动效，次要目标分配较少，其余部分几乎不分配。默认的 Material 代码赋予每个元素相同的权重，因此看起来像模板。

标注 (Google) 的引文和规则来自 Google 的指南。标注 (default) 的规则是此技能的默认起点：除非屏幕方向另有理由，否则请遵循这些规则。

适用屏幕。 此技能适用于手机、平板、桌面和 Wear OS 应用屏幕。对于 Wear OS 屏幕，请先阅读 references/wear-os.md；当两者不一致时，以 Wear OS 为准。使用 wear-compose-m3 技能进行支架构建和迁移。Wear 磁贴、表盘和主屏幕小部件不在本技能范围内：Wear 小部件和磁贴请使用 wear-widgets 技能，主屏幕小部件请使用 Glance 技能。

可视化工具

实施或审查真实的 Compose 代码需要 compose-preview CLI 以及 compose-preview 和 compose-ui-builder 技能：阅读并遵循 compose-preview，它掌管工具选择、渲染和问题排查。对于 UI Builder 设计创作请求，请遵循 compose-ui-builder。此技能负责设计决策和屏幕检查。如果某个依赖项不可用，请报告并引导用户参阅本仓库的 README 设置部分，而不是自行安装工具或用其他渲染器替代。

探索或实施

当请求涉及新应用、新屏幕或重新设计的设计（要求抛光、视觉方向或 Material 3 Expressive，或直接指定此技能）时，即使请求说“构建”，也应从提案开始：遵循 android-design-explore 技能，在预览器中展示其提案，并在编写任何 Compose 代码前等待用户批准方向。如果用户明确要求跳过提案（“跳过提案”、“直接编码”），或者已存在已批准的提案，则跳过提案；使用该技能的“批准并移植”步骤（以 export_kotlin 开头）移植已批准的提案。

未涉及设计的纯构建需求可直接进入编码，应用以下设计决策和屏幕检查。

现有设计内的变更（修复、调整、审查、已批准屏幕的新状态）应直接在实际项目中进行，遵循其自身的批准和分支规则，并使用以下设计决策和屏幕检查。

0. 编写 UI 之前

在提供任何代码之前，请在回复中回答以下问题，每问简要回答一两句话。跳过此步骤是产生通用屏幕的原因。

1. 排列目标优先级。 此屏幕上的主要任务是什么？次要和第三重要任务是什么？（Google：“每个页面简化到一个主要任务。”）
2. 选择一个方向。 说出屏幕的情感特征、定义它的内容或交互，以及一个将排版、图像、颜色和形状联系起来的视觉创意。每个答案必须命名一个具体决策（例如，“总集合以高数字占据顶部三分之一”），而不是一个形容词（例如，“现代、简洁”）。如果这个想法描述了大多数同类应用已有的外观，那它还不是一个想法。
3. 决定高光时刻 (Hero Moment)。 此屏幕是产品的少数几个高光时刻之一吗（最感性或最中心的交互）？如果是，请计划如何在此处组合多种策略。如果不是，请保持平缓（Google）。
4. 选择颜色来源。 动态（壁纸）、品牌（生成的方案）或基于内容（来自屏幕上的图像）。参见第 4 节。
5. 按优先级分配重点。 主要目标获得最多重点，通常是大小优先。次要目标获得较少的策略；第三重要目标获得容器和排版（Google）。当内容是产品本身时，内容可以主导屏幕，但只要主要操作保持明确无误即可。
6. 从第 9 节的表格中选择组件，而不是根据对旧版 Material 的记忆。
7. 回答适配问题。 对于你将渲染的每个尺寸类别（紧凑型；中等或展开型；大型或超大），说出额外空间揭示了什么：第二个面板、展开的侧导航栏、更多细节。使用 references/layout.md 中的五个问题，从“应该揭示什么？”开始。导航保持一致：如果较大布局有侧导航栏，则紧凑型布局也应为相同目的地提供导航栏。对于像媒体播放器这样的控制型屏幕，控制项会重排，并揭示内容。如果较大布局仅仅是手机内容的放大，则未回答此问题：“额外的空间不仅仅意味着把同样的东西做得更大。”（Google）

然后构建屏幕（第 8 节），构建它，并对渲染结果运行屏幕检查。

1. 主题设置

Expressive 需要 androidx.compose.material3:material3 1.5.0-alpha 或更高版本。稳定的 1.4.0 几乎没有这些 API。请通过 Maven 元数据 查找最新的 1.5.x 版本，而不是依赖记忆中的版本；alpha API 在不同版本间仍会变化。当前 alpha 版本还需要 compileSdk 37 和 Android Gradle Plugin 9.1 或更高版本。

@Composable
fun AppTheme(dark: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val context = LocalContext.current
    val colorScheme = when {
        Build.VERSION.SDK_INT >= 31 -> if (dark) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        dark -> darkColorScheme()
        else -> expressiveLightColorScheme()
    }
    MaterialExpressiveTheme(
        colorScheme = colorScheme,
        motionScheme = MotionScheme.expressive(),
        typography = AppTypography, // Google Sans Flex voices plus an optional brand face, see section 5
        content = content,
    )
}

• 没有 expressiveDarkColorScheme；使用 darkColorScheme() 或生成的深色方案。
• MaterialShapes、toShape()、LoadingIndicator 和 ContainedLoadingIndicator 仍然需要 @OptIn(ExperimentalMaterial3ExpressiveApi::class)。这里的所有其他内容在 1.5.0 alpha 中都是非实验性的。
• 完整设置、种子方案、自定义类型比例、形状变形、动效规格、间距和版本说明：设置或更改主题时，请阅读 references/theming.md。

2. 重点和层级

重点是指人们如何找到主要操作：更大的关键操作和精心设计的层级可以减少错误，并使关键 UI 元素更易于查找（Google）。

• 大小是最响亮的杠杆，并且是相对的。 “最重要的操作或主要号召性用语 (CTA) 应该是最大的元素”（Google）：更大的关键操作意味着更少的错误和更高的用户满意度，因此主要操作引领其周围的操作，无论它们的大小如何。内容不与它竞争：摘要卡片或列表行在物理上可以更大。从组件具有最强填充的默认大小（小按钮；对于 FAB，Google 的“中型 FAB 在大多数情况下是推荐的”）开始，并仅将其增长到足以引领其同级的程度；每个屏幕一个焦点，当所有内容都很大时，就没有什么特别的了。分组的操作默认共享一个大小（“标准组中的所有按钮应具有相同大小”），主要操作通过填充或形状来引领：Google 的分组规则是“最大、最宽或视觉上最突出”。超大尺寸属于以控制为主导的高光时刻，例如播放器或呼吸会话，其中控制本身就是屏幕的内容。标签设置了下限：Google 表示“不要截断或换行标签文本”，容器“不应窄于其标签文本”。当标签在选定的容器大小（手机宽度的卡片、面板）中无法显示在一行时，将其缩短为 1 到 3 个单词，为按钮提供更多空间，或降级一个尺寸（Google：大小可以“在不同断点之间”变化，重点可以“通过大小、颜色或形状”体现）。
• 放置： 将关键操作放在手和眼睛已经在的位置。Google 的电子邮件研究：将“发送”从小型顶栏图标移动到键盘上方较大的 secondary 按钮，使人们找到它的速度快了 4 倍；Aura 的首页将其超大型启动按钮放低，位于垂直流程的末尾。根据交互和内容所需的空间选择位置（default）。
• 主要操作获得最强填充 （Google：主要角色用于关键的号召性用语；填充按钮要谨慎使用）。次要操作是色调或标准的；像“收藏”这样的切换开关使用填充图标或色调容器来显示状态，而不是使用第二个响亮的填充与主控件竞争。
• 角色之间的对比，而不是处处使用同一个角色： primary 用于主要操作，secondary 或 secondaryContainer 用于支持性控件，tertiary 用于状态或强调。在所有地方使用 primary 和 primaryContainer 会使屏幕显得平淡。
• 容器： 将相关项目分组在容器中；为最重要的内容提供“充足的空间和最明亮的表面”。
• 摘要支持任务，而不是超越任务。 当主要目标是操作列表（勾选习惯、回复消息）时，下一个可操作项必须保持屏幕上最吸引人的内容。统计卡片可以很醒目，但要给可操作的行提供清晰的容器，并让已完成的项目退后（颜色更安静，无强填充），按状态分组而不是交错排列（第 8 节）。选择高亮是用于用户选择的内容，而不是已完成的内容。
• 工作顺序： 首先构建层级结构（大小、颜色、间距、位置、容器），然后添加独特强调（形状、缩放、变形）以庆祝成功或进展。

Google 的实例：Aura 呼吸应用

每个屏幕根据目标优先级分配重点。将其用作推理模板。

屏幕	优先级	重点
首页	主要：开始一个会话	在柔和表面上使用深色 primary 的超大“开始呼吸”按钮，位于屏幕底部。设置项分组为 secondary 中的列表项。每日消息放在柔和容器中，重点最少。
会话	高光时刻	屏幕填充的花形（MaterialShapes.Flower 和 Sunny）随着每次呼吸以 spring 动效生长和收缩；吸气时为鲜艳黄色；极大的倒计时数字搭配小标签；暂停/停止按钮小位于底部；导航栏隐藏。
报告	次要	较少策略“以减轻认知负荷”：统一花形中的指标，强调数字，中等大小（非 XL）的“完成”按钮。
进度	第三重要	微妙：primary 中的关键数据，已完成天数作为小的次要形状，数字“大到足以扫描，但它们不占主导地位。”

他们从 v1 到 v2 的经验：大小相似且颜色不一致的未分组设置相互竞争注意力；将它们分组到一个超大按钮之上，实现了“从杂乱到平静”。

3. 高光时刻 (Hero Moments) 和克制

“高光时刻使用多种表达策略，以突破可预测或统一应用的设计理念。”

• 高光时刻将排版、形状、颜色、动效和灵活组件叠加在产品的关键交互上：电话拨号器、媒体播放器、已完成的目标、呼吸会话。问：它是否具有情感冲击力？ 并且它是关键交互吗？
• 每个产品一到两个。 它们“短暂、令人愉快、惊喜且出乎意料”；超过两个会让人不知所措。
• 次要屏幕使用较少的策略。不要在每个地方组合所有策略。
• 在高光时刻中，只有一项自定义内容在动：保持文本稳定，同时形状动画化（Google）。内置的组件变形（按钮按下时改变形状）不计算在内。
• 当内容本身就是产品时，内容就是高光。 在播放器、画廊和旅行应用中，让专辑封面或照片获得缩放效果，并让其颜色设置屏幕。库形状蒙版、全出血或将标题叠加在图像上都是选项，而非要求：当周围的构图承载着理念时，普通的圆角裁剪也同样强大。
• 保持熟悉的模式。 Expressive 样式化这些模式；它不替换它们。在 Google 的测试中，将播放列表重建为分散的专辑封面“看起来现代且令人兴奋”，但人们不认为它是播放列表，并且从电子邮件操作中删除文本标签损害了可用性。上下文也很重要：适合媒体播放器的内容可能不适合银行应用。
• “再多的情感也无法弥补清晰度的缺乏。”Expressive 能让本已出色的屏幕更出色；它无法拯救一个混乱的屏幕。

4. 颜色

• 生成器创建调色板；你分配角色。 Material 的颜色实用程序将一个源颜色转换为强调色、表面色、浅色和深色角色（Google）。按原样接受生成的调色板，并将设计精力投入到哪个元素获得哪个角色上。
  • 动态（壁纸）是 Google 的推荐，并提供个性化。M3 Expressive 更新使动态颜色在源头上更丰富（“所有色调的色度更高”）；应用会自动获得它。应用与手机的其他部分共享色调，因此其身份来自层级、形状和排版。
  • 品牌 赋予应用自己的身份：从品牌颜色使用 Material Theme Builder 生成的方案，或运行时使用 MaterialKolor 默认调色板样式生成的方案（主题参考）。不要为了看起来“更具表现力”而提高调色板样式：MaterialKolor 的 PaletteStyle.Expressive 是一种与 M3 Expressive 无关的色调偏移方案变体，并且会将调色板拉离品牌的色调。
  • 基于内容 的颜色为屏幕的包含区域（例如全屏卡片或媒体播放器）的调色板着色。仅当屏幕上的主导图像定义该区域时，才应使用此方法。

5. 排版

[本部分内容继续，但由于原始文本被截断，此处无法提供完整翻译。]