《UI设计-AIGC驱动赋能界面完美设计》课件 5.3 技能提升

055.3技能提升UI设计——AIGC驱动赋能界面完美设计5.3.1任务概述15.3.1

任务概述

运用AIGC工具制作生鲜主题Banner，画面需展示新鲜的水果、蔬菜、肉类或海鲜，要求图像清晰、色彩鲜艳，精准突出产品细节（如果蔬的纹理质感）；标题设计需醒目吸睛、简洁有力，同时在画面中明确呈现具体的折扣信息与活动时间。5.3.2运用AIGC生成设计元素根据任务要求和工作流程，首先将合适的生鲜图片通过豆包AI生成描述词，接着使用LiblibAI或即梦AI生成设计元素，最后在PS或Figma中调整细节和排版。（1）打开豆包AI，输入生鲜图片的同时提出要求“描述一下这张图，生成一段描述词，用于AI文生图”，如图5-63所示。图5-63输入要求5.3技能提升5.3.2运用AIGC生成设计元素2（2）打开liblibAI在模型广场选择合适的3D模型加入模型库，选择在线生成，如图5-64所示。图5-64liblibAI首页5.3技能提升5.3.2运用AIGC生成设计元素3（3）继续选择其他模型，并加入模型库供选择。添加完毕后选择在线生成功能，如图5-65所示。图5-65选择在线生成5.3技能提升5.3.2运用AIGC生成设计元素4（4）选择大模型，选择文生图，输入豆包生成的提示词，稍作修改“一个装满新鲜蔬果的绿色购物袋，袋内有红彤彤的西红柿、翠绿的和香蕉、紫润的葡萄、橙黄的南瓜、火红的甜椒等，背景是淡蓝色”，如图5-66所示。图5-66选择文生图、输入描述词5.3技能提升5.3.2运用AIGC生成设计元素5（5）在我的模型库选择模型，如图5-67所示。图5-67选择模型5.3技能提升5.3.2运用AIGC生成设计元素6（6）选择好模型之后，回到生图窗口，设置调整参数设置模型强度，填写采样方法、迭代步数、设置尺寸、图片数量，如图5-68所示。图5-68设置参数5.3技能提升5.3.2运用AIGC生成设计元素7（7）点击“开始生图”，等待生成图片，如图5-69所示。下载需要的图，并配合PS工具或即梦AI工具完成图像的抠图。图5-69生成效果5.3技能提升5.3.2运用AIGC生成设计元素8（8）接下来将生成后的设计元素进行排版优化。打开Figma，新建大小为393×180的画框，并将图片粘贴进Figma，如图5-70所示。图5-70新建画框5.3技能提升5.3.2运用AIGC生成设计元素9（9）将图片拖拽进画框内，并设置水平翻转，如图5-71所示。图5-71水平翻转5.3技能提升5.3.2运用AIGC生成设计元素10（10）设置渐变背景色，选择填充（fill）线性渐变（linear），如图5-72所示。图5-72渐变填充5.3技能提升5.3.2运用AIGC生成设计元素11（11）使用文字工具T，输入“四月外卖季果蔬享半价”，设置字号、字重、字色。给字体进行描边处理（stroke）设置描边粗细为4，连接处设置圆角。如图5-73所示。图5-73设置文本5.3技能提升5.3.2运用AIGC生成设计元素12（12）继续完成文字的添加，效果如图5-74所示。（13）适当添加装饰元素，完成最终Banner的制作，效果如图5-75所示。图5-74添加文本5.3技能提升图5-75最终效果巩固测练13巩固测练一、选择题1.以下关于登录注册页面设计的说法，正确的是。A.为了简洁美观，无需设置密码强度提示B.注册页面应包含用户协议勾选框，保障合规性C.仅需提供手机号登录方式即可D.忘记密码功能可有可无2.在设校缘通pp首页时，以下哪种做法有利于提升用户体验？A.将所有功能图标无序排列B.采用复杂动画效果，增加视觉冲击力C.根据用户使用频率对功能模块进行优先级排序D.不设置搜索功能，避免界面杂乱3.关于AIGC在界面设计中的应用，下列表述错误的是。A.可以快速生成多种风格的设计元素B.生成的元素可直接应用于项目，无需任何修改C.能辅助设计