《aigc+ui 交互设计》课件 第六章 原型图

第六章

原型图目录01低保真原型图02高保真原型图03原型图制作低保真原型图01在当今数字化时代背景下，产品设计已演变成一个极为复杂且精细的过程。从最初对用户需求的挖掘，到创意构思的打磨，再到功能架构的搭建，以及视觉效果的呈现，每个环节都相互交织、环环相扣。任何一个环节的疏忽，都可能导致产品与市场需求脱节、降低用户体验。在繁复的设计流程中，原型图发挥着不可替代的关键作用。它作为产品设计初期的重要工具，能够以简洁直观的方式将抽象的产品概念具象化，帮助团队成员快速梳理思路、明确方向，极大地提升了整个产品设计流程的效率与质量。一、定义

在UI设计中，低保真原型图（Lowfidelityprototype，简称Lo-Fi原型）是设计流程早期阶段的一种简单、快速且低成本的原型形式，主要用于展示产品的功能、界面布局和用户流程，通常以线框图、草图或静态图像的形式呈现，不包含复杂的视觉细节和交互，而是通过简洁的线条和基本形状来表达设计的核心结构和功能。低保真原型图是产品设计过程中的一种初步、简化的设计模型，主要用于快速表达产品的基本结构、功能布局和流程等。1.简洁性低保真原型图通常只包含了产品的基本元素，如页面布局、按钮、文本框等，不会过于注重细节和视觉效果，以最简洁的方式传达核心信息。2.快速制作因其不需要投入大量时间和精力去设计细节，所以能在短时间内快速创建出来，可帮助团队在项目初期快速验证想法、进行概念沟通等。3.易于修改由于低保真原型图相对简单，当需要对产品的功能、布局等进行调整时，能够灵活地适应项目需求的变化。二、特点低保真原型图以其简洁、高效的特性，在多个关键设计环节发挥着重要作用。1.设计构思阶段在项目起始，设计师脑海中想法众多但尚未成型，低保真原型图可快速将这些模糊概念转化为简单图示。例如，在设计一款APP初期，通过低保真原型图，设计师能迅速勾勒出首页布局，快速验证功能布局的合理性，为后续深入设计奠定基础。

2.团队创意激发在团队讨论时，由于低保真原型图制作简便，可随时修改完善，团队成员能围绕低保真原型图进行交流，不断完善设计思路。3.低成本测试环节当需要初步验证用户对产品概念的接受度时，低保真原型图因制作成本低、速度快成为首选。以一款社交小游戏为例，利用低保真原型图呈现游戏主界面、简单玩法流程，邀请少量目标用户测试，收集用户对游戏框架、基本操作的反馈，判断设计方向是否正确，避免在高成本的高保真原型制作或开发后才发现方向偏差。三、应用场景高保真原型图02一、定义

在UI设计中，高保真原型图（High-FidelityPrototype，简称Hi-Fi原型）

是接近最终产品形态的交互设计原型，具备高度细节化和真实感，能够模拟用户与界面的实际交互行为。它是设计流程中的关键阶段，通常用于测试、验证设计方案的可行性，并向开发团队或利益相关者展示最终效果。高保真原型图的特点主要体现在细节还原度、交互真实性和开发指导性上，是设计阶段接近成品的可视化表达。1.视觉高度还原高保真原型图需完整呈现UI的视觉元素，包括精确的配色、字体、图标、间距、阴影、交互动画等，甚至考虑不同屏幕尺寸的适配。并且要严格依据品牌指南或设计系统（如MaterialDesign、iOS规范）。2.逼真的交互模拟高保真原型图能够实现页面之间各种复杂且自然的跳转效果。对于界面中各种元件的交互动作，如按钮点击、文本框输入、图片切换等，高保真原型图都能进行逼真模拟。3.丰富细节展示高保真原型图会对界面中的各类元素进行细致刻画，包括元素的阴影、高光、质感等。对于产品中的复杂业务逻辑和流程，高保真原型图也能通过交互进行展示。二、特点高保真原型图凭借其高度还原的特性，在多个关键场景中发挥着不可替代的作用。1.面向客户展示在产品设计接近尾声时，高保真原型图可用于向客户、管理层等非技术人员直观展示产品最终效果，便于决策和资源协调。2.开展用户测试在进行用户可用性测试阶段，高保真原型图可通过真实场景的交互测试，发现用户体验问题并验证设计方案的可用性和用户满意度。3.开发实施当进入开发环节，高保真原型图可详细呈现每个界面元素的视觉细节，包括颜色规范、字体样式、图标尺寸等，还清晰界定了交互逻辑，确保开发出的产品与设计预期高度契合，减少开发过程中的误解与偏差，提高开发效率与产品质量。三、应用场景01准备阶段03生成界面02提示词设置04优化设计四、课堂案例——AIGC绘制高保真原型图原型图制作03一、原型图制作工具1.手绘草图

这是最常见的低保真原型表现形式之一。设计师可以使用纸笔直接绘制产品界面的大致轮廓、元素布局等，能够快速记录灵感和想法，不受软件和设备的限制，便于随时进行创作和修改，适合在创意初期快速勾勒出大致框架和思路.一、原型图制作工具2.专业原型设计工具

利用专业的原型设计工具或绘图软件，可创建以线条和几何图形为主的界面框架，明确各个元素的位置和大致范围，展示页面的结构和功能分布，如Axure、AdobeXD、Sketch等。一、原型图制作工具3.在线原型设计工具利用在线原型设计工具，可支持多人同时在线协作，方便团队成员之间的沟通和反馈，提升工作效率，如Figma、Pixso、墨刀，即时设计等。二、原型图制作流程1.前期需求梳理与项目相关的各方人员进行沟通，收集他们对产品的功能、特性、用户流程、业务规则等方面的需求和期望，并将需求转化为清晰、明确、可操作的文档，为后续的原型设计提供依据。2.规划设计明确产品的目标和定位，分析产品的主要用户群体，包括他们的年龄、性别、职业、使用习惯等特征，将产品的功能结构、信息架构、页面层级等以图形化的方式展示出来，并根据产品的定位和用户群体，确定原型的设计风格。二、原型图制作流程3.制作原型根据项目的需求、团队的技术水平和预算等因素，选择合适的原型制作工具，按照思维导图和设计规范，使用选定的工具开始创建原型的各个页面并添加交互效果。4.审核修改将制作好的原型在项目团队内部进行审核，并邀请部分目标用户对原型进行测试，根据用户测试的结果，对原型进行针对性的修改和优化。5.交付完善将最终确定的原型交付给项目相关方，并在项目开发过程中，持续跟踪原型的使用情况，收集开发团队和客户的反馈意见，及时对原型进行补充和完善，为项目的顺利进行提供支持。课后习题1.设计一款面向老年人健康管理类的App，并绘制简单的思维导图展示信息