产品原型图详细介绍，原型图真正的核心是什么？

通过市场调研和数据分析，深入了解行业情况，明确网站建设需求，通过项目讨论确立网站初步的整体构思和规划，就可以开始【原型图】的设计了。

接触过UI设计的人都应该知道原型图，因为APP开发的浪潮，原型图在中国被广泛使用。简单来说，原型图就是产品原型图，可以清晰的呈现产品框架，可以是草图，也可以是高保真图。

一、原型图的核心功能:需求可视化

网站原型设计是一个【需求可视化】的过程，就是让网站最初的想法有一个可视化的展示。原型图是网站成型前的简单框架。网页中的重要元素和板块功能会通过绘制原型图进行简单的布局和排版。

手绘的原型草图可以做在纸上，也可以将原型绘制成精美的高保真艺术品。只要所有的需求都能呈现出来，团队成员能够快速对接协作，更重要的是需求能够落地、测试、验证、优化、确认，最终形成一个完美的网站原型。

简而言之，原型图是根据需求设计的可视化图形，一个简单的实验模型，有利于快速方便地验证需求的解决方案。

二，原型图的作用

1。探索与实验

prototype的本质是一个测试工具，主要目的是根据自己的需求探索网站的功能或方向，从而对一些想法进行实验。我们不妨先建立一个简单的网站原型，只显示必要的基本信息和功能，然后开始测试，甚至可能在纸上画一个草图。

2。理解和验证

当我们一个个接收到分散的需求点时，我们需要做的就是把分散的需求点可视化成一个视觉闭环。这时候我们可以通过绘制原型图来展现网站需求的视觉效果，直观的看到网站成品交付时的理想状态。所以越接近理想状态的原型图，就越合格。

比如很多时候你不知道自己想要什么，你可以试着画一个简单的原型图来展示你的想法。或者当你收到一个不完整的需求，没有完全理解需求的真实意图时，通过原型图展示你的需求挖掘和分析的结果，可以有效的验证需求的可行性。

3。交付和对接

原型图是一个可以很好展示的有力工具，也是产品经理向执行团队解释和说明需求的高效工具。有了原型图的帮助，可以把网站的布局和功能一一解释清楚，为开发团队提供一个清晰的概念，知道各自的职责是什么，是什么样的逻辑，明确自己的目标，才能根据各自的职责去开发网站。

三。原型图的具体应用场景和好处

场景一:原型图纸设计是需求落地的第一步。

通常网站开发前的所有策划和规划，多是口头交流和文档呈现，比较碎片化。策划思路只停留在ppt或者文档上，不确定因素很多。

我们需要真正的落地，让所有的规划和计划点都可以定义、测试和验证。原型设计师需求落地的第一步也是最关键的一步，也是考验一个产品经理项目落地能力的关键点。

一个优秀的产品经理，能够将收集整理的需求汇总以原型图的形式可视化绘制出来，让项目团队更加直观的理解，快速沟通调整问题。

场景二:原型绘制可以有效防止视觉效果对我们的干扰。

一直以来，我们都会把网站的“可用性”和“美观性”分为两个阶段。而“可用性”是通过原型设计来完成的，可以有效的防止视觉效果对我们的干扰，让我们可以集中精力做一个实用性很高的网站架构。

很多企业没有把网站原型的设计融入到网站建设的过程中。这是因为他们只是从平面设计的角度来判断网站/网页的视觉美感，并没有深入考虑网站结构是否合理，逻辑是否流畅，访问者会有怎样的感受。这是一个巨大的错误。

企业网站毕竟是单向信息传递的工具，没有办法和访客有太多的互动。大多数情况下，信息是等待访问者点击查看的，是单向操作完成信息的沟通和交流。如果游客在操作过程中感到不适，可能会产生重大影响。

网站的浏览和阅读操作大多需要鼠标点击交互，就像手机需要手指点击交互一样。网站页面不是静态的单页，我们需要用一个完全没有美感的线条稿来思考网站的交互逻辑，这样就不用担心网站的可用性，没有任何视觉干扰。

场景三:原型绘制可以拉近团队的交流。

团队成员可以围绕网站原型互相交流。除了产品经理，其他成员可以更好地理解整个产品的想法和目的。一个好的产品需要团队成员之间顺畅的沟通才能获得好的结果。

通过对产品原型的讨论，可以引导我们更深入的思考，思考的越深入，我们的方向就会越准确。虽然原型需要一些时间，但是可以保证整个网站建设过程中，整个团队的方向不会偏离。

确定了网站的原型之后，我们就可以非常纯粹而专注地思考如何做好网站的愿景，而不被架构所干扰。只有保证两者的完全独立，才能保证网站的产品是优秀的。

四。如何做好原型设计？

1。产品思维的应用

大多数人并没有把一个网站当成一个互联网产品，而是把它当成一个信息公告窗口。这种误解是很多网站缺乏竞争力的主要原因。

我们在建设网站的时候，需要时刻带着“产品思维”，这种思维会贯穿整个网站建设过程。网站作为一个产品，最终的定位是服务，服务的受众是访客群体，不同的访客群体处于不同的场景，充分挖掘访客来到网站的真实需求，从而优化网站体验。

在这个过程中，我们不仅需要发现网站所服务的客户的真实需求，还需要有一系列制造和运营“产品”的解决方案，把一些产品或服务变成产品。

所以做好原型设计离不开产品思维，产品思维主要包括访客、场景、迭代三个方向。从这三个方向可以延伸出访客画像、行为特征、需求场景、数据埋点等等。

答:目标游客是研究的焦点

作为我们网站的源头，访客检验网站是否优质，决定权也在访客手中。只有对访问者有足够的了解，才能做出高质量、成功的网站。

首先，我们前期的市场调研对网站的访客画像进行了分析，对目标访客画像进行了针对性的规划和构思。此外，我们还需要考虑游客的行为。例如，一些访问者喜欢浏览快速阅读内容，而另一些访问者喜欢了解和阅读网站中的文章。我们可以划分这些来访者的行为特征。

常见的企业网站，我们将访问者的行为特征分为:

• 职业探索者:圈内人，深读集团
• 专业浏览器:业内人士，快跳群
• 非专业浏览者:外行，包括考生、投资人等。

访客群划分的目的是为了更好地细化内容，划分内容层次，打造递进式的网站结构，满足不同人群的不同浏览习惯，最终达到更好的信息传递效果。

网站访问者习惯于快速检查信息。通过“信息整合”，可以在同一版块中切换内容，避免页面上信息的重复和多样。而且探险者可以通过“查看细节”得到更深入的了解，这是满足两类人群浏览习惯和需求的常用方式。

还应该注意的是，不是每个网站都可以使用单一的架构。我们始终坚持网站架构是为网站内容服务的，而不是先设定网站架构再填充内容，因为这样的传统建站思维往往是建不出好网站的。

比如《成长超人》在为小米生态链公司米云策划国际官网的时候，他们给了我们项目组1000+份文档。在准确提炼出产品卖点后，他们设计了30+全网站的原型策划稿，而不是先设计框架再填充产品卖点:

B .应用场景决定建站方向

决定网站建设的方向比怎么做更重要。我们在开始准备网站建设的时候，首先要决定它的应用场景，然后才能规划出适合相应场景的方案。

网站作为互联网产品，也是要看场景的。我们共同的想法是从访客和业务的角度来判断每个应用场景中的需求。

网站策划的过程是一个先发散再收敛的过程。在设计原型和输出文档之前，我们要做大量的思考和研究。基本逻辑就是每个访客群体面临的实际情况是什么，这也是一个回归的情景。

除了回归现场，还要站在网站的角度思考。我们不仅要考虑功能、流程和浏览体验，更要关注如何让访问者对我们呈现的网站内容有深刻的理解。信息层的设计也要服务于应用场景。

比如一个做智能变色玻璃的公司，对于大众来说，并不是一个普通的技术和产品。如果是普通的图片和文案展示，必然缺乏想象力，无法直观传达产品价值。

所以我们可以通过一些巧妙的互动来与游客互动，让游客有很好的参与感和体验感。

不可思议由超人出品-广益官网产品展示

我们可以设计访客与网站互动的场景，让访客更好地理解和感知网站的价值，从而让网站站起来。我们的网站功能也会相应的差异化，设计出有特色的网站结构和功能，提升网站的竞争力。

C .为迭代提供数据支持

高质量的网站很难一次成型，这是个现实问题。我们看到的好网站都是经过多次迭代和运营做出来的。网站建设从0到1很容易，简单的模板就可以完成，但从1到N是最难的，只有尽可能完善最初的0-1环节，才能降低1-N的难度。

产品迭代是产品思维中一个非常重要的方向。众所周知，网站建成后，需要进行维护、分析和优化，从而更新迭代，不断保持网站的竞争力。所以在网站建设过程中，要提前做好后续迭代工作的准备，夯实基础。

这就类似于我们常说的“不能让孩子输在起跑线上”，“起跑线”有三种。第一是基础知识，第二是环境，第三是思维。

网站设计和前端相当于“基础知识”，最明显；网站的“环境”是域名、服务器等支撑设备的基础环境；最后，“思考”就是数据嵌入点、用户反馈、统计端口等。为长远发展部署，为未来做准备的话题。

它是数据迭代的基础。在设计原型图时，需要确定数据收集的方案，后期实现数据嵌入，用配套的数据分析工具和统计工具为迭代提供最可靠、最科学的支持。数据驱动的网站迭代是保持网站竞争力的核心，是数字化时代不可忽视的关键点。不要小看它。

2。网站原型图设计流程指南

下面是原型设计的流程分解，可以作为参考指南:

①

填写需求调查表

首先，在市场调研中，我们侧重于项目的信息收集和需求调研，这是在样机设计中可以同时进行的工作。在这里，我们使用两种形式来收集关键信息，主要包括项目需求、设计风格、参考资料、受众属性等。

②

初步构思，绘制大框架初稿

根据以上的资料收集和研究，我们基本上有了一个初步的想法，把这个想法形象化，就是一个大画幅的草图原型，可以手绘，也可以软件绘制。

勾画原型图:从字面上看，可以知道是一种比较“粗糙”的绘制形式，只显示大概的网站页面框架、核心页面布局和重点内容。这种形式更多的是在团队合作的时候使用。快速的绘制和调整，有助于尽快得到反馈，促进网站建设的进程。

如果页面比较复杂，我们还需要输出“页面流程图”来解释页面逻辑和需求逻辑，使页面的功能、需求、目的、行为清晰，既可以方便设计者理解，也可以明确框架，验证功能可行性。

页面流程图

③

验证需求的可行性，输出低保标准的真实原型图

根据原型图的讨论和页面流程的讨论，进一步优化网站的整体框架和逻辑，输出一个完善的低保原型图，并进行90%确认。

极简原型:这种画图形式比速写原型更完整，是我们网站原型设计阶段经常采用的一种形式。极简原型没有视觉设计，大多使用灰色色标和占位符来表示内容，多为黑、白、灰色视觉风格。它可以显示页面框架、内容布局等。这更有利于网站建设过程中的视觉和交互设计协作。

④

最终输出高保真，需求文档和对接设计

动词 （verb的缩写）摘要

在原型绘图设计的节点上，“绘图”并不是最重要的，而是先想清楚绘图的目的是什么，为了谁，才能有效输出，以匹配网站建设场景的结果。

无论是低保真还是高保真，核心都是需求和逻辑。正确的需求和逻辑可以为后续工作提供有力的支持。

很多建站公司为了赶时间，节省成本，会砍掉原型设计，而不是用原型工具来规划整个网站，这样容易出现实际问题，导致整个网站逻辑不清晰，访问者体验不佳。这也是我们团队一直坚持原型设计的原因。网站作为一个产品，是为用户服务的，以用户为导向是产品的本质。成都营销策划公司｜