人(甚至设计师)经常分不清线框图和原型。他们知道两者都是设计过程的一部分，但它们在形式和功能上是否相似？它们是不是能互换？它们是一样的东西吗？不是。
线框和原型都在产品设计过程中扮演独特的角色。虽然两者之间的主要区别往往归结为保真度（模型与最终产品的相似程度），但在设计和功能方面还存在其他差异。
什么是线框？
线框是一种低保真模型，可用于3个简单而确切的目的：
1. 它显示将在页面上显示的信息
2.它给出了页面结构和布局的大纲
3. 它传达了用户界面的总体方向和说明
一个好的线框的关键是简单。线框和原型之间的主要区别之一是保真度。线框通常是中保真或低保真的，可以是在纸上绘制方框和线条，也可以是在软件中绘制的更精致的创作。交互性是最低限度的，因此用户可以测试行为，而不必担心产品的外观和感觉。
什么是原型？
原型是一个系统，一个应用程序或网页相对简单的工作模型。他们通常在产品设计过程中是线框图下一步。原型通常有颜色、动画和（希望）产品上或产品中的实际内容。
不同的线框，原型往往中高保真。它们允许用户测试数字产品的接口和交互，并且这种功能级别在应用程序的可用性测试中非常有用。因为它们通常类似于一个成品，所以在开发阶段投入的时间和精力可以转化为节省。
二者之间的区别是什么？
如果您将您的产品视为人体，则线框和原型的用途相似但不同。
线框图作为数码产品的骨架。它们是基础，它们提供了构建你所构建的东西的一般概念。除了布局框架设计，内容和副本是产品的核心部分。早期设计的内容和复制，路径将从线框变为原型。最好有实际的内容来确保一切以您想要的方式完成。
原型是产品更直观的表现形式。想一个原型几乎形成体可塑性皮肤或面部特征。起草一个原型就像让你的作品适合大众。这不是最终版本，但向其他人展示是可以接受的。这一点，你需要做的是在你把你的设计发送给工程师之前，做一些调整再实现设计。
线框和原型工具
虽然有一些工具可以作为一个多功能工具，从草图到原型，再加上HTML和CSS，还有更多的专门工具，关注产品设计过程的每个部分。下面是我们推荐的一个简短的列表：
线框
笔和纸是开始使用线框的简单方法。素描通常是将大脑中的想法传播到世界的最快方式，以便您可以查看，反映和修改。使用纸张的主要优点之一是您的作品没有太珍贵。可以把它们弄皱并折起来。
Volkside的Wirify是一种“让您只需一次点击即可将任何网页变成线框”的工具。它用于创建线框和用于分析页面的清晰，清晰，流畅的方式。如果您正在审核现有网页以改善效果，这非常棒。
InVision Freehand就像一个轻量级的数字白板，您和您的团队可以进行协作和沟通。您在Freehand中创建的线框是可共享和协作的，使用Freehand可以节省您扫描和上传手绘线框的繁琐步骤，只需要在做出微小更改时再次完成。
原型
Sketch是用于MacOS的矢量图形编辑器，用于屏幕和数字产品设计。它被称为比Adobe Photoshop更简单的工具。通过一些可用的UI工具包配对Sketch，快速原型制作变得更容易。
InVision（如果您不知道）可让您上传您在Sketch或Photoshop中创建的设计文件，并添加动画，手势和转场，以将静态屏幕转换为可点击，互动原型。您还可以通过让客户，团队成员和利益相关方直接对您的设计进行评论来简化您的反馈过程。这是一站式原型制作店。
