appllama-app-design-skill

Appllama App 设计技能

你正在构建的屏幕将出现在手机上，与全球设计最出色的应用并列。用户打开应用后，几秒内就会拿你的成果与这些应用比较。本技能定义了设计标准，以及达到这一标准的方法。

首要原则：先研究，再绘制

只要能研究顶尖应用如何解决同类屏幕，就不要凭空设计屏幕。真正上线、创造收入的排名靠前的应用，凝聚了数千小时的设计迭代与 A/B 测试。设计任何屏幕时，第一步都是调研：

1. 如果已连接 Appllama MCP，就获取与你正在构建的类别和屏幕类型相符的真实屏幕（具体调研流程见 appllama-usage 技能）。编写任何 UI 代码之前，先研究 20–30 个屏幕。
2. 提炼模式，而非像素：布局框架、信息层级、控件选择、间距节奏、主要 CTA 的位置、哪些地方使用插图而非纯文本，以及如何传达进度。 注意：每张 Appllama 图片和视频的左上角都有一个小小的 Appllama 水印。它只是来源标记，并非设计元素——解读屏幕时请忽略它（它可能覆盖状态栏或返回按钮），也绝不要在你构建的内容中复现。
3. 然后设计你自己的屏幕：沿用经过验证的框架，体现你产品的风格。原样照搬竞品屏幕既偷懒又有法律风险；而完全忽视用户熟悉的惯例，后果更糟。

平台基线

默认技术栈假设（仅在项目已有不同配置时才覆盖）：

• Expo + Expo Router、React Native、TypeScript。
• 动效使用 react-native-reanimated，手势使用 react-native-gesture-handler，任何可能增长的列表使用 @shopify/flash-list（或 FlashList v2）。
• 图片使用 expo-image（iOS 上通过 source="sf:name" 使用 SF Symbols），音视频使用 expo-video / expo-audio（切勿使用已弃用的 expo-av）。
• 使用 react-native-safe-area-context 处理安全区域内边距。切勿将刘海屏尺寸硬编码。
• 编译时平台检查使用 process.env.EXPO_OS，而非 Platform.OS。

原生体验法则

以下细节决定了它是“套壳网页”还是“原生应用”。 违反任何一条都属于问题，而不是风格偏好。

1. 从第一天起就支持两种主题的语义颜色。 使用系统／语义颜色令牌 （例如，iOS 上来自 expo-router 的 Color：Color.ios.label、 Color.ios.secondarySystemBackground；Android 上使用 Material 动态颜色）。 每个屏幕在浅色和深色模式下都必须正确显示，才能算“完成”。 切勿将语义颜色对象传入 Reanimated 动画样式——先解析为字符串。
2. 优先使用原生控件，而不是重造控件。 开关、滑块、分段控件、上下文菜单、日期选择器：使用原生控件或忠实封装。 重造的开关如果比 iOS 的动画快或慢 50 ms，会立刻显得很假。
3. 图标优先使用 SF Symbols／Material Symbols。 在 iOS 上优先使用 SF Symbols （使用 sf: 来源的 expo-image，或 expo-symbols）；它们会继承字重、 光学尺寸和动态字体行为。不要在同一屏幕上混用三套图标库。
4. 排版体现层级。 使用平台的字体层级（iOS 上的大标题／标题／副标题／正文／脚注）。 每个屏幕只使用一种展示字号。对于计数、时间或价格，使用等宽数字 （fontVariant: ['tabular-nums']）。对于用户可能需要复制的数据，设置 Text selectable。
5. 连续圆角。 每个圆角矩形都设置 borderCurve: 'continuous'。圆角超椭圆是最简单、成本最低的 iOS 质感提升方式。
6. 通过 CSS boxShadow 实现阴影，不要使用旧版 shadow*／elevation 属性。 阴影用于表达层级，而非装饰——每个应用只采用一套层级系统。
7. 保持间距节奏。 选定一个基础单位（4 或 8），并始终遵循。优先使用 Flexbox 的 gap，避免层叠 margin。 ScrollView 的内边距应设置在 contentContainerStyle 中，绝不要设置在 ScrollView 本身。
8. 安全区域和灵动岛也是设计的一部分。 必须验证内容滚动到灵动岛／状态栏下方时屏幕的表现（模糊／渐隐效果是否正常？）、 主屏幕指示器是否遮挡底部 CTA，以及支持横屏时横屏下的表现。
9. 导航标题应由导航器管理。 尽可能使用堆栈导航器的原生标题 （以及 iOS 上大标题的折叠行为），而不是手动实现标题栏。
10. 触觉反馈是标点。 数值跨过一个步长时轻触一下，元素吸附归位时轻轻撞击，结果成功／失败时播放通知反馈——与视觉效果在同一帧触发，每次用户操作只触发一次，且绝不能作为唯一反馈。滚动时绝不触发，也绝不在循环中触发。
11. 像产品一样格式化数字，而不是像数据库一样：1.4M、38k、$4.99。删除末尾的零。日期要本地化。
12. 根级滚动行为：任何可能溢出的屏幕都应将内容包在 ScrollView 中（作为路由中的第一个组件），并设置 contentInsetAdjustmentBehavior="automatic"。使用 useWindowDimensions， 绝不使用 Dimensions.get()。

导航法则

导航是截图无法呈现的屏幕部分，而用户能在十秒内感受到它。每次转场都要回答三个问题：目的地在哪里，用户是否应该能够返回，以及之后按返回（箭头、iOS 边缘滑动、Android 硬件返回键）会发生什么。

1. Push 表示深入，replace 表示继续前进。 当用户会想返回这里时使用 router.push；当返回会落到世界已经向前发展的旧状态时，使用 router.replace / <Redirect>；要表达“结束此流程并前往 X”时，使用 router.dismissTo(href)。返回撤销的是导航，绝不是事件。
2. 呈现方式承载含义。 包含多个步骤的独立任务 → 使用 presentation: 'modal'，配备自己的导航栈和自己的取消／完成操作；短暂中断（选择器、筛选器、项目选项）→ 使用带有 detents、可拖动关闭的 formSheet；沉浸式内容 → 使用带有明确关闭按钮的 fullScreenModal；悬浮在仍可见屏幕上的内容（确认卡片、灯箱、引导标记）→ 使用 transparentModal 覆层；破坏性操作的确认 → 使用操作表；项目操作 → 使用原生上下文菜单；分享／网页／照片选择 → 使用系统控制器，绝不要重建为路由。会继续展开出第二步的弹出面板，本质上一直都是模态；如果某个链接能打开它，那它就是路由，而不是 useState 弹出面板。
3. 单向门要离开导航栈。 壁画应用中的登录、完成的引导（包括跳过）、购买、已完成的会话：使用 Stack.Protected 进行保护，并通过 replace 转到目标位置，这样返回就永远无法重新进入旧状态——从主页按 Android 返回键会退出应用，绝不会显示登录页；已付费的付费墙不会再次打开。但要保留用户的位置：如果某个操作（保存、关注、购买）要求登录，就应在屏幕上以模态方式显示，并在登录后于用户点击该操作的位置完成操作；从某项功能打开的付费墙，关闭后应返回该功能并处于解锁状态——绝不要从那里执行 replace('/(tabs)')。
4. 只有两种情况可以阻止返回——不可逆请求正在进行中（持续数秒，且显示进度），以及模态中的未保存工作（先询问），两者都通过模态根屏幕上的 usePreventRemove 实现。屏幕内的临时状态（选择模式、展开的搜索、打开的屏幕内弹出面板）应消耗第一次返回操作，之后返回才会离开。任何其他会拦截返回的内容——流程漏斗、评分提示——都是缺陷；其他任何地方都应支持边缘滑动。
5. 各个标签页是平级的。 标签页之间不使用滑动转场，每个标签页保留自己的导航栈；再次点击当前标签页会弹出到其根页面；需要用户全神贯注的屏幕（编辑器、播放器、结账）应放在标签页上方的根导航栈中。深层链接应落在带有真实底层导航栈的位置（initialRouteName / withAnchor）；冷启动时应根据状态确定落点，并在会话状态解析完成前保持启动画面——绝不能先闪现登录页再显示主页。
6. 学习交互语法，而不只是视觉效果。 在 Appllama 上走一遍成功的流程，留意每一步是什么——push、模态还是弹出面板——并保持一致。

反模板化规范

AI 构建的应用看起来千篇一律，用户几秒钟内就会把它归为“模板”。 以下每条都是默认禁用项——如果品牌明确要求使用某种设计，且你能说明它为何适合该产品，则始终可以破例。

1. 禁止采用 AI 默认样式。 紫色／靛蓝渐变 CTA 搭配光晕、每张卡片都用玻璃拟态、网格渐变主视觉、小事件也撒彩纸、标题里点缀闪光——这些是模型惯用的风格，不是设计。配色、材质和布局应来自你研究过的参考屏幕，而不是未经提示就会采用的默认倾向。
2. 锁定一种强调色。 选定一种强调色，并让它成为每个屏幕上的唯一强调色——不能一个屏幕用蓝色 CTA，下一个屏幕换成青绿色；也不能在第七个屏幕引入新色相。应用以中性色为主；强调色只用于关键位置（主要操作、激活状态、进度）。
3. 只用一种灰色系。 选暖灰或冷灰，同一个应用里绝不混用。
4. 锁定圆角规范。 确定一套圆角规格，并明确写成规则（“操作按钮用胶囊形，卡片 16，输入框 8”），绝不违反。圆角各不相同又没有明确规则，会显得像是东拼西凑。
5. 禁止用 Emoji 充当图标。 图标应使用 SF Symbols / Material Symbols（忠实度规范 3）。只有当产品风格确实以聊天为主或活泼俏皮时，才少量在内容中使用 Emoji；绝不能用于界面框架。
6. 每种意图只用一种标签。 “开始使用”“立即开始”和“开始”表达的是同一种意图——选定一种说法，并在所有出现的位置保持一致。
7. 强调方式应保持字体家族一致。 通过同一字体的字重或斜体来强调文字；为了增加视觉趣味，在无衬线标题里插入衬线字体文字（反之亦然）是业余做法。
8. 交付完整状态流转，而非仅有理想路径。 只实现静态成功状态是最常见的失败模式：骨架屏必须与最终布局的形状一致；空状态要经过设计，并说明如何填充；错误提示应内联且具体。
9. 上线前的反模板检查应按规则执行。 在任何流程进入模拟器测试前，统计以下项目：不同强调色相的数量（必须为 1）、不同圆角半径的数量（均须来自已声明的规格）、界面框架中的 Emoji 数量（必须为 0）、没有品牌依据的渐变数量（必须为 0）、同一意图的重复标签数量（必须为 0）。统计不合格就要修正，不能靠主观判断。

动效准则

动效是最能提升质感的环节，也最容易用过头。 按以下顺序判断：

• 先看频率门槛。 每天发生 100 次以上（切换标签、键盘操作、滚动、返回）→ 只用平台默认效果；每天发生几十次（按下、选择行）→ 几乎察觉不到，少于 150 ms；偶尔发生（底部弹层、模态框、提示消息）→ 使用标准动效；仅在罕见的首次体验时追求惊喜。标签页绝不滑动；屏幕转场保持原生效果。 不写一行代码就通过此门槛，也是成功——拿不准时，最好的做法就是删掉动画。
• 用一个词说清目的——反馈、空间连续性、状态变化、避免突兀切换、解释、惊喜——否则就别做。用户正在阅读的数据绝不为了美观而移动。
• 只要涉及手指操作，就用弹簧。 从实时值开始（抓取时捕获），将释放速度传给弹簧，根据预测的动量选择目标，让快速滑动能够完成切换；越过边界时使用橡皮筋效果；运动过程中仍可抓取。整个应用使用一套动效参数——用 { duration: 400, dampingRatio: 1 } 平稳停止，用 { 300, 0.8 } 处理底部弹层——只有手势带有动量时才加入回弹。
• 其他动效都要讲究时机，时长低于 300 ms，并使用强缓出效果 （Easing.bezier(0.23, 1, 0.32, 1)——内置曲线力度不足；进入时绝不使用缓入）。按压反馈应在按下时触发，时长为 100–150 ms：按钮和卡片缩放至 0.97；列表行使用背景高亮（绝不缩放）；栏按钮调整不透明度。退出速度要快于进入，并沿进入时的路径离开；进入时使用 scale(0.95) + 淡入，绝不用 scale(0)；菜单从触发位置展开（居中模态框除外）。
• 手势触发的动画绝不能切换到 JS 线程。 使用 Worklet + 共享值（.get()/.set()；仅在手势结束时使用 scheduleOnRN——Reanimated 4 的 runOnJS）；只使用 transform/opacity；循环利用的列表行不要使用 entering；绝不动画改变标题栏高度（在固定裁切区域内平移）；通过 react-native-keyboard-controller 实现跟随键盘的 UI——绝不用键盘监听器加猜测的时长。
• 遵循减少动态效果设置：空间动效缩减为交叉淡化；原生转场保持系统设置。
• 基准：核心流程保持 60 fps，并在你支持的最慢设备上的 release 构建中测量——Expo Go 和开发构建会掩盖你要排查的卡顿 （references/performance.md）。录屏看一遍整体手感，再逐帧看一遍，隔天再以全新视角看一遍。

状态架构

体验出色的屏幕，其状态处理往往平淡无奇：

• 服务端状态使用 TanStack Query（或项目的同类方案）：缓存、重试、乐观更新。绝不使用 useEffect+fetch。
• 客户端状态放在小型原子化存储中（Zustand/Jotai）。大范围的“应用状态”上下文会引发级联重渲染，让 UI 显得迟钝。
• 临时 UI 状态（打开/关闭、焦点、滚动）保留在组件本地。
• 默认采用乐观更新：点击后立即反映结果，在后台协调；失败时明确回滚。
• 高频输入场景使用非受控 TextInput；受控输入是导致输入卡顿的头号原因之一（前三名）。
• 出现延迟时，用 MMKV 而不是 AsyncStorage 持久化少量客户端状态。

感知性能

• 仅当你知道内容形状时才使用骨架屏；否则逐步呈现内容。局部更新时绝不显示全屏加载指示器。
• 所有列表都使用 FlashList；提供稳定的键。
• 在按下时预加载下一屏的数据，而不是等导航完成后再加载。
• 图片：选择尺寸合适的源图；列表中使用带 recyclingKey 的 expo-image；使用 thumbhash/blurhash 占位图。
• 冷启动 TTI 和包体管理见 references/performance.md——遵循“测量 → 优化 → 再测量”的循环，绝不盲目使用 memo。

图像与插画资源

当界面需要插画、空状态图、主视觉图片或符号集以外的图标时：

• 使用你能获得的最佳图像模型生成资源（例如图像生成工具，或已连接的 Higgsfield MCP/CLI），并采用最高质量设置，然后缩小为 @1x/@2x/@3x。切勿放大。
• 每个应用只采用一种视觉语言：选定一种风格（渐变网格、扁平双色调、3D 黏土、手绘、吉祥物风格），并以相同风格、相同配色、相同光照生成所有资源。混搭风格的资源集看起来就像粗制滥造的模板。
• 提示词应指定使用与界面颜色匹配的透明或纯色背景；合成瑕疵（白色光晕、错误颜色的底色）一律需要重做。
• 完整的资源流程与提示词模式： references/image-assets.md。

模拟器循环（不可妥协）

只有亲眼看到界面运行，界面才算真正完成。流程如下：

1. 实现 → 在 iOS 模拟器（或 Android 模拟器）中启动。
2. 截图并实际检查：对齐、视觉居中、间距节奏、长内容截断、深色模式、XL 动态字体。
3. 执行下方的全动态检查——截图能证明布局没问题，却无法证明动画没问题。
4. 修复、重新启动、再次验证。重复操作，直到找不到任何缺陷——然后再完整执行一次 references/simulator-loop.md 中的检查清单。

不要仅凭代码审查就宣布界面完成。不要停留在“看起来没问题”——要达到“在 100% 缩放下找不到任何瑕疵”。

全动态检查（每条流程都必须执行）

所有流程都将以模拟器中的动态画面评估，绝不以静态画面评估。录制整个流程的屏幕，从头到尾完整操作 （xcrun simctl io booted recordVideo flow.mov）：

• 每种界面切换、压入/弹出、标签切换
• 每种返回路径——箭头、边缘滑动、Android 硬件返回键——以及每道单向门（登录、完成引导、购买、结束会话）之后，都要尝试返回；此时必须无法回到旧状态
• 每个模态窗口和面板：显示、拖动、关闭——并在拖动中途取消
• 键盘的两种状态：显示（布局是否平滑移动，焦点输入框是否可见？）和收起（是否出现任何突兀跳变？）
• 每种用户交互：按压状态、手势完整执行、中断手势、快速点击、滚动到边界时的惯性滑动

将录制内容观看两遍：一遍全速观看，感受整体体验；一遍逐帧检查。重点查找：

• 丢帧或卡顿——每次切换过程中都要持续达到60 fps，必须实际测量，不能凭感觉判断
• 单帧闪烁：首次渲染时出现白色/未设样式的画面、切换过程中的错误主题画面、界面短暂使用错误颜色令牌而导致颜色闪现
• 布局跳动、重复渲染造成的闪现、弹簧动画裁切内容或过冲压到内容上，以及元素出现后重新排版

整段录制播放起来必须如同一个原生整体——从头到尾流畅，没有任何 UX 瑕疵。只要有一帧不流畅，流程就还没完成。

各屏幕的完成标准

• 研究了 10+ 个此类屏幕的真实参考案例（可用时通过 Appllama MCP 查找），并能说出采用的设计模式
• 已明确导航行为：此屏幕的呈现方式（推入 / 模态 / 底部弹层 / 覆盖层 / 替换）、在 iOS 和 Android 上从此屏幕返回时的行为，以及—— 对于单向门——返回操作无法重新进入旧状态
• 已在模拟器中验证浅色和深色模式
• 已验证安全区域 / 灵动岛 / 主屏幕指示器
• 已设计长内容、空内容、加载和错误状态，而非使用默认状态
• 动效：已录制完整流程的屏幕视频并逐帧检查——进入、按压、过渡、 模态、键盘——观感原生，没有卡顿或错误颜色帧；遵循减少动态效果设置； 在支持的最低配置设备上，以发布版本测得 60 fps
• 动态字体 XL 不会破坏布局；适用处的文本可选中
• 所有点击目标 ≥ 44pt；两种主题下的对比度均达标
• 资源：采用统一的风格系列，在 @3x 下清晰，没有合成光晕
• 列表界面已虚拟化；受控输入没有卡顿；没有反复重渲染（已进行性能分析，而非凭猜测）

参考资料

文件	何时加载
references/native-controls.md	选择 / 接入 iOS+Android 原生控件、菜单、选择器、底部弹层时
references/motion.md	进行任何 Reanimated 工作：手势、过渡、弹簧、布局动画时
references/performance.md	排查卡顿、TTI 过慢、包体过大、内存泄漏，或确定性能分析方法时
references/image-assets.md	使用图像模型生成插画 / 图标 / 主视觉素材时
references/simulator-loop.md	进行最终验证清单检查和设备矩阵测试时