AI AI 工具指南
AI 提示词库

App Onboarding 背景 Prompt:12 个能放在 UI 后面的

12 个 Onboarding 背景 Prompt——渐变、抽象母题、虚化摄影、动画静帧——读作氛围,不抢标题与 CTA 的戏。工具与长宽比说明更新至 2026 年 6 月。

发布于: 更新于: 作者: AI Productivity Guide Team 🌐 查看英文版本

Onboarding 背景只有一个任务:作为氛围出现,不作为内容出现。叠在它上面的 UI 才是真正的主角(标题、插画、CTA)——背景要托住它们,不抢戏。下面这些 Prompt 强制低对比、大留白、构图重心放在下三分之一,深浅色主题切换都站得住。完整生产流程见 AI App 背景图教程。

一句话总结

  • 把下面 12 个 Prompt 任选其一丢进你的图像工具,出图后用一条黑色色条压上你真实的标题,上线前先测可读性。
  • 热闹的区域留在下三分之一,上三分之二让给标题和插画。
  • 一个大多数教程会漏的坑:Midjourney v7 出不了 9:20——它的竖图上限是 1:2(截至 2026 年 6 月)。在 Midjourney 里出 9:16 再裁剪/扩展,或者直接用 Gemini 的 Nano Banana、GPT Image 2,它们能接受更高的竖比。
  • 相邻屏用相同 seed、只换配色,让整条流程像一组。

该用哪个工具

这里的 Prompt 与模型无关——它描述的是构图,不是具体引擎。但选哪个工具取决于背景要干什么。截至 2026 年 6 月:

工具做 onboarding 背景适合长宽比表现备注
Midjourney v7美学渐变、绘画感色块、bokeh竖图上限 1:2;--ar 9:20 会被拒用 --seed 让整条流程一致;Draft Mode 出图便宜约 10 倍,适合试
Google Nano Banana 2 / Pro品牌一致的成套、精确配色、图内文字支持 10 种长宽比、最高 4K;可直接出竖图Nano Banana 2 对所有 Gemini 用户免费;Pro(Gemini 3 Pro Image)出 4K、控制更细
GPT Image 2(在 ChatGPT 里)严格照指令执行、一次出浅 / 深双版3:1 到 1:3、原生 2KPlus / Pro / Team 可用;一个 Prompt 最多回 8 张连贯变体
Flux 1.1 Pro摄影感、毛玻璃、纹理写实标准竖比商用授权清晰;要真实照片质感而非插画时用它

经验法则:要精确十六进制配色、要成对的浅 / 深版,找 Nano Banana;要最好看的渐变,找 Midjourney;Prompt 里有刁钻的字面约束(“两版并排”),找 GPT Image 2。

这套 Prompt 适合用在哪

  • Onboarding 流程——文字要全程清晰可读
  • Splash 屏淡入到首页
  • 空状态——要有温度但不分散注意力
  • 动画 onboarding 背景(导出 1080×2400 静帧)
  • 系统主题切换用的浅 / 深双版

1. 柔和渐变

minimal app background, smooth gradient pale blue to lavender, very low contrast, subtle abstract shapes in lower third, large empty space for UI in upper two thirds, 9:20 mobile aspect

2. 柔几何

minimal app background, two soft overlapping geometric shapes in lower-right corner, pastel palette, large negative space for UI overlay, blurred edges, 9:20 mobile aspect

3. 有机色块

minimal app background, single soft organic blob shape in lower-left corner, soft pastel peach to cream, lots of negative space for UI, 9:20 mobile aspect

4. 极光色带

色带横在下半,无细节。

minimal app background, diffuse aurora-like color band stretching across the lower half, gradient teal to soft magenta, heavy blur, no objects, upper two-thirds clean for UI, 9:20 mobile aspect

5. 浅 / 深双色版

同一构图、两套配色、一次出。“两版并排”这个指令 GPT Image 2 照得最稳。

minimal app background, smooth dual-tone gradient with one soft circle in lower-right. Generate TWO versions side by side: (a) light mode — pale cream to dusty pink palette, (b) dark mode — deep navy to muted purple palette. Same composition, same crop, 9:20 mobile aspect each.

6. 失焦虚化

摄影感、光斑、整张虚化。最逼真的摄影 bokeh 用 Flux 1.1 Pro。

minimal app background, fully out-of-focus bokeh photograph, soft circular highlights in warm amber, deep negative space, no recognizable objects, vertical 9:20 phone aspect

7. 纸纹极简

有质感不繁——只有再生纸的颗粒。

minimal app background, recycled-paper texture, soft warm beige, no graphic elements, very subtle horizontal fold mark across lower third, large empty space for UI, 9:20 mobile aspect

8. 抽象波线

手绘感曲线,只出现在画面下三分之一。

minimal app background, single thin hand-drawn curving line sweeping across the lower third, soft sage-green palette, off-white field, lots of negative space above the curve for UI, 9:20 mobile aspect

9. 毛玻璃层

底层一个淡渐变,上面毛玻璃化。

minimal app background, frosted-glass blur over a faint pastel gradient, very low contrast, no objects, light bottom-edge gradient suggesting depth, 9:20 mobile aspect

10. 网格渐变

现代多色 mesh,柔和、不带方向。

minimal app background, soft multi-color mesh gradient blending blush, periwinkle, and pale sage, no objects, heavy blur, even brightness across the frame for UI legibility, 9:20 mobile aspect

11. 动画 onboarding 静帧

为 4 秒循环动画设计的静态背景。出静帧后,在 After Effects、Rive 或 Lottie 里做漂移动效。

minimal app background still frame designed to loop in a 4-second motion video, slowly drifting soft particles in the lower third only, deep navy field, large empty negative space in the upper two thirds, 9:20 mobile aspect

12. 同一观感的平板版

同样的观感、不同比例——配色和构图角必须一致。

minimal app background, same calm gradient and lower-corner blob composition as a phone onboarding background, re-rendered for tablet at 3:4 aspect, keep palette and corner composition identical, scale negative space to fit

怎么微调

上面的 Prompt 全写 9:20,因为这是现代手机的真实设备目标(19.5:9 的屏去掉圆角差不多就是 9:20)。但”提需求”和”出图”是两步:

  • Midjourney v7 竖图封顶 1:2,所以 --ar 9:20 会报错(截至 2026 年 6 月)。先出 --ar 9:16,再裁掉顶部或用 Midjourney 的扩展 / zoom-out 补到 9:20。
  • Nano Banana 和 GPT Image 2 能直接接受更高的竖比,所以可以在工具里直接要 9:16 或接近 9:20,省掉裁剪。
  • 老机型用 9:16;平板用 3:4(Prompt 12)。

出图后,把你真实的标题文字铺在黑色色条上压到背景上,上线前先测可读性——读不清就是模型出得太满了。最热闹的区域留在下三分之一,上三分之二让给标题和插画。多屏流程用相同 seed 重生成(Midjourney 用 --seed、Nano Banana 说”保持同一构图”),只换配色,让相邻屏感觉是一组的。

给一个具体的可读性目标:WCAG AA 要求正文文字对比度 4.5:1、大号标题 3:1。如果标题直接压在背景上(没有蒙层),就把标题区那一块背景的明度收在一个很窄的范围,深浅两版才都达标。

容易踩的坑

  • 太满——纹理或图案抢 UI 文字,标题读不清
  • 标题区下面对比太高;永远把上三分之一留给 UI
  • 配色和品牌反着走而不是托着走
  • 一个比例打天下;手机、平板、深色态要一起出
  • 在 Midjourney 里要 9:20 结果拿到报错而不是图——先出 9:16 再裁
  • 漏掉”标题可读性”那一步检查——单看好看,叠字就糊

常见问题

既然 Midjourney 出不了 9:20,Prompt 为什么还写 9:20? 9:20 是现代 19.5:9 手机的真实设备目标,所以应该写进需求里。Midjourney v7 竖图封顶 1:2,在那里出 9:16 再裁。Nano Banana 和 GPT Image 2 在工具里就能接受更高竖比,所以可以直接要 9:16–9:20。

哪个工具出的浅 / 深双版最干净? “两版并排、同一构图”这种字面指令 GPT Image 2 照得最稳;要在两个模式间换出完全相同的十六进制配色,Nano Banana 最好。Prompt 5 两者都能用。

一定要付费套餐吗? 截至 2026 年 6 月,Nano Banana 2 对所有 Gemini 用户免费。ChatGPT 里的 GPT Image 2 需要 Plus、Pro 或 Team。Midjourney 只有订阅制,但它的 Draft Mode 单张迭代成本便宜约 10 倍。

怎么让五个 onboarding 屏看起来像一组? 锁定 seed 和构图,每屏只改配色或强调色的位置。Midjourney 传相同 --seed;Nano Banana 先出第一帧,再让它”保持同一构图和光照,把配色换成……”。

这些能做成 onboarding 循环动画吗? 能——Prompt 11 就是干这个的。出静帧后,用 Rive 或 Lottie(轻量、能打进 App 包里)做缓慢漂移,或用 After Effects 做预渲染循环。动效控制在 4 秒以内,只落在下三分之一。

相关阅读

标签: #App 背景

相关文章