1.3 互联网产品原型的应用
原型设计是互联网产品开发流程中交互设计阶段的一个很小的步骤，主要使用人员为产品经理或者产品助理，对互联网产品开发有着深远的影响。
1.3.1 互联网产品原型设计
原型设计最初是应用在工业设计初始阶段，在生产大批量商品前，先手绘商品样式及外观，再出一个商品的“小样”供客户修改和调整，如图1-22所示为最初的原型设计。之后逐渐应用到互联网产品的开发中，如图1-23所示为手机界面原型图。
图1-22 最初的原型设计
图1-23 手机界面原型图
提示
本书提到的原型设计均为互联网产品开发流程中的原型设计。
产品原型，简单地说是整个产品设计成型之前的一个框架。对网站来说，原型设计就是将页面的模块、元素和人机交互的形式，利用线框描述的方法，进行粗放式的排版与布局，使其更加形象和生动的过程。
1.3.2 互联网产品原型的作用
创建产品原型设计的主要目的，是在产品设计与技术开发之前，利用简单的原型设计将产品的主要功能和系统进行可用性测试。这样项目团队就可以将更多的时间与资源投入到视觉设计和技术开发阶段，确保所构建的系统是正确无误的。
提示
一般情况下，产品原型设计是由产品经理进行设计与制作，这样便于产品经理对产品进行整体把握。
产品原型是产品设计方案的直观表达，在原型设计的过程中，可以验证产品方案的合理性，可以对产品的布局、交互和功能有一个整体、全面的把握，如图1-24所示为产品经理制作的产品方案。
图1-24 产品方案
● 产品原型能使产品需求评审更高效
大家应该知道需求变更不仅会增加开发成本，也会打击项目团队的士气。
如果产品经理能在需求评审前认真设计产品原型，尽量做出可观看、可操作和带交互的产品原型，这样可以更加直观地操作和感受产品，也能激发评审的兴趣，同时也利于评审和团队人员提出一些比较合理的建议，从而减少后期需求变更的次数，提高效率，如图1-25所示为产品方案制作的简单原型图。
图1-25 为产品方案制作简单原型图
● 产品原型方便进行产品的视觉设计和功能开发
完善精致的产品原型，可以催促前端人员尽快开始视觉设计，之后开始产品界面和功能的开发。
所以产品原型是产品的基础，只有产品原型这个基础足够牢固，建造宏伟的产品大厦才会事半功倍，如图1-26所示为完整的产品原型。
图1-26 完整的产品原型
1.3.3 互联网产品原型的重要性
原型设计在整个产品方案输出流程中处于最重要的位置，起着承上启下的作用。原型设计之前的产品需求或者产品的功能信息都是相对抽象的，设计原型的过程就是将抽象信息转化为具象信息的过程。之后的产品需求文档，是对原型设计中的版块、界面、元素以及它们之间的执行逻辑进行描述和说明。
提示
原型设计的最大好处在于，它可以有效地避免重要元素被忽略，也能够阻止项目团队做出不准确或者不合理的假设。
一个可交互的原型可以帮助开发人员和设计人员从不同的维度上规划和设计产品，是帮助产品完成视觉和程序设计标准化和系统化的手段。所以，即使原型设计是交互设计阶段很小的一部分，但其重要性无可替代。
1.3.4 互联网产品原型的设计技巧
产品的原型设计一般是基于文档的形式所表达出来的形象设计，想要把产品原型设计得与最终样式相差无几并不简单。为了让大家可以更加方便地制作产品原型设计，接下来介绍一些产品原型设计的技巧。
● 单页格子布局
在单个页面上，如果页面元素是相同的布局，可以使用格子布局的快速原型技能，如图1-27所示。
图1-27 单页格子布局
● 自动填充
自动填充，即在原型页面中对文字和图片等数据进行自动填充的快速原型技能，如图1-28所示。
● 创建组件库
组建自己的组件库和样式库，方便在原型设计中下次调用，如图1-29所示为用户自己创建的组件库。
图1-28 自动填充
图1-29 创建组件库
提示
在产品的整体研发流程中，需求分析部分结束后，研发团队就应该形成明确的产品需求了，而此时要做的就是把这些产品需求表达出来，而从表达效果上来看，原型要比文档更有说服力。
任何工作在长时间的磨合中，都可以从中总结归纳出一些技巧和方法，原型设计也不例外。大家要善于在日常的学习和工作中总结出属于自己的设计技巧。