用途
Seenry Apps 是一套移动应用设计技能,目标是在现有技术栈(SwiftUI、UIKit、React Native、Expo、Flutter、移动 Web 原型)中构建“看起来像原生”的界面和完整流程。核心判断是:移动端质量主要来自平台保真度,以及类似 Web 设计系统的纪律——严格网格、分层组件、少量字号、单一强调色,并且每个状态都被设计过。
工作流程
(1)命名任务:在 research/brief.md 中写明产品基于哪个流程、外观参照哪个应用、标志性屏幕承担什么职责。“Based on X, designed like Y” 表示 X 提供流程、Y 提供外观;只提一个应用则两者都取自它;都不提则需刻意选择外观。
(2)研究真实应用与完整旅程:通过 Seenry MCP 按名称检索应用(search_app_flows),按顺序走完整流程(get_app_flow,翻页到底)。待建流程至少研究 3 个完整流程;外观参照应用至少 8 个屏幕、覆盖 2–3 个流程;其他屏幕类型各 10+ 屏;并做一次 borrow_references 用于“边缘”创意。新屏幕不再改变规格时停止。应用截图带有小水印,可忽略。
(3)先写规格再写代码:research/flows.md 记录每个流程主干(每步:询问什么、给出什么、如何呈现);.seenry/look.md 保存参照应用的配色、字体、数字样式和具名标志性组件;research/patterns.md 区分基础项、边缘和开场;research/decisions.md 列出每个决策及其来源屏幕 id,并附导航图。每个引导页都要带一个外观参照的标志性组件,内容用本产品自己的。
(4)提取签名而非默认值:参照应用的平台默认样式(系统蓝、白色分组表单、SF Pro、灰色行)不是它的“外观”;其外观是标志性组件及其背后的态度。产品要在其上建立自己的身份:来自自身想法的强调色(非 iOS 蓝或靛蓝,除非品牌拥有)、令人记住的展示字或数字处理,以及贴合主题的色彩世界。若换掉 logo 后屏幕与任何应用无异,则属“slop”。
(5)映射流程与“单向门”:用 flows 标明每个屏幕是 push、modal、sheet 还是 replace,返回行为如何,以及单向门(完成引导、登录、购买)返回时不得重新进入。
(6)探索标志性屏幕后盲选:以独立文件构建该屏幕的三个方向(通常为回报页,欢迎页同方向):一个常规控件、两个各打破一种俗套、一个基于借用边缘。它们必须在“视线首先落在何处”上有别,而不只是布局不同。运行 node ../seenry/scripts/pick.mjs a.html b.html c.html --brief <brief> --refs <look app screens>,以胜出方向构建整条流程。
(7)按四层构建组件:网格 → 安全空间 → 结构 → 文字与状态。用真实数据构建连通状态:加载、空、错误、权限拒绝、离线、成功以及键盘弹出布局。Web 原型以 <!doctype html>、<meta charset="utf-8"> 和 viewport meta 开头。
(8)预检计数:node scripts/app_preflight.mjs <source> 统计强调色相族、灰色族、圆角尺度、UI 中的 emoji、渐变、字体族、各意图标签数、编码和文档头。计数失败视为必须修复;有意的例外(如参照应用的特定状态色)需写入 decisions.md。
(9)模拟器走查并录制:在 iOS 模拟器或 Android 模拟器上端到端运行流程(含 Web 原型):启动服务,列出可用设备(xcrun simctl list devices available),启动(xcrun simctl boot <udid>),每次模拟器只跑一次;用 xcrun simctl openurl booted http://127.0.0.1:<port>/ 打开,逐步截图(xcrun simctl io booted screenshot NN-step.png)。桌面浏览器 390px 无法呈现 Safari 工具栏、安全区、键盘与真实字体渲染。需演练每一步、每种返回路径、单向门之后的返回、拖动中途取消的 sheet、键盘进出、全部跳过一次。录制视频(xcrun simctl io booted recordVideo rec.mov;Android adb shell screenrecord /sdcard/rec.mp4)并观看两遍(正常速度与逐帧),检查错误主题闪烁、布局跳动和掉帧。
(10)逐屏对比参照并过闸:把自己的屏与所研究的最佳同类屏并排比较,较差者回到循环。运行 node ../seenry/scripts/check.mjs --screens <screens in flow order> --video rec.mov --brief <brief> 并按其修复至 PASS 或 STOP。默认 --mode quick(一轮评审、修复一次);要求生产级时用 --mode polish;仅展示用途才用 --mode showcase。交付中报告分数与等级。若无 Seenry MCP,先运行 node ../seenry/scripts/research.mjs --type app。需按 seenry 写入 .seenry/idea.md、.seenry/motion.md 和 DESIGN.md,闸门会检查。
(11)交付 Seenry 表:各状态截图、所研究应用与流程及其 id、决策与来源、标志性屏幕结构解析和指南。使用 sheet.py;anatomy.mjs(仅 Web)不适用时手动标注模拟器截图。
平台度量底线
文档给出 iOS 与 Android (Material 3) 的平台底线:4pt/4dp 基准、布局 8 倍数;屏幕边距 16(大屏 20 / 24);最小触控目标 44×44pt / 48×48dp;导航栏、标签栏、列表行、按钮、sheet、字体等级(SF Pro、Roboto/Flex)等具体数值。要求使用 Dynamic Type 文字样式与 sp 字体缩放,而非固定字号;优先使用项目 token 或研究得到的语义角色(label、secondaryLabel、systemBackground),以支持深色模式和增强对比度。这些度量是底线而非风格。
屏幕规则
每屏一个主操作,放在拇指可达处(底部固定全宽按钮,或导航栏尾部“保存/完成”);每组件 ≤3 种文字样式;嵌套形状用同心圆角;iOS 用连续曲率(squircle);内容优先,大标题滚动时收起;优先原生控件;避开刘海、灵动岛、Home 指示器和键盘;引导页每屏一个概念、有进度与跳过,首屏展示产品标志性视图,权限在产生价值时用预提示;付费墙展示真实功能、推荐方案预选、CTA 下方用平实文字写价格周期与试用条款;设置页用分组内嵌列表;空与错误状态配有解决动作。
对齐与动效
对齐沿用 Web 端的 keyline、墨级与光学规则:SF Symbols 按字形对齐、图标+文字行用 firstTextBaseline、在 3x 截图中检查圆形按钮内播放/箭头字形居中。动效按出现频率分级:标签、滚动、返回与键盘用平台原生动效;按下 <150ms;仅在罕见时刻(如引导回报)做设计化动效。导航动效来自平台(push、sheet、zoom)。自定义动效使用弹簧(response 0.35–0.5,dampingFraction 0.8–0.9),可中断,150–300ms,提交时触感反馈(selection、success、warning),并尊重 Reduce Motion。文档给出 SwiftUI、Jetpack Compose、React Native 在“触发器变为表面”“sheet/dialog”“数字变化”“标签/分段控件”“列表增删移”“按钮加载成功错误”“Toast/横幅”等情形下的具体实现对照表。退出快于进入,列表中只动 transform 与 opacity,每个自定义动画都要有 Reduce Motion 路径。
适用场景
需要构建或重构移动应用界面与流程、追求原生平台质感、需要引导页/付费墙/设置页等标准模式,或需要对移动端设计做逐屏对比与质量闸门评审的项目。
限制
部分流程依赖 Seenry MCP(应用检索、流程获取、参考借用)及配套脚本(pick.mjs、app_preflight.mjs、check.mjs、research.mjs、sheet.py、anatomy.mjs),文档未说明这些工具的安装方式、适用范围或收费;平台度量仅覆盖 iOS 与 Android (Material 3)。具体产品定价、支持平台、效果评估等资料暂未提供。