什么是原型设计（非常详细）

产品原型是通过线条、图形注释和标注等方式描绘出的产品初步框架；原型设计是综合考虑产品目标、功能需求场景、用户体验等因素后，对产品的各板块、界面和元素进行合理排序和布局的过程。

对互联网行业来说，原型设计就是对页面模块、各种元素进行排版和布局，以获得页面的草图效果，如下图所示。


为了使页面效果更加具体、形象和生动，还可以加入一些交互性元素，模拟页面的交互效果，如下图所示。


提示　随着互联网技术的普及，为了获得更好的原型效果，很多产品经理都采用高保真原型，以确保策划效果与最终的展示效果一致。

原型设计的参与者

一个项目的设计开发通常需要多人的共同努力。很多人认为产品原型设计是整个项目的早期过程，只需要产品经理参与即可。但实际上产品经理只了解产品特性、用户和市场需求，对页面设计和用户体验设计则通常不太了解；而设计师独立创作的产品，会使得产品经理和设计师在后期反复商讨、反复修改。

为了避免产品设计开发过程中反复修改的情况发生，在开始进行原型设计时，产品经理应邀请用户界面（UI）设计师和用户体验（UE）设计师一起参与产品原型的设计制作，如下图所示。


这样才能设计出既符合产品经理预期，又能带来良好用户体验且页面精美的产品原型。

互联网产品经理在互联网公司中处于核心位置，需要有非常强的沟通能力、协调能力、市场洞察力和非常高的商业敏感度。其不但要了解消费者、了解市场，还要能与各种风格的团队配合。可以说互联网产品经理能力的高低决定了一款互联网产品的成败。

如何创建产品原型

设计师可以通过直接在纸上作画的方式创建产品原型，也可以使用 Word 和 Visio 等软件创建产品原型，选择一款专业的原型设计工具来创建产品原型也是不错的选择。

1) 纸上作画

设计师可以使用笔直接在纸上绘制产品原型，设计大致的产品效果，如下图所示：


在纸上绘制产品原型的方式可以将原型产品的框架基本确定，然后通过专业的软件将原型更形象、更直观地转移到电子文档中，以便后续的研讨、设计、开发和备案。

这种方式通常是产品经理在进行原型构思的阶段使用。

2) Word和Visio

设计师可以使用 Word 进行原型设计。先在 Word 文档中建立一块画布，然后就可以使用文本框、图片、控件等制作一个原型设计方案，Word 启动界面如下图所示：


使用 Visio 设计原型比使用 Word 更方便，可以更快速地进行原型设计，Visio 启动界面如下图所示。


由于 Word 和 Visio 在原型设计方面还有一些局限性，通常只使用它们绘制原型的线框图。

相比手绘原型，线框图更加清晰和整洁，适合正式场合中以 PPT 形式宣讲的场景。线框图还可以是功能页面结构的视觉呈现形式，能传达页面的布局结构及定义功能元素，并能将产品需求以线框结构的方式展示出来，让产品需求以更加规整的方式直观展现。

线框图一般以黑白灰的形式表示。下图所示为产品原型线框图：

原型设计软件

目前原型设计软件有很多，比较常见的有 Axure RP、Adobe XD 和 MockupScreens 等。这些原型设计软件不仅具有丰富的 Web 控件，而且交互性很好。

Axure RP 是其中的佼佼者，下图所示为 Axure RP 10 的启动图标和工作界面。


使用这些专业的原型设计软件除了能够完成产品原型线框图的绘制，还能完成高保真产品原型的绘制。

高保真产品原型真实地模拟了产品最终的视觉效果、交互效果和用户体验，非常接近真实的产品，甚至包含产品的细节、真实的交互和 UI 等。

下图所示为使用 Axure RP 10 完成的高保真 App 产品界面。


不同的公司、团队，对互联网产品进行原型设计时采用的方式可能会大相径庭，不一定非要使用某种固定的方式，适合自己的才是最好的。

原型设计的必要性和作用

在互联网产品设计过程中，为什么一定要设计产品原型呢？能不能不设计产品原型，直接设计并开发产品呢？

当然可以，但是有了产品原型，可以使互联网产品的设计与开发过程更轻松，能减少由于规划不足造成的反复修改问题。

1) 原型设计的必要性

原型设计是设计师实现产品最终标准化和系统化的有效且重要手段。它最大的好处在于，可以有效地避免重要元素被忽略，也可以防止设计师做出不准确、不合理的假设。

无论是对于移动端的 UI 设计还是 PC 端的网页设计，原型设计的重要性都是显而易见的。原型设计让设计师和开发者将产品的基本概念和构想形象化地呈现出来，让参与进来的每个人都可以查看、使用，并给予反馈。而且，在产品最终版本确定之前可以随时进行必要的调整。

在项目开始之初，对每个元素进行调试以确保它们能够如同预期一样运作是相当重要的步骤。当完成可交互的高保真产品原型设计之后，设计师可以将它作为一个成型的界面来使用，测试模型中所有的功能，确认其能否解决规划阶段所计划解决的问题。

如果没有使用产品原型，而是在完成项目整体的设计和开发之后进行测试，那么修改和调整的成本就相当高昂了。

一个可用、可交互的产品原型所带来的好处并不是一星半点的，它还可以帮助开发人员和设计人员从不同的维度规划和设计产品。

2) 原型设计的作用

一个高保真产品原型能够像最终完成的产品那样运行，用户可以对它进行操作，它也会给予相应的反馈，使用户能在明白产品运作方式的同时寻求解决特定问题的方案。

产品原型经过可用性测试之后，能够带来更好的用户体验，并能够在产品上线发布之前排除相当一部分的潜在问题。

① 让开发变得轻松

产品原型可以使产品的开发变得更加容易。当在一个项目中设计出满意的产品原型之后，参与者能够清楚项目发布之后的运作流程，开发人员也能够在此基础上开发出更加完善的代码方案。

② 节省时间和金钱

当一个公司想要推出一款新的 App 或者发布一个新的网站时，总会集合一批专业的人士来完成这个项目。随着时间的推移，花销会不断地增加，项目上的投入自然也越来越多。

有了产品原型之后，团队成员能够围绕产品原型进行快速且高效的沟通，从而明确哪些地方要增删、哪些细节要修改，这样能够更加快速地推进项目进度。

③ 更易沟通与反馈

有了产品原型之后，团队成员在沟通的时候就不需要彼此发送大量的图片和 PDF 文档了。取而代之的是添加评论和链接，或者使用原型工具内置的反馈工具进行沟通，这样沟通的效率提高了，产品原型的修订速度也更快了。

版本修订是原型设计流程的重要组成部分，它是产品最终能完美呈现的先决条件。产品原型能够被不断修正、改善，这使得产品原型成为产品研发中最有价值的部分之一。随着一次次的迭代，产品本身会越来越优良，而版本修订的过程也会越来越快速、简单。

原型设计的要点

在设计产品原型的时候，为了更好地表现网站内容并吸引更多的用户，设计师需要注意以下几点。

1) 设计时规避自己的个人喜好

自己喜欢的东西并不一定别人也喜欢，例如网页的色彩应用，设计师可能喜欢大红大绿，并且其设计的作品中充斥着这样的颜色，那么网站可能会丢失很多潜在用户。原因很简单，即跳跃的色彩会让部分用户失去对网站的信任。

现在大部分的用户都喜欢简单的颜色。设计师可以先浏览其他设计师的作品，再进行设计，以制定出更符合大众审美的设计方案。

2) 考虑不同类型的用户

设计师需要让不同类型的用户在网页上达成一致的意见，也就是常说的“老少皆宜”。只有抓住了不同类型用户共同的心理特征，吸引了更多新的用户，才能说明设计是成功的。

想要了解人们的浏览习惯其实很简单，只要想想周围的人共同关注的东西就明白了。

3) 充分分析竞争对手

设计师平时应多了解竞争对手的网站项目，总结出竞争对手项目的优缺点，并避开竞争对手的优势项目，以他们的不足为突破口，这样才会吸引更多用户的注意。

也就是说，要把竞争对手的劣势转换为自己的优势，然后突出展现给用户。这一点更易在网站项目中实现。