交互线框图/原型图还在傻傻分不清，UXD一张图带你全面透彻了解

Wireframe线框图和Prototype原型图在产品设计过程中都扮演着独特的角色。两者之间的区别除了逼真度方面，从设计和功能方面他们也存在着区别。线框之所以重要，其中最重要的原因之一就是线框，专注于功能，行为和内容的优先级。一旦有了清晰的线框，梳理设计产品逻辑就会变得容易很多。

什么是线框？

线框是一种低保真模型，可用于3个简单而精确的目的：

1.它展示了页面上显示的信息

2.它概述了页面的结构和布局

3.它传达了用户界面的总体使用流程

好的线框的关键是简单清晰的线框和流线，线框的保真度通常从低到中等，从纸质模型和电子作品。但是界面的设计程度都较低，主要用于测试用户行为而无需过多关注产品的外观。

什么是原型？

原型是准产品，是设计最终成果的相对简单的前期模型，它们通常是线框之后产品设计过程中的下一步。原型通常具有颜色，动效以及（希望）产品上或产品中的实际内容。

线框图是产品的骨架，为你构建的内容提供了总体思路。你越早绘制线框，设计的思路就越清晰。

原型是产品的更直观表示，通过多次迭代可以将原型转化成几乎成型的物体。它不是最终版本，但可以向其他人展示。设计师只需要做一些细微的调整，然后再将设计发送给前后端工程师即可。

下面，我整理了一些UX设计师制作的线框图优秀作品，希望它们可以激发你的灵感从中学到一些东西。

From wireframes to design by Cuberto

Apple Watch WIRE by buatoom from Omise

Simplified Checkout Process by Michael Pons from PG

SelfSurvey — Wire Frames 1.0 by Sergey Jani from LUFT

UX User Flows by Janna Lynn Hagan

User Flow Diagram for Apple Watch App by Marian Mota from SoftServe Design Office

Sitemap For Student Guide by Janna Lynn Hagan

Kitchenware Pro — Wireframe Kit by Neway Lau

Wireframes by Cuberto

Wireframes by Michele Strohschein