【UI教程】如何使用image2制作符合自己项目风格且高质量的UI界面

05/12347 浏览开发心得

因为一直在追着各种新的ai生图模型跑，所以image2上线的第一时间我就去各种测试了一下。image2的各方面能力其实并不是那么均衡，强项主要在宣传图设计和平面设计上，而UI恰恰就属于平面设计的一种。

现在嗒啦啦也是接入了image2，喜大普奔，真正可以白嫖image2生图的地方出现了！（

好了，说正题，相信看过上一期UI教程或者没看过的朋友们，在使用嗒啦啦进行制作的时候都会有一个需求，那就是——

我该怎么做出来一个好看且实用的UI界面呢？

诶，现在有了image2，就非常好搞定了！

首先，最好准备有一张会使用在项目中的角色图，用在任何界面的都行。有角色图作为参考，生成的结果在整体美术风格上会更融洽，但不是必须。

我们这里请出我正在做的零号危城中，还没实装进游戏就已经预定要被卷入末日的倒霉上班族作为演示对象。

之前跑场景氛围的时候顺便加了背景，背景不必须

将图片上传到image2，输入我们的提示词：

图一是一款PC端rpg游戏的游戏插图，请在该插图基础上，设计一套风格匹配的角色详情界面，要求：1.布局合理；2.左侧有一个角色列表；3.角色属性类别至少包括以下分类，生命值、等级、力量、体魄、灵敏、感知、智力、幸运

这里详细说明下提示词每部分的作用：

“图一时一款PC端RPG游戏的游戏插图”，这是定义图片类别和游戏类型，PC端是说明用户使用场景（需要注意的是，如果改为移动端，界面中会出现很明显的各类充值和稀有度图标；也可去掉PC端tag，直接指定画幅比例，横屏竖屏）；如果你使用的是角色立绘，请将游戏插图更改为角色立绘，其他类别图片同理。
“请在该插图基础上，设计一套风格匹配的角色详情界面”，这里是明确要使用上传图片作为UI设计的基础元素，并表明我们需求的界面类型。
“要求：1.布局合理；2.左侧有一个角色列表；3.角色属性类别至少包括以下分类，生命值、等级、力量、体魄、灵敏、感知、智力、幸运”，这部分就是我们已经明确的功能布局需求，如果当前对于功能布局还没有明确思路，可以只保留布局合理，多抽几次卡看看效果。

测试时这套tag抽了好几次卡，这里挑选两张我觉得比较不错的作为展示：

角色详情界面效果图1

角色详情界面效果图2

这时候，我们已经获得了效果不错的角色详情界面，那么我们应该如何保持自己青睐的效果图风格，获得其他功能模块的对应效果图呢？

其实也很简单，这次我们以编队界面为目标，首先将我们获得的这张UI效果图替换此前上传的角色图片，输入以下提示词：

图一是一款PC端rpg游戏中的角色详情界面，请根据该界面风格，设计一套风格匹配的编队界面，要求：1.右下角有一个探索按钮；2.左侧有一个角色列表；3.不要底部菜单栏；4.出战队伍人员上限为4名，横向排布；5.布局合理

我想经过上面的演示，这段提示词就不需要我赘述了，我们直接看生成效果：

编队界面效果图

其他的界面同理，这次就直接展示成果了：

战斗界面效果图

到这里，怎么从零获得一张效果图我们已经解决了，但是我相信不少深度使用tapmaker的用户，现在应该都已经有一套现成的UI界面了，更多是希望在当前已有UI界面的基础上进行优化迭代。

那么这种情况我们应该怎么处理呢？

其实也不难，我们这里使用牛神@小牛正在制作中的项目界面作为演示，这是他的商店界面UI：

牛神的商店界面UI

我们上传这张界面图，输入以下提示词：

分析拆解图一的界面布局，对布局进行精简优化，增强UI的设计感，生成对应布局的竖屏游戏截图，Q版画风，萌系风格，从角色到UI风格一致；布局要求：1.保留最顶部的空白区域，和顶部菜单栏中的玩家头像、昵称（TapTap玩家）和体力金币的数值显示；2.保留底部菜单栏的五个按钮内容；3.上半部分的道具格子为商店，优化其设计以突显其商店设定；4.下方道具格子为玩家背包，根据其功能添加相应的外形设计

提示词中需要明确我们要保留的UI布局和信息，提出我们需要优化迭代的部分，然后是成果展示：