用户体验 (UX) 是缩小差距并确保您的设计转化的方法。 营销人员通常更喜欢只从设计或转换的角度来考虑网站。 使用线框，您可以测试页面布局和用户流程，以准确了解新网站的工作方式，并识别可能最终阻止转换的任何潜在错误。 在这篇文章中，我们将查看带有设计和创建工具的网站线框示例。
网站线框
新网站设计的主要功能和导航是使用网站线框绘制出来的。 在考虑内容和配色方案等视觉设计组件之前，它提供了对网站功能的理解。 团队可以使用网站线框作为实际的项目地图，以查看在完成相关任务时一切将走向何方。
某些设计师或客户可能会想跳过该过程的这一步，因为他们认为这既耗时又不必要。 然而，线框图是关于自我准备的，适当的准备需要时间。 然而，在没有战略的情况下工作通常需要更长的时间，并且会增加项目完全失败的可能性。
为什么要为网站制作线框？
制作网站线框图的原因有很多，但最重要的是它使您能够找到并抓住每一个机会来增强网站的功能、可用性和便利性，以满足您的消费者。 它还可以促进设计团队成员之间更好的沟通，并能够尽早收集客户意见。
如何构建基本网站线框
#1。 确定网站的目标。
在动笔起草线框之前，您会发现了解网站的用途很有帮助。 尽管您似乎很明显希望在服务器可以管理的范围内尽可能多地增加流量，但请考虑您希望所有这些访问者在访问您的站点时完成的任务。
#2。 识别用户流。
为了让您团队中的每个人都知道访问者应该如何与您网站上的每个页面进行交互，线框可以帮助您识别和评估用户流。 这个阶段需要概述访问者可以用来访问您的主页的每个可能的访问点，然后再选择几个关键的入口点来建立旅行流程。
#3。 确定网站线框的大小。
根据您设计的屏幕尺寸，您的线框将需要不同的尺寸。 移动设备、平板电脑和台式电脑的屏幕尺寸会有所不同，更不用说台式电脑的窗口可以调整大小了。 使用像素而不是英寸或点来获取最精确的线框规格。
#4。 开始设计网站的线框。
是时候创建一个线框来表示您的用户流了。 如果您用笔在纸上书写，我们建议使用点线纸或网格纸来保持对齐。 这将使您更容易将线框的物理版本转换为数字版本。
#5。 计算转换点。
勾勒出线框图后，您需要准确定义用户应如何完成每个阶段。 用户可能不会仅仅因为您已经为他们制定了步骤而觉得流程易于遵循。
#6。 取消不必要的步骤。
迭代线框图是一个过程。 可用于生产的线框很少能在单轮草图绘制中创建。 您可能已经注意到，有些网页是不必要的，可以合并以要求用户点击更少的链接。
#7。 获取有关线框的输入。
在上线之前，您的网站将经过多轮测试和调整，但尽早获得对您的线框的输入仍然是个好主意。 通过与您的设计和开发团队、任何内部人员和客户合作，获取有关流程本身的意见。
网站线框示例
下面提供了最好的网站线框图示例，以激发您的想象力并帮助您建立适合您的线框图方法。 网站线框示例包括：
#1。 素描网站线框
一些程序员开始在纸上或白板上画草图。 在实际花时间担心图形功能之前，这种直接的手绘方法展示了一个基本思想。
#2。 详细的手绘线框
手工绘制的线框不一定要简单明了。 为了使设计更精确，除了铅笔和纸之外，您还可以使用尺子。
#3。 低保真线框
您的第一个概念设计将使用低保真线框进行改进，这些线框以数字方式制作并在简单的内容块中显示内容。 在决定开发哪些图形元素以及编写哪些副本时，低保真线框至关重要。
#4。 低保真移动线框
请记住，线框也是为您的移动应用程序和响应式网站创建的。 由于移动用户比以往任何时候都更频繁地访问网站，许多设计师甚至首先对移动版本进行线框设计。
#5。 高保真线框
您可以使用数字工具生成高保真线框，在不生成过多图形元素的情况下更详细地说明。 因此，无需耗时的设计工作（在整个审查过程中可能会被忽略），外观就会更具吸引力。
网站线框设计
网页设计项目从创建线框开始。 在进行一些研究、找到一些灵感并与客户就业务目标达成一致后，您可以将这些知识转化为线框。
网站线框设计示例
既然您已经熟悉线框是什么以及它为何如此重要，那么让我们继续看一些视觉示例。 您可能已经注意到有几种线框类型。 一个比另一个优越吗？ 不总是; 这完全取决于您的设计项目所处的阶段。 从草图开始，然后从那里继续前进是完全可以的。
#1。 线框草图
无论您作为设计师的经验多么丰富，有时候拿起笔和纸并开始绘制草图以快速得出最初的想法会更简单。 您可以根据自己的喜好使它们随意或有序。
#2。 低保真线框示例
为了在此线框示例中的 12 列之间划分信息和设计元素，设计师构建了一个网格。 如果在开始设计之前建立网格结构，将会节省您以后的时间。 这是一个基本的低保真线框，显示了徽标的位置、英雄图片和支持图像，主要使用线条和轮廓框。 正文文本显示在浅灰色的框中。
#3。 高保真线框示例
随着您接近模拟最终设计，高保真模型的详细程度会增加。 此时，标题和子副本可能包含真实内容，尽管正文可能仍是占位符。
查看此移动用户旅程的高保真线框模型以查看具体信息。 在设计之前，这是在内容和组织方面的绝佳时机。 此高保真线框示例中使用图表和地图来传达重要的时间线信息。
网站线框工具
我们已经为最有效的可用线框设备编制了我们的首选。
#1。 Adobe XD 网站线框工具
自 2016 年首次发布以来，Adobe XD 变得非常受欢迎，这是有充分理由的。 该工具非常适合协作、原型设计和线框图。 如果您正在与他人合作，它是一种查看工具。 通过选择开发交互，Adobe XD 具有从快速草图到高保真线框的所有功能，让您可以模仿用户流程！ 在 3D 图像分层方面，该工具的自动动画功能使事情变得更简单。
#2。 Miro 网站线框工具
特别是对于头脑风暴会议、交互式演示、设计思维研讨会和类似活动，Miro 是一个非常有用且广受欢迎的工具。 然而，它的应用并没有就此结束！ 它具有线框图功能，是一个非常灵活的工具！ 团队可以使用视频聊天、背景音乐和“召唤”功能。 而这仅仅是个开始。
#3。 Mockplus网站线框工具
Mockplus 是一种快速线框图和原型制作工具，可让设计师快速为网站和移动应用程序构建交互式线框图。 该工具使设计人员能够在台式机和移动设备上共享和测试早期设计概念。 Mockplus 超越了简单地为您提供开发线框的工具，并通过大量预安装的组件、图标、UI 和模板帮助您进行设计。 当有全套交互和动画时，构建更逼真的线框也很简单。 此外，它还是一个协作应用程序，可让您的整个团队处理同一个项目。
#4。 Wireframe.CC网站线框工具
一个直接、基本且易于使用的工具，用于移动网站和应用程序的线框图。 这个基于 Web 的线框工具使用起来非常简单，因为布局类似于在纸上创建对象，将它们剪下来，然后将它们粘贴到您的设计中。 多亏了 Wireframe.cc，将鼠标变成多功能工具变得异常简单。 只需在空白画布上勾勒出您想要的形状，然后从出现的工具栏上显示的 9 个备选方案中进行选择。 Wireframe.cc 提供的设计模板简单明了，有移动横向、移动垂直和网页的选项。
#5。 Figma 网站线框工具
基于云的设计平台，非常适合团队共享和协作。 虽然许多设计师只是因为 Figma 出色的原型制作和图形设计功能而使用它，但很少有设计师会把它等同于线框图。 然而，这个设计工具允许您灵活地制作几乎任何您想要的设计，包括低保真度到高保真度的线框。 Figma 以设计为中心的方法论使其成为通过简化通常具有挑战性的流程来快速构建概念线框图的出色工具。
创建网站线框
创建线框可能需要付出很多努力，尤其是在测试阶段不成功的情况下。 然而，预先花时间解决用户体验缺陷会增加您网站长期成功的可能性。 您可以按照下面指示的网站线框的创建步骤开始。
#1。 组装线框工具
线框可以分别手动或数字创建。 如果您选择第一个选项，您需要的只是一支笔和一张纸。 出于集思广益的目的，一些设计师从“低保真”纸质线框开始，然后制作“高保真”数字版本。 它具有用户友好的、基于组的线框图界面，非常适合需要实时通信的团队和业务人员。 不过，它只能进行静态线框图。
#2。 研究您的目标用户和用户体验设计。
在开始起草线框之前进行一些研究是有益的。 您应该首先确定您的目标市场。 这可以帮助您决定网站上的哪些方面应该最突出，以便访问者可以找到他们需要的东西。 研究用户体验设计趋势和最佳实践也是一个好主意。 这可以为您提供有关菜单布局、徽标和其他关键品牌组件应放置的位置以及内容布局等信息。 当谈到这些特征时，用户更喜欢遵守惯例的网站。
#3。 选择您理想的用户流程。
访问者在您的网站上完成特定任务所采用的路线称为“用户流”。 例如，电子商务网站上的一个用户流程可以是从产品页面到结帐过程的结束。 通过确定用户需要在您的网站上执行的主要操作，您可以为每个潜在目标制定最简单的用户流程。 通过使您的网站易于使用和吸引人，您将改善用户体验。
#4。 立即创建您的第一个线框。
现在您已经收集了资源和基本数据，就可以开始起草线框图了。 请记住，本练习的目的不是制作完成的网站设计。 你只考虑用户体验，或者如何设计一个易于使用和理解的页面。 为此，您的线框图中的功能和格式应该与访问者如何与您的网站互动和使用您的网站相关。
#5。 可用性测试是测试您的设计的好方法。
完成初始线框后，需要进行测试。 这将使您能够评估它是否成功地概述了对您的网站来说最直接和自然的用户体验和用户流程。 有许多方法可以创建网站线框。
#6。 您的线框可能会成为原型
在测试线框并确定网站的最佳用户体验设计后，是时候将线框转换为原型了。 与静态线框相比，原型包含一些基本功能，使您能够以更准确的方式测试用户流程。
线框图是 UX 还是 UI 的一部分？
用户体验设计师利用线框图技术来指定和组织网页、应用程序或产品设计的大数据管理。
网站线框图中应包含哪些内容？
- 商标。
- 搜索框。
- 面包屑。
- 标题。
- 旅游导航
- 正文内容。
- 共享链接。
网站线框是什么样的？
称为“线框”的简单黑白布局指定网站页面元素、功能、转换区域和导航的精确尺寸和位置。 它们没有任何颜色、字体选择、徽标或其他会影响站点结构的设计功能。
线框的两种类型是什么？
- 低保真线框。
- 中保真线框。
- 高保真线框。
相关文章
参考资料
