实验室

Nano Banana 游戏设计实战:10组 UI 图标与成就徽章量产通用模板

UI 设计师的噩梦往往不是画一个精美的图标,而是画 50 个风格统一的技能图标。本教程将 Nano Banana 变成你的“图标流水线工厂”。通过“阵列网格”与“风格锚定”技术,一次性生成全套 RPG 技能图标、高质感资源道具以及分级成就徽章。

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)

RPG 游戏元素魔法技能图标集,4x4 网格展示带有金色边框和发光特效的火球、冰锥等图标

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.

2. 休闲消除类游戏资源图标 (Casual Game Currency)

休闲三消手游资源货币图标集,3x3 网格展示 Q 弹果冻质感的金币、钻石和体力图标

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.

3. FPS 战术装备击杀图标 (Kill Feed / HUD Icons)

FPS 射击游戏 HUD 击杀提示图标集,极简白色剪影矢量风格展示步枪、手雷和爆头标志

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.

4. 科幻生存游戏状态图标 (Status Effects)

科幻生存游戏状态效果图标集,六边形蜂窝边框展示全息 HUD 风格的辐射、氧气和骨折标志

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.

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.

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)

现代 iOS 风格 App 底部导航栏图标集,展示线性与填充两种状态的首页、消息和购物车图标

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).

8. 卡牌游戏属性符号 (TCG Elements)

集换式卡牌游戏 TCG 属性符号图标集,圆形矢量设计展示火、水、叶、骷髅等元素符号

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).

10. 赛车游戏仪表盘警示灯 (Dashboard Warning Lights)

赛车模拟游戏仪表盘警示灯图标集,发光霓虹矢量风格展示 ABS、引擎过热和油量警示

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).

03. Nano Banana 避坑小贴士

  1. 拒绝文字 (No Text):
    UI 图标中绝对不要包含文字(如 "LV.1", "NEW")。AI 生成的文字通常不可用且难以清理。

    • Tip: 如果需要文字,请后期在 PS/Figma 中自己加上。让 AI 专注于图形本身。
  2. 边框的一致性 (Border Consistency):
    有时 AI 会给有的图标加框,有的不加。

    • Tip: 在 Prompt 中明确指定 "Uniform shape and border style" (统一的形状和边框风格),或者干脆指定 "Borderless" (无边框),后期再加统一的 UI 底板。
  3. 颜色修正 (Color Correction):
    如果生成了一套图标,但其中一个颜色跑偏了(例如火球变成了绿色)。

    • Tip: 不要重绘整张图。使用 Nano Banana 的 Inpainting (局部重绘) 功能,涂抹错误的图标,修改 Prompt 为 "Red fireball",即可单独修正该图标。