项目五 设计产品原型

设计产品原型《互联网产品开发》项目五

项目导读完成了产品规划后，就可以设计产品原型了。通常产品经理会制作低保真原型图，将想法传达给设计师、前端工程师、开发工程师和测试工程师，进而产出产品需求文档。如何绘制产品原型图？如何制作交互效果？本项目将对以上内容进行详细讲解。教学目标1.了解原型设计的概念。2.了解低保真原型图。3.理解产品需求文档。1.掌握Axure绘制原型图的方法。2.能够绘制出低保真产品原型图。3.能够撰写产品需求文档。1.具有较强的动手能力和软件操作能力，能够绘制出产品原型图。2.具备较强的设计思维和美学思维，能够对产品原型视觉效果有一定创意。3.遵守《中华人民共和国电子商务法》《中华人民共和国反不正当竞争法》等相关法律法规，在进行产品原型设计时不侵权不抄袭。知识目标技能目标素质目标任务导航任务一了解原型设计任务二

做好低保真原型设计前的准备任务三

设计低保真原型项目小结

过关测试拓展阅读任务四

撰写产品需求文档

子任务导航01了解原型设计的概念02熟悉主流的原型设计软件03了解原型设计的优点1.了解原型设计的概念原型设计是在进行设计和开发之前，通过效果图来模拟产品的视觉效果和交互效果。原型设计需要综合考虑产品目标、功能需求场景、用户体验等因素，将页面模块、各种元素进行排版和布局，获得一个页面的草图效果。12为了使效果更加具体、形象和生动，还可以加入一些交互性的元素，模拟页面的交互效果。3（1）原型图分类保真度意味着原型的外观和行为与最终产品相似程度。原型的制作通常是从低保真开始，并逐渐提高到高保真的水平，直到大部分假设都经过验证和修正。低保真原型01草图线框图中保真原型02可点击的原型编码原型高保真原型03高度仿真可以交互1.2熟悉主流的原型设计软件原型图领域最常用的工具，有着丰富的交互设计功能，可创建各种高保真、低保真的交互原型图，产品经理能够快速创建可交互的原型，并与团队成员进行协作。（1）Axure软件Figma是一款基于云的协作设计工具，具有强大的界面设计和原型设计功能。Figma允许多个用户实时协作，无论是在同一团队，还是远程工作。可以在其中创建和编辑矢量图形、布局设计和交互原型。1.2熟悉主流的原型设计软件（2）Figma软件Pixso是一款对标Figma的国产在线设计协作工具，与Figma一样，集原型、UI、交互、设计交付、资源管理等众多功能于一身，可用于产设研跨部门的协作流程，打通不同部门间原先不得不使用多款软件的壁垒。1.2熟悉主流的原型设计软件（3）Pixso软件BalsamiqMockups是美国加利福利亚的Balsamiq工作室（2008年3月创建）推出的原型图绘制软件。Balsamiq希望尽量给用户，即UX/UI设计师，产品经理和开发工程师，一种近似于直接使用笔和纸绘制原型草图的体验。使用BalsamiqMockups画出的原型图都是手绘风格的图像，看上去美观、清爽1.2熟悉主流的原型设计软件（4）BalsamiqMockups软件墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。同时，墨刀支持团队协作，项目成员可以协作编辑、审阅。1.2熟悉主流的原型设计软件（5）墨刀软件Visio也是一款采用拖拽方式绘制原型图的软件。1.2熟悉主流的原型设计软件（6）Visio摹客是一个集原型设计、UI设计、设计规范管理、云端协作于一体的平台，支持产品经理、UI设计师、前端工程师等多角色的高效沟通和创作。摹客拥有海量组件图标、丰富交互动效、矢量编辑、资源复用等功能，帮助用户实现设计创意落地，提升团队协作效能。1.2熟悉主流的原型设计软件（7）摹客1.3了解原型设计的优点原型可以将网站或App的基本框架或者模型展示给用户或者团队成员，方便大家理解产品的基本外观和运作机制。更加直观地感受产品减少由于规划不足而造成的反复修改添加评论和链接，提高沟通效率，更好地版本管理0102提高产品设计的工作效率03促进高效沟通和版本修订任务导航任务一了解原型设计任务二

做好低保真原型设计前的准备任务三

设计低保真原型项目小结

过关测试拓展阅读任务四

撰写产品需求文档

子任务导航01完成需求描述02明确设计思路2.1完成需求描述利用AxureRP11绘制Keep低保真原型，主要包括3个方面。母版01（1）绘制Keep的底部标签导航栏母版，并且将母版将其添加到“首页”“课程”“商城”“我的”“运动”5个页面中。课程推荐02（2）绘制“Keep-课程-推荐”界面，其中训练主题标签组支持左右滑动效果，课程内容展示区支持上下滑动效果。身体评估03（3）绘制“身体评估”界面，支持上下滑动效果2.2明确设计思路(1)进行页面布局，需要用到文本标签、矩形1、占位符、横线、图片、动态面板等元件。

(2)在设计底部标签导航栏时，需要把底部标签导航栏设计成母版，这样设计一次，在页面里可以直接使用，避免重复制作和重复添加交互效果。(3)界面内容的上下滑动效果和左右滑动效果需要使用两个动态面板元件，一个用来外展控制显示区域，另一个用来添加拖动效果，以实现界面内容上下滑动效果或者左右滑动效果。任务导航任务一了解原型设计任务二

做好低保真原型设计前的准备任务三

设计低保真原型项目小结

过关测试拓展阅读任务四

撰写产品需求文档

子任务导航01底部标签导航栏母版设计02课程页面设计03身体评估页面设计导航栏3.1底部标签导航栏母版设计图5-10在工作区设置手机屏幕背景图5-11设置导航栏名称3.1底部标签导航栏母版设计图5-12新建5个页面图5-13为课程页面增加交互导航栏3.1底部标签导航栏母版设计图5-14为其余标签添加交互效果图5-15将底部标签导航栏母版添加到各个页面导航栏3.1底部标签导航栏母版设计图5-16底部标签导航栏选中状态设置图5-17

发布原型导航栏3.2“课程”页面设计图5-18

搜索状态栏设计图5-19

标签导航菜单设计课程页面图5-20发布原型并检查3.2“课程”页面设计图5-21

页面功能导航区设计图5-22

单个功能条模块设计课程页面3.2“课程”页面设计图5-23

设置标签组图5-24

转换为动态面板课程页面3.2“课程”页面设计图5-25

动态面板样式设置图5-26

动态面板交互设置课程页面3.2“课程”页面设计图5-27

发布原型并检查滑动效果图5-28

绘制页面内容显示区的显示模块图5-29

页面内容显示区课程页面3.2“课程”页面设计图5-30

组合操作图5-31

转换为动态面板并进行样式设置课程页面3.2“课程”页面设计图5-33

发布原型检查上下滑动效果滑动标签组合图5-32

动态面板交互效果设置课程页面3.2“课程”页面设计图5-33

发布原型检查上下滑动效果滑动标签组合图5-32

动态面板交互效果设置课程页面3.3“身体评估”页面设计图5-36

绘制身体评估界面导航区滑动标签组合图5-34

“身体评估”页面身体评估页面图5-35

新建“身体评估”页面并设置样式3.3“身体评估”页面设计图5-39

组合动态面板内容显示区内容身体评估页面图5-38

绘制动态面板内容显示区图5-37

绘制身体评估动态面板图5-40动态面板交互设置图5-41返回图标交互设置3.3“身体评估”页面设计身体评估页面图5-42

原型预览3.3“身体评估”页面设计身体评估页面任务导航任务一了解原型设计任务二

做好低保真原型设计前的准备任务三

设计低保真原型项目小结

过关测试拓展阅读任务四

撰写产品需求文档

子任务导航01了解产品需求文档02理解产品需求文档的重要性03明确产品需求文档的内容提纲4.1产品需求文档概述产品需求文档是对于产品功能的详细说明，一般包含结构图、流程图、页面说明、交互说明等，是将商业需求文档（BRD）和市场需求文档（MRD）用更加专业的语言进行描述。产品需求文档主要面向项目经理、设计、开发和测试人员，其目的是让他们看懂产品的具体需求。4.2产品需求文档的重要性传达产品开发需求保证各部门沟通时有理有据使产品质量控制有具体标准开发人员通过产品需求文档可以了解页面元素和用例规则。当项目进入新的人员时，可以让新人更快地了解产品需求。而且也可以供后续产品经理查阅，快速熟悉产品内容。一个产品从前期调研、确认需求到最后开发上线需要经历多次版本迭代，如果没有产品需求文档，在大型项目中，版本迭代就会变得没有依据可循。以产品需求文档为蓝本，加强各部门的共识，提高沟通效率。4.3产品需求文档的内容文档需要写清楚具体的产品名称，在实际开发工作中，会有多个产品同时开展工作，清晰的文档名称标识是区分不同项目或产品的最基本要求。（1）产品名称（2）版本历史版本历史主要包含了修改时间、版本、变更人、描述、审核人等。产品经理需要说明自己修改的需求在目录中的编号，让开发可以直观地查看到本次修改的内容。因为产品需求文档页面少则几页多则几十页，为了让研发快速定位自己负责的板块，所以目录也是必不可少的。（3）目录（4）项目介绍项目介绍主要分为项目背景、项目价值、项目目标3个方向，便于其他部门人员或者新进人员更加清楚产品的业务方向与业务存在的市场价值。4.3产品需求文档的内容需求方案描述主要是体现出产品需求的核心流程功能点，其中包含项目的实体关系图、业务流程图用来告诉开发测试人员项目的实现流程。（5）需求方案描述（6）项目风险如果项目存在较高的风险时，这部分内容可以告诉业务中其他人该项目需要注意的地方，以防出现项目风险。4.3产品需求文档的内容这是产品需求文档中最为核心的部分，也可以理解为功能清单，需要将所有功能点罗列出来并告诉研发人员每个功能的功能描述、优先级、需求逻辑描述、相关细节性描述、相互作用描述、交互说明。（7）功能需求（8）运营计划产品经理需要与运营协助，撰写产品的后期运营计划，并告知研发人员，便于让研发人员了解产品逻辑，也可以写明项目的阶段说明。4.3产品需求文档的内容非功能性需求主要包含埋点需求、性能需求、兼容需求、环境需求、统计需求、预留接口等，这里需要产品经理根据实际业务进行撰写。（9）非功能性需求（10）上线要求这部分需要描述本次项目的最终效果，让研发人员以此为目标开发，测试人员以此为目标进行测试。4.3产品需求文档的内容任务导航任务一了解原型设计任务二

做好低保真原型设计前的准备任务三

设计低保真原型项目小结

过关测试拓展阅读任务四

撰写产品需求文档

项目小结本项目介绍了互联网产品原型设计的相关知识，通过Keep低保真原型图的制作讲解了AxureRP11软件的操作方法，帮助读者更好地掌握Axu