如果用户体验设计师不注意系统的整个布局，那么设计网站并不是一件容易的事。在公司中，用户体验设计师经常会因为客户频繁要求更改应用程序中的各种内容而对客户感到沮丧。
利益相关者和UX设计师之间之所以出现冲突，只是因为缺乏对网页整体结构的沟通。线框图解决了这个问题……（嘿！它实际上是什么……？？ ）。
如果您在一家小型初创公司工作或不熟悉 UX 设计过程，那么这对您来说可能是一个新的技术术语。基本上，线框为您提供网页的整体结构。它是用户体验设计过程的第一阶段，它为您提供网站的整个布局和功能的愿景。
线框图使您可以组织您的想法，并明确您的最终产品应该是什么样子。您将确定某些类型的信息应如何显示在每个屏幕上。
对理论概念感到厌烦……？
让我们深入了解一些实际细节并学习创建线框。我们将讨论为您的软件设计创建良好线框的一些基本步骤。
您可以使用两种方法创建线框。您可以使用笔和纸，也可以借助一些软件，例如 Balsamiq（最流行的）、UXPin、InVision 或 Wireframe.cc。您可以探索这些工具并进行试验。你可以选择其中任何一种你觉得舒服。
现在让我们讨论一些创建线框的基本步骤……
1. 自己做研究并获得灵感
在您拿起笔和纸并直接开始创建线框之前，请先进行自己的研究。收集需求、了解您的受众、创建用户角色、定义用例，并调查您将要设计的类似产品的市场。这将帮助您获得一些灵感和想法。
查看一些与您正在设计的产品类似的产品的线框示例。例如，如果您正在设计任何类型的娱乐网站，那么请对类似的网站进行一些研究。
浏览 Dribble 和 Behance 等网站，看看其他设计师的作品。你不需要花太多时间在这上面。浏览这些网站并获得一些设计您自己的产品的想法。如果您正在设计新功能或完全不同类型的产品，那么也不要害怕在您的领域之外进行研究。
2. 列出收集到的数据以供快速参考
从您的研究中，您将了解各个阶段将产生的定量和定性数据。如果您立即开始创建线框，您将难以保留和调用所有数据。
最好准备一份清单或备忘单以供快速参考。这将帮助您快速绘制线框。在备忘单中提及需求、角色、用例和其他重要内容。
3.不要忘记绘制用户流
您需要在线框中表示多少个屏幕？
您期望用户遵循什么流程？
您的用户将来自何处（哪个营销渠道）以及您希望他们最终到达何处？
在为您的软件绘制线框之前，请确保您已经回答了上述所有问题。如果您是 UX 设计师，那么您可能知道术语用户流和信息架构。
注意整个系统架构中的用户流程。架构应该以用户或客户在使用您的产品时不会遇到任何问题的方式进行映射。用户每次都打电话问客服怎么办，很是郁闷。因此，请确保为应用程序各个页面上的用户创建流畅的流程。
流畅的布局和架构最终会吸引用户。它从用户端创造了更多的满意度和信任。这导致较低的流失率或流失率，这仅意味着客户满意，收入增加。因此请记住，系统的整个架构会影响公司可以产生的收入。
4. 积木
最后，我们在第 4 步，您需要拿起笔和纸在框架上创建电线（啊哈！……我们知道您等待太久才到达这个阶段）。开始问以下问题……
- 与此页面交互时的预期用户和业务目标是什么？换句话说，用户想要实现什么，业务想要用户完成什么动作？它可以是任何东西。例如：将商品添加到购物车。
- 您如何组织内容以满足用户的目标？
- 哪些信息应该更突出？
- 用户需要哪些按钮或接触点才能完成所需的操作？
- 您需要在哪里放置号召性用语？
- 在哪里放置主要信息和徽标？
- 用户登陆页面时应该首先看到什么？
- 用户希望在页面的某些区域看到什么？
在线框图中，您需要解决上述所有问题。请记住，您只需要绘制网页的构建块，因此请保持简单。概述和表示功能和格式，不详细说明任何内容。无需考虑美学、颜色或字体大小。您只需要关注功能块或网页的骨架。
您可能需要对线框进行一些更改。您还可以寻求其他设计师或产品经理的帮助。当您进行线框设计时，请记住您需要创建一些有用的东西来满足客户的需求。
5. 填写细节
一旦流程准备好并且您已经有了基础，就可以进行下一步并升级您的线框。在您的线框中填写信息或详细信息。您可以从上到下开始，然后从左到右。
我需要填写哪些详细信息？ （啊哈……！！！我们知道你会有这些问题……）
在这个阶段，您需要定义可用性约定，例如将导航放在徽标旁边的顶部，或者可能在右上角放置一个搜索框。考虑间距、布局和信息层次结构。什么信息最重要和最不重要？你的号召性用语是什么？
想一想您要包含哪些图像？您想在哪里包含它们以及图像的大小应该是多少？包括建立信任的要素。您需要什么来建立对用户的信任，这些元素的定位应该是什么？
填写详细信息后，您就可以进行第一次用户测试了。从你的同事那里获得关于你迄今为止所做工作的反馈。如果您有时间和资源，请考虑进行可用性测试以突出您可能遗漏的任何重大缺陷。
创建良好线框的提示
在整个线框图绘制过程中，您应该关注三个大方框……
1. 清晰的表示：确保您的软件的整个布局回答下面给出的问题……
- 页面是关于什么的？
- 用户可以在那里做什么？
- 页面布局是否满足用户需求？
- 用户是否可以不加思索地轻松完成他们想要的操作？
2. 用户信心：用户信心就是通过良好的设计建立对您品牌的信任。易于导航和清晰的号召性用语确保产品界面可预测且舒适。
如果您的页面在意想不到的地方带有按钮和框是不可预测的，那么用户信心将迅速同步。在您的线框中使用熟悉的导航过程并将按钮放置在常用和直观的位置。
3. 简单：简单就是排除噪音。在你的线框中避免信息过载。过多的内容、链接和按钮可能会让用户感到不知所措和分心。用户将面临很多问题，他们将无法顺利访问网页。您网页上的用户旅程应该尽可能顺畅和无缝。
您需要仔细决定要包含在每个屏幕上的信息。请记住，线框与漂亮的颜色和美感无关。它们是关于直观和逻辑的布局以及良好的信息层次结构。