首先，他们都是网站的界面和交互方面的模型，但完成度各不相同线框图 更多侧重呈现网页界面的主体结构，极易只要的页面跳转和逻辑关系一目了然的了解网页设计的大致情况原型图 原型添加更多的界面细节以及交。

1第一步新建网页首先打开软件，选择菜单栏下“修改”“框架集”“拆分为左右框架”进行三个网页的保存2第二步制作左边的框架网页首先插入表格并设置基本属性选择主菜单下的“插入”“表格”。

线框图更多侧重呈现网页界面的主体结构，极易只要的页面跳转和逻辑关系一目了然的了解网页设计的大致情况原型图原型添加更多的界面细节以及交互，已然是相当真实的网页设计模型，能够进行初略的产品演示和测试视觉图。

线框图是用户界面布局的基本框架线框图使用使用占位符，而不是使用真实的界面元素线框图被用于早期阶段设计和开发过程中，验证信息架构和用户流程相框图有助于确定移动端程序或网站的界面功能与视觉框架，所以说线框图。

第二步制作网页原型图 这是一个费脑活，目前大多数人都是采用Axure的软件制作，画原型图需要参考很多网站风格，通过不断的借鉴，才能总结自己的网站风格目前设计流行的元素是采用图标配文字，界面扁平化，尺寸做成宽屏风格在制作原型图的。

直白点呢，线框图更多是在设计初级，直接快速勾画的网页或软件产品的主体结构用户流程或者页面跳转关系等， 方便设计师或团队能够快速决定产品的宏观设计方向，从而尽快开始细节设计而原型图，相对线框图，呈现了更多的细节。

通常将信息设计界面设计和导航设计放在一起形成统一凝聚力的架构的地方成为线框图对于大多数项目来说，需要多个线框图来传达复杂的预期效果通过安排和选择界面元素来整合界面设计通过识别和定义核心导航系统来整合导航设计。

一个合适的线框图是极简设计致胜前提你可以运用它获得合适的比例，创造出有趣的视觉平衡 你可以在设计伊始就用2B铅笔在草稿上画出你的页面布局和元素样式 在画线框时，你需要遵循下面的顺序 1决定你的网页中需要出现的元素 2。

1AdobePhotoshop毫无疑问，AdobePhotoshop仍然是最受欢迎的工具，甚至在多年后这是每网页设计师必备的软件Photoshop可以通过多种方式使用，从数字图像编辑到为您的网站创建高级视觉效果或布局在原型和线框方面，现在有。