3.2.3　结果反馈弹窗

在产品设计中，反馈型弹窗也是重要的设计对象之一。反馈结果是否及时、准确，与用户的产品体验息息相关，进而影响到产品的用户留存。

结果反馈弹窗顾名思义，是告知用户结果的弹窗。反馈结果既有可能是正向的提示，也有可能是负向的注意事项。正向的反馈很容易理解，例如告知用户得到了某些福利或机会，氛围会愉悦。负向的反馈往往伴随着遗憾或失败，所以在设计时可以考虑使用一些情感化的设计来减轻用户的失落感。

对结果反馈弹窗有了基本的认识后，接下来就进入设计实践环节。假如我们接到需求。为一款年轻化社交App设计一套结果反馈弹窗，反馈结果包括任务已超时、机会已用完和账号已锁定，那么我们应该怎样着手进行设计呢？

第一步，反馈结果设计解析。

老规矩，先思考再设计。面对这三个反馈提示，在正式开始设计前我们要先考虑清楚这些反馈提示是在哪些场景中出现。此外，还要思考这些反馈结果能否用具体的图形化元素展现出来，确保反馈结果清晰易懂。

设计思考过程中，可以利用头脑风暴、浏览设计网站等方法发散想法、搜集素材和灵感。回到需求中，我们对这三个反馈结果进行设计解析，解析结果如下。

任务已超时：重点体现时间概念，用时钟、沙漏等图形表示；

机会已用完：重点体现机会，用摇骰子、翻卡等图形表示；

账号已锁定：重点体现锁定的概念，用锁头图形来表示。

通过这样的设计解析，每种反馈结果都有了具体的图形来表达含义，有了图形化的元素就可以利用Midjourney来出图了。

第二步，文本描述。

首先用沙漏代表任务已超时作为示例来进行演示，按照“主体描述+风格设定+图像参数”的描述词结构，主体部分就是沙漏图标，再依次补充主体的属性和材质、想要的出图风格以及图像的质量等描述，整理得到的文本描述如下表所示。

完整的英文描述如下：

An hourglass icon, light sapphire blue and light green, glass, transparent, ui design, isometric, white background, studio lighting, 3D, C4D, OC render, Dribbble, Behance, high detail, 8k --niji 5

第三步，AI出图。

在Midjourney中输入整理好的文本描述，生成的沙漏效果如下图所示。因为这次也是直接采用文生图的方法，所以最好多跑一些图，直到生成造型、颜色和质感符合要求的图像。如果在出图过程中，生成的图片和预期效果差别很大，可以修改文本描述或者调整文本描述之间的顺序，反复尝试几次，得到的图片效果会有很大的差别。

沙漏素材生成之后，按照刚才的文本描述，把主体部分沙漏（hourglass）依次替换为骰子、锁，再继续生成其他的图形素材。

首先将主体描述沙漏（hourglass）替换为骰子（dice），得到的文本描述为：

A dice icon, light sapphire blue and light green, glass, transparent, ui design, isometric, white background, studio lighting, 3D, C4D, OC render, Dribbble, Behance, high detail, 8k --niji 5

骰子出图效果如下图所示。

再将主体描述替换为锁（lock），得到的文本描述为：

A lock icon, light sapphire blue and light green, glass, transparent, ui design, isometric, white background, studio lighting, 3D, C4D, OC render, Dribbble, Behance, high detail, 8k --niji 5

锁出图效果如下图所示。

第四步，图片筛选及设计排版。

代表不同结果的三种图像全部生成之后，还需要对这些图进一步地筛选，选出效果相对较好的三张图，如下图所示。将筛选好的图放到去背景软件中去除背景，作为备用。利用这套文本描述生成的图片，颜色上很统一，这样更方便后期进行设计应用。

筛选好图片素材后，下面先以任务超时弹窗为例，对弹窗进行设计合成。依次将生成的沙漏图形、提示文案和操作按钮导入设计软件中进行合成排版。考虑到设计对象是一款年轻化的产品，因此在弹窗外形可以加入一些个性化的设计，比如将弹窗设计成书签的样式，以此增加弹窗的趣味性和活泼感。在设计合成时，如果觉得沙漏图形比较单调，可以为沙漏添加投影和环绕线条等装饰元素，进一步丰富画面。

最后为文案添加蓝紫色的渐变，为按钮添加橘红色的渐变，让两部分内容形成对比，这种颜色上的对比能让整个弹窗看起来更加吸引人，避免出现画面单调的情况。经过这样的设计思考和排版合成，一个任务超时弹窗就设计完成了。

按照这个设计合成思路，将筛选好的另外两个图片素材导入设计软件中，为了保持一致性，整套弹窗使用相同的设计排版。分别将弹窗中的主体图形进行替换，为每个图形搭配对应的结果反馈提示文案，最后加上操作按钮，一套结果反馈弹窗就设计完成了。

整套弹窗设计好之后，将弹窗添加到手机模型中，快速预览弹窗在真实页面中的应用效果，如下图所示。在预览时，我们能清晰地对比已经合成好的弹窗，确保整套弹窗颜色风格保持统一，弹窗中的主体图形保持相同的大小比例，让整套弹窗看起来更和谐。 zZ0bygEde5HjQK9tc28Kr9xbli+R8SkN3w9nylVy2RI3+RW3Ayt7tPB/k1XBPdA5