SuperAPI AI 工具集

mobile-android-design

设计与创作

查看项目

更新于 10-17 16:16

技能介绍

该技能面向原生 Android 应用界面开发,聚焦 Material Design 3(Material You)与 Jetpack Compose 的配合使用,帮助开发者构建现代、可适配的 Android 应用。

用途:在设计 Android 应用界面并遵循 Material Design 3 时使用;构建 Jetpack Compose UI 与布局;实现 Android 导航模式(Navigation Compose);为手机、平板和折叠屏创建自适应布局;使用 Material 3 动态配色主题;构建无障碍的 Android 界面;实现 Android 特有的手势与交互;针对不同屏幕配置进行设计。

主要能力:

  1. Material Design 3 原则:个性化(动态颜色根据用户壁纸调整 UI)、无障碍(色调调色板保证足够的颜色对比度)、大屏(为平板和折叠屏提供响应式布局)。Material 组件包括卡片、按钮、FAB、Chips;导航(rail、drawer、bottom nav);文本框、对话框、Sheets;列表、菜单、进度指示器。
  2. Jetpack Compose 布局系统:Column 与 Row 的垂直/水平排列与对齐;LazyColumn 带粘性标题的分组列表;LazyVerticalGrid 自适应网格(GridCells.Adaptive)。
  3. 导航模式:底部导航(NavigationBar + NavHost,含 popUpTo、launchSingleTop、restoreState 等配置);导航抽屉(ModalNavigationDrawer + ModalDrawerSheet,配合 TopAppBar 与菜单按钮)。
  4. Material 3 主题:动态配色(Android 12+ 使用 dynamicDarkColorScheme/dynamicLightColorScheme,低版本回退到自定义配色);自定义 lightColorScheme 示例;Typography 文字样式定义(displayLarge、headlineMedium、titleLarge、bodyLarge、labelMedium 等)。
  5. 组件示例:FeatureCard 卡片(AsyncImage 图片 + 标题/描述);按钮体系(Button、FilledTonalButton、OutlinedButton、TextButton、FloatingActionButton);ItemListCard 列表项卡片(圆形图标容器、标题/副标题、右侧箭头)。
  6. 最佳实践:通过 MaterialTheme.colorScheme 访问颜色以自动支持深色模式;Android 12+ 启用动态颜色;使用 WindowSizeClass 做响应式设计;为所有交互元素添加 contentDescription;触摸目标最小 48dp;状态提升(State Hoisting)使组件可复用可测试;合理使用 remember 与 rememberSaveable;添加不同配置的 @Preview。

使用方式:资料以代码示例形式给出布局、导航、主题与组件的 Compose 实现,可直接参考对应片段在项目中编写 composable。资料未提供安装命令、依赖版本或命令行步骤,暂未提供。

适用场景:Android 原生应用界面设计与实现、Compose 布局与列表/网格搭建、底部导航与抽屉导航、Material 3 主题与动态配色、手机/平板/折叠屏适配、无障碍界面构建。

限制:资料未说明该技能的运行环境、依赖版本、收费或授权信息,暂未提供;示例代码需结合具体项目结构与依赖进行调整,资料未给出完整工程配置。