编辑导语：企业想要开发产品时，原型图可以帮助企业提前看到产品的界面风格，每个按钮的功能和效果，以及产品的基本框架和运行机制，从而获得更真实的感受。。,原型图对企业的核心意义是什么？如何做好原型？本文重点介绍原型图，并推荐感兴趣的伙伴阅读。.
通过市场调研和数据分析，我们对行业情况有了深刻的了解，明确了建设网站的需求，并通过项目讨论确立了网站的初步整体构思和规划，从而可以开始设计【原型图】的。。
任何接触过UI设计的人都应该知道原型图。原型图在国内的广泛使用，也是APP开发大潮造成的。简单来说，原型图就是产品原型图，也就是能够清晰呈现产品框架的图，可以是草图，也可以是高保真的。图。
# 1.原型图的核心功能：需求可视化
网站原型图设计是【需求可视化】的一个过程，是让网站的初步构思有一个可视化的展示。
原型图是网站形成前的简单框架，通过绘制原型图，网页中的重要元素和板块功能将是简单的布局和排版。。
你可以用手在纸上画出原型，也可以把原型画成美丽的高保真艺术品。只要你能快速呈现所有需求并与团队成员合作，更重要的是，你能对需求进行落地、测试、验证、优化和确认，最终形成一个完美的网站原型。.
简而言之，原型图是根据需求设计的可视化图，是简单的实验模型，是有利于快速方便地验证需求的解决方案。。
# 2.原型图的功能
# #1\. 探索与实验
原型的本质是一个测试工具，它根据你自己的需求来探索网站的功能或方向，从而实验一些想法是它的主要目的。。,我们不妨先建立一个简单的网站原型，只显示必要的基本信息和功能，然后开始测试，甚至可能在纸上画一个草图来得到。.
# #2\. 理解与验证
当我们收到分散的需求点时，我们需要做的是将分散的需求点可视化成一个视觉闭环。此时我们可以通过绘制原型图来展现网站需求的视觉效果，直观地看到网站成品交付的理想状态。因此，越接近理想状态的原型图，。.就越有资格
比如很多时候你不知道自己想要什么，你可以尝试画一个简单的原型图来展示你的想法。,或者当你收到不完整的需求并且没有完全理解需求的真实意图时，通过原型图展示你的需求挖掘和分析的结果，这样可以有效的验证需求的可行性。.
# #3\. 交付与对接
原型图是一个强大的工具，可以起到很好的展示作用，也是产品经理向执行团队解释和说明需求的高效工具。借助原型图，可以对网站的布局和功能进行逐一讲解，为开发团队提供清晰的概念，知道他们的职责是什么，是什么样的逻辑，明确他们的目标，让他们根据各自的职责开发网站的。。
#三。原型图的具体应用场景和优势
场景一：原型图设计是需求落地的第一步，。
通常，网站开发前的所有策划和规划大多是口头沟通和文档展示，相当零散。规划思路只停留在ppt或文档上，还有很多不确定因素，。.
我们需要真正落地，才能理清所有的规划和规划点，进行测试和验证，而原型设计师落地的第一步也是非常关键的一步，这也是测试一个产品经理的项目。.落地能力的关键点
优秀的产品经理可以将原型图收集整理的需求汇总进行可视化和绘制，让项目团队在快速发现问题后，更直观地了解和沟通调整。。
场景二：原型图可以有效防止视觉效果干扰我们的。.
一直以来，我们都会把网站的“好用”和“好看”分为两个阶段。“好用”就是网站采用原型图设计，可以有效防止视觉效果干扰我们，让我们专注于做一个实用性很高的网站架构。。
g src='https://p6.toutiaoimg.com/large/tos-cn-i-tjoges91tu/SqPkJdQH7JEL1Z' />许多企业并没有将网站原型图设计纳入建站流程中，这是因为他们仅仅将网站/网页以平面设计的角度，去评判视觉美观性，并不会深入考虑网站架构是否合理、逻辑是否通畅、访客会有怎样的体验感，这是巨大的错误。
毕竟企业网站是单向信息传达的工具，是没办法与访客做过多互动的，大多数情况下，信息都是在等待访客去点击查看，属于单向的操作去完成一次信息的沟通和交流，如果访客在操作的过程中，感到不适，都有可能是造成重大影响。
网站的大多数浏览阅读操作，都需要鼠标点击交互来完成，就像手机需要手指点击进行交互来完成的，网站页面不是一个静态的单页，因此我们需要用一个完全没有美感的线稿来思考网站的交互逻辑，这样在没有任何的视觉干扰，就不需要担心网站实用性会出问题。
场景三：原型图能拉近团队的沟通。
团队成员之间可围绕网站原型进行交流，除了产品经理之外，可以让其他成员更好地理解整个产品的构思及目的，一个好产品需要团队成员们都在顺畅的沟通交流下，才能得到好结果。
通过对产品原型的探讨，可以引导我们思考得更深入，思考的越深，方向也会越准确，原型虽然会占用一些时间，但是可以确保整个网站建设过程中，整个团队的方向不会跑偏。
确定了网站原型，我们可以非常纯粹且专注的去思考，如何去把网站的视觉做好，不会受到架构的干扰。保证这两者的完全独立，才能保证网站的出品是优秀的。
# 四、如何做好原型设计？
## 1\. 产品思维的应用
大多数人都不会将网站看作是互联网产品，更多的是将其定位为一个信息公告窗口，这种错误的理解是导致不少网站缺乏竞争力的主要原因。
我们在建站时需要始终要带着「产品思维」，这一思维将会贯穿于整个网站建设的流程，网站作为产品最终导向是服务，服务的受众是访客群体，不同的访客群体又处于不同的场景中，充分挖掘访客来到网站的真实需求，从而针对网站体验感等不足进行优化。
在这当中，我们不仅需要发掘网站所服务对象的真实需求，还需要针对于制造及运营“产品”有一系列的解决方案，将某些产品或服务进行产品化。
因此，做好原型设计离不开产品思维，产品思维主要包括了访客、场景、迭代这三个方向，从这三个方向可以延伸出访客画像、行为特点、需求场景、数据埋点等内容。
a. 目标访客是研究重心
访客作为我们网站的源头，我们检验网站是否优质，决定权也在访客手里，对访客要有充足的认知，我们才有可能做出优质且成功的网站。
首先，我们前期的市场调研分析出网站的访客画像，针对目标访客画像进行有针对性的策划和构思，除此之外，我们还需要思考访客的行为，例如有些访客喜欢浏览快速阅读内容，有的访客喜欢深入了解及阅读站内文章，我们可以将这些访客行为特点进行划分。
常见的企业网站，我们将分访客行为特点进行划分：
* 专业探索者：业内人士，深度阅读型群体
* 专业浏览者：业内人士，快速跳读型群体
* 非专业浏览者：外行人，包含应聘者、投资人等
访客群体划分的目的是为了更好的进行内容提炼与内容层级架构划分，打造逐层递进的网站架构，满足不同人群的不同浏览习惯，最终达到更好的信息传达效果。
网站浏览者习惯快速查看信息，通过我们可以通过「信息整合」，可以在同一板块进行内容切换，避免页面板式信息重复和繁多；并且探索者可以通过「查看详情」引导深入了解，这种常见方式可以同时满足这两类人群的浏览习惯和需求。
还需要注意一点，并非一个架构就能通用于每个网站，我们始终坚持网站架构服务于网站内容，而并非先定下网站架构再往架构内填充内容
，因为这样的传统建站思维往往无法建成一个好网站。
例如，增长超人在为小米的生态链公司云米，进行国际官网规划时，他们给到我们项目团队的资料文件就有1000+，经过精准提炼了产品卖点之后，才设计出了30+整体网站的原型策划稿，而非先设计框架再进行产品卖点填充：
b. 应用场景决定建站方向
决定好网站建设的方向比怎么做更为关键，我们着手准备建站肯定是先决定它的应用场景，先有应用场景才能规划适用于相应场景的方案。
网站作为互联网产品，同样依赖于场景，我们常见的思路是从访客的角度以及业务出发，判断每个应用场景中所存在的需求。
网站策划的过程是先发散后收敛的过程，在动手设计原型、输出文档前，我们要做大量的思考、调研，基础逻辑是每个访客群体面临的实际情况是怎样的，这也是回归场景。
我们除了需要回归场景，同样应该从网站角度进行思考，不仅要考虑功能、流程和浏览体验，还应该重点考虑，怎么让访客对我们呈现出来的网站内容，产生深刻的认知和理解，信息层的设计也应该为应用场景服务。
举个例子，一家做智能变色玻璃的企业，对于大众来说，这不是一项常见的技术和产品，如果是普通图片和文案展示，必然会缺乏想象，无法直观地传达产品价值。
所以，我们可以通过一些巧妙的交互，与访客进行互动，让访客产生良好的参与感和体验感。
增长超人出品-光羿官网产品展示
我们可以设计访客与网站发生交互的场景，更好地访客理解和感知网站的价值，从而让网站站得住脚，我们的网站功能也会因此形成差异化，设计出有特色的网站结构和功能，提升网站的竞争力。
c. 为迭代提供数据支持
优质的网站难以一次成型是现实问题，我们见到的好网站都是经过多次迭代和运营而成，网站建设从0到1容易，用个简单的模板也能完成，但是从1到N才是最难的，而我们在最初的0-1的环节上，尽可能做到完善，才能减轻1-N的难度。
产品迭代是产品思维中非常重要的方向，大家都知道，网站建成之后是需要进行维护、分析及优化，从而进行更新迭代，持续保持网站的竞争力，因此，我们在建站过程中，要提前为后续的迭代工作做好准备，打好牢固的基础。
这就类似于，我们常说的“不能让孩子输在起跑线上”，而“起跑线”分为三种，第一种是基础知识，第二种是环境，第三种则是思维。
网站的设计、前端就相当于「基础知识」，最显而易见；网站的「环境」则是域名、服务器等配套设备这种基本环境；最后
「思维」就是为长期发展所部署的数据埋点、用户反馈、统计端口等，为将来做准备的课题 。
数据是迭代的基础，原型图设计之时，我们就需要确定好数据采集的规划，实现后期数据埋点，配套的数据分析工具、统计工具，为迭代提供最可靠最科学的支持。数据驱动下的网站迭代，是维持网站竞争力的核心，是数字时代下不可忽视的关键点，切勿轻视。
## 2\. 网站原型图设计流程指南
这里分解一下原型图设计的流程，可以作为指南进行参考：
① 填写需求调研表
首先，在市场调研中，我们重点需要对项目进行信息采集和需求调研，是原型图设计可以同步进行的工作，这里我们分别采用两张表单进行关键信息采集，内容主要是项目需求、设计风格、参考资料、受众人群属性等等。
② 初步构思，大框架绘制初稿
根据上述这些信息采集及研究之后，基本就有了初步的想法，将这个想法可视化出来，也就是大框架草绘原型图，可以是手绘也可以是软件绘制。
草绘原型图：
从字面上理解就能知道是相对“简陋”的一种绘制形态，仅展示大概的网站页面框架、核心的网页布局以及关键内容。这种形态更多是在团队内部协作时会采用的，快速绘制调整，有利于尽快得到反馈，推进网站建设的进程。
如果页面较为复杂时，我们还需要输出「页面流程图」，进行页面逻辑和需求逻辑的说明，把页面的功能、需求、目的、行为说明清楚，既能方便设计师理解，又能理清框架，验证功能可行性。
页面流程图
③ 验证需求可行性，输出低保真原型图
根据原型图的讨论、页面流程探讨，进一步优化网站整体框架和逻辑，输出完善的低保真原型图，进行90%的确认。
低保真原型：这类绘制形态和草绘原型图相比要更完整，是我们网站原型图设计阶段常会采用的一种形态，低保真没有视觉设计，大多数使用灰色色阶和占位符来指示内容，多为黑白灰的视觉风格。可以较为完整地展示网站页面框架、内容布局等，更有助于建站过程中的视觉、交互设计协作。
④ 最终输出高保真，及需求文档，对接设计
最后，如果功能较为复杂，或者希望更为直观表达，我们可以输出更加完善的高保真原型图，包含一些静态DEMO，作为参考提供给设计师和技术人员，同时要输出相应的需求文档，进行100%确认。
# 五、总结
在原型图设计这个节点上，“画”不是最重要的，而是先想清楚画的目的是什么、为谁画才能做到有效输出，匹配网站建设场景的成果。
不管是低保真还是高保真，最核心的都是需求和逻辑，需求正确、逻辑正确都能为后续工作提供有力支持。
有很多建站公司会为了赶时间、节省成本，而砍掉原型图设计这一环节，没用采用原型图工具来进行全站的规划，这就容易出现实用性问题，并且造成整体网站逻辑不清晰，访客体验差等情况，这也是我们团队为什么始终坚持原型图设计这一环节，网站作为产品，服务于用户，以用户为本才是产品的本质。
本文由@增长超人 原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自unsplash，基于CC0协议。
