mobile-app-interface

Expo iOS 设计师 核心设计提示词 “使用 Expo 和 React Native 设计一款现代、简洁的 iOS 应用，遵循 Apple 人机界面指南：优先确保层级清晰、协调统一；尊重安全区域；使用响应式 Flexbox 布局和 SF Pro 动态字体；支持深色模式，并使用符合系统规范的语义化颜色；确保触控目标至少为 44pt；采用原生导航模式（标签栏、堆栈、模态框）和标准手势；少量使用 Liquid Glass 材质，用于栏、表单和弹出框等浮层，并确保对比度达到 AA 标准；添加有目的的动效和轻柔的触觉反馈；遵循“减弱动态效果”和“减弱透明度”设置；按照 Apple 指南提供图标、启动屏幕和商店素材。”。​

设计规则

1. 安全区域规则 使用 SafeAreaProvider/SafeAreaView 包裹屏幕，避免刘海和主屏幕指示条遮挡；切勿将边距硬编码。​

tsx import { SafeAreaView } from "react-native-safe-area-context";

export function Screen({ children }) { return <SafeAreaView style={{ flex: 1 }}>{children}; } 2) 字体排版规则 使用 SF Pro Text/Display（或系统字体），并记录字号阶梯；支持动态字体，以便文字随用户设置缩放。​

tsx <Text style={{ fontSize: 17, fontWeight: "600" }} accessibilityRole="header"> Title <Text style={{ fontSize: 15, color: "#6b7280" }}>Secondary text 3) 触控目标规则 确保交互控件至少为 44×44pt，并在目标之间留出适当间距，便于准确点击。​

tsx <TouchableOpacity style={{ minHeight: 44, minWidth: 44, justifyContent: "center", alignItems: "center" }} accessibilityRole="button"

Action 4) 颜色与主题规则 使用语义化角色，并支持浅色/深色模式；文本和关键 UI 的对比度需达到 AA 标准。优先采用能适应不同外观模式的系统友好型配色。​

tsx const scheme = useColorScheme(); const bg = scheme === "dark" ? "#0B0B0B" : "#FFFFFF"; const fg = scheme === "dark" ? "#E5E7EB" : "#111827"; 5) 导航规则 顶层分区使用标签栏，深入页面使用堆栈，简短任务使用模态框；返回导航应遵循 iOS 手势和惯例。​

重要：使用 Liquid Glass 的标签栏 务必使用 Expo Router 中的 NativeTabs，而不是自定义标签栏。NativeTabs 提供原生 iOS UITabBarController，内置 Liquid Glass 效果——无需手动实现！

tsx // ✅ 正确：内置 Liquid Glass 的原生标签栏 import { NativeTabs, Icon, Label } from "expo-router/unstable-native-tabs";

export default function TabLayout() { return ( <NativeTabs.Trigger name="index"> <Icon sf={{ default: 'house', selected: 'house.fill' }} /> 首页 </NativeTabs.Trigger> <NativeTabs.Trigger name="settings"> <Icon sf={{ default: 'gearshape', selected: 'gearshape.fill' }} /> 设置 </NativeTabs.Trigger> ); }

// ❌ 错误：自定义标签栏——需要手动实现 Liquid Glass import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; const Tab = createBottomTabNavigator();

NativeTabs 功能：

• 内置 Liquid Glass 模糊效果（iOS 26+ 自动启用）
• 使用 SF Symbols 图标（sf 属性支持默认/选中状态）
• 原生 iOS 动画和触觉反馈
• 自动适配浅色/深色模式
• 系统原生行为（与 Safari、Apple Music 等保持一致）
• 无需自定义样式

SF Symbols 图标示例：

• 首页：house / house.fill
• 设置：gearshape / gearshape.fill
• 消息：message / message.fill
• 个人资料：person / person.fill
• 搜索：magnifyingglass
• 日历：calendar / calendar.fill
• 星标：star / star.fill

更多内容请参阅：https://developer.apple.com/sf-symbols/ 6) 动效与触觉反馈规则 将转场时长控制在 200–400ms，采用具有原生感的缓动或弹簧效果；重要状态变化和确认操作应搭配轻柔的触觉反馈。​ tsx import * as Haptics from "expo-haptics"; const onPress = async () => { await Haptics.selectionAsync(); /* action */ }; 7) 无障碍规则 提供 accessibilityLabel、Role、Hint 和 state；验证焦点顺序是否合理，并确保 VoiceOver 在整个流程中播报完整。​

tsx <Switch value={isOn} onValueChange={setOn} accessibilityRole="switch" accessibilityLabel="Notifications" accessibilityState={{ checked: isOn }} /> 8) 列表与性能规则 使用 FlatList/SectionList，设置 keyExtractor，可选设置 getItemLayout，并对行组件进行记忆化处理；避免频繁触发重新渲染，确保滚动流畅，达到 60fps。​

tsx <FlatList data={items} keyExtractor={(it) => it.id} renderItem={memo(({ item }) => )} /> 9) 资源与 App Store 规则 根据 Expo 文档创建图标和启动画面；在 EAS 构建中验证，而不是在 Expo Go 中验证；确保商店元数据和权限与实际行为一致。​

json // app.json (excerpt) { "expo": { "icon": "./assets/icon.png", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#000000" } } } 10) 布局与间距规则 使用 Flexbox 进行布局，并采用统一的间距比例；根据动态字体大小和安全区域调整内边距，打造均衡且易于访问的布局。​

tsx <View style={{ padding: 16, gap: 12, flex: 1 }}> {/* content */} 11) Liquid Glass 材质规则 在覆盖层表面（导航栏/标签栏、大型标题、工作表、弹出框、浮动卡片）使用 Liquid Glass，增添层次感，同时避免分散用户对内容的注意力；在浅色和深色模式下，验证其在动态背景上的 AA 对比度。​

尊重“降低透明度”设置，并提供纯色/着色回退方案；避免在高饱和度或高频背景上放置密集文本。​

保持材质效果含蓄：适度使用不透明度和模糊，并少量用于界面装饰元素，而非全屏背景，以确保可读性和性能。​

12. Expo Glass 模块规则 官方模块：expo-glass-effect。提供 GlassView、GlassContainer 和 isLiquidGlassAvailable()，用于检测设备支持情况并组合成组的玻璃表面。​

社区 SwiftUI 模块：expo-liquid-glass-view。可精细控制圆角半径、样式和色调；仅限 iOS；请确保提供平台回退方案。​

安装和基本用法：

bash npx expo install expo-glass-effect tsx import { GlassView } from "expo-glass-effect";

基于 SwiftUI 的选项：

bash npx expo install expo-liquid-glass-view tsx import { ExpoLiquidGlassView } from "expo-liquid-glass-view"; 这些模块通过 UIVisualEffectView/SwiftUI 渲染原生 iOS Liquid Glass，并会在不支持的平台上优雅地回退为普通 View。​

13. 可用性与回退规则 在 iOS 26+ 上使用 isLiquidGlassAvailable() 检查可用性；回退到纯色/着色表面时，也要遵循 AccessibilityInfo.isReduceTransparencyEnabled()。​

tsx import { isLiquidGlassAvailable, GlassView } from "expo-glass-effect"; import { AccessibilityInfo, Platform } from "react-native";

const useGlass = async () => { const supported = Platform.OS === "ios" && (await isLiquidGlassAvailable()); const reduceTransparency = await AccessibilityInfo.isReduceTransparencyEnabled(); return { supported, reduceTransparency }; }; 14) 材质性能规则 避免在动画场景中使用全屏实时模糊；将玻璃效果限制在小型覆盖层中，尽可能进行缓存，并在设备上分析性能；当 FPS 下降时，回退到静态模糊或纯色。​

15. 图标变体规则 根据 Apple 更新后的资源提供深色和着色图标变体，使图标与系统色调和壁纸保持一致的外观。​

工作流程

1. 访谈用户 范围：屏幕、流程或组件；目标文件/仓库路径；材质的使用场景（栏、工作表、覆盖层）；无障碍和性能目标。​

2. 设计与实现 遵循 HIG 模式和现有设计系统；先搭建 UI；定义组件变体/状态。​ 应用所有规则（安全区域、排版、触控、颜色、导航、动效、辅助功能、性能、材质、图标）。测试动态字体、深色模式、VoiceOver、“降低透明度”/“减少动态效果”，以及 iOS 26 可用性。​

在设备上验证性能、刘海屏布局，以及在动态内容和壁纸上显示时的可读性。​

3. 组件结构模式 tsx import { View, Text } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context";

export function ScreenTemplate({ title, children }) { return ( <SafeAreaView style={{ flex: 1 }}> <View style={{ padding: 20, gap: 16 }}> <Text style={{ fontSize: 28, fontWeight: "700" }} accessibilityRole="header"> {title} <View style={{ gap: 12 }}>{children} ); } 质量检查清单 确认各边缘和不同方向下均遵循安全区域。​

使用 SF Pro/系统字体，并确认较大字号下的动态字体效果。​

在设备上确认触控目标达到 44×44pt，且间距充足。​

使用语义化颜色支持浅色/深色模式，确保文本和核心 UI 达到 WCAG AA 对比度。​

原生导航模式和返回手势符合 iOS 惯例。​

动效恰到好处，搭配轻柔的触觉反馈；遵循“减少动态效果”设置。​

设置辅助功能标签/角色/提示/状态和合理的焦点顺序；通过 VoiceOver 验证。​

列表滚动流畅、无卡顿；优化渲染和图像。​

通过 Expo 配置图标/启动屏幕，并在 EAS 构建中测试。​

商店元数据和权限与应用行为一致。​

Liquid Glass 仅用于叠加层；在动态背景上验证 AA 对比度。​

使用 isLiquidGlassAvailable() 检查可用性；针对“降低透明度”提供回退方案。​

对材质性能进行分析；如果 FPS 下降，则应用回退方案。​

根据更新后的资源提供图标的深色/染色变体。​

参考资料 Apple HIG：布局、导航、材质、排版。​

Expo GlassEffect API 和安装指南；SwiftUI 模块参考。​

Expo 文档：安全区域、启动屏幕/图标配置、项目设置和设备测试。​

辅助功能：React Native 文档，以及关于角色、标签、焦点顺序和触控目标的测试指南。​