Nano Banana 游戏设计实战:10组 "UI 图标与成就徽章" 量产通用模板 (Iconography & UI Assets)
Nano Banana 游戏设计系列:
UI 设计师的噩梦往往不是画一个精美的图标,而是画 50 个风格统一的技能图标或背包物品。本教程将 Nano Banana 变成你的“图标流水线工厂”。通过**“阵列网格” (Array Grid)** 与 “风格锚定” (Style Anchoring) 技术,我们能一次性生成全套 RPG 技能图标、高质感资源道具以及分级成就徽章。
01. 核心逻辑:元提示词解析
图标生成的关键在于**“一致性” (Consistency)** 和 “易扣取” (Isolation)。我们需要强制模型遵循特定的形状规范(如圆角矩形)和统一的背景。
元提示词 (Meta Prompt):
Prompt (元提示词):
Create a set of [Number] Game/App Icons for [Theme].
Layout: Arranged in a strict Grid Layout (e.g., 4x4) with consistent spacing.
Frame: [Shape: Rounded Rectangle / Circle / Shield-shape].
Style: [Art Style: Skeuomorphic / Flat Vector / Neon / Pixel].
Background: Solid [Color] background for easy masking.
Content: High readability, strong silhouette, distinctive colors.
(解析:**"Strict Grid Layout"* 是量产的核心,防止图标重叠。"Solid Background"(如纯黑或洋红)是后期一键魔棒抠图的保障。)*
02. 深度实战:10个精选长尾 UI 场景复刻 (10 Cases)
1. RPG 元素魔法技能图标 (Magic Skill Icons)

Prompt (中文):
创作一套 RPG 游戏的元素魔法技能图标集,包含 16 个图标。
布局:4x4 网格排列。
外框:带有金色边框的深色正方形。
风格:精美的手绘数字艺术风格,强调魔法光效 (Glow effect)。
内容:火球术、冰锥、雷击、治疗绿光、护盾、暗影诅咒、风刃、流星雨等。每个图标都有独特的颜色主题。
Prompt (English):
Create a set of RPG Elemental Magic Skill Icons containing 16 icons.
Layout: 4x4 grid arrangement.
Frame: Dark square tiles with ornate gold borders.
Style: Exquisite hand-painted digital art style, emphasizing magical Glow effects.
Content: Fireball, Ice Shard, Lightning Strike, Healing Light, Shield, Shadow Curse, Wind Blade, Meteor Shower, etc. Each icon has a distinct color theme.
- 实战解析: 典型的 MMO/RPG 需求,重点在于**“边框”和“内部光效”**的对比,使其在 UI 栏中清晰可见。
2. 休闲消除类游戏资源图标 (Casual Game Currency)

Prompt (中文):
创作一套休闲三消手游的资源和货币图标集。
布局:3x3 网格,纯白背景。
风格:3D 渲染风格,Q 弹果冻质感 (Juicy/Glossy),高饱和度,像糖果一样诱人。
内容:金币(堆叠)、粉色钻石、体力闪电、红心生命值、炸弹道具、彩虹锤子、无限时间沙漏。
Prompt (English):
Create a set of Casual Match-3 Mobile Game Resource/Currency Icons.
Layout: 3x3 grid, pure white background.
Style: 3D render style, Juicy/Glossy jelly texture, high saturation, looking appetizing like candy.
Content: Gold coins (stacked), Pink diamonds, Energy bolts, Red heart lives, Bomb power-ups, Rainbow hammers, Infinite time hourglass.
- 实战解析: 休闲游戏的核心是**"Juicy" (多汁感)**,提示词强调材质的反射和高光,增加玩家的点击欲望。
3. FPS 战术装备击杀图标 (Kill Feed / HUD Icons)

Prompt (中文):
创作一套 FPS 射击游戏的 HUD 击杀提示图标 (Kill Feed Icons)。
布局:横向排列或网格,纯黑背景。
风格:极简白色剪影矢量图 (Flat White Vector Silhouette),无细节,高识别度。
内容:突击步枪侧影、狙击枪、手雷、近战匕首、爆头骷髅标志、载具撞击标志、坠落标志。
Prompt (English):
Create a set of FPS Shooter HUD Kill Feed Icons.
Layout: Horizontal or grid arrangement, pure black background.
Style: Minimalist Flat White Vector Silhouettes, no details, high readability.
Content: Assault rifle side profile, Sniper rifle, Grenade, Melee knife, Headshot skull symbol, Vehicle impact symbol, Fall damage symbol.
- 实战解析: 这里的关键是**"Silhouette" (剪影)**。UI 可以在引擎中给白色剪影随意上色(Tint),这是最实用的资产格式。
4. 科幻生存游戏状态图标 (Status Effects)

Prompt (中文):
创作一套硬核科幻生存游戏的状态效果图标 (Buffs/Debuffs)。
布局:4x4 网格。
风格:全息 HUD 风格,青色和警示红配色,半透明科技感。
形状:六边形蜂窝边框。
内容:辐射中毒(生物危害标志)、低重力、氧气不足、体温过低(雪花)、骨折、超载、隐身模式。
Prompt (English):
Create a set of Hardcore Sci-Fi Survival Status Effect Icons (Buffs/Debuffs).
Layout: 4x4 grid.
Style: Holographic HUD style, Cyan and Alert Red color scheme, translucent tech vibe.
Shape: Hexagonal honeycomb borders.
Content: Radiation poisoning (Biohazard symbol), Low gravity, Low oxygen, Hypothermia (Snowflake), Bone fracture, Overencumbered, Stealth mode.
- 实战解析: 科幻 UI 离不开**“六边形”和“全息色”**,这组图标适合显示在玩家屏幕的角落。
5. 拟物化背包食物道具 (Realistic Inventory Food)

Prompt (中文):
创作一套写实风格的生存游戏背包食物图标。
布局:网格排列,灰色背景。
风格:超写实拟物化 (Skeuomorphic),细腻的纹理,看起来可以吃。
内容:生锈的午餐肉罐头(半开)、发霉的面包、干净的矿泉水瓶、烤熟的兔肉腿、红苹果、一包压缩饼干。
Prompt (English):
Create a set of Realistic Survival Inventory Food Icons.
Layout: Grid arrangement, grey background.
Style: Hyper-realistic Skeuomorphic, detailed textures, looking edible.
Content: Rusty spam can (half open), Moldy bread, Clean water bottle, Roasted rabbit leg, Red apple, Pack of compressed biscuits.
- 实战解析: 逃离塔科夫或 DayZ 类游戏需要这种**“脏旧”**但写实的图标,增强沉浸感。
6. 排名段位成就徽章 (Ranked Badges)

Prompt (中文):
创作一套竞技游戏的排位段位徽章,展示从低到高的等级进化。
布局:横向排列,共 7 个徽章。
风格:金属浮雕风格,带有宝石镶嵌。
内容:青铜(粗糙)、白银(光亮)、黄金(华丽)、白金(带蓝宝石)、钻石(晶体质感)、大师(紫色光环)、宗师(火焰特效复杂的纹章)。
Prompt (English):
Create a set of Competitive Ranked Tier Badges, showing evolution from low to high.
Layout: Horizontal arrangement, total 7 badges.
Style: Metallic embossed style with gem inlays.
Content: Bronze (rough), Silver (polished), Gold (ornate), Platinum (with sapphire), Diamond (crystalline), Master (purple aura), Grandmaster (fiery complex crest).
- 实战解析: 徽章设计的难点在于**“层级感”**。提示词通过材质(粗糙->晶体)和特效(无->火焰)来界定价值感。
7. 扁平化 App 底部导航图标 (Tab Bar Icons)

Prompt (中文):
创作一套现代 iOS 风格的 App 底部导航栏图标。
布局:两行排列,第一行是线性图标 (Outlined),第二行是同内容的填充图标 (Filled/Active state)。
风格:Apple SF Symbols 风格,圆润线条,极简主义,单色黑。
内容:首页(房子)、发现(指南针)、消息(气泡)、购物车(袋子)、我的(人像)。
Prompt (English):
Create a set of Modern iOS style App Tab Bar Icons.
Layout: Two rows: Top row is Line icons (Outlined), Bottom row is Filled icons (Active state) of the same content.
Style: Apple SF Symbols style, rounded strokes, minimalist, monochrome black.
Content: Home (House), Discover (Compass), Message (Bubble), Cart (Bag), Profile (Person).
- 实战解析: UI 设计师不仅需要图标,还需要**“选中态”与“未选中态”**的成对资源。
8. 卡牌游戏属性符号 (TCG Elements)

Prompt (中文):
创作一套集换式卡牌游戏 (TCG) 的属性符号图标。
布局:圆形图标阵列,透明背景。
风格:矢量平面设计,带有简单的渐变,类似于《炉石传说》或《万智牌》的法力符号。
内容:一个水滴(蓝色)、一团火焰(橙色)、一片树叶(绿色)、一个骷髅(黑色)、一个太阳(黄色)、一颗星星(无色)。
Prompt (English):
Create a set of TCG (Trading Card Game) Attribute Symbol Icons.
Layout: Circular icon array, transparent background.
Style: Vector graphic design with simple gradients, similar to Hearthstone or MTG mana symbols.
Content: A Water drop (Blue), A Flame (Orange), A Leaf (Green), A Skull (Black), A Sun (Yellow), A Star (Colorless).
- 实战解析: 这种抽象符号要求**“高辨识度”**,即使缩得很小(印在卡牌角落)也要能看清。
9. 技能树天赋节点 (Skill Tree Nodes)

Prompt (中文):
创作一套暗黑风格游戏的被动天赋技能图标。
布局:网格排列,深灰背景。
形状:圆形边框,边框纹理像石头或骨头。
风格:单色或双色调 (Monochrome/Duotone),蚀刻版画风格 (Etching style)。
内容:增加力量(肌肉臂)、增加暴击(眼睛)、吸血(蝙蝠)、移动速度(靴子)、抗性(盾牌破裂)。
Prompt (English):
Create a set of Dark Fantasy Passive Talent Tree Icons.
Layout: Grid arrangement, dark grey background.
Shape: Circular borders, texture resembling stone or bone.
Style: Monochrome or Duotone, Etching / Engraving style.
Content: Strength Up (Muscular arm), Crit Chance (Eye), Life Steal (Bat), Move Speed (Boot), Resistance (Cracked shield).
- 实战解析: 被动技能通常比主动技能低调,"Etching style" 或单色调能很好地传达这种“古老天赋”的感觉。
10. 赛车游戏仪表盘警示灯 (Dashboard Warning Lights)

Prompt (中文):
创作一套赛车模拟游戏的仪表盘警示灯图标。
布局:网格排列,黑色背景。
风格:发光的霓虹矢量风格 (Neon Vector),高对比度。
内容:ABS 故障(黄色)、引擎过热(红色温度计)、低油量(加油机)、轮胎磨损(轮胎截面)、DRS 开启(绿色)、检查引擎(橙色引擎轮廓)。
Prompt (English):
Create a set of Racing Sim Dashboard Warning Light Icons.
Layout: Grid arrangement, black background.
Style: Glowing Neon Vector style, high contrast.
Content: ABS Fault (Yellow), Engine Overheat (Red Thermometer), Low Fuel (Gas Pump), Tire Wear (Tire section), DRS Active (Green), Check Engine (Orange Engine outline).
- 实战解析: 模拟类游戏需要还原真实的工业标准图标,"Glowing" 是关键词,模拟 LED 灯点亮的效果。
03. Nano Banana 避坑小贴士
拒绝文字 (No Text):
UI 图标中绝对不要包含文字(如 "LV.1", "NEW")。AI 生成的文字通常不可用且难以清理。- Tip: 如果需要文字,请后期在 PS/Figma 中自己加上。让 AI 专注于图形本身。
边框的一致性 (Border Consistency):
有时 AI 会给有的图标加框,有的不加。- Tip: 在 Prompt 中明确指定 "Uniform shape and border style" (统一的形状和边框风格),或者干脆指定 "Borderless" (无边框),后期再加统一的 UI 底板。
颜色修正 (Color Correction):
如果生成了一套图标,但其中一个颜色跑偏了(例如火球变成了绿色)。- Tip: 不要重绘整张图。使用 Nano Banana 的 Inpainting (局部重绘) 功能,涂抹错误的图标,修改 Prompt 为 "Red fireball",即可单独修正该图标。