xpcool/gratitude.durian.xpcool.com

Fork 0

夏犀麟 b98b3be55a 项目初始化。

2026-08-14 18:01:45 +08:00

20 KiB

Raw Permalink Blame History

《报恩榴莲》UI界面设计描述与AI绘图提示词

风格定位：清新水果主题 · 暖色调 · 竖屏适配 · 轻松欢乐屏幕比例：9:16（微信小游戏竖屏，建议分辨率 720x1280）

一、整体视觉风格规范

1.1 色彩体系

用途	主色	辅助色	强调色
背景	`#FFF8E7` 奶油白	`#FFE4B5` 浅橙	-
按钮	`#FF6B6B` 珊瑚红	`#FFA07A` 浅鲑鱼	`#FF4757` 深红(hover)
文字	`#2D3436` 深灰	`#636E72` 中灰	`#FFFFFF` 白(反白)
进度条	`#00B894` 薄荷绿	`#55EFC4` 浅绿	`#FDCB6E` 金黄(满)
边框/分割线	`#DFE6E9` 浅灰	-	-
金色传说	`#FFD700` 纯金	`#FFA500` 橙金	`#FFFACD` 柠檬金(高光)

1.2 字体规范

标题字体：圆润无衬线体（如「圆体」「幼圆」），加粗
正文字体：清晰易读的无衬线体（如「思源黑体」「苹方」）
数字字体：等宽或半等宽，确保分数对齐
字号参考（720x1280基准）：
- 大标题：48-56px
- 副标题：32-36px
- 正文：24-28px
- 小字/说明：18-20px
- 按钮文字：28-32px

1.3 圆角规范

按钮圆角：16px（大按钮）/ 12px（小按钮）
卡片/面板圆角：20px
图标容器圆角：50%（圆形）

1.4 阴影规范

轻阴影（卡片）：0 2px 8px rgba(0,0,0,0.08)
中阴影（按钮）：0 4px 12px rgba(255,107,107,0.3)
重阴影（弹窗）：0 8px 24px rgba(0,0,0,0.15)

二、主界面设计

2.1 布局结构

┌──────────────────────────────┐
│  [⚙设置]     报恩榴莲    [📖图鉴] │  ← 顶部栏 (高度80px)
├──────────────────────────────┤
│                              │
│      ╭────────────────╮     │
│      │                │     │
│      │   Boss群像展示  │     │  ← 中央区域 (400x400px)
│      │   (动态呼吸动画) │     │     当前关卡Boss大图
│      │                │     │
│      ╰────────────────╯     │
│                              │
│       第 X 关               │  ← 关卡提示 (居中，32px)
│                              │
│    ┌────────────────────┐   │
│    │   ▶ 开始游戏       │   │  ← 主按钮 (宽280px, 高80px)
│    └────────────────────┘   │     珊瑚红渐变背景
│                              │
│  [🍋道具1] [🍎道具2] [💣道具3] │  ← 快捷道具栏 (底部)
│                              │
│  关卡: 1/20    💰金币: 1280  │  ← 状态栏 (底部固定)
└──────────────────────────────┘

2.2 元素详细说明

顶部栏

背景：半透明白色 rgba(255,255,255,0.9)，底部1px浅灰分割线
左侧设置按钮：齿轮图标 ⚙，圆形，直径48px，点击弹出设置面板
中间标题：「报恩榴莲」四个字，使用手写风格字体，金黄色 #FFD700，带轻微外发光
右侧图鉴按钮：书本图标 📖，圆形，直径48px

Boss群像展示区

容器：圆角矩形，20px圆角，白色背景，轻阴影
Boss形象：Q版卡通动物，占据80%区域，带轻微上下浮动动画（呼吸感）
装饰：周围点缀小水果图案（西瓜片、葡萄等），缓慢旋转
背景：淡橙色径向渐变，从中心向外淡化

主按钮「开始游戏」

形状：圆角矩形，16px圆角
背景：线性渐变 linear-gradient(135deg, #FF6B6B 0%, #FFA07A 100%)
文字：白色，32px，加粗，「▶」三角符号 + 「开始第X关」
阴影：0 4px 12px rgba(255,107,107,0.3)
交互：
- Hover：背景变深 #FF4757，阴影加深
- Click：缩小至95%后弹回（缩放动画）

快捷道具栏

布局：三个圆形按钮横向排列，间距16px
按钮样式：直径56px圆形，白色背景，浅灰边框，内部放置道具图标
图标：
- 道具1：🍋 黄色柠檬（缩小灯）
- 道具2：🍎 红色苹果（万能果）
- 道具3：💣 炸弹图标（清除道具）
数量角标：右上角小红圈显示剩余数量

底部状态栏

背景：半透明白色 rgba(255,255,255,0.8)
文字：深灰色 #2D3436，20px
金币图标：💰 金色硬币emoji或自定义金币图标

2.3 AI绘图提示词（主界面背景）

Mobile game main menu background, vertical 9:16 ratio, 
fresh fruit theme, warm color palette, cream white background (#FFF8E7), 
soft pastel orange accents, minimalist design, 
scattered small fruit illustrations (watermelon slices, grapes, lemons) 
floating around edges, clean and uncluttered center area for UI elements, 
cheerful and inviting atmosphere, high quality, flat design style, 
suitable for casual puzzle game, no text, no UI buttons

2.4 AI绘图提示词（Boss形象示例 - 小馋猫）

Cute cartoon orange cat character, Q-style chibi design, 
big round eyes with sparkles, open mouth showing excitement, 
wearing a small white bib napkin, sitting pose, 
simple clean lines, soft shading, warm orange fur color, 
friendly and hungry expression, isolated on transparent background, 
mobile game asset style, high resolution, suitable for 200x200px display

三、游戏界面设计

3.1 布局结构

┌──────────────────────────────┐
│  [⏸暂停]  Boss头像  Boss名称   │  ← 顶部信息栏 (高度100px)
│  ┌────────────────────────┐  │
│  │████████████░░░░ 65%    │  │  ← 饱食度进度条
│  └────────────────────────┘  │
│  Boss对话气泡："还想吃苹果！"  │  ← 对话区
├──────────────────────────────┤
│                              │
│  ┌────────────────────────┐ │
│  │                        │ │
│  │    游 戏 区 域         │ │  ← 物理容器 (核心区域)
│  │    （水果堆叠区）       │ │     宽度随关卡变化
│  │                        │ │
│  │  - - - 警戒线 - - - -  │ │  ← 红色虚线警告线
│  │                        │ │
│  └────────────────────────┘ │
│                              │
│  [道具栏]   下一个: [🍋Lv2]  │  ← 底部操作栏 (高度120px)
└──────────────────────────────┘

3.2 元素详细说明

顶部信息栏

暂停按钮：左上角，双竖线图标 ⏸，圆形，直径44px，半透明白色背景
Boss头像：圆形头像框，直径56px，带金色边框（2px），内部为当前Boss Q版头像
Boss名称：头像右侧，深灰色文字，24px，加粗
饱食度进度条：
- 容器：圆角矩形，12px圆角，高度24px，浅灰背景 #DFE6E9
- 填充：薄荷绿 #00B894 渐变到浅绿 #55EFC4，圆角跟随容器
- 百分比文字：进度条右侧，20px，深灰色
- 动画：填充时有弹性缓动效果（backOut）
对话气泡：
- 形状：圆角矩形对话框，16px圆角，白色背景，浅灰边框
- 尾巴：指向Boss头像的小三角
- 文字：20px，深灰色，自动换行
- 出现动画：从Boss位置弹跳出现，2秒后淡出

游戏区域容器

背景：浅米色 #FAF9F6，带细微网格纹理（可选）
边界：左右两侧和底部有2px浅灰实线边框
警戒线：
- 位置：距顶部约80px处
- 样式：红色虚线 #FF6B6B，2px宽，虚线段8px+间隔4px
- 标签：左侧小字「警戒线」，红色，14px

底部操作栏

背景：半透明白色 rgba(255,255,255,0.9)，顶部1px浅灰分割线
道具栏：左侧，三个小圆形按钮（直径44px），样式同主界面但更小
下一个水果预览：
- 标签文字：「下一个：」，18px，中灰色
- 预览水果：圆形容器，直径48px，白色背景，浅灰边框，内部显示水果图标
- 等级标注：水果右下角小角标，如「Lv2」，12px，白色文字，深色半透明背景

3.3 AI绘图提示词（游戏界面背景）

Casual mobile game play screen background, vertical layout, 
light beige game container area (#FAF9F6) with subtle grid texture, 
clean white top info bar and bottom control bar, 
red dashed warning line near top of game area, 
minimalist design, fresh fruit theme accents, 
warm and inviting color scheme, no UI elements drawn, 
just the background template, high quality, flat design

3.4 AI绘图提示词（Boss头像框）

Circular avatar frame for game boss character, gold colored border (#FFD700), 
2px width, inner diameter 56px, white background inside, 
subtle shadow effect, clean and elegant design, 
suitable for Q-style cartoon animal portraits, 
isolated on transparent background, mobile game UI asset

四、结算界面设计（弹窗）

4.1 布局结构

        ┌─────────────────────────┐
        │     ✨ 通关成功！ ✨     │  ← 标题 (金色大字)
        │                         │
        │   [Boss满足表情大图]    │  ← Boss庆祝图 (160x160px)
        │      ⭐⭐⭐            │  ← 星级评价
        │                         │
        │   得分：12,580          │  ← 数据统计
        │   最高连击：5连         │
        │   用时：1分32秒         │
        │                         │
        │  ┌──────────────────┐  │
        │  │ 📺 看视频双倍得分 │  │  ← 激励视频按钮
        │  └──────────────────┘  │
        │                         │
        │  [下一关 ▶]  [返回主页]  │  ← 操作按钮
        └─────────────────────────┘

4.2 元素详细说明

弹窗容器

形状：圆角矩形，24px圆角
背景：纯白色 #FFFFFF
阴影：0 8px 24px rgba(0,0,0,0.15)
尺寸：宽560px，自适应高度（约600-700px）
出现动画：从中心缩放弹出（scale 0→1，elastic easing）

标题「通关成功！」

文字：金黄色 #FFD700，40px，加粗
装饰：两侧各一个星星✨ emoji 或图标
位置：顶部居中，距上边距24px

Boss庆祝图

尺寸：160x160px圆形
内容：Boss做出满足表情（星星眼、双手捂嘴、跳起等）
装饰：周围环绕小星星/爱心粒子特效
动画：轻微上下浮动

星级评价

样式：三颗星星 ⭐，金色填充（根据表现决定点亮几颗）
尺寸：每颗星32px
位置：Boss图下方，居中

数据统计

布局：左对齐，三行
文字：深灰色 #2D3436，22px
数值：加粗，金黄色 #FFD700
间距：每行间隔8px

「看视频双倍得分」按钮

形状：圆角矩形，12px圆角
背景：线性渐变 linear-gradient(135deg, #FFD700 0%, #FFA500 100%)
图标：左侧电视/播放图标 📺，白色
文字：白色，24px，加粗
尺寸：宽480px，高56px
阴影：0 4px 12px rgba(255,215,0,0.3)

底部操作按钮

「下一关」按钮：
- 背景：珊瑚红 #FF6B6B，圆角12px
- 文字：白色，24px，「▶ 下一关」
- 尺寸：宽200px，高48px
「返回主页」按钮：
- 背景：浅灰 #DFE6E9，圆角12px
- 文字：深灰 #636E72，22px
- 尺寸：宽160px，高48px
布局：两个按钮横向排列，间距16px，居中

4.3 AI绘图提示词（结算弹窗背景）

Game result popup panel background, rounded rectangle with 24px corners, 
pure white background (#FFFFFF), soft drop shadow, 
clean and spacious layout with ample padding, 
space for boss celebration image at top, 
stats section in middle, action buttons at bottom, 
minimalist mobile game UI design, no actual content drawn, 
just the panel template, high quality, flat design style

4.4 AI绘图提示词（Boss庆祝表情 - 通用）

Happy cartoon animal boss celebrating victory, Q-style chibi design, 
star-shaped sparkling eyes, big satisfied smile, hands covering mouth 
in surprise and joy, jumping pose with motion lines, 
surrounded by small golden stars and heart particles, 
warm cheerful atmosphere, isolated on transparent background, 
mobile game asset, 160x160px, high resolution

五、道具按钮设计

5.1 四种道具图标描述

后悔药（撤回操作）

图标：逆时针旋转的箭头 ↩️，包裹在药丸形状内
颜色：蓝色系 #74B9FF
含义：时间倒流/撤销

缩小灯（临时缩小水果）

图标：魔法棒/手电筒，发出缩小光束
颜色：紫色系 #A29BFE
含义：缩小/压缩

万能果（任意合成）

图标：彩虹色水果，带问号或星号标记
颜色：彩虹渐变
含义：万能/百搭

炸弹（清除最低等级水果）

图标：经典黑色圆形炸弹，带引信
颜色：黑色 #2D3436 + 红色引信 #FF6B6B
含义：消除/爆破

5.2 AI绘图提示词（道具图标集合）

Set of 4 circular game item icons, 64px each, flat design style:

1. Undo potion: blue pill-shaped container with counterclockwise arrow icon, 
   light blue color (#74B9FF), white arrow

2. Shrink ray: purple magic wand emitting shrinking beam, 
   lavender color (#A29BFE), simple geometric design

3. Wild fruit: rainbow-colored round fruit with question mark overlay, 
   multicolor gradient, playful style

4. Bomb: classic black round bomb with red fuse, 
   dark gray (#2D3436) body, red (#FF6B6B) fuse, cartoon style

All icons on transparent backgrounds, consistent visual style, 
suitable for mobile game UI, high contrast, easily recognizable

六、图鉴界面设计

6.1 布局结构

┌──────────────────────────────┐
│  ← 返回       水果图鉴        │  ← 顶部导航栏
├──────────────────────────────┤
│                              │
│  ┌──────┐ ┌──────┐ ┌──────┐ │
│  │果切丁│ │西瓜片│ │紫葡萄│ │  ← 3列网格
│  │ Lv1 │ │ Lv2 │ │ Lv3 │ │
│  └──────┘ └──────┘ └──────┘ │
│  ┌──────┐ ┌──────┐ ┌──────┐ │
│  │黄柠檬│ │红苹果│ │甜橙  │ │
│  │ Lv4 │ │ Lv5 │ │ Lv6 │ │
│  └──────┘ └──────┘ └──────┘ │
│  ┌──────┐ ┌──────┐ ┌──────┐ │
│  │粉桃子│ │金菠萝│ │🔒??? │ │  ← 未解锁显示锁
│  │ Lv7 │ │ Lv8 │ │ Lv9 │ │
│  └──────┘ └──────┘ └──────┘ │
│                              │
│  已解锁：7/9                 │  ← 底部统计
└──────────────────────────────┘

6.2 元素详细说明

水果卡片

形状：圆角正方形，16px圆角
尺寸：160x160px（含间距）
背景：白色，轻阴影
已解锁状态：
- 水果大图：居中，约占70%面积
- 名称：下方，20px，深灰色
- 等级标签：右下角小徽章，如「Lv1」，14px，白色文字，彩色背景
未解锁状态：
- 剪影：灰色水果轮廓，50%透明度
- 锁图标：居中叠加，金色 🔒
- 名称和等级：浅灰色，表示不可见详情

点击详情弹窗

显示水果完整信息：名称、等级、合成得分、趣味描述
例如：「报恩榴莲 - Lv9 - 传说中的感恩之果，合成时散发金色光芒」

6.3 AI绘图提示词（水果图鉴卡片背景）

Fruit collection card template, square 160x160px, 
rounded corners 16px, white background with soft shadow, 
center area reserved for fruit illustration, 
bottom area for text label and level badge, 
clean minimalist design, suitable for grid layout, 
no actual fruit drawn, just the card frame template, 
mobile game UI asset

6.4 AI绘图提示词（未解锁剪影示例）

Silhouette of a durian fruit, gray color (#B2BEC3), 
50% opacity, simple outline showing spiky exterior shape, 
centered in square frame, with golden lock icon overlay, 
mysterious and locked appearance, mobile game collectible item, 
transparent background

七、金色传说特效UI层

7.1 全屏暗化遮罩

颜色：纯黑 #000000
透明度：80% (rgba(0,0,0,0.8))
出现方式：0.3秒内从四周向中心渐变覆盖
z-index：最高层，覆盖所有UI

7.2 金色光柱

形状：垂直长方形，宽60px，高贯穿屏幕
颜色：金色渐变 linear-gradient(to top, #FFD700 0%, #FFA500 50%, #FFD700 100%)
发光效果：外层模糊光晕，半径20px，金色半透明
动画：从底部向上延伸，0.5秒完成

7.3 金色粒子

形态：小圆点或小星星
颜色：金黄色 #FFD700
运动：从中心螺旋上升，逐渐扩散
数量：30-50个
生命周期：1.5秒

7.4 AI绘图提示词（金色光柱素材）

Vertical golden light beam, rectangular shape 60px wide, 
full screen height, gradient from bright gold (#FFD700) at edges 
to orange-gold (#FFA500) at center, 
outer glow effect with 20px blur radius, 
ethereal and majestic appearance, 
transparent background except the beam itself, 
suitable for overlay in mobile game special effect, 
high contrast, dramatic lighting

八、设计规范总结

8.1 一致性原则

圆角统一：所有可点击元素使用12-16px圆角，卡片使用20-24px
阴影层级：轻阴影用于卡片，中阴影用于按钮，重阴影用于弹窗
色彩呼应：金黄色 #FFD700 仅用于「报恩榴莲」相关和高亮强调
动画时长：常规交互动画0.15-0.3秒，特效动画0.5-2秒

8.2 无障碍考虑

文字与背景对比度至少 4.5:1
按钮最小点击区域 44x44px
重要信息不只依赖颜色区分（如进度条同时显示百分比文字）

8.3 性能优化

所有图片使用 PNG8 或 WebP 格式
单张UI切片不超过 200KB
粒子特效使用 GPU 加速（Cocos Creator ParticleSystem2D）
避免过多实时阴影，优先使用预渲染阴影贴图

九、AI绘图工具推荐

工具	特点	网址
Midjourney	高质量插画生成，适合角色和场景	https://midjourney.com
DALL-E 3	理解复杂提示词好，适合UI元素	https://openai.com/dall-e-3
Stable Diffusion	开源可控，适合批量生成	https://stability.ai
Leonardo.AI	游戏资产专用模型多	https://leonardo.ai
Uizard	AI生成UI界面原型	https://uizard.io

使用建议：先生成基础素材（水果、Boss形象），再用 Figma/Sketch 组装成完整UI界面。

20 KiB Raw Permalink Blame History Unescape Escape

《报恩榴莲》UI界面设计描述与AI绘图提示词

一、整体视觉风格规范

1.1 色彩体系

1.2 字体规范

1.3 圆角规范

1.4 阴影规范

二、主界面设计

2.1 布局结构

2.2 元素详细说明

顶部栏

Boss群像展示区

主按钮「开始游戏」

快捷道具栏

底部状态栏

2.3 AI绘图提示词（主界面背景）

2.4 AI绘图提示词（Boss形象示例 - 小馋猫）

三、游戏界面设计

3.1 布局结构

3.2 元素详细说明

顶部信息栏

游戏区域容器

底部操作栏

3.3 AI绘图提示词（游戏界面背景）

3.4 AI绘图提示词（Boss头像框）

四、结算界面设计（弹窗）

4.1 布局结构

4.2 元素详细说明

弹窗容器

标题「通关成功！」

Boss庆祝图

星级评价

数据统计

「看视频双倍得分」按钮

底部操作按钮

4.3 AI绘图提示词（结算弹窗背景）

4.4 AI绘图提示词（Boss庆祝表情 - 通用）

五、道具按钮设计

5.1 四种道具图标描述

后悔药（撤回操作）

缩小灯（临时缩小水果）

万能果（任意合成）

炸弹（清除最低等级水果）

5.2 AI绘图提示词（道具图标集合）

六、图鉴界面设计

6.1 布局结构

6.2 元素详细说明

水果卡片

点击详情弹窗

6.3 AI绘图提示词（水果图鉴卡片背景）

6.4 AI绘图提示词（未解锁剪影示例）

七、金色传说特效UI层

7.1 全屏暗化遮罩

7.2 金色光柱

7.3 金色粒子

7.4 AI绘图提示词（金色光柱素材）

八、设计规范总结

8.1 一致性原则

8.2 无障碍考虑

8.3 性能优化

九、AI绘图工具推荐

20 KiB

Raw Permalink Blame History