注意事项:本篇教程中使用的生图图片均为豆包4.5生图模型生成,梦也模型同样适用,但生成的效果可能会有所不同,至于其他AI工具尚未进行测试。
长久以来,我都怀有整理AI生图提示词的念头,但由于早期AI生图模型的不稳定性,比如在2.0版本上生成的图片尚可,而到了3.0、4.0版本则可能出现大幅变化,因此整理工作一直被推迟。然而,随着AI技术的进步和生图模型的日益稳定,我决定再次尝试,为UI设计师们提供一份即学即用的AI生图指导手册。本文将涵盖以下内容:
一、通用提示词模板
在前期收集整理的80多个生图案例中,通过对提示词的剖析,我们发现这些提示词普遍由8个核心模块以及附加信息构成。
通用基础模板:
{主体描述},{风格质感},{色彩方案},{视角构图},{背景设置},{材质细节},{工具渲染},{输出参数},{可选:参考风格}
提示词示例:
主体描述:XXXXXXXXXXXXXXXXXXXX,
风格质感:3D风格 + 毛玻璃质感 + 未来科技感,
色彩方案:橙红色渐变,
视角构图:等轴测视角,
背景设置:纯白色背景,
材质细节:半透明 + 通透感 + 柔和光影过渡,
工具渲染:C4D 建模 + Blender 配合 + OC 渲染器 + 光线追踪 + 工作室照明,
输出参数:8K 分辨率 + 高保真,
参考风格:Dribbble 风格
二、场景化专用模板
针对工作中常用的场景,提供可直接使用的模板。
1、3D科技风图标
适用场景:B端、工具类图标
提示词模板:
主体描述:XXXXXXXXX图标,
风格质感:3D风格+未来科技感,
色彩方案:主色调蓝色,搭配白色,
视角构图:等轴测视角,
背景设置:纯白色背景,
材质细节:毛玻璃 + 半透明玻璃材质,半透明 + 光滑质感 + 柔和光影,
工具渲染:C4D+Blender 建模 + OC 渲染器 + 光线追踪,
输出参数:8K分辨率+减少细节+高辨识度,
参考风格:Dribbble 风格
主体描述之简单图形
这些图形形象直观且常见,AI能够直接捕捉到,生成结果相对准确。
示例:文件夹、盾牌、锁、日历、礼物、折线图、柱状图、楼宇、台式电脑、路由器、鼠标、优盘、笔记本电脑...等等。

在创作复杂图形时,我们需要注意以下要点:
此类图形通常由至少两个部分构成,AI系统需根据我们的详细描述来解析并理解。这个过程可能需要多次尝试,才能达到令人满意的效果。
以下是一些具体的示例:
1. 设计一款AI云图标,它包括一个双层圆形的底座,环绕着云体的圆环,以及云面上标注的“AI”字样。
2. 图形上半部分由两份文件组成,每份文件上方放置一支笔。文件左侧有一个球体,球体上印有“AI”字样。右侧则有两个大小不同的气泡,下方是双层圆形底座。
3. 上半部分呈现一个未来感的蓝色地球,地球表面带有网格和经纬线,周围环绕着流线型的轨道和节点。下半部分是一个未来感的白色硬件平台,平台上有接口和散热槽等细节。
4. 上半部分展示一个悬浮的AI芯片,芯片上带有电路板纹路和引脚,中央位置显示加粗的“AI”字样,被一个透明的弧形支架所环绕。芯片下方是一个分层式的白色底座,底座上含有蓝色光效装饰和接口细节。芯片本身呈现出透明淡蓝白的渐变质感,并带有发光效果。

在浏览至此处,或许大家心中会涌现一丝疑惑,编写这些提示词似乎颇为繁琐,让人难以想到。
针对这一问题,我为您整理了三种解决方案:
以下是我利用豆包反推提示词的一个实际案例:
步骤一:

step2
接下来,我们需要将主图形的详细描述复制到相应的模板中,以便进行生成图像。在首轮尝试中,我发现生成的芯片颜色呈现为黑色,这与我预期的颜色并不相符。

增加关于芯片颜色的描述


1. 在这一环节,务必进行多次实践,逐渐摸索出其中的门道,请保持耐心。
2. 功能性图标设计
应用场景:适用于导航及功能分类
提示模板:
主体描述:以相机图标为例,
设计风格与质感:采用清新简约的立体图标设计风格,融入UI设计元素,呈现梦幻般的视觉感受,
色彩搭配:以蓝色渐变为基调,点缀些许橘色,
视角与构图:从正面视角略微偏向左侧,
背景:选择纯白色作为背景,
材质与细节:注重透明渐变层次和立体感的呈现,
输出设置:确保以8K分辨率输出,并包含丰富的细节和高辨识度,
参考风格:参考Dribbble网站的风格
在功能性图标的设计中,建议图形保持简洁,即便在小尺寸下也能保证清晰可辨。
案例:地图图标、商店图标、相机图标、下载图标、文件图标、剪辑图标、优惠券图标、客服图标等。

3、打造温馨的卡通风格图标
在文创、儿童以及软萌类别的图标设计中,这类图标若是一一单独制作,往往难以确保整体的风格一致性。因此,我们推荐大家采用批量生成的方式,并且设置多个分类以提高出错的可能性。
在功能词的选择上,我们建议使用简单且直观的词汇,例如,“活动”可以用“旗子”来代替,这样更易于AI理解。
以下是一个可爱的卡通风格图标提示词模板:
主体描述:一组由6个可爱的卡通图标组成,它们排列成3×2的矩阵,功能涵盖日历、人物、问卷、消息、星星以及旗子,每个图标下方都附有相应的中文功能标签。
风格质感:这些图标呈现出可爱卡通的风格,非常适合用于儿童应用的功能分类或界面导航场景。
色彩方案:采用多种色彩搭配,但保持低饱和度,营造出温馨的氛围。
背景设置:选择纯白色作为背景,使图标更加突出。
材质细节:图标设计融入了通透的渐变层次和立体质感,增强了视觉效果。
输出参数:确保以8K分辨率输出,同时注重细节处理和辨识度,以达到最佳效果。

文章标题:AI「保姆级」生图教程,助力UI设计
(文章第9/15部分,中间部分,直接输出改写正文)
接下来,我们以一个实际示例来展示原功能,包括景点推荐、门票价格、游览体验、酒店民宿、热门景区、名胜古迹等内容。为了使AI能够更准确地识别,我将这些相对抽象的词汇替换为更加直观的“山川太阳”、“门票”、“路线”、“酒店”、“景区”以及“山川湖泊”。
针对国风文创的设计,我们设计了一套提示词模板,具体如下:
主体描述:由6个富有国风创意的图标组成,排列成3×2的矩阵形式,涵盖了“山川太阳”、“门票”、“路线”、“酒店”、“景区”、“山川湖泊”等功能,每个图标下方还附有相应的中文功能标签。
风格质感:图标风格追求国风特色,充满创意。
色彩方案:采用了多种低饱和度的色彩,使整体视觉效果更加和谐。
背景设置:以纯白色作为背景,简洁大方。
材质细节:图标设计融入了通透的渐变层次和立体质感,既展现了国风的独特魅力,又紧密围绕旅游的核心元素。
输出参数:生成图像的分辨率为8K,细节丰富,辨识度高。
豆包生成效果:通过以上设置,AI能够生成符合要求的图像,满足设计需求。

即梦生成效果

4、打造场景化图标
应用领域:工业建筑、发电设施
提示词示例:
核心描述:一组由6个2.5D风格图标构成的集合,排列成2行3列的矩阵。图标1:描绘一座煤电发电站,包含燃烧的煤炉和宏伟的大烟囱。图标2:展示天然气火力发电站,包括电力调控室、燃烧的气炉以及高耸的大烟囱。图标3:以光伏发电为主题,突出光伏板和储能箱。图标4:水力发电场景,着重表现壮丽的水坝。图标5:风力发电站,配备大型风力机和储能房。图标6:生物新能源发电,以一栋建筑作为主体。
设计风格:融合3D效果与未来科技感,
色彩搭配:以蓝色为主色调,辅以白色,
构图视角:采用等轴测视角,
背景设计:纯白色背景,
材质处理:运用毛玻璃质感,
渲染工具:使用C4D和Blender进行建模,OC渲染器进行渲染,并开启光线追踪功能,
输出设置:确保8K分辨率,适当减少细节,提高辨识度,
风格参考:借鉴Dribbble上的设计风格,
设计规范:确保图标底座统一,透视效果一致,根据图标含义突出主体设计,避免主体倾斜,并保持视觉大小的一致性。
值得注意的是,此命令模板相较于其他模板的特殊之处在于,它额外加入了设计要求。左侧展示的是未添加设计要求的效果,而右侧则是加入了设计要求后的效果。在大家进行批量生成图标时,不妨尝试加入这些设计要求,这样生成的图标将更加统一和协调。

5、横幅设计
关键词模板:
主要内容:横幅设计作品,全图无文字装饰,右侧区域聚焦展示【上半部分为漂浮的AI芯片,芯片表面拥有电路板纹理和引脚,正中央清晰标注加粗的“AI”字样,并由一透明弧形支架加以支撑;芯片底部为层次分明的白色底座,底座上镶嵌着蓝色灯光效果以及接口细节,芯片呈现透明淡蓝至白色的渐变效果,并具备发光特性】,
风格质感:融合3D建模与未来科技感,
色彩搭配:以蓝色为主色调,辅以白色进行调和,
视角构图:采用等轴测视图,
背景配置:以浅色调的几何纹理作为背景,
材质细节:运用毛玻璃与半透明玻璃材质,以及半透明、光滑质感与柔和光影效果,
工具运用:使用C4D与Blender进行建模,配合OC渲染器以及光线追踪技术,
输出规格:8K分辨率,降低细节以提升辨识度,
风格参考:参考Dribbble网站上的设计风格。

案例展示
在本节中,我们将不再详细阐述主体描述的细节。虽然寻找参考图样是迅速掌握设计技巧的一种方法,但这一过程可能会相对耗费时间。不妨尝试对参考图样中的某些元素进行修改,以便更好地满足个人设计需求。
参考图形呈现

标题:AI保姆级教程,轻松掌握UI设计中的生图技巧
段落一:
豆包的描述功能强大,它能够根据我们的详细描述生成相应的图像。以这次为例,我使用了3D等轴测视角,并选择了玻璃拟物风格,特别是亚克力透明渐变质感,使得画面更具现代感。主体是蓝白渐变的卡通机器人头像,这个头像不仅戴上了同色系的耳机和麦克风,面部设计也是简洁的矩形眼睛。机器人被放置在透明蓝白渐变的螺旋形底座上,而底座上还缠绕着带有白色数据波形图的透明蓝色条带。画面上方还特别设计了两个蓝白透明的对话气泡,一个是圆形的,含有“@”符号,另一个是矩形的,含有三个点。整体色调以淡蓝和白色为主,质感通透轻盈,背景更是保持了透明效果。
段落二:
根据上述详细描述,豆包成功生成了相应的图片。我们可以看到,生成的图片完美地呈现了描述中的每一个细节,无论是卡通机器人的设计,还是螺旋形底座和透明蓝色条带,甚至是背景的透明效果,都得到了精确的还原。这样的AI生图功能,无疑为UI设计师提供了极大的便利,使得设计工作更加高效和有趣。

标题:AI保姆级教程:轻松制作UI设计背景纹理,共享你的创意吧!
在探讨banner背景纹理这一环节,我在本文中并未详尽地收集相关资料。读者朋友们可以自行搜集整理,或者直接在评论区与我分享你的发现哦~
第三部分:使用指南
以下内容中展示的图片均适用于豆包4.5生图模型,同样,梦图模型也可以使用,不过生成的图像效果可能会有所不同。
1、图标主体描述要点(AI在识别具体事物时更为精确)
对于单个简单的图标,可以直接使用日常生活中常见的物品进行描述。
针对复杂图形的处理方案
图标组合的处理方法也类似,若仅列出每个功能项,生成的图像错误率可能会较高。
2、图片比例的选择
合适的图片比例能够使生成的图像更加精确。建议选择足够容纳你生图要求的图片比例。
3、生图命令模板的使用
目前提供的模板是我根据整理的一些命令总结出来的,可能并不全面。但这个模板能为大家提供一个基础的方向。其中,风格质感、色彩方案、背景设置、材质细节等都可以根据需求进行调整。建议制作一个参数对应表,以便大家应对各种风格。总之,大家可以带着这个模板大胆尝试。