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

022.3技能提升2.3.1任务概述项目背景运用AIGC技术为新款在线健身App绘制UI原型图。该App目标用户聚焦20～45岁群体，这类用户对健康与健身关注度高，核心诉求是便捷、高效的健身方式。App核心功能涵盖在线课程学习、个性化健身计划定制、运动数据记录与分析，以及健身成果分享、用户经验交流等社交互模块。设计目标本次UI设计以打造简洁、直观、易用且具激励性的界面为核心目标，旨在让用户快速定位所需功能，获得流畅的健身学习与社交交流体验，进而提升用户对App的满意度与忠诚度，为产品的推广落地及用户留存提供助力。目标用户：20～45岁群体核心诉求：便捷高效健身设计导向：简洁直观、易用激励2.3技能提升2.3.2使用AIGC进行需求分析

向AIGC模型提出精准问题“在线健身App应具备哪些核心功能与辅助功能，以满足20～45岁用户的健身需求”，借助模型的知识储备与学习经验，获取系统化的功能建议。模型输出的核心功能包含智能训练体系（智能训练规划、动态计划调整）、沉浸式教学系统（多视角教学视频、生物传感器联动）、精准数据管理（体态AI分析、代谢计算器）等；辅助功能涵盖社区激励机制（用户交流健身心得、健身问题答疑）、场景化训练模式（办公室微健身、旅途便携训练）、智能环境适配（气象联动、生理周期适配）等。基于上述输出结果，进一步梳理并明确App的整体功能架构，确保核心与辅助功能无重要遗漏，为后续的UI设计及产品开发工作筑牢需求基础。2.3.3运用AIGC工具进行原型图设计

使用Figma的WireframeDesigner插件、MasterGoAI或MotiffAI创建App的原型图。以MotiffAI为例，根据之前梳理的功能架构，依次创建各个页面的框架。2.3技能提升2.3.3运用AIGC工具进行原型图设计（1）打开/网站，注册并登录。进入秒多首页，点击“新建文件”，如图2-37所示。图2-37选中新建文件2.3技能提升2.3.3运用AIGC工具进行原型图设计（2）进入操作界面，点击工具栏AI工具，并选中“AI生成UI”，如图2-38所示。图2-38选中AI生成UI2.3技能提升2.3.3运用AIGC工具进行原型图设计（3）在弹出的“AI生成UI”面板中输入提示词即可。提示词通常含目标客户、应用类型、页面名称以及设计目标等内容。输入提示词“一个名为CORE的在线健身App，面向20～40岁关注健康的群体，核心功能包括智能训练体系（智能训练体系、动态计划调整）、沉浸式教学系统（多视角视频、生物传感器联动）、精准数据管理（体态AI分析、代谢计算器）等；辅助功能包括社区激励机制（用户交流健身心得、提问解答）、场景化训练模式（办公室微健身、旅途中训练）、智能环境适配（气象联动生理周期适配）等，帮我生成该App首页，底部标签栏包括首页、计划、数据、社区、我的”。输入后点击“生成”，等待页面生成，如图2-39所示。图2-39界面生成中2.3技能提升2.3.3运用AIGC工具进行原型图设计（4）页面生成后，可通过工具栏进行字体设置、页面布局、绘制图案等，如图2-40所示。图2-40界面生成2.3技能提升2.3.3运用AIGC工具进行原型图设计（5）页面导出可编辑模式。选中要导出的页面，点击右下角“导出”，并选择SVG格式导出，如图2-41所示