企业官网建设流程全解析

Midjourney 生成 UI 插画的高级参数：从提示词到视觉叙事的精度控制

当AI遇见设计，提示词就是新的画笔。掌握Midjourney的高级参数，让每一次生成都精准命中设计意图。

为什么UI插画需要参数化控制

UI插画不同于自由创作的艺术作品，它需要满足品牌一致性、视觉规范和情感表达的多重约束。Midjourney的高级参数为设计师提供了精细控制生成结果的能力。

UI插画的特殊要求

1. 风格一致性：同一套插画需要保持统一的视觉语言
2. 色彩可控：符合品牌色板和设计系统的色彩规范
3. 构图适配：适应不同组件和布局的尺寸需求
4. 情感准确：传达正确的产品调性和用户情绪

Midjourney核心参数解析

基础参数速查表

风格化参数的精细控制

# UI插画风格化参数对比 ## 低风格化 (--s 50) 主体明确，细节较少，适合功能示意图 /imagine flat illustration of a person working at desk, clean lines, minimal detail --ar 1:1 --s 50 ## 中风格化 (--s 150) 平衡创意与精准度，适合通用UI插画 /imagine flat illustration of a person working at desk, warm colors, soft shadows --ar 4:3 --s 150 ## 高风格化 (--s 250) 艺术感强，细节丰富，适合Hero区域 /imagine flat illustration of a person working at desk, gradient colors, artistic --ar 16:9 --s 250

参考图权重策略

# 品牌色板参考 ## 色彩参考 (--iw 2.0) 严格遵循参考图色彩，适合品牌一致性要求高的场景 /imagine isometric illustration of team collaboration --ar 1:1 --iw 2.0 --s 100 ## 风格参考 (--iw 1.0) 平衡参考图的风格与创意空间，适合系列插画 /imagine isometric illustration of team collaboration --ar 1:1 --iw 1.0 --s 150 ## 构图参考 (--iw 0.5) 保留参考图的构图灵感，允许色彩和风格创新 /imagine isometric illustration of team collaboration --ar 1:1 --iw 0.5 --s 200

UI插画的分层提示词策略

提示词结构模板

# 分层提示词模板 [主体] + [场景] + [风格] + [色彩] + [构图] + [技术规格] ## 示例：登录页插画 /imagine a person standing at a doorway with glowing light ahead digital illustration, flat design style brand colors blue and purple gradient centered composition, asymmetrical balance --ar 4:3 --s 150 --v 6.0

提示词中的专业术语

// 提示词生成器 class UIPromptBuilder { constructor() { this.elements = { subject: [], scene: [], style: [], color: [], composition: [], technical: [] }; } addSubject(subject) { this.elements.subject.push(subject); return this; } addStyle(style) { const styleLibrary = { 'flat': 'flat illustration, vector style, clean lines', '3d': '3D rendered, isometric view, volumetric lighting', 'abstract': 'abstract shapes, geometric forms, modern art', 'handdrawn': 'hand-drawn style, sketchy, organic lines', 'gradient': 'gradient mesh, smooth color transitions' }; this.elements.style.push(styleLibrary[style] || style); return this; } addColorScheme(colors) { this.elements.color.push( `color palette: ${colors.join(', ')}, harmonious colors` ); return this; } build() { const parts = [ this.elements.subject.join(', '), this.elements.scene.join(', '), this.elements.style.join(', '), this.elements.color.join(', '), this.elements.composition.join(', '), this.elements.technical.join(', ') ].filter(Boolean); return parts.join('\n'); } toMidjourneyPrompt(params = {}) { const prompt = this.build(); const args = []; if (params.ar) args.push(`--ar ${params.ar}`); if (params.s !== undefined) args.push(`--s ${params.s}`); if (params.v) args.push(`--v ${params.v}`); if (params.seed) args.push(`--seed ${params.seed}`); if (params.iw) args.push(`--iw ${params.iw}`); return `/imagine ${prompt} ${args.join(' ')}`; } } // 使用示例 const builder = new UIPromptBuilder(); builder .addSubject('a team of diverse professionals') .addSubject('collaborating around a digital workspace') .addStyle('flat') .addColorScheme(['#667eea', '#764ba2', '#ffffff']) .addSubject('minimal background with abstract data visualization'); const prompt = builder.toMidjourneyPrompt({ ar: '16:9', s: 150, v: '6.0', seed: 12345 });

系列插画的一致性控制

使用固定种子值

# 系列插画 - 同一世界观的多个场景 ## 场景1：用户登录 /imagine a character entering a digital portal, cyberpunk style, neon purple --ar 1:1 --s 100 --seed 5000 ## 场景2：数据浏览 /imagine a character navigating through floating data screens, cyberpunk style, neon purple --ar 1:1 --s 100 --seed 5000 ## 场景3：团队协作 /imagine multiple characters connected through holographic interfaces, cyberpunk style, neon purple --ar 1:1 --s 100 --seed 5000

风格参考对照表

# 风格一致性参考 ## 风格参考库 /imagine style guide reference for UI illustrations: flat design, rounded corners, minimalist, gradient accents --ar 16:9 --s 50 ## 角色一致性 /imagine character design sheet for UI mascot: friendly, cute robot assistant --ar 3:2 --s 100 ## 场景一致性 /imagine environment concept for productivity app: clean workspace, natural light, plants --ar 16:9 --s 150

参数组合优化策略

不同UI场景的参数推荐

const parameterPresets = { // Hero区域大图 heroBanner: { ar: '21:9', s: 250, v: '6.0', description: '高风格化，宽幅构图，适合首页大图' }, // 功能示意图 featureIllustration: { ar: '1:1', s: 100, v: '6.0', description: '中低风格化，方形构图，聚焦功能表达' }, // 空状态插画 emptyState: { ar: '3:4', s: 150, v: '6.0', description: '中等风格化，纵向构图，简洁富趣味' }, // 图标 iconSet: { ar: '1:1', s: 50, v: '6.0', description: '低风格化，统一尺寸，强调辨识度' }, // 背景纹理 backgroundPattern: { ar: '16:9', s: 200, v: '6.0', description: '中高风格化，无缝拼接，克制使用色彩' } }; function recommendParameters(scene) { const preset = parameterPresets[scene]; if (!preset) { return { error: `未知场景类型，可选: ${Object.keys(parameterPresets).join(', ')}` }; } return { scene, parameters: { '--ar': preset.ar, '--s': preset.s, '--v': preset.v }, rationale: preset.description }; }

A/B测试工作流

// 批量生成对比测试 class MidjourneyABTest { constructor(prompt, variations) { this.basePrompt = prompt; this.variations = variations; this.results = []; } generateTestSet() { return this.variations.map((params, index) => ({ id: `test_${index + 1}`, prompt: this.basePrompt, params: { ...params, seed: Math.floor(Math.random() * 100000) }, fullPrompt: this.buildPrompt(params) })); } buildPrompt(params) { const args = Object.entries(params) .map(([key, value]) => `--${key} ${value}`) .join(' '); return `/imagine ${this.basePrompt} ${args}`; } evaluateResults(images, criteria) { // 根据评估标准打分 return images.map((image, i) => ({ testId: `test_${i + 1}`, ...this.variations[i], scores: this.scoreImage(image, criteria), totalScore: this.calculateTotalScore(image, criteria) })).sort((a, b) => b.totalScore - a.totalScore); } scoreImage(image, criteria) { const scores = {}; for (const [criterion, weight] of Object.entries(criteria)) { scores[criterion] = { weight, score: image[criterion] || 0 }; } return scores; } calculateTotalScore(image, criteria) { return Object.entries(criteria).reduce((total, [key, weight]) => { return total + (image[key] || 0) * weight; }, 0); } }

从生成到落地的工程化流程

插画交付规范

/* 插画组件的CSS封装 */ .illustration { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; overflow: hidden; img { width: 100%; height: auto; object-fit: contain; } /* 响应式尺寸控制 */ &--hero { max-height: 480px; } &--feature { max-width: 320px; max-height: 320px; } &--empty-state { max-width: 240px; max-height: 240px; } &--icon { width: 48px; height: 48px; } } /* SVG优化：保留编辑能力 */ .illustration-source { display: none; /* 隐藏原始SVG */ }

版本管理

// 插画资产版本管理 class IllustrationAssetManager { constructor() { this.assets = new Map(); } addAsset(name, { prompt, params, seed, variations }) { this.assets.set(name, { id: `${name}_${Date.now()}`, name, prompt, params, seed, variations, createdAt: new Date(), version: 1 }); } createVariant(baseName, newParams) { const base = this.assets.get(baseName); if (!base) return null; const variant = { ...base, id: `${baseName}_v${base.variations.length + 1}`, params: { ...base.params, ...newParams }, parentId: base.id, createdAt: new Date() }; base.variations.push(variant); return variant; } generateStyleGuide(author = '') { const categories = {}; for (const [name, asset] of this.assets) { const category = name.split('-')[0]; if (!categories[category]) { categories[category] = []; } categories[category].push(asset); } return { title: 'AI插画风格指南', author, generatedAt: new Date().toISOString(), totalAssets: this.assets.size, categories }; } }

graph LR A[用户交互] --> B[视觉反馈] A --> C[状态变化] B --> D[微动画] B --> E[颜色变化] C --> F[数据更新] C --> G[界面切换]

总结

Midjourney的高级参数为UI插画生成提供了精确的控制能力。从风格化参数到种子值控制，从参考图权重到层级提示词策略，掌握这些参数可以帮助设计师在AI生成过程中保持品牌一致性、风格统一性和构图准确性。将参数化控制与工程化流程结合，AI插画才能真正融入产品设计体系。

AI不会取代设计师，但掌握AI工具的设计师将取代不会使用AI的设计师。提示词就是新时代的设计语言。