AIGC辅助图标设计面向人工智能的UI界面设计86课件讲解.pptxVIP

面向人工智能的UI界面设计UIDesignforArtificialIntelligenceAIGC辅助图标设计主讲人：聂佳龙

AI-orientedUIDesign面向人工智能的UI界面设计

AIGC辅助图标设计

学习目标知识目标理解AIGC生成静态图标和动态图标的核心原理，明确两种图标设计的需求要素与技术规范；能力目标能够了解主流AIGC工具（如即梦AI、MidJourney等）完成静态、动态图标的生成、筛选与精修，适配校园APP等实际场景；素质目标培养严谨的设计思维，注重图标设计的功能性与美观性平衡；树立规范意识，遵循平台设计规范与行业标准；提升创新能力，在图标风格与动效设计中融入符合产品定位的创意元素。

静态图标是无动画效果的图标，是用户界面中用于传达特定功能、内容或操作的简洁图形符号，是UI设计中最常用的类型。

静态图标核心目标：是降低用户理解成本，提升界面的美观度和可用性。

静态图标如按钮、开关，支持用户与界面互动；01.交互性图标如节日主题图标，增强设计风格；02.装饰性图标如金刚区图标，解释功能或内容。03.说明性图标从功能分类来看

用线条粗细、端点类型设计，适用于简洁界面；视觉表现力强，用于主要功能；结合线与面，设计难度较高；通过文字表达语义，适用于特殊功能。静态图标01.线性图标在表现形式上02.面性图标03.线面结合图标04.文字图标

高识别性统一性简洁性

静态图标功能定位风格定位技术参数前期准备：明确图标设计需求，在使用AIGC前，需先明确3个核心需求。

静态图标功能定位是图标对应“接收通知”功能；风格定位采用哪种风格？如线性、面性，需匹配整体设计语言；技术参数包括尺寸、格式、色彩。避免AI生成无方向、难复用的图标。

静态图标选择支持“矢量风格生成”、“细节控制”的AIGC工具，如即梦AI，适合新手；MidJourney，适合高质量生成；FigmaAI插件，适合实时协同。01.按“功能+风格+形态细节+色彩+技术参数”构建精准提示词，避免模糊描述；02.调整生成参数，分辨率选1024×1024px，便于后续裁剪，风格强度设为“高”，一次生成4至8张，便于筛选；03.从风格匹配度、形态准确性、细节完整性的筛选，保留2至3张符合要求的初稿。04.

后期精修将AI初稿转为专业图标，AI生成的图标多为PNG位图，需通过传统设计软件精修，确保符合行业规范，将筛选后的图标导入专业的图片处理软件，通过去除背景、图标背景透明，色彩纯度提升、金属质感强化、质感统一和纯净度修复等来进一步提升图标的质量。32×32像素PNG用于移动端导航栏48×48像素的适合平板端1024×1024px适合素材库备份静态图标按需求调整线条粗细、圆角半径，最后按不同场景导出对应尺寸与格式。

动态图标是含简单动画效果的图标，通过动画效果来增强用户交互体验的图形元素。

静态图标动态图标它不仅能吸引用户注意力，还能更直观传达功能状态或操作反馈，增强界面交互感。如含呼吸、旋转、渐变等的图标，常用于校园APP消息提醒、新通知的动态图标。作用：通过旋转、缩放、填充等运动效果提升交互性和趣味性，比如导航栏图标选中时从线性变面性，加载动画用形状变化吸引用户等待。

功能性一致性简洁性

动态图标调整颜色、大小、透明度等，如选中图标从灰色填品牌色；01.属性转换法拆分、重组图标路径，如线性变面性；02.路径重组法遮罩法用图形做边界实现形状转换，分裂融合法适用于多部件图标。03.遮罩与分裂融合法设计方法

绘制素材：先设计默认状态（线性）和选中状态（面性）的静态图标。01设置动效：在Figma或AE中通过关键帧定义属性变化，如位置、颜色等。02测试与优化：确保动效流畅且适配不同设备，避免性能问题。03设计流程动态图标

动态图标AIGC生成动态图标的流程在静态图标的基础上，增加动效描述与动效导出环节，通过结合设计原则与工具，动态图标能有效提升用户体验，同时需注意动效的合理性与性能优化。

动态图标动效目的动效类型技术限制1.明确动态图标需求，动态图标需避免“过度动画”导致用户视觉疲劳，如闪烁、快速旋转。实操步骤

动态图标动效文件的大小需≤50KB，以避免影响APP加载速度，格式优先选择Lottie，支持矢量动画，适配多终端。传递什么信息？如消息图标呼吸动效传递的是新消息提醒。选择简洁动效，如呼吸、旋转、渐变、位移，呼吸是指透明度变化，旋转控制转动的缓慢，渐变调节色彩过渡，位移是指上下左右的浮动。动效目的动效类型技术限制

动态图标2.AIGC生成动态图标。实操步骤选择支持动态图标专项生成的工具，如制作一