下载掌阅APP，畅读海量书库
立即打开
每款产品都是在不断的迭代更新过程中成长起来的，升级提示类弹窗是App中必不可少的一种信息提示方式，尤其是在每一次大的升级改版情况下。
在设计中，如果用一种图形化的元素来表达出升级的含义，那么最具有代表性的图形应该就是火箭了。很多产品都会使用火箭元素来表示升级的含义，搭配上简练的提示文案，一个生动有趣的弹窗能第一时间吸引用户的注意力。那么如何借助AI来快速完成升级弹窗的设计呢？一起来看看下面这个完整的设计流程。
第一步，分析页面构成。
在开始设计之前，需要先了解升级弹窗是由哪些元素构成的。通过整理分析现有的设计能够发现，弹窗的构成元素主要由主体火箭形象、升级提示文案和更新按钮三部分组成。其中升级文案和按钮相对固定，没有太多需要设计的地方，所以主体火箭形象是整个弹窗中最重要也是最容易出效果的元素。
明确弹窗设计的关键点之后，就可以借助Midjourney来出图了。
考虑到每个产品都有自己特定的风格，本次的弹窗设计实践案例将保持主题不变，借助AI生成三种不同风格的火箭形象（扁平风格、轻拟物风格、3D写实风格），以此来满足更多的使用场景。
第二步，文本描述。
按照“主体描述+风格设定+图像参数”的描述词结构，首先提炼出主体和动作：一个火箭正在空中飞行（a blue rocket is flying in the air）。其次，归纳一些扁平风格中较为通用的文本描述，如扁平风格（flat style）、极简设计（ Minimalist design）。另外，生成的图片素材最好能有白色背景（white background），方便后期直接应用到设计中。最后，将上面提到的文本描述整理汇总。
完整文本描述示例如下：
a blue rocket is flying in the air, in the style of soft and rounded forms, light blue and silver, Minimalist design, white background, flat style, GUI --niji 5
第三步，扁平风格出图。
为了让图片风格更准确，本次采用垫图+文生图的方法进行出图。在AI出图时，利用垫图不仅能让生成的图像更可控，还更容易达到预期效果，快速提升效率。我们先借助设计素材网站找一些扁平风格的设计图作为垫图参考，如下图所示。
将参考图上传到Midjourney中获取URL链接，作为垫图使用。加上垫图链接的完整文本描述为：
https://s.mj.run/1HfTg-MRT8g a blue rocket is flying in the air, in the style of soft and rounded forms,light blue and silver, Minimalist design, white background, flat illustration, GUI --niji 5
文本描述明确后，输入/imagine指令，输入“垫图链接+文本描述”来生成图片。扁平风格的生成效果如下图所示，能够看到火箭的风格和色彩基本符合参考图的效果。
此外，火箭的造型是否饱满、结构是否准确、比例是否合适等细节是需要重点关注的问题，也是决定页面效果的关键。我们可以单击刷新按钮，多跑几组类似的图，来筛选出没有瑕疵的素材图。
第四步，轻拟物风格及3D写实风格出图。
扁平风格的火箭素材图生成之后，接着生成轻拟物风格的图像。相较于扁平风格的火箭，轻拟物风格的火箭细节更多一些，物体表面的光影、质感、透视等效果都是扁平风格的元素所不具备的。
所以在轻拟物风格的文本描述中，我们需要去掉“flat style”这个决定图片扁平风格的描述，修改后的描述如下：
a blue rocket is flying in the air, in the style of soft and rounded forms, light silver and blue, Minimalist design, white background --niji 5
之后重复进行上面提到的出图步骤，先整理一些轻拟物风格的火箭参考图，如下图所示，上传到Midjourney中作为垫图使用，避免生成的图片效果跑偏太严重。接着输入“垫图链接+文本描述”来生成图片。
轻拟物风格的生成效果如下图所示，在风格满足要求的情况下仍需要重点关注火箭的造型是否准确。
接下来继续生成3D写实风格的火箭图片，这里教给大家一个特别简便的方法：保持轻拟物风格的文本描述不变，把出图的模型从Niji5调整为V5模型，这样生成的图片效果就会更写实。文本描述为：
a blue rocket is flying in the air, in the style of soft and rounded forms, light silver and blue, Minimalist design, white background --v 5.2
此外，生成写实风格的图片时不需要垫图，直接利用文本描述出图即可，3D写实风格图像如下图所示。
第五步，图片筛选及设计排版。
三种风格的图片全部生成后，需要从这些图中分别筛选出效果好且符合要求的火箭图片。有背景的图还需要把背景去除，只保留火箭的主体形象。
三种图片素材都处理好之后，就可以导入设计软件中进行弹窗的设计。根据前面对弹窗构成的总结，接下来把火箭主体形象、弹窗文案和升级按钮组合在一起进行排版。由于我们是用火箭来表示升级，因此可以在画面中加入云层，营造出火箭突破云层的效果，进一步来强化弹窗氛围。一个扁平风格的升级弹窗就设计完成了。
为了能更清晰地看到三种风格之间的对比，在本次的升级弹窗设计中，我们采用统一的更新文案，只对弹窗中的火箭元素进行替换。
依次将轻拟物风格的火箭和写实风格的火箭替换到弹窗中，统一调整火箭的倾斜角度和比例，轻拟物风格、3D写实风格的升级弹窗就设计完成了。
弹窗设计完成后，再加上手机样机模型，将设计好的弹窗放到手机上预览效果。通过下面的对比图能看到，虽然三个弹窗的主题和文案都是一样的，但三种不同的风格仍然能为弹窗带来差异化的视觉效果。
在实际工作中，我们可以举一反三把上面讲到的弹窗出图和设计方法，灵活运用到更多的设计场景中。