App 首页设计提示词(Codex)
为老用户设计 App 首页:围绕你指定的最重要元素展开,下面依次排内容、主按钮、统计和底部标签栏。
提示词
为一位老用户设计首页,他已经连续打卡到第 [12] 天。最重要的元素是 [今天的每日目标完成进度],要让人第一眼就注意到它。它下面依次是:[正在读的书和阅读页数进度]、一个用来 [开始一次阅读] 的主按钮,以及 [本周统计]。底部加一个标签栏,包含 [今日、书库、统计、我的]。
- 适用于
- Codex, ChatGPT
- 所属合集
- 手机 App
这条提示词能做什么
Codex 会设计老用户每天打开看到的首页,示例里是连续阅读打卡的第 12 天。提示词点名了一个元素,也就是今天的目标完成进度,要求它最先被注意到,其余内容依次排在下面:正在读的书、主要操作按钮和本周统计,底部是四个标签的标签栏。
把每个方括号换成你 App 里对应的内容:让用户算作「老用户」的天数或状态、最重要的那一个元素、它下面的内容、主要操作,以及各个标签的名称。「只点名一个最重要的元素」这条一定要保留,没有它,首页很容易变成一堆分量相当的卡片。
主按钮要放在拇指够得到的屏幕下半部分,同时确认标签栏没有挤到它。后面的列表页、设置页和各种状态页都会沿用这个页面定下的样式,所以继续之前,值得在首页上多打磨一两轮。
同一合集里的其他提示词
- App 列表页和详情页设计提示词(Codex)设计带搜索框和筛选标签的列表页,以及点进去的详情页,分成两个文件,书名和数字都用真实可信的内容。
- App 设置页设计提示词(Codex)用标准分组列表设计 App 设置页:每行显示当前值,该用开关的地方用开关,删除账户这类危险操作放底部标红。
- App 空状态、加载和错误状态设计提示词(Codex)为同一个 App 页面设计空状态、加载和错误三种状态,各存一个文件,导航和页头与正常页面保持一致。
- App 深色模式设计提示词(Codex)为 App 页面做深色模式:用带色调的深色背景代替纯黑,降低点缀色饱和度,文字对比度达到 WCAG AA。
- Android Material 3 适配提示词(Codex)按 Material 3 规范把 iOS 页面适配到 Android:顶部应用栏、导航栏和悬浮按钮,保留品牌色和字体。
- App 设计稿转 SwiftUI 代码提示词(Codex)让 Codex 在 SwiftUI App 里实现定稿的 HTML 页面:布局和间距一致,颜色取自主题文件,支持 Dynamic Type。