原型与线框：如何在设计中使用

It’s fair to assume that every popular web program or application we use today underwent several rounds of user testing before release.

During the user testing process,用户体验（UX）用户界面（UI）设计人员将其设计版本放在真实用户的手中，以确保最终产品不仅看起来很吸引人，而且可以直观地使用。

数字设计项目工作吗?你会probably encounter the terms线框和原型, if you haven’t already. And if you're not a UX/UI designer, you may accidentally use these terms interchangeably.

很容易理解原因：两者都在产品开发的早期阶段用于测试。

线框和原型s are design deliverables that represent the final product. Many believe their distinction lies in their fidelity, or how detailed they are relative to the final product. However, in reality, they are fundamentally different.

原型与线框

线框可以根据以下标准与原型区分开：功能，目的和类型。

1.功能

线框

A线框is a two-dimensional representation of the initial product design.

从蓝图对房屋的蓝图方面来考虑线框。通常有一些迭代，但是设计开始是一个粗略的草图。随着反馈的合并，粗糙的设计被充实，以详细说明产品的基本视觉结构（或应用程序或网站）。

线框提供了页面结构的清晰概述，包括布局，必要的元素（按钮，链接和内容描述）以及（在最后阶段）颜色，图像和品牌。基本上，线框是项目整体方向的指南。

以下是一个详细的手绘示例。

Image Source

原型

在线框之后，可以将原型视为设计过程的下一个阶段。这是应用程序或网站的工作模型，可以更充分地模拟用户交互。

To revisit our house analogy, a prototype can be likened to a model home. Potential homeowners (or users) can physically experience what it would be like to be inside the home. They take a tour understanding that it’s not the精确的他们将住在家里，根据他们的反馈，最终将通过最终的触摸完成。

换句话说，原型不是项目的最终版本，但是它应该足够近，可以在产品向消费者出现之前进行完全测试。

Image Source

2.目的

线框

线框和原型都用于设计测试。请注意，您无法通过一个和notthe other. Feedback is necessary at both stages because the concerns raised are inevitably different.

线框主要用于将摘要转化为有形的，有助于建立产品概念。在线框阶段，优秀的设计师在创建视觉结构时会考虑用户流动。然后，他们的插图使用箭头，符号或线框地图描述了应用程序或网站的流程。重要的是要对此发表意见，因为对设计师的直觉可能与用户的需求不同。

一些设计师跳过了线框阶段，直接进入原型。他们可能会认为这是不必要的附加步骤，尤其是当他们使用的软件合并了线帧和原型函数时。bob电竞官方下载但是，线框对于文档和协作时可能很有用。

原型

原型are more explicitly used to test the user’s journey; specifically, how the user actually navigates while using a program or app. During this phase, testers can pinpoint issues with flow. For example, they can uncover issues where a user is frustrated with too many clicks to reach the desired page or a particular layout that is not intuitive and difficult to navigate.

At the end of the prototype phase, you’ll want to run a simulation where users interact with the prototype before moving onto coding the project.

3.输入

Types of Wireframes

Both wireframes and prototypes range from low-fidelity to high-fidelity designs. As mentioned earlier, fidelity refers to how the product is depicted (or the “level of detail and realism” in the design).

线框are often associated with being low-fidelity, but can move through a design development process that includes medium- and high-fidelity designs.

低保真线框可以在纸上草绘或以数字方式渲染。它们通常以黑白或灰色开始，但在成为高保真的线框时获得了更多细节（包括颜色）和品牌。除这些其他细节外，线框的主要重点是确保存在关键元素，并且从视觉角度来看，流程是有意义的。

Image Source

线框are best kept as simple as possible to remove bias in testing. At the wireframe stage, designers are trying to test product viability above anything else. If testers are exposed to what looks like a very polished wireframe, they may feel uncomfortable being critical of something that appears already finished.

原型的类型

Both wireframes and prototypes range from low- to high-fidelity — although prototypes usually fall on the higher end of the fidelity spectrum.

The bigger difference between a prototype and线框is in how prototypes focus on user interaction. If you have limited time and resources, you might use low-fidelity prototypes. But your user feedback will only be as good as the elements users are able to test.

后期的设计过程,和ypes should be high-fidelity and dynamic, looking more like a fully functional website or app. Testing a design that’s close to done will provide you with the most relevant feedback from users at this stage.

Image Source

Wireframe and Prototyping Tools

许多流行的数字设计工具都包含了线框和原型功能。设计师可以在一个平台上从低收入变为高保真，节省了时间，并从扩展中转变为金钱。一些最受欢迎的工具包括Invision,Sketch， 和Adobe XD.

Image Source

It’s important to note that while most of these tools can create beautiful prototypes and wireframes that become gorgeous, functional webpages, they can’t bridge the gap to push them out as a live website.

那就是内容管理系统喜欢的地方HubSpot CMScan help you build and manage pages as you go.

Image Source

原型和线框可帮助您创建华丽的设计

尽管相似，但线框和原型对于将所有项目利益相关者保留在同一页面上都是重要的。两者都代表了设计过程的关键部分，这些过程产生了您产品的最佳版本。