5.5 AIGC辅助互联网产品原型设计

PRODUCT互联网产品原型设计主讲人：马胜铭时间：20265-5

AIGC辅助互联网产品原型设计使用AIGC绘制原型草图使用AIGC辅助原型设计01使用AIGC绘制原型草图AIGC辅助互联网产品原型设计应用场景使用AIGC绘制原型草图Deepseek创意构思1设计概念生成2用户故事与场景模拟3即梦AI快速绘制草图1线框图制作2实践操作案例1：使用Deepseek+即梦AI进行高校图书馆小程序原型草图的绘制使用AIGC绘制原型草图苏信图书馆目前准备开发一款线上借书和座位预定的小程序，产品经理Salmon想通过借助AIGC工具帮助提供一些设计灵感，并辅助绘制原型草图，从而方便后续进行分享汇报使用。任务情境实践操作案例1：使用Deepseek+即梦AI进行高校图书馆小程序原型草图的绘制使用AIGC绘制原型草图步骤一：进入Deepseek官网进行提问。如图所示。（1）让Deepseek提供原型设计结构创意实践操作案例1：使用Deepseek+即梦AI进行高校图书馆小程序原型草图的绘制使用AIGC绘制原型草图步骤二：进行提问（1）让Deepseek提供原型设计结构创意在输入框中，输入提示词：作为资深的互联网产品设计经理，需要为江苏信息职业技术学院设计一款图书馆借书和座位预约的小程序，请为小程序设计开发功能界面。生成结果如下：实践操作案例1：使用Deepseek+即梦AI进行高校图书馆小程序原型草图的绘制使用AIGC绘制原型草图步骤一：继续进行提问（2）将上述提供的建议界面转化成即梦AI可用的提示词在输入框中，输入提示词：现在你准备各个功能模块的描述，利用即梦AI生成原型草图，请你针对图书借阅系统的首页、图书详情页页面、座位智能选座系统页面的描述，将描述转化为即梦AI生图的提示词。生成结果如下：实践操作案例1：使用Deepseek+即梦AI进行高校图书馆小程序原型草图的绘制使用AIGC绘制原型草图步骤一：进入登录即梦AI官网。（3）利用即梦AI进行草图生成在即梦官网选择“图片生成”功能，选择合适的尺寸和分辨率。此处选择默认的1:1比例、标清，如图所示。实践操作案例1：使用Deepseek+即梦AI进行高校图书馆小程序原型草图的绘制使用AIGC绘制原型草图步骤二：进行提问（3）利用即梦AI进行草图生成在输入框中，将上文生成的提示词一个个粘贴到对话框：手绘线稿草图,图书馆小程序首页,低保真线框单色线条,无背景--顶部：搜索栏（左侧放大镜图标+"搜索图书/座位"占位文字）--中部：4个功能入口大按钮（扫码借书图标+文字、图书检索图标+文字、座位预约图标+文字、我的借阅图标+文字），2x2网格布局--下方：功能区标题"热门推荐"+横向滚动3个图书卡片（简笔画封面占位块+书名标签）--底部：Tab栏（首页/发现/个人中心图标+文字）组件带手写标注，线条轻微抖动感，留白30%。实践操作案例1：使用Deepseek+即梦AI进行高校图书馆小程序原型草图的绘制使用AIGC绘制原型草图步骤三：即梦生成的结果如下（3）利用即梦AI进行草图生成即梦默认会生成4个效果图，如图所示，可以根据生成的效果图选择一个合适的草图进行保存。参照上边的两个步骤，依次将图书详情页和智能选座系统的提示词输入即梦AI的对话框，生成效果图。最后选择合适的效果图。02使用AIGC辅助原型设计AIGC辅助互联网产品原型设计应用场景使用AIGC辅助原型设计摹客快速生成低保真原型图1借助摹客的AI功能，产品经理或设计师只需输入产品基本需求、功能结构等关键信息，即可快速生成低保真原型图。这为设计团队提供了初始框架，大大节省了从空白页面开始构思和绘制的时间成本，提高了设计的启动效率。智能布局与元素推荐2摹客能够根据产品类型和用户需求，智能推荐合理的页面布局方案以及常用UI元素。它基于大量的设计数据和模式识别，为原型设计中的界面排版、元素选择提供参考建议，帮助设计师设计出更符合用户体验和设计规范的低保真原型，提升原型的专业性和可用性。实时协作与反馈3在低保真原型图制作过程中，团队成员可以通过摹客平台进行实时协作。产品经理、设计师、开发人员等不同角色能够同时查看和编辑原型图，随时添加注释、提出修改意见。实践操作案例1：使用慕客AI辅助制作高校图书馆小程序使用AIGC辅助原型设计苏信图书馆平台希望根据规划的图书馆小程序原型，设计低保真原型，以便后期能够更好地和开发人员及用户分享。通过前期的规划和构思，预计设计以下几个功能页面。1.图书借阅系统页面：包含智能搜索、一键借阅、图书详情页、个人借阅管理等。2.座位智慧预约页面：包含3D楼层导航、智能选座系统、时段化预约动态签到机制等。3.学术支持中心：包含教材教参专区、考证资料库、论文支持等。4.校园学习生态：包括学习计时器、失物招领平台、活动日历等。任务情境实践操作案例1：使用慕客AI辅助制作高校图书馆小程序使用AIGC辅助原型设计步骤一：进入慕客平台（1）借助慕客AI完成低保真原型的制作实践操作案例1：使用慕客AI辅助制作高校图书馆小程序使用AIGC辅助原型设计步骤二：注册登录慕客，新建项目（1）借助慕客AI完成低保真原型的制作进入慕客工作台后，新建项目，选择合适的画板尺寸。此处将项目命名为“苏信图书馆”、选择“380x844”的画板尺寸，如图所示。实践操作案例1：使用慕客AI辅助制作高校图书馆小程序使用AIGC辅助原型设计步骤三：借助小慕AI进行原型制作（1）借助慕客AI完成低保真原型的制作通过小慕AI中的“智能原型”功能，进行原型制作，如图所示。实践操作案例1：使用慕客AI辅助制作高校图书馆小程序使用AIGC辅助原型设计步骤四：给出智能原型的描述词（1）借助慕客AI完成低保真原型的制作在对话框中输入提示词：风格简洁的图书馆借书页面，包含扫码借书、图书检索、座位预约、我的阅读，热门推荐等。小慕AI根据用户输入的提示词完后借书页面的制作实训练习AIGC辅助互联网产品原型设计实训背景校园生活服务APP旨在为在校师生提供一站式的生活服务解决方案。它整合了校园资讯、活动报名、失物招领、校园维修、校内导航等功能，致力于提升师生在校园内的生活便利性和信息获取效率。随着移动互联网的发展，校园信息化建设的推进，开发一款符合校园用户需求的生活服务APP具有重要意义，能够增强校园服务质量，促进师生之间的互动交流。01实训要求1.学生分组进行实训，每组4-5人，模拟互联网产品开发团队，负责完成校园生活服务APP的原型设计与相关任务。2.使用AIGC技术（如DeepSeek、即梦AI等）完成APP各个页面的描述和原型草图绘制，为低保真原型制作提供创意和基础。3.依据草图，利用摹客AI制作校园生活服务APP的低保真原型，涵盖首页、活动报名页面、失物招领页面、校园维修页面、校内导航页面等主要功能模块。4.提交实训汇报PPT，完成小组汇报PPT（8-10页），需展示AIGC工具使用过程与最终的作品。02练习：苏信校园生活服务APP低保真原型设计实训思路利用AIGC工具生成创意和草图（1）通过DeepSeek获取创意灵感，输入产品目标、用户需求等关键信息，获取关于校园生活服务APP的创意构思、设计概念描述、用户故事与场景模拟等，为原型设计提供多样化的思路和方向。（2）基于DeepSeek提供的创意，使用即梦AI的绘图功能，快速绘制APP原型的草图。在绘制过程中，明确各页面的布局结构、元素位置、操作流程等关键要素，为后续低保真原型制作奠定基础。2.使用摹客AI制作低保真原型（1）借助摹客AI的智能原型功能，逐步构建APP的低保真原型。将草图中的页面布局和元素转换为摹客AI中的低保真组件，实现各页面的基本结构和布局。（2）在摹客AI中，完善页面间的交互逻辑和导航关系，确保低保真原型能够清晰地展示APP的操作流程和功能架构。3.优化与完善低保