绘制|原型图真正的核心是什么，怎么做好原型图设计？( 三 ) 招股书|网易云音乐|破发|丁磊

我们除了需要回归场景，同样应该从网站角度进行思考，不仅要考虑功能、流程和浏览体验，还应该重点考虑，怎么让访客对我们呈现出来的网站内容，产生深刻的认知和理解，信息层的设计也应该为应用场景服务。
举个例子，一家做智能变色玻璃的企业，对于大众来说，这不是一项常见的技术和产品，如果是普通图片和文案展示，必然会缺乏想象，无法直观地传达产品价值。
所以，我们可以通过一些巧妙的交互，与访客进行互动，让访客产生良好的参与感和体验感。

文章插图
增长超人出品-光羿官网产品展示
我们可以设计访客与网站发生交互的场景，更好地访客理解和感知网站的价值，从而让网站站得住脚，我们的网站功能也会因此形成差异化，设计出有特色的网站结构和功能，提升网站的竞争力。
c. 为迭代提供数据支持
优质的网站难以一次成型是现实问题，我们见到的好网站都是经过多次迭代和运营而成，网站建设从0到1容易，用个简单的模板也能完成，但是从1到N才是最难的，而我们在最初的0-1的环节上，尽可能做到完善，才能减轻1-N的难度。
产品迭代是产品思维中非常重要的方向，大家都知道，网站建成之后是需要进行维护、分析及优化，从而进行更新迭代，持续保持网站的竞争力，因此，我们在建站过程中，要提前为后续的迭代工作做好准备，打好牢固的基础。
这就类似于，我们常说的“不能让孩子输在起跑线上”，而“起跑线”分为三种，第一种是基础知识，第二种是环境，第三种则是思维。
网站的设计、前端就相当于「基础知识」，最显而易见；网站的「环境」则是域名、服务器等配套设备这种基本环境；最后「思维」就是为长期发展所部署的数据埋点、用户反馈、统计端口等，为将来做准备的课题。

文章插图
数据是迭代的基础，原型图设计之时，我们就需要确定好数据采集的规划，实现后期数据埋点，配套的数据分析工具、统计工具，为迭代提供最可靠最科学的支持。数据驱动下的网站迭代，是维持网站竞争力的核心，是数字时代下不可忽视的关键点，切勿轻视。
2. 网站原型图设计流程指南这里分解一下原型图设计的流程，可以作为指南进行参考：
① 填写需求调研表
首先，在市场调研中，我们重点需要对项目进行信息采集和需求调研，是原型图设计可以同步进行的工作，这里我们分别采用两张表单进行关键信息采集，内容主要是项目需求、设计风格、参考资料、受众人群属性等等。
② 初步构思，大框架绘制初稿
根据上述这些信息采集及研究之后，基本就有了初步的想法，将这个想法可视化出来，也就是大框架草绘原型图，可以是手绘也可以是软件绘制。
草绘原型图：从字面上理解就能知道是相对“简陋”的一种绘制形态，仅展示大概的网站页面框架、核心的网页布局以及关键内容。这种形态更多是在团队内部协作时会采用的，快速绘制调整，有利于尽快得到反馈，推进网站建设的进程。
如果页面较为复杂时，我们还需要输出「页面流程图」，进行页面逻辑和需求逻辑的说明，把页面的功能、需求、目的、行为说明清楚，既能方便设计师理解，又能理清框架，验证功能可行性。

文章插图
页面流程图
③ 验证需求可行性，输出低保真原型图
根据原型图的讨论、页面流程探讨，进一步优化网站整体框架和逻辑，输出完善的低保真原型图，进行90%的确认。
低保真原型：这类绘制形态和草绘原型图相比要更完整，是我们网站原型图设计阶段常会采用的一种形态，低保真没有视觉设计，大多数使用灰色色阶和占位符来指示内容，多为黑白灰的视觉风格。可以较为完整地展示网站页面框架、内容布局等，更有助于建站过程中的视觉、交互设计协作。
④ 最终输出高保真，及需求文档，对接设计
最后，如果功能较为复杂，或者希望更为直观表达，我们可以输出更加完善的高保真原型图，包含一些静态DEMO，作为参考提供给设计师和技术人员，同时要输出相应的需求文档，进行100%确认。
五、总结在原型图设计这个节点上，“画”不是最重要的，而是先想清楚画的目的是什么、为谁画才能做到有效输出，匹配网站建设场景的成果。