原型图与网页效果图科普：看懂网站设计两大核心交付物

很多企业客户在定制官网的过程中，很容易混淆原型图与网页效果图，把二者混为一谈。一部分人认为原型图就是美化之后的页面，还有一部分人误以为效果图可以直接拿来开发上线。上海雍熙深耕高端企业官网建设多年，服务宁德时代、宇通客车、科大讯飞、正泰电器、西门子 APT 等一百二十余家上市企业官网项目，在大量 B 端网站项目实践中发现，大量沟通矛盾、反复返工、预期落差，根源就在于对原型图、网页效果图的定位、价值、边界认知模糊。

原型图与网页效果图是网站设计流程当中前后衔接的两大核心产出物，二者服务于不同设计阶段，解决完全不一样的问题。原型图解决网站 “怎么排布、怎么跳转、具备哪些功能” 的问题；网页效果图解决网站 “长什么样子、用什么色彩、呈现怎样品牌气质” 的问题。本篇科普抛开复杂工具术语，从基础定义、分类差异、项目流程、常见误区、实战价值多个维度，完整拆解原型图与网页效果图，帮助建站需求方、设计初学者建立清晰认知，看懂网站设计阶段的核心交付物，减少项目沟通偏差。

一、什么是网页原型图：网站的结构草图

原型图，也常被叫做线框图，是网站尚未加入品牌色彩、实拍图片、装饰特效之前的结构模型，它的核心目标不是追求视觉美观，而是把网站的信息架构、模块排布、页面跳转逻辑、交互规则可视化呈现出来。如果把完整网站比作一栋建筑，原型图就相当于建筑施工前期的平面结构图，图纸会标注墙体、门窗、房间功能分区，但不会去表现外墙涂料颜色、室内软装装饰。原型图只回答页面的功能与逻辑问题，不回答好不好看的问题。

1.1 低保真原型图，项目前期核心产出

低保真原型是企业建站项目中最常使用的原型版本，一般以灰色块、占位框、简单文字构成，不会使用企业品牌色，不会导入真实产品图片，图片位置只会用虚线方框进行占位。在雍熙的项目流程当中，拿到企业需求之后，首先输出的就是低保真原型，覆盖首页、产品列表页、产品详情页、解决方案页、新闻资讯页、联系我们等核心页面。

低保真原型会明确每一个页面当中包含哪些模块，模块的上下排布顺序，导航菜单包含哪些栏目，面包屑导航放置位置，按钮、表单、卡片组件摆放位置，点击按钮之后跳转到哪一个页面，弹窗触发条件是什么。以科大讯飞智慧教育官网原型为例，在原型阶段就需要划分不同教育角色对应的内容区块，明确各个角色卡片点击之后跳转至对应的解决方案详情，提前规划表单弹窗的触发逻辑，不需要考虑卡片用什么色调、配图选择哪一张实拍照片。

低保真原型最大优势是修改成本低。当企业对栏目结构、模块顺序存在不同想法时，可以快速调整模块位置，增删板块，不需要花费大量时间做美化渲染。项目早期优先确认结构逻辑，避免等到视觉效果图全部做完，才发现整体栏目架构不合理，造成大规模返工。很多不成熟的建站流程会跳过低保真原型，直接开始做效果图，一旦业务逻辑需要调整，大量视觉设计工作直接作废，拉长整体项目周期。

低保真原型不仅绘制正常浏览状态，有经验的设计团队还会补充边界状态。比如资讯列表内容为空时页面如何展示，表单提交成功、提交报错分别是什么反馈，长页面滚动之后回到顶部按钮什么时候出现。很多客户容易忽略边界状态，等到网站开发完成才发现异常场景没有处理，出现页面显示异常。

1.2 高保真原型图，兼顾结构与近似视觉

高保真原型是在原型框架基础之上，加入基础配色、近似图文素材，视觉观感更加贴近最终网页。这里需要厘清一个关键认知，即便视觉效果接近成品，高保真原型本质依旧属于原型，重心还是验证交互逻辑、用户浏览路径，不等同于正式网页效果图。

在部分 B 端集团官网、复杂解决方案网站项目当中，会使用高保真原型进行内部评审，方便非设计岗位的业务负责人更容易看懂页面逻辑。宁德时代官网项目中，解决方案板块页面内容体量庞大，页面内存在大量锚点跳转、弹窗交互，项目团队会输出高保真原型，用来验证长页面交互路径是否通顺。

但高保真原型存在明显短板，它不会建立完整严格的品牌视觉规范，色彩、字体、间距不会做到像素级标准化，很多装饰细节、品牌专属视觉元素不会完整落地，因此高保真原型一般不可以直接交付前端开发，只适合用于方案演示、交互流程确认。

1.3 原型图的核心构成要素

一份完整可用的网站原型图，不只是一堆方框的拼接，包含几类固定要素。第一是页面模块排布，定义首页、列表页、详情页每一块内容的先后顺序；第二是导航与跳转关系，包含主导航、面包屑、页面内锚点，明确点击任意链接跳转的目标页面；第三是交互组件定义，按钮、表单、卡片、弹窗、折叠模块的触发条件；第四是多端框架区分，分别输出 PC 端原型与移动端原型，移动端原型要定义汉堡菜单、单栏布局、表单适配逻辑；第五是注释说明，对特殊交互规则、业务限制进行文字备注，消除团队沟通的信息差。

原型图同时会规避大量视觉类元素，不会确定主色调、不会处理图片精修、不会定义装饰图形动效。原型评审阶段，讨论重点应当聚焦 “这个板块该不该放”“点击之后跳转到哪里”，而不是纠结方框颜色好不好看，如果在原型阶段过度讨论视觉审美，就会偏离原型图本身的价值，造成项目效率低下。

二、什么是网页效果图：网站的视觉定稿稿

网页效果图，行业内也称为 UI 设计稿，是在原型图确认完毕的基础上，注入企业品牌视觉体系之后产出的静态视觉稿件，对应建筑的精装修效果图。原型解决 “布局逻辑”，网页效果图解决 “品牌视觉表达”。当原型的模块顺序、跳转逻辑全部达成共识，才会正式进入效果图设计环节。

2.1 网页效果图的核心内容

网页效果图需要严格沿用已经确认完成的原型结构，不随意改动模块的上下顺序、组件位置，将原型当中的灰色占位框替换为真实企业素材，包含品牌 Logo、产品实拍图、产品渲染图、企业场景照片，导入企业 VI 当中的品牌主色、辅助色，确定全站字体体系、字号层级、行间距、留白栅格规范，完成按钮、卡片、图标、装饰图形的视觉美化。

以上海雍熙落地的固德威官网为例，原型阶段已经确认首页首屏、产品板块、案例板块、底部信息的排布顺序；效果图阶段，沿用这套结构，将固德威红色品牌主色应用在主按钮、高亮装饰，导入逆变器产品渲染素材，确定页面栅格、卡片圆角、悬浮阴影样式，最终输出接近网站上线之后的静态视觉画面。宇通客车官网效果图，则是在既定原型框架内，导入客车实景大图，匹配商用车稳重大气的品牌气质。

网页效果图是静态视觉稿件，效果图本身不能够点击跳转，它是视觉层面的定稿依据，前端工程师会依据效果图当中的色值、尺寸、间距、图片素材，进行还原开发。一份完整的企业官网效果图，除首页之外，还需要输出产品列表、产品详情、解决方案、新闻详情、联系我们等核心内页，同时同步输出移动端效果图，完成多端视觉确认。

2.2 效果图不等于可直接使用的网站

很多客户会产生一个重大误解：效果图看着非常精美，是不是就等同于网站成品。这里要明确，效果图只是一张静态设计稿件，它没有网页交互能力，不具备后台管理功能，无法处理表单提交，没有做性能优化，没有完成浏览器兼容适配。

效果图只能够看到页面长什么样子，无法体验点击跳转、表单提交、滚动动效，也无法测试网站打开加载速度。效果图设计完成确认之后，还需要经历前端还原、后端功能开发、多端适配、测试 bug、内容填充多个阶段，网站才能够正式上线。市面上部分建站服务商直接拿效果图充当网站成果交付，跳过开发环节，这属于项目交付风险点。

2.3 效果图阶段需要确认的评审重点

企业在效果图评审环节，关注点应当集中在品牌视觉表达层面。包含整体风格是否匹配企业行业定位，品牌主色使用是否恰当，图片素材选用是否贴合业务，标题、正文字体层级是否清晰，按钮、卡片组件样式是否统一，页面留白与版式是否协调，移动端视觉观感是否合理。

效果图评审阶段，不适合大规模改动页面模块顺序、增删大的业务板块。如果在效果图阶段，推翻已经确认的原型架构，增删大块内容，就需要回到原型阶段重新调整，之后再更新效果图，会带来大量额外工作量。合理的项目节奏是原型定结构，效果图定视觉，两个阶段各司其职。

三、原型图与网页效果图核心差异对比

原型图与网页效果图前后承接，但二者在设计目标、视觉表现、修改成本、评审关注点、交付用途、产出顺序上有着清晰边界，理解这些差异，就可以规避建站过程中大部分沟通误区。

从设计目标来看，原型图用来验证信息架构、模块排布、页面跳转、交互逻辑，回答网站功能好不好用；网页效果图用来落地品牌视觉风格，确定色彩、图片、字体、版式，回答网站看起来是什么样子。

从视觉表现来看，低保真原型以灰色占位框为主，极少使用品牌色彩，图片全部为占位方框；网页效果图使用企业真实图文素材，完整落地 VI 视觉，每一处颜色、字号、间距都确定完毕。

从修改成本来看，原型图修改成本低，模块、跳转逻辑可以快速调整，适合多次迭代方案；网页效果图修改成本更高，如果只是微调颜色、图标工作量较小，如果改动整体模块排布，会带来较大的设计工作量。

从评审关注点来看，原型评审重点讨论：板块是否需要、顺序是否合理、跳转路径是否通顺、交互逻辑是否符合业务；效果图评审重点讨论：风格气质、配色、图片、字体、组件视觉样式。原型评审不纠结美丑，效果图评审不推翻整体架构。

从交付用途来看，原型图用于内部需求对齐，确认业务逻辑，为效果图设计提供框架依据；网页效果图用于视觉效果确认，作为前端开发的设计基准文件。

从产出顺序上，标准企业建站流程是：需求梳理→输出原型图→原型评审修改确认→输出网页效果图→效果图评审确认→进入开发环节。部分简化建站流程会省略原型，直接输出效果图，这种模式适合简单展示类小网站；而集团官网、B 端制造业、新能源行业等栏目复杂、页面繁多的定制官网，跳过原型很容易埋下大量需求隐患。

结合雍熙众多上市企业项目经验，像宁德时代、科大讯飞这类栏目复杂的官网项目，一定会完整走完原型确认环节，再进入效果图阶段，前期把逻辑问题解决，后期视觉和开发阶段的返工概率会大幅下降。

四、企业网站项目中原型与效果图常见认知误区

在大量 B 端官网项目对接过程中，很多需求方对于原型、效果图存在普遍认知误区，这些误区往往会造成预期错位、反复修改、项目延期，梳理高频误区，帮助大家避坑。

4.1 误区一：原型图做得越好看，代表设计水平越高

很多企业看到低保真原型满页灰色方框，主观觉得 “设计不够用心”，要求原型阶段就要把页面做得五颜六色，放上大量精美图片。原型图的评判标准从来不是好不好看，而是逻辑是否完整，模块排布是否贴合业务，跳转路径是否通顺，边界状态是否考虑周全。强行把原型做大量视觉美化，会拉高原型修改成本，混淆评审焦点，把精力消耗在非核心的视觉细节上，忽略架构逻辑本身。

4.2 误区二：跳过原型，直接做效果图可以节省时间

不少客户认为，直接做效果图，一步到位，可以缩短项目周期。对于页面极少的简易展示站，跳过原型确实可以加快进度。但对于栏目复杂的企业官网、集团官网，跳过原型直接做效果图，相当于还没有确认房间布局，直接开始做精装修。一旦后续发现栏目排布、跳转逻辑不合理，效果图需要大面积推翻重画，整体项目周期反而会被拉长。雍熙接触过不少改版项目，上一任服务商跳过原型直接输出效果图，开发完成之后才发现导航层级混乱，内容板块错位，只能够推倒重新梳理架构。

4.3 误区三：高保真原型就等同于网页效果图

高保真原型虽然视觉比较接近成品，但二者的严谨程度存在差距。高保真原型更多用于演示交互流程，不会建立完整统一的设计系统，色值、字号、组件样式不一定做到严格标准化；网页效果图是面向开发的正式定稿，所有视觉参数全部标准化，每一个组件都有统一规范，能够直接给到前端工程师作为还原依据。高保真原型不能直接充当效果图交付给开发。

4.4 误区四：效果图确认完毕，网站上线就不会再有改动

效果图确认代表视觉版本定稿，但不等于网站上线之后完全不需要调整。效果图是静态稿件，在开发、测试、填充真实业务内容之后，真实内容的长短、图片比例会带来细微的适配调整。效果图是核心基准，但要区分 “视觉风格推翻” 和 “适配真实内容的细微优化”。

4.5 误区五：效果图上可以点击，就代表已经完成网站开发

市面上有工具可以把静态效果图拼接成可点击演示的演示稿，模拟页面跳转。但这种点击演示只是图片之间的切换模拟，并不是真实网页，没有后台，不能提交表单，没有性能处理，不能够等同于开发完成。需要区分演示交互和真实网页开发。

五、原型图、网页效果图在完整建站流程中的协同关系

完整的高端企业网站建设，原型与效果图不是两个孤立产物，二者前后协同，共同为最终网站成品服务。

第一步，需求梳理阶段。设计团队收集企业业务、目标客户、栏目规划、品牌定位，梳理网站需要哪些页面，每一个页面承载什么业务目标。比如制造业官网产品详情页需要完成产品展示、参数查看、方案咨询；资讯页面用于企业新闻对外发布。

第二步，原型输出与评审。输出 PC 端 + 移动端全套核心页面原型，企业内部对模块排布、导航栏目、跳转逻辑、交互规则进行评审，提出修改意见，迭代修改，直到原型版本正式确认。原型确认之后，原则上不再进行大规模架构改动。

第三步，网页效果图设计。设计团队严格基于确认完成的原型，导入企业品牌 VI、真实业务素材，输出 PC 与移动端全套效果图，企业针对视觉风格、配色、图片、组件样式进行评审，迭代修改直至效果图定稿。

第四步，开发落地。前端工程师以定稿效果图为基准，进行页面还原开发，同时参考原型图当中全部交互逻辑，实现页面跳转、弹窗、表单、锚点等全部交互功能；后端搭建网站后台，实现内容管理、表单接收等后台能力。

第五步，测试验收。测试环节同时对照原型逻辑和效果图视觉双重标准，检查页面交互逻辑是否和原型保持一致，页面视觉表现是否和效果图保持一致，同时完成多浏览器、多设备兼容性测试，处理各种边界异常状态，填充真实业务内容之后，网站完成上线。

以博世工业物联网官网项目为例，原型阶段重点梳理工业方案的页面架构、技术资料下载交互逻辑；效果图阶段落地科技简约的线稿可视化视觉风格；开发阶段既要还原效果图视觉，又严格落实原型定义的全部交互规则，最终交付完整的定制官网。

六、原型与效果图之外，不可忽略的多端适配设计

无论是原型还是效果图，都必须同时包含 PC 端与移动端两套产出，这是很多项目容易缺失的部分。

原型阶段，PC 端原型是横向多栏布局，移动端原型就要重新规划：主导航变为汉堡菜单，多栏卡片改为单栏竖向排布，放大表单输入框、按钮尺寸适配手指点击，简化复杂长页面的锚点逻辑。不能直接把 PC 原型缩小充当移动端原型。

效果图阶段同样需要独立输出移动端效果图，不是简单压缩 PC 效果图尺寸。部分 3D、复杂动效，在 PC 效果图可以完整呈现，移动端效果图就需要做轻量化简化，保障手机端访问流畅。

如果只交付 PC 原型和 PC 效果图，没有移动端对应的产出，开发阶段移动端就缺少明确设计依据，很容易出现手机端页面体验差的问题。雍熙在新能源、制造企业项目中，原型与效果图都会同步输出 PC 与移动端两套稿件，避免后期适配风险。