Marketers often like to think about websites strictly in terms of design or conversions, but用户体验（UX）是弥合差距并确保您的设计转换的方法。
By taking the time to create a wireframe when building or redesigning a website, you can focus on the user experience as a separate (but connected) piece of the puzzle. A wireframe enables you to test drive the page layout and evaluate user flows in order to see exactly how the new website will function and find any potential mistakes that might eventually get in the way of conversions.
In this post, we’ll cover exactly what the wireframing process looks like for websites, the types of wireframes you can use, and how to create a wireframe for your own project.
What is a website wireframe?
A website wireframe is used to map out the main features and navigation of a new website design. It gives an idea of the site's functionality before considering visual design elements, like content and color schemes.
Layouts and features such as menus and buttons are mapped out to assess the overall experience of the end user.
网站线框还提供了该项目的实用地图，使团队成员在完成相关任务时会在哪里进行。
Some designers or clients may tempt you to skip this part of the process, calling it unnecessary and time-consuming. But wireframing is about preparing yourself and all good preparations require time. And working without a plan usually takes up even more time and you run the risk of a project failing altogether.
您应该始终在早期开发阶段创建线框，因为它将帮助您揭示判断或设计中的错误，从而使您有时间纠正它们。在协作方面，您可以使用线框work effectively with your teamand explain concepts to your clients.
Some wireframes are more detailed than others. It's wise to start with a low-fidelity wireframe. Low-fidelity wireframes show the general localization of elements on the screen. You can develop these initial designs into more high-fidelity wireframes, which provide more details — such as what the final elements will look like.
无论您使用低保真还是高保真的线框，都将取决于您当时的项目所需的内容。
为什么要创建网站线框？
有几个理由可以创建网站线框，但最重要的是，它使您能够识别并借此机会提高网站的功能，易用性和便利性，以使您的用户满意。它还可以帮助您的设计团队更好地协作，并在设计过程太远之前收集客户的反馈。
通过瞥见访问者将如何与您的网站互动，网站框架可以揭示其设计或功能的任何方面，这些方面可以改进，以更好地帮助用户实现其目标。这些目标可能包括：进行购买，注册新闻通讯或阅读博客文章。bob官网官方网站在设计过程的这一阶段识别任何摩擦点要比发现颜色，字体和图像之后发现它们要理想得多。
How to Create a Simple Wireframe
1. Identify the goal of the website.
Before taking pen to paper to mock up a wireframe, you’ll find it helpful to understand the goal of your website. While it might seem obvious that you want to bring in as much traffic as your server can handle, think through what you want all those visitors to see and do while you’ve got their attention. Should they end their visit with a purchase? Should they download an app? Perhaps you’d like them to view a certain page before dropping off to another website entirely. Whatever your goal is, make sure your team is aligned around it so that the subsequent steps flow smoothly until you take your site to production.
2. Understand the user flow.
Wireframes help you identify and evaluate用户流所以,每个人都在你的团队理解visitor should interact with each page on your site. During this step, you should outline each entry point a visitor could use to land on your homepage, then choose a few primary entry points to create a journey flow.
Take some time to outline your user flow in a text format before sketching a wireframe. Why? It’s much easier and faster to move steps around when they’re simply written out rather than mocked up as a wireframe.
3. Determine your website wireframe size.
您的线框需要根据您为哪个屏幕尺寸而变化。移动设备，平板电脑和桌面屏幕的尺寸会有所不同 - 更不用说桌面上的窗口可以向上或向下缩放。要获得线框最准确的测量值，请使用像素测量值而不是英寸或点。这是每种屏幕类型的标准尺寸：
Wireframe size for a mobile screen
1080px wide x 1920px long
平板电脑屏幕的线框尺寸
8” Tablet - 800px wide x 1280px long
10” Tablet - 1200px wide x 19200px long
桌面屏幕的线框尺寸
768px宽x 1366px长
4. Begin your website wireframe design.
现在是时候在线框中可视化您的用户流程了。如果您使用的是实体笔和纸，我们建议使用虚线或网格纸保持对齐方式。这将帮助您更轻松地将线框的物理版本转换为数字副本。
If you’re starting on a digital platform, choose a tool that works best for your wireframe fidelity needs. If you’re not sure whether to use low, medium, or high fidelity, check out thiscomprehensive wireframe fidelity guide关于主题。
5.确定转换点。
勾勒出线框后，是时候确切地决定用户应如何通过每个步骤移动了。仅仅因为您概述了用户应采取的步骤，并不意味着他们才能通过他们的流通。在此阶段，您将确定页面上的按钮，超链接，图像或其他元素将引导读者进入下一步，直到他们达到我们在步骤1中讨论的最终目标。
6.删除冗余步骤。
Wireframing is an iterative process. It’s rare to do a single round of sketching wireframes that are production-ready. You might notice some web pages are redundant and can be combined to create fewer clicks for the user. Wherever an opportunity exists to simplify your wireframe, sketch it out and solicit feedback — that brings me to our last step…
7. Get feedback on the wireframe.
你的网站将会经过几轮测试工程师ts and revisions before it goes live, but it’s still a good idea to get feedback on your wireframes in the beginning stages. Collaborate with your design and development teams, as well as any internal staff, and customers to get their opinion on the flow itself. Getting input now prevents the essence of the UX from getting lost after adding buttons, screens, and page layouts into the mix.
Wireframe Examples
Below are some of the best examples of wireframe types to light up your creative zones and help you solidify the wireframing process that works for you.
1. Sketch
Some developers begin their sketching with a pencil and paper or a whiteboard. This simple, hand-drawn method illustrates a basic concept before spending time fussing with graphical elements.
2.详细的手绘线框
Hand-drawn wireframes don't always have to be simple. You can use a ruler in addition to your pencil and paper to create a more detailed design. However, it might be more convenient to use a digital wireframe tool for such detailed work since your hand-drawn efforts may be difficult to digitize.
3.低保真线框
Low-fidelity wireframes are created digitally and display elements in simple content blocks, taking your basic concept sketch and turning it into something more refined. Low-fidelity wireframes are important for determining what graphical elements need to be created and what copy needs to be written.
4. Low-Fidelity Mobile Wireframe
不要忘记您的网站和移动应用程序的响应式版本也会获得线框。由于网站访问者比以往任何时候都更频繁地访问手机网站以来，许多设计师甚至首先是移动版本。
5.高保真线框
使用数字工具，您可以创建一个高保真的线框，可以更详细地说明而不会创建太多的图形元素。这会导致更加美观的外观，而没有耗时的设计工作，无论如何都可以在审核过程中抛弃。
6.低保真互动线框
Websites aren't static, so why should your wireframe be? There are many interactive wireframe tools that can help you demonstrate your user experience flow before committing to your graphics.
7.线框模型
Once the bones of the design have been approved, you can then create graphical elements to flesh out the design. This is called a mockup.
8. Interactive Wireframe Mockup
您还可以使用线框工具来创建交互式模型，而无需创建实际站点，并配有UI套件和图形元素。如果您有一个将网站实施移交给开发人员的设计团队，则此步骤可能会有所帮助，因为他们可以审查网站的预期外观和功能，从而导致更简化的工作流程，而所需的修订更少。
这些只是几个示例，但它们显示了如何以不同的方式实现网站帧。
9. Free Website Wireframe
If you’re on a budget, you can explore free website wireframing tools likeMiro。This one in particular will give you the basic wireframe capabilities that work great for low to medium fidelity mockups.
10.移动网站线框
Mobile responsiveness is an essential web design best practice. Creating a wireframe for the mobile version of your website specifically is a key step for a successful website in general. You’ll fare better with UX, SEO, and conversions as a result of prioritizing mobile web design.
There a few different approaches to building a mobile wireframe. You might condense all of your desktop features to fit onto a mobile screen. Or you may limit some functionality altogether to yield a mobile-friendly experience.
模型与线框与原型
A wireframe is the first step to communicating your website ideas to other people. It provides a basic foundation from which other people can see and understand. A mockup goes a step further, illustrating the expected appearance of the product. A prototype can be created after a wireframe and mockup have gone through the design approval process.
Prototypes provide even more detail about the website design, revolving around the feel of the website for the user and basic functionality — such as demonstrating what an element looks like when you hover your mouse over it.
线框，模型和原型在网站开发过程中是相似的作品，并且涉及彼此接近连续的设计步骤。有时，它们可以根据设计师的需求重叠。
This explains why some people find it difficult to understand the differences between these three concepts.
So what's the difference between a mockup vs. wireframe vs. prototype?
总结模型与线框与原型之间的区别的最佳方法是说明一个示例：线框显示空白的矩形框，模型显示结果蓝色按钮，并且原型显示了单击时的外观。
这是线框与模型的示例：
这是显示模型与原型的另一个示例：
How a Website Wireframe Improves the Design Process
如果您想要一个功能性的网站，则必须首先从制定正确的计划来执行设计。使用线框，您可以轻松地绘制每个页面的元素，并根据需要进行更改。当您的项目即将完成时，通过花时间创建线框，错误的数量将大大减少。
Start with a low-fidelity wireframe and take your time adding details. When shopping for a tool, exercise similar caution to find one that fits your specific design needs.
Editor's note: This post was originally published in March 2020 and has been updated for comprehensiveness.
最初发布于2021年8月25日7:00：00 AM，更新于2021年8月25日
Topics:
网站设计Related Articles
![19 Examples of Bad Website Design in 2021 [+ What They Got Wrong]](http://www.eigoj.com/hubfs/User%20frustrated%20by%20the%20bad%20website%20design%20of%20ZARAs%20homepage.jpg)
