1.1 互联网产品开发流程
原型设计是互联网产品设计中的一个步骤，要想更好地理解原型设计的工作流程，必须先了解互联网产品设计的工作流程。按照互联网产品设计的先后顺序，我们可以将其分为需求分析、交互设计、视觉设计、技术开发和发布维护五个步骤，如图1-1所示。
图1-1 互联网产品设计流程
提示
此处所说的工作流程，针对的是部分公司。如果是微小的创业公司，则可以作为参考，并不能全盘套用。
1.1.1 需求分析
在需求分析阶段，产品经理对开发的新产品要有详细的了解，包括市场现状、核心用户的关注点、竞品、资源和产品定位等。需求分析阶段需要调研的点如图1-2所示。
图1-2 需求分析阶段需要调研的点
大家需要通过以上的认知来明确产品的设计目的，通俗地讲就是解决什么问题以及用什么产品功能来解决问题。
提示
领域调研是要分析行业特性、市场现状、竞争环境、盈利情况，判断自有项目的可行性。竞品分析则是分析国内外产品的特性和各自优势，做到知己知彼。用户分析，即适用人群特征、人群市场容量、用户关注点。产品定位，即在产品设计初期，需要在用户心中确立具体形象的过程。历史数据分析，即了解关键指标数据，对现有产品现状有初步了解。用户路径分析，即了解用户在产品内部的行为路径。
1.1.2 交互设计
将需求梳理好后，接下来进行交互设计。交互设计是产品成型的阶段，是产品从抽象的需求转化成具象界面的阶段，需要产品经理和交互设计师配合完成，当然大部分公司都由产品经理独立完成。交互设计的工作流程如图1-3所示。
图1-3 交互设计的工作流程
● 信息架构
交互设计中的信息架构其实就是产品信息分类。产品由哪些功能组成，将相关功能内容组织分类，明确逻辑关系，并平衡信息展现的深度和广度，引导用户寻找信息。信息架构的目的、方法和产出物如图1-4所示。
图1-4 信息架构的目的、方法和产出物
在信息架构工作中，我们需要把导航规划好，最好制作一个思维导图。图1-5所示为鲜花网App的产品思维导图。
图1-5 鲜花网App的产品思维导图
● 业务流程
业务流程是一个产品功能设计的基础，确定了流程，后面的工作才能顺利进行，否则会出现产品功能摇摆不定，反复修改的状况。业务流程的目的、方法和产出物如图1-6所示。
图1-6 业务流程的目的、方法和产出物
确定好产品中的角色及角色的任务后，按信息流向把流程绘制出来。一般业务流程绘制完成后，产品需求文档也就成型了，产品需求文档主要是给开发人员做参考依据的，因此，只需把产品层面的逻辑表达清楚即可。
● 页面流程
页面流程是业务流程的延伸，是以用户为中心的思路来整理，按用户使用页面的顺序进行组织，把页面结构和跳转逻辑梳理得更清楚，并确定每个页面的展现主题。页面流程的目的、分析角度和产出物如图1-7所示。
图1-7 页面流程的目的、分析角度和产出物
● 产品原型
产品原型分为低保真原型和高保真原型。其目的和产出物如图1-8所示。
图1-8 产品原型的目的和产出物
低保真原型就是对交互想法的粗略展现，不用非常精细，因为在这个阶段会有很多更改，需要不断进行评审和讨论，最好就是用纸和笔手绘，也可以用Axure或Sketch做一些简单的草图，也可以使用Adobe XD，如图1-9所示为一款App的低保真原型。
图1-9 一款App的低保真原型
高保真原型要将详细的页面控件、布局、内容、操作指示、转场动画、异常情况等都详细表达出来，给视觉和开发一个详细参考，如图1-10所示为一款App的高保真原型。
图1-10 一款App的高保真原型
高保真原型可以显著降低沟通成本，高保真具体到什么程度也得看团队的习惯和时间。有的团队会无限接近视觉稿，模拟真实的产品交互操作；有的则是以黑白灰为主，把交互细节展现出来，特别需要体现交互的地方才加一些颜色提示。
● 参考文档
此处的参考文档指的是交互参考文档。交互参考文档的撰写要以开发为中心，使用开发人员能够理解的交互逻辑和规则。
如果没有专门的交互参考文档，一般会在原型旁边添加注释说明，目的都是要把交互逻辑和交互规则向设计人员和开发人员表达清楚，如图1-11所示为参考文档的目的、分析角度和产出物。
图1-11 参考文档的目的、分析角度和产出物
1.1.3 视觉设计
每个产品都有自己独特的性格，即“设计风格”和“适用人群”。在视觉设计阶段，需要视觉设计师在理解产品目标及交互框架的前提下，能够精准提炼产品的设计风格，并且为产品选择合适的定位并赋予情感，如图1-12所示为视觉设计的过程。
图1-12 视觉设计的过程
在视觉设计中，设计师首先要明确设计定位，进行风格探索，也就是说根据情绪和直觉对产品进行风格设定。接着进行视觉设计，也就是根据高保真原型，在设计软件中补充和完善设计稿。最后对设计稿进行标注输出，包括设计稿的界面标注和技术人员需要的切图资源等。
1.1.4 技术开发
技术开发阶段，需要技术人员使用代码语言将平面的设计稿制作成可以在线上使用的网络页面，此阶段的工作虽然是以技术人员为主，但是也需要设计人员的配合，来协调完善设计稿中的一些模块，如图1-13所示为技术开发的过程。
图1-13 技术开发的过程
技术开发阶段是解决方案的生产和测试环节，该阶段需要技术人员进行前端开发和后台开发，并在开发完成后进行可用性测试，以确保页面开发的质量。开发出的页面必须高度还原设计稿，尤其是在高保真原型中安排的交互设计也要逐一实现才行。
1.1.5 发布维护
发布维护阶段，产品团队需要经历包括发布产品、线上观察数据、总结提炼和后期维护等过程，来完成产品开发的最后阶段，如图1-14所示为发布维护的过程。
图1-14 发布维护的过程
在线上将产品发布后，需要观察产品数据，包括收集上线后的产品数据、用户行为数据，将收集的数据与初期设定的产品数据对比，看是否达到设计目标。
然后，通过这些数据，了解用户使用产品的一些不满的点和满意的点，逐一了解原因。
通过数据分析发现产品的潜在问题，并将问题持续改进。最后根据上线后的数据、用户反馈、新的功能测试对产品进行持续迭代。