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

044.3技能提升UI设计——AIGC驱动赋能界面完美设计4.3

j技能提升4.3.1

任务概述运用AIGC完成“轻居生活”App引导页的设计与制作。“轻居生活”App致力于打造一站式家居改造服务平台。通过整合户型设计模拟、家居单品搭配、3D虚拟家装、环保材料推荐、社区案例分享等功能，降低家居改造门槛，让用户轻松实现个性化设计。引导页总体视觉风格，采用清新自然的莫兰迪色系为主色调，搭配明亮的点缀色，营造出温馨、舒适且充满活力的氛围。整体风格简约现代，融合北欧风格与日式极简美学，运用大量留白和柔和的圆角矩形、线条元素，弱化界面的边界感。4.3

j技能提升4.3.2运用AIGC生成设计元素

根据项目背景和视觉设计风格，细化引导页的页面结构与内容。以第一页为例，画面结构展示阳光洒进干净整洁、布置温馨的书房场景，家具简约时尚，绿植点缀其间，画面右上角用优雅的字体显示App名称“轻居生活”。文案是“轻居生活，让家的焕新触手可及”。（1）打开liblibAI，在首页搜索模型，“flux_微距摄影-微缩盲盒-微观景观_1flux_微距摄影-微缩”，选择模型如图4-121所示。（2）进入模型详情页，选择加入模型，注意该模型的触发词，点击“立即生图”，如图4-122所示。图4-121选择模型图4-122模型详情页4.3

j技能提升4.3.2运用AIGC生成设计元素（3）根据触发词，填写提示词“微距摄微型盲微景观，书房场景，包含沙发、书桌、书柜、落地灯、窗户，马卡龙配色方案，圆形底座，圆形墙壁”，设置高度和宽度，点击“开始生图”，如图4-123所示。（4）生成后的图片保存并下载，如图4-124所示。图4-123输入提示词图4-124下载页面4.3

j技能提升4.3.2运用AIGC生成设计元素（5）打开即梦AI，选择“智能画布”，如图4-125所示。（6）选择“上传图片”，如图4-126所示。图4-125选择智能画布图4-126上传图片页面4.3

j技能提升4.3.2运用AIGC生成设计元素（7）继续选择抠图，得到主题物，并点击“完成编辑”，如图4-127所示。（8）导出下载图像，如图4-128所示。图4-127完成抠图编辑图4-128导出下载4.3

j技能提升4.3.2运用AIGC生成设计元素（9）运用即梦AI继续生成文本字体“轻居生活，让家的焕新触手可及”。选择文生图，输入描述词“字体设计轻居生活，让家的焕新触手可及。字体设计简洁，背景简单，不要图案”，其他参数设置如图4-129所示。（10）生图完成，还可以继续调整描述词再次生成。选择喜欢的字体设计，完成抠图，导出PNG格式并下载。（11）接下来在Figma中进行引导页的制作，打开Figma，选择画框工具，选择大小为iPhone16的画框，并将画框命名为“引导页-1”，如图4-130所示。图4-129设置参数图4-130新建画框4.3

j技能提升4.3.2运用AIGC生成设计元素（12）将生成的图片和字体复制粘贴进Figma中，并拖入画框引导页-1内，如图4-131所示。（13）选择引导页画框，点击右边Fill填充背景色，选择渐变填充，得到效果如图4-132所示。图4-131导入素材图4-132填充渐变4.3

j技能提升4.3.2运用AIGC生成设计元素（14）使用蒙版去掉黑色文字部分。新建灰色形状，将文字部分置于上方，如图4-133所示。图4-133新建灰色形状图4-134使用蒙版4.3

j技能提升4.3.2运用AIGC生成设计元素（15）灰色形状和字体层，鼠标右键选择蒙版“useamask”，如图4-134所示。整体优化调