UI/UX 作品集全攻略:10组 Nano Banana 提示词打造全链路设计案例
UI/UX 设计师最头疼的往往不是画界面,而是如何展示“设计推导过程”。本教程专为 UI/UX 领域定制,利用 Nano Banana 的多模态理解力,将设计思路转化为五段式横向视觉叙事。我们涵盖了 Fintech 后台、车载 HMI、医疗 WatchOS 等 10 个高薪垂直领域的长尾场景,助你一键生成 Dribbble/Behance 级别的作品集封面。
为什么全链路视觉叙事对 UI/UX 作品集至关重要
UI/UX 的展示核心在于“逻辑自洽”。我们需要模型展现从“抽象概念”到“具体界面”再到“用户场景”的完整进化链条。
元提示词架构 (Meta Logic):
- Mood/Concept (情绪板): 核心视觉隐喻或真实世界参考。
- Wireframe (骨架): 低保真线稿,强调布局逻辑。
- Design System (原子组件): 配色规范、字体、图标库展示。
- High-Fi UI (界面): 像素完美的高保真设计图。
- Mockup (场景): 真实设备中的应用效果。
深度实战:10个精选 UI/UX 场景复刻
1. 金融科技:专业股票交易终端 (Dark Mode)

中文提示词:
创作一幅 UI/UX 设计案例展示长图,以【专业股票交易终端】为核心,包含横向排列的五个部分。
【Part 1: 概念情绪】深夜的华尔街交易大厅摄影,多屏显示的蓝光,极度专注的数据氛围。
【Part 2: 布局线稿】SaaS 后台的低保真线框图,用蓝线绘制,标注:多窗口布局、实时数据流、模块化面板。
【Part 3: 设计规范】深色模式 Design System 展示,霓虹绿和警示红的配色卡,Roboto Mono 数字字体示例,微交互按钮状态。
【Part 4: 高保真界面】像素完美的 PC 端交易仪表盘 UI,复杂的 K 线图(蜡烛图),实时深度图,黑底深灰卡片,高对比度数据可视化。
【Part 5: 场景样机】超宽曲面显示器上的实拍效果,放置在极简的金属升降桌上,背景模糊的办公室夜景。
整体风格:赛博金融风,专业严谨。顶部标题 "Fintech Pro Terminal"。
英文提示词 (原词):
Create a UI/UX case study panoramic image focusing on a [Professional Stock Trading Terminal], featuring 5 horizontal sections.
[Part 1: Mood] Photography of Wall Street trading floor at night, blue glow from multiple screens, intense data atmosphere.
[Part 2: Wireframe] Low-fidelity wireframe of a SaaS dashboard, drawn in blue lines, labels: Multi-window Layout, Real-time Data Stream, Modular Panels.
[Part 3: Design System] Dark mode Design System display, Neon Green and Alert Red color palette, Roboto Mono font samples, micro-interaction button states.
[Part 4: High-Fi UI] Pixel-perfect PC trading dashboard UI, complex Candlestick charts, depth charts, dark grey cards on black background, high contrast data visualization.
[Part 5: Mockup] Real shot on an ultra-wide curved monitor, sitting on a minimalist metal standing desk, blurred office night background.
Style: Cyber-financial, professional, rigorous. Top title "Fintech Pro Terminal".
实战解析:
针对“B端后台”和“数据可视化”的高频需求,利用深色模式 (Dark Mode) 能够很好地掩盖 AI 生成细节上的小瑕疵,同时突出整体的高级感和专业度。
2. 疗愈健康:冥想与睡眠助手 App (Glassmorphism)

中文提示词:
创作一幅 UI/UX 设计案例展示长图,以【冥想睡眠 App】为核心。
【Part 1: 灵感来源】晨雾中的湖面摄影,柔和的渐变色天空,粉紫与淡蓝交织,宁静致远。
【Part 2: 用户流程】手绘的用户体验路径图 (User Journey Map),简单的圆圈和箭头,标注:入睡引导、白噪音选择、晨间唤醒。
【Part 3: 组件库】毛玻璃风格 (Glassmorphism) 组件展示,半透明磨砂卡片,柔和的弥散光感投影,圆形图标。
【Part 4: 高保真界面】iOS 移动端播放页 UI,巨大的圆形进度条,背景是动态流动的极光渐变,磨砂玻璃播放控制条,无边框设计。
【Part 5: 场景样机】iPhone 15 Pro 悬浮在柔软的白色床单之上,屏幕亮起显示界面,晨光洒在手机边缘。
整体风格:治愈系,通透,轻量化。顶部标题 "Sleep Flow App"。
英文提示词 (原词):
Create a UI/UX case study panoramic image focusing on a [Meditation & Sleep App].
[Part 1: Inspiration] Photography of a misty lake at dawn, soft gradient sky, blend of pink-purple and pale blue, serene.
[Part 2: User Flow] Hand-drawn User Journey Map, simple circles and arrows, labels: Sleep Guide, White Noise Selection, Morning Wake-up.
[Part 3: Components] Glassmorphism component library, translucent frosted cards, soft diffuse shadows, rounded icons.
[Part 4: High-Fi UI] iOS mobile player page UI, huge circular progress bar, background is dynamic flowing aurora gradient, frosted glass playback controls, borderless design.
[Part 5: Mockup] iPhone 15 Pro floating above soft white bed sheets, screen lit displaying the UI, morning light on phone edges.
Style: Healing, transparent, lightweight. Top title "Sleep Flow App".
实战解析:
针对“C端应用”中最流行的毛玻璃风格 (Glassmorphism),关键在于提示词中对“材质通透感”和“渐变色”的描述,以营造出治愈的氛围。
3. 智能出行:新能源汽车 HMI 中控屏 (Automotive UI)

中文提示词:
创作一幅 UI/UX 设计案例展示长图,以【电动汽车 HMI 中控系统】为核心。
【Part 1: 驾驶场景】未来城市的雨夜公路,流动的车灯光轨,强调速度与导航的需求。
【Part 2: 信息架构】车载系统的线框布局图,强调左侧驾驶数据、右侧娱乐地图的分区逻辑。
【Part 3: 视觉规范】高科技感的扁平化图标集,车辆状态图标(胎压、电池),冷色调科技蓝配色方案。
【Part 4: 高保真界面】宽屏车载中控 UI,3D 车辆模型位于中央,左侧是数字仪表盘,右侧是深色地图导航,大卡片式交互按钮。
【Part 5: 车内实景】从驾驶座视角拍摄的车内图,手指正在触摸中控屏幕,窗外是飞驰的城市景色。
整体风格:具有驾驶安全性的科技感,大字体,清晰易读。顶部标题 "EV Smart Dashboard"。
英文提示词 (原词):
Create a UI/UX case study panoramic image focusing on an [EV HMI Infotainment System].
[Part 1: Scenario] Future city highway at rainy night, flowing light trails, emphasizing speed and navigation needs.
[Part 2: IA] Wireframe layout of car system, emphasizing split logic between driver data (left) and entertainment/map (right).
[Part 3: Visual Specs] High-tech flat icon set, vehicle status icons (tire pressure, battery), cool tech-blue color scheme.
[Part 4: High-Fi UI] Widescreen dashboard UI, 3D car model in center, digital instrument cluster on left, dark map navigation on right, large card-style buttons.
[Part 5: Interior Shot] In-car shot from driver's POV, finger touching the central screen, blurred city view outside window.
Style: Driver-centric safety, high-tech, large typography, legible. Top title "EV Smart Dashboard".
实战解析:
“车载UI”是目前的蓝海领域。提示词特别强调了“宽屏 (Widescreen)”和“3D车模”,这是该领域的标志性元素。
4. 穿戴设备:医疗健康监测 WatchOS (Wearable UI)

中文提示词:
创作一幅 UI/UX 设计案例展示长图,以【智能手表健康监测系统】为核心。
【Part 1: 运动场景】专业跑者在跑道上冲刺的特写,汗水挥洒,强调心率与体能的极限。
【Part 2: 交互手势】圆形表盘的交互逻辑图,展示点击、滑动、长按的手势操作说明。
【Part 3: 数据图形】环形进度条设计组件,鲜艳的心率波形图,高对比度的霓虹色(绿/橙/红)用于区分运动强度。
【Part 4: 高保真界面】Apple Watch Ultra 风格界面,黑色背景,醒目的大数字显示心率 "156 BPM",外圈是彩色的活动圆环。
【Part 5: 佩戴效果】特写镜头,手腕佩戴智能手表,屏幕在阳光下清晰可见,背景是运动场跑道。
整体风格:高对比度,运动感,信息直观。顶部标题 "Pro Health WatchOS"。
英文提示词 (原词):
Create a UI/UX case study panoramic image focusing on a [Smartwatch Health Monitoring System].
[Part 1: Context] Close-up of a pro runner sprinting on track, sweat, emphasizing heart rate and physical limit.
[Part 2: Interaction] Circular watch face interaction logic, showing Tap, Swipe, Long-press gesture guides.
[Part 3: Data Graphics] Ring progress bar components, vivid heart rate waveforms, high-contrast neon colors (green/orange/red) for intensity zones.
[Part 4: High-Fi UI] Apple Watch Ultra style interface, black background, bold large numbers showing "156 BPM", outer colorful activity rings.
[Part 5: On-Wrist] Close-up shot, smart watch on wrist, screen clearly visible under sunlight, running track background.
Style: High contrast, sporty, intuitive info. Top title "Pro Health WatchOS".
实战解析:
穿戴设备 UI 必须强调“圆形布局”和“黑色省电背景”,这是区别于手机 UI 的关键特征。
5. 游戏娱乐:赛博朋克游戏启动器 (Game UI)

中文提示词:
创作一幅 UI/UX 设计案例展示长图,以【硬核科幻游戏启动器】为核心。
【Part 1: 游戏美术】一张极具视觉冲击力的赛博朋克角色原画,机械义肢,故障艺术风格 (Glitch Art)。
【Part 2: 结构框架】模块化的 HUD 风格线框图,倾斜的线条,复杂的装饰性边框设计。
【Part 3: 视觉元素】带有金属磨损质感的按钮,全息投影效果的图标,黄黑配色的警示条纹素材。
【Part 4: 高保真界面】PC 端游戏库主页 UI,角色立绘破框而出,右侧是武器参数面板,底部是好友列表,充满科技细节。
【Part 5: 玩家视角】RGB 机械键盘和电竞鼠标旁边的屏幕实拍,屏幕显示着该界面,暗室环境,紫红色氛围灯。
整体风格:硬核,破坏感,沉浸式。顶部标题 "Cyber Game Launcher"。
英文提示词 (原词):
Create a UI/UX case study panoramic image focusing on a [Hardcore Sci-Fi Game Launcher].
[Part 1: Game Art] Visually striking cyberpunk character concept art, mechanical limbs, Glitch Art style.
[Part 2: Structure] Modular HUD-style wireframe, slanted lines, complex decorative border designs.
[Part 3: Visual Elements] Buttons with worn metal texture, holographic icon effects, yellow/black warning stripe assets.
[Part 4: High-Fi UI] PC Game Library Home UI, character art breaking the frame, weapon stats panel on right, friend list at bottom, full of tech details.
[Part 5: Gamer View] Screen shot next to RGB mechanical keyboard and mouse, screen displaying the UI, dark room, purple-red ambient light.
Style: Hardcore, destructive, immersive. Top title "Cyber Game Launcher".
实战解析:
游戏 UI (GUI) 不遵循常规 App 的极简原则,它追求的是“繁复”和“氛围”,提示词需强调 HUD 和故障风。
6. 开发工具:极简主义 AI 代码编辑器 (Dev Tools)

中文提示词:
创作一幅 UI/UX 设计案例展示长图,以【AI 辅助代码编辑器】为核心。
【Part 1: 隐喻】整齐排列的矩阵方块,象征逻辑与秩序,纯净的灰白基调。
【Part 2: 布局规划】三栏式布局线框图:文件树、代码编辑区、AI 对话侧边栏。
【Part 3: 语法高亮】代码高亮配色方案 (Syntax Highlighting),柔和的 pastel 色调(淡紫、淡蓝、薄荷绿),圆角代码块背景。
【Part 4: 高保真界面】Mac OS 风格的编辑器 UI,极简无干扰模式,光标处浮出一个 AI 自动补全的建议框,字体使用 Fira Code。
【Part 5: 桌面样机】MacBook Pro 放置在木质桌面上,屏幕显示编辑器,旁边有一杯咖啡和绿植,自然光。
整体风格:开发者友好,理性,高效,性冷淡风。顶部标题 "Zen Code AI Editor"。
英文提示词 (原词):
Create a UI/UX case study panoramic image focusing on an [AI-Assisted Code Editor].
[Part 1: Metaphor] Neatly arranged matrix blocks, symbolizing logic and order, pure grey/white tone.
[Part 2: Layout] 3-column layout wireframe: File Tree, Code Editor, AI Chat Sidebar.
[Part 3: Syntax] Syntax Highlighting color scheme, soft pastel tones (lavender, pale blue, mint), rounded code block backgrounds.
[Part 4: High-Fi UI] MacOS style editor UI, minimalist distraction-free mode, an AI auto-complete suggestion box floating near cursor, Fira Code font.
[Part 5: Desk Setup] MacBook Pro on wooden desk, screen showing editor, coffee cup and plant nearby, natural light.
Style: Developer-friendly, rational, efficient, sterile. Top title "Zen Code AI Editor".
实战解析:
针对 SaaS 工具类产品,设计重点是“无干扰”和“可读性”,吸引理性为主的开发者用户群。
7. 电商零售:奢侈品电商 App (Editorial Style)

中文提示词:
创作一幅 UI/UX 设计案例展示长图,以【高端奢侈时尚电商】为核心。
【Part 1: 品牌大片】黑白时尚摄影,模特穿着高级定制服装,极简构图,Vogue 杂志风格。
【Part 2: 栅格系统】严谨的 4 列栅格布局草图,大量的留白 (Negative Space),强调图片占比。
【Part 3: 字体排印】优雅的衬线体 (Serif) 标题展示,配合极细的无衬线体正文,米色与黑金的配色板。
【Part 4: 高保真界面】移动端商品详情页 UI,全屏背景图,底部悬浮极简的“加入购物袋”按钮,文字排版像杂志一样精美。
【Part 5: 手持样机】戴着金戒指的女性手持 iPhone,屏幕显示该界面,背景是高级大理石纹理。
整体风格:高贵,排版驱动,极简主义。顶部标题 "Luxury Mode App".
英文提示词 (原词):
Create a UI/UX case study panoramic image focusing on [High-End Luxury Fashion E-commerce].
[Part 1: Campaign] Black and white fashion photography, model in haute couture, minimal composition, Vogue style.
[Part 2: Grid] Rigorous 4-column grid layout sketch, massive Negative Space, emphasizing image ratio.
[Part 3: Typography] Elegant Serif heading display, paired with ultra-thin Sans-Serif body text, Beige/Black/Gold color palette.
[Part 4: High-Fi UI] Mobile Product Detail Page UI, full-screen background image, floating minimalist "Add to Bag" button at bottom, editorial layout.
[Part 5: Hand Mockup] Female hand with gold rings holding iPhone, screen showing interface, premium marble texture background.
Style: Noble, typography-driven, minimalist. Top title "Luxury Mode App".
实战解析:
奢侈品 UI 的核心是“留白 (Negative Space)”和“衬线字体”,这与常规电商密密麻麻的布局完全不同,营造的是稀缺感。
8. 物联网:智能家居控制面板 (Smart Home Pad)

中文提示词:
创作一幅 UI/UX 设计案例展示长图,以【全屋智能中控平板】为核心。
【Part 1: 居家环境】温馨的现代客厅,暖色调灯光,舒适的沙发,体现“家”的温度。
【Part 2: 模块草图】卡片式布局的线稿,将灯光、温度、安防分为不同大小的矩形模块。
【Part 3: 拟物组件】新拟态 (Neumorphism) 或 软 UI (Soft UI) 风格按钮,轻微的浮雕感,圆角矩形,暖白配色。
【Part 4: 高保真界面】壁挂式平板 UI,左侧显示室内 24°C,右侧是各个房间的场景模式(回家、离家、影院),界面干净柔和。
【Part 5: 墙面实拍】安装在浅灰色乳胶漆墙面上的控制面板实拍,手指正在滑动调节灯光亮度,光影真实。
整体风格:温馨,易用,亲和力强。顶部标题 "Smart Home Hub".
英文提示词 (原词):
Create a UI/UX case study panoramic image focusing on [Whole House Smart Control Pad].
[Part 1: Home Env] Cozy modern living room, warm lighting, comfortable sofa, embodying the warmth of "home".
[Part 2: Module Sketch] Card-style layout wireframe, dividing lights, temp, security into rectangular modules of varying sizes.
[Part 3: Skeuomorphic] Neumorphism or Soft UI style buttons, slight embossed effect, rounded rectangles, warm white color scheme.
[Part 4: High-Fi UI] Wall-mounted tablet UI, left side showing indoor 24°C, right side showing scene modes (Home, Away, Cinema), interface clean and soft.
[Part 5: Wall Shot] Real shot of control panel installed on light grey painted wall, finger touching the central screen, realistic shadows.
Style: Cozy, usable, approachable. Top title "Smart Home Hub".
实战解析:
智能家居面板通常固定在墙上,因此 Case 5 的 Mockup 必须是“墙面视角”而非手持,这增加了场景的真实性。
9. 未来科技:AR 博物馆导览界面 (Spatial UI)

中文提示词:
创作一幅 UI/UX 设计案例展示长图,以【AR 增强现实博物馆导览】为核心。
【Part 1: 现实场景】博物馆展厅,展示着恐龙化石骨架,光线略暗的室内环境。
【Part 2: 空间坐标】3D 空间锚点示意图,在骨架周围标注虚拟信息点的悬浮位置逻辑。
【Part 3: UI 材质】磨砂亚克力质感的悬浮面板素材,带有发光边缘,半透明度 60%。
【Part 4: 高保真界面 (POV)】第一人称视角 (POV) 看到的 AR 界面,恐龙骨架旁悬浮着透明信息卡,显示生物复原 3D 动画,指尖有光标交互。
【Part 5:佩戴场景】侧面拍摄一名戴着 AR 眼镜 (如 Apple Vision Pro) 的游客,正在空中做手势交互。
整体风格:未来感,空间计算,混合现实。顶部标题 "AR Museum Guide".
英文提示词 (原词):
Create a UI/UX case study panoramic image focusing on [AR Augmented Reality Museum Guide].
[Part 1: Reality] Museum exhibition hall, displaying dinosaur fossil skeleton, slightly dim interior.
[Part 2: Spatial Coords] 3D spatial anchor diagram, marking floating positions of virtual info points around the skeleton.
[Part 3: UI Material] Frosted acrylic texture floating panel assets, glowing edges, 60% opacity.
[Part 4: High-Fi UI (POV)] First-person view (POV) of AR interface, transparent info cards floating next to dino skeleton showing 3D restoration animation, cursor at fingertip.
[Part 5: Wearing Scene] Side profile shot of a visitor wearing AR glasses (like Apple Vision Pro), performing hand gestures in mid-air.
Style: Futuristic, spatial computing, mixed reality. Top title "AR Museum Guide".
实战解析:
空间计算 (Spatial Computing) 是未来趋势,Prompt 必须强调 "Transparency" (透明度) 和 "Floating" (悬浮感) 来表达混合现实的特质。
10. 在线教育:儿童英语学习 App (Playful UI)

中文提示词:
创作一幅 UI/UX 设计案例展示长图,以【儿童英语学习 App】为核心。
【Part 1: 卡通世界】色彩鲜艳的矢量插画森林,可爱的小动物角色(兔子、熊),高饱和度。
【Part 2: 游戏化逻辑】关卡地图线稿,像大富翁一样的蜿蜒路径,标注奖励节点。
【Part 3: 视觉资产】圆润胖乎乎的按钮设计 (Chubby UI),不仅有圆角还有高光立体感,明亮的黄/蓝/橙配色。
【Part 4: 高保真界面】iPad 横屏学习页,左边是 AI 老师角色,右边是巨大的互动单词卡片,底部是收集到的星星奖励槽。
【Part 5: 使用场景】小孩的手指在 iPad 屏幕上点击,iPad 带着厚实的防摔保护套,背景是色彩斑斓的儿童房。
整体风格:活泼,趣味,高饱和度,大圆角。顶部标题 "Kids Fun Learn".
英文提示词 (原词):
Create a UI/UX case study panoramic image focusing on [Kids English Learning App].
[Part 1: Cartoon World] Colorful vector illustration forest, cute animal characters (bunny, bear), high saturation.
[Part 2: Gamification] Level map wireframe, winding path like Monopoly, marking reward nodes.
[Part 3: Visual Assets] Rounded "Chubby UI" button design, with highlights and 3D volume, bright Yellow/Blue/Orange palette.
[Part 4: High-Fi UI] iPad landscape learning screen, AI teacher character on left, huge interactive word card on right, star reward slot at bottom.
[Part 5: Usage] Child's finger tapping on iPad screen, iPad in a thick shockproof case, colorful kids room background.
Style: Playful, fun, high saturation, large border radius. Top title "Kids Fun Learn".
实战解析:
儿童 UI 需要完全打破常规的“极简”,强调“拟物”和“反馈感”,按钮要看起来很好按(Juicy)。
Nano Banana 避坑小贴士
关于文字乱码 (Text Rendering):
UI 界面中通常包含大量文字。虽然 Nano Banana 能力很强,但生成复杂的正文段落仍可能变成“火星文”。- Tip: 在 Prompt 中尽量减少对具体长文本的描述,改用 "Placeholder text" (占位符文本) 或 "Data visualization" (数据可视化) 来填充空间。重点让模型生成标题 (Header) 和数字,这些通常更准确。
Mockup 的真实性:
在第 5 部分 (Mockup) 中,模型有时会把 UI 直接“贴”在屏幕表面,缺乏光影融合。- Tip: 关键词 "Screen reflection" (屏幕反光)、"Fingerprint smudge" (轻微指纹) 和 "Depth of field" (景深) 能极大增加样机的真实感,避免看起来像廉价的 PS 贴图。
一致性控制:
如果发现 Part 3 的配色和 Part 4 的界面颜色不一致。- Tip: 可以在 Prompt 的开头强制定义主色调,例如:"Main color: Neon Green (#39FF14)",并在每个 Part 的描述中重复提及该颜色关键词。
结语
一个好的 UI/UX 作品集不仅仅是漂亮界面的堆砌,更是对设计思考过程的完整演绎。通过这套五段式横向提示词模板,你能够强迫 Nano Banana 像设计师一样思考——同时兼顾情绪、骨架、规范、界面和落地场景。选择一个与你职业目标最契合的场景,填入你的创意,现在就开始构建那个能让你脱颖而出的作品集吧。