从外观和功能到导航和易用性，**一个完全证明的网站或应用程序需要很多。设计一个专业的网站或应用程序不仅仅是为了**漂亮多彩的页面；它是关于了解你的受众和精心设计一个模型，不仅满足客户的需求，而且实现你的业务目标。事实上，整个设计过程可以是一个令人振奋的经验，但同时，它可以混乱和令人沮丧。与创建新结构的蓝图一样，设计阶段从创建网站或应用程序的蓝图开始，称为线框。线框是设计过程中基本布局的基本设计元素。然后是原型，它使线框更进一步，因为人们需要看到真正的交易。原型设计主要关注网站的结构及其内容。

什么是线框(a wireframe)？

线框是web产品布局的低保真度、结构化表示。它就像一个骨架框架，帮助组织网站的结构，就像创建一个新的办公室或建筑物的蓝图。线框是一个网站的树形图或流程图，显示了它的所有页面以及它们如何相互连接。它让开发者和设计者大致了解网站的外观。它帮助他们更好地理解网站或应用程序的核心功能。每一个线框都提供了一个可视的参考来构造每个页面，但通常不包括对网站设计或其内容的任何参考。线框包含以下元素：全局导航方案、文本和媒体块以及交互设计。线框基本上是设计过程的基础。它们仅限于手绘，但通常使用Microsoft Visio、Dia或Gliffy等软件程序组合在一起。

什么是原型(a prototype)？

原型是网站或应用程序最终界面的早期设计模型，具有功能性UI、丰富的交互和动画。在设计过程的早期，客户需要了解一切是如何组织起来的，仅仅像线框一样看蓝图是不够的，因为他们需要看到和触摸真正的交易。所以这就是原型出现的地方。一个原型就像一个实物模型或演示什么样的最终产品将看起来像它上线。一个原型就像一个最终产品，你的网站或应用程序的最终表现。它就像一个交互式的网页设计模型，只有有限的可点击的线框，你可以点击导航和按钮的草图版本。虽然它可能没有最终网站或应用程序的全部功能，但它允许你与网站进行交互，就像它是最终产品一样。

线框与原型的区别

意思

–线框和原型是最常见的两种用户体验交付产品，但这两种产品常常相互混淆。线框是网站或应用程序的简化表示或基本布局。它是一个网站的树形图或流程图，显示了它的所有页面以及它们如何相互连接。另一方面，原型是网站或应用程序最终UI的早期设计模型，具有丰富的交互和动画。一个原型几乎就像是一个产品的最终代表，没有铃铛和口哨。

结构

–Wireframe是网站或应用程序结构的纯文本模型，就像一个蓝图，它代表了相同的框架。线框可以手工绘制，也可以用微软Visio、Dia或Gliffy等软件程序进行电子创建，但无论哪种情况，它们都由线条和文本组成。视觉设计和颜色不在线框中表示。另一方面，原型更灵活一些，它可能包含内容或图像。原型可以是静态的，也可以是响应式的，它们可以由纸张或数字工具（如axure或Adobe XD）制成。

集中

–基本上，所有线框都是原型；事实上，它们是低保真度的原型，没有太多细节。表示优先级的结构元素是线框的主要关注区域。线框有三个基本目标；展示主页的内容，概述网站/应用程序的结构和布局，突出显示基本用户界面。然而，并非所有的原型都是线框。原型服务于多个用例，比如可视化一个想法，作为开发人员的蓝图，评估技术可行性，或者测试设计的有效性。

线框与原型：对比图

总结

所有的线框都是原型，但不是所有的原型都是线框。线框是低保真度的原型，没有很多细节，这意味着没有视觉设计或颜色，只有线条和文字。另一方面，一个高保真的原型就像一个交互式的网页设计模型，它看起来和你的最终产品一模一样，但是它的行为和最终产品不一样。如果您处于产品的早期阶段，那么低保真度原型可以有效且快速地开发。或者，如果你在这个过程中领先一点，并且希望将设计传达给其他人，那么中高保真原型将是一个更好的选择，并且可能会受到观众的欢迎。