原型图真正的核心是什么，怎么做好原型图设计？

欢迎大家来到IT世界,在知识的湖畔探索吧!

编辑导语：当一个企业想开发一款产品时，原型图可以帮助企业提前看到，产品的界面样式，每个按钮的功能和效果，也可以看到产品的基本框架和运作机制，获得比较真实的感受。那么原型图对企业的核心意义是什么？又如何做好原型图呢？本文围绕原型图展开讲述，推荐对此感兴趣的伙伴阅读。

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

有接触过UI设计的应该都了解过原型图，国内广泛使用原型图也是因APP开发浪潮而起，简单来讲，原型图就是一份产品原型图稿，即能够清晰呈现产品框架的图稿，可以是草图，也可以是高保真的图稿。

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

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

可以在纸上进行手绘原型草图、也可以将原型图画成一张精美的高保真图稿，只要能够将所有的需求呈现出来，与团队成员快速对接进行协作即可，更为重要的是能够将需求落地，进行测试、验证、优化、确认，最终形成一份完善的网站原型。

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

二、原型图的作用

1. 探索与实验

原型的本质是一种测试工具，根据自己的需求探索网站功能或方向，从而实验一些想法是它最为主要的目的。我们不妨先搭建一个简单的网站原型开始，只将必备的基本信息和功能体现出来，然后开始测试，甚至可能在纸上绘制草图即可。

2. 理解与验证

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

就如很多时候你并不知道自己想要什么，可以试着绘制一个简单的原型图来展示自己的想法。或者在接收到不全面的需求，以及没有充分理解需求的真实意图时，通过原型图展示你对需求挖掘和分析的结果，可以有效验证该需求的可行性。

3. 交付与对接

原型图是一个可以起到很好展示作用的有力工具，更是产品经理向执行团队进行阐述和说明需求的高效工具，可以借助原型图对网站布局和功能等进行一一说明，给开发团队提供一个清晰的概念，清楚各自的职责是要做什么，是怎样的一个逻辑，明确目标才能够根据各自的职责进行网站开发。

三、原型图的具体应用场景及好处

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

通常情况下，网站开发前的所有策划和规划大多是口头传达、文档呈现，较为碎片化，策划思路只停留在ppt或文档上，存在着很多不确定因素。

我们需要真正落地，才能明确所有的规划和策划点，进行测试、验证，原型图设计师需求落地的第一步，也是非常关键的一步，这也是考验一位产品经理项目落地能力的关键点。

优秀的产品经理能够以原型图的方式，把采集整理的需求概述可视化，形象地绘制出来，以便项目团队更直观的理解，以便快速发现问题后进行沟通调整。

场景二：原型图可有效的防止视觉效果对我们造成干扰。

一直以来，我们会把网站的“好用”与“好看”分为两个阶段来进行，“好用”即通过原型图设计完成，将网站的实用性和视觉的美观性剥离，可有效的防止视觉效果对我们造成干扰，从而让我们可以专注于做出一个实用性较高的网站架构。

许多企业并没有将网站原型图设计纳入建站流程中，这是因为他们仅仅将网站/网页以平面设计的角度，去评判视觉美观性，并不会深入考虑网站架构是否合理、逻辑是否通畅、访客会有怎样的体验感，这是巨大的错误。

毕竟企业网站是单向信息传达的工具，是没办法与访客做过多互动的，大多数情况下，信息都是在等待访客去点击查看，属于单向的操作去完成一次信息的沟通和交流，如果访客在操作的过程中，感到不适，都有可能是造成重大影响。

网站的大多数浏览阅读操作，都需要鼠标点击交互来完成，就像手机需要手指点击进行交互来完成的，网站页面不是一个静态的单页，因此我们需要用一个完全没有美感的线稿来思考网站的交互逻辑，这样在没有任何的视觉干扰，就不需要担心网站实用性会出问题。

场景三：原型图能拉近团队的沟通。

团队成员之间可围绕网站原型进行交流，除了产品经理之外，可以让其他成员更好地理解整个产品的构思及目的，一个好产品需要团队成员们都在顺畅的沟通交流下，才能得到好结果。

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

确定了网站原型，我们可以非常纯粹且专注的去思考，如何去把网站的视觉做好，不会受到架构的干扰。保证这两者的完全独立，才能保证网站的出品是优秀的。

四、如何做好原型设计？

1. 产品思维的应用

大多数人都不会将网站看作是互联网产品，更多的是将其定位为一个信息公告窗口，这种错误的理解是导致不少网站缺乏竞争力的主要原因。

我们在建站时需要始终要带着「产品思维」，这一思维将会贯穿于整个网站建设的流程，网站作为产品最终导向是服务，服务的受众是访客群体，不同的访客群体又处于不同的场景中，充分挖掘访客来到网站的真实需求，从而针对网站体验感等不足进行优化。

在这当中，我们不仅需要发掘网站所服务对象的真实需求，还需要针对于制造及运营“产品”有一系列的解决方案，将某些产品或服务进行产品化。

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

a. 目标访客是研究重心

访客作为我们网站的源头，我们检验网站是否优质，决定权也在访客手里，对访客要有充足的认知，我们才有可能做出优质且成功的网站。

首先，我们前期的市场调研分析出网站的访客画像，针对目标访客画像进行有针对性的策划和构思，除此之外，我们还需要思考访客的行为，例如有些访客喜欢浏览快速阅读内容，有的访客喜欢深入了解及阅读站内文章，我们可以将这些访客行为特点进行划分。

常见的企业网站，我们将分访客行为特点进行划分：

• 专业探索者：业内人士，深度阅读型群体
• 专业浏览者：业内人士，快速跳读型群体
• 非专业浏览者：外行人，包含应聘者、投资人等

访客群体划分的目的是为了更好的进行内容提炼与内容层级架构划分，打造逐层递进的网站架构，满足不同人群的不同浏览习惯，最终达到更好的信息传达效果。

网站浏览者习惯快速查看信息，通过我们可以通过「信息整合」，可以在同一板块进行内容切换，避免页面板式信息重复和繁多；并且探索者可以通过「查看详情」引导深入了解，这种常见方式可以同时满足这两类人群的浏览习惯和需求。

还需要注意一点，并非一个架构就能通用于每个网站，我们始终坚持网站架构服务于网站内容，而并非先定下网站架构再往架构内填充内容，因为这样的传统建站思维往往无法建成一个好网站。

例如，增长超人在为小米的生态链公司云米，进行国际官网规划时，他们给到我们项目团队的资料文件就有1000+，经过精准提炼了产品卖点之后，才设计出了30+整体网站的原型策划稿，而非先设计框架再进行产品卖点填充：

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

决定好网站建设的方向比怎么做更为关键，我们着手准备建站肯定是先决定它的应用场景，先有应用场景才能规划适用于相应场景的方案。

网站作为互联网产品，同样依赖于场景，我们常见的思路是从访客的角度以及业务出发，判断每个应用场景中所存在的需求。

网站策划的过程是先发散后收敛的过程，在动手设计原型、输出文档前，我们要做大量的思考、调研，基础逻辑是每个访客群体面临的实际情况是怎样的，这也是回归场景。

我们除了需要回归场景，同样应该从网站角度进行思考，不仅要考虑功能、流程和浏览体验，还应该重点考虑，怎么让访客对我们呈现出来的网站内容，产生深刻的认知和理解，信息层的设计也应该为应用场景服务。

举个例子，一家做智能变色玻璃的企业，对于大众来说，这不是一项常见的技术和产品，如果是普通图片和文案展示，必然会缺乏想象，无法直观地传达产品价值。

所以，我们可以通过一些巧妙的交互，与访客进行互动，让访客产生良好的参与感和体验感。

增长超人出品-光羿官网产品展示

我们可以设计访客与网站发生交互的场景，更好地访客理解和感知网站的价值，从而让网站站得住脚，我们的网站功能也会因此形成差异化，设计出有特色的网站结构和功能，提升网站的竞争力。

c. 为迭代提供数据支持

优质的网站难以一次成型是现实问题，我们见到的好网站都是经过多次迭代和运营而成，网站建设从0到1容易，用个简单的模板也能完成，但是从1到N才是最难的，而我们在最初的0-1的环节上，尽可能做到完善，才能减轻1-N的难度。

产品迭代是产品思维中非常重要的方向，大家都知道，网站建成之后是需要进行维护、分析及优化，从而进行更新迭代，持续保持网站的竞争力，因此，我们在建站过程中，要提前为后续的迭代工作做好准备，打好牢固的基础。

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

网站的设计、前端就相当于「基础知识」，最显而易见；网站的「环境」则是域名、服务器等配套设备这种基本环境；最后「思维」就是为长期发展所部署的数据埋点、用户反馈、统计端口等，为将来做准备的课题。

数据是迭代的基础，原型图设计之时，我们就需要确定好数据采集的规划，实现后期数据埋点，配套的数据分析工具、统计工具，为迭代提供最可靠最科学的支持。数据驱动下的网站迭代，是维持网站竞争力的核心，是数字时代下不可忽视的关键点，切勿轻视。

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

这里分解一下原型图设计的流程，可以作为指南进行参考：

① 填写需求调研表

首先，在市场调研中，我们重点需要对项目进行信息采集和需求调研，是原型图设计可以同步进行的工作，这里我们分别采用两张表单进行关键信息采集，内容主要是项目需求、设计风格、参考资料、受众人群属性等等。

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

根据上述这些信息采集及研究之后，基本就有了初步的想法，将这个想法可视化出来，也就是大框架草绘原型图，可以是手绘也可以是软件绘制。

草绘原型图：从字面上理解就能知道是相对“简陋”的一种绘制形态，仅展示大概的网站页面框架、核心的网页布局以及关键内容。这种形态更多是在团队内部协作时会采用的，快速绘制调整，有利于尽快得到反馈，推进网站建设的进程。

如果页面较为复杂时，我们还需要输出「页面流程图」，进行页面逻辑和需求逻辑的说明，把页面的功能、需求、目的、行为说明清楚，既能方便设计师理解，又能理清框架，验证功能可行性。

页面流程图

③ 验证需求可行性，输出低保真原型图

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

低保真原型：这类绘制形态和草绘原型图相比要更完整，是我们网站原型图设计阶段常会采用的一种形态，低保真没有视觉设计，大多数使用灰色色阶和占位符来指示内容，多为黑白灰的视觉风格。可以较为完整地展示网站页面框架、内容布局等，更有助于建站过程中的视觉、交互设计协作。

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

最后，如果功能较为复杂，或者希望更为直观表达，我们可以输出更加完善的高保真原型图，包含一些静态DEMO，作为参考提供给设计师和技术人员，同时要输出相应的需求文档，进行100%确认。

五、总结

在原型图设计这个节点上，“画”不是最重要的，而是先想清楚画的目的是什么、为谁画才能做到有效输出，匹配网站建设场景的成果。

不管是低保真还是高保真，最核心的都是需求和逻辑，需求正确、逻辑正确都能为后续工作提供有力支持。

有很多建站公司会为了赶时间、节省成本，而砍掉原型图设计这一环节，没用采用原型图工具来进行全站的规划，这就容易出现实用性问题，并且造成整体网站逻辑不清晰，访客体验差等情况，这也是我们团队为什么始终坚持原型图设计这一环节，网站作为产品，服务于用户，以用户为本才是产品的本质。

本文由@增长超人 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自unsplash，基于CC0协议。