如何创建线框映射

没有他的地图，Magellan不会在世界各地制作它。地图是必不可少的指南，没有哪些我们会丢失。在最广泛的意义上，它们是帮助我们的空间理解的视觉陈述。

在数字设计世界中，我们也使用地图进行类似的目的。创建您的团队可以随之而来的可视计划对于规划网站或应用程序的设计至关重要。

在科技世界中，您可以放在一起的最全面的视觉贴图是一个线框地图。

大多数设计过程从几个开始线框或者显示所有元素如何适合单个页面的布局。例如，这些线框用作登陆页面，主页和博客帖子的模板。

Wireframe Map演示了所有这些线框将如何适合，以创建凝聚力站点和正用户体验。

在设计过程中稍后创建线框映射的好处是您可以使用它来检查页面之间的不一致。例如，使用线框映射可以帮助您确定页脚设计的元素是否无意中更改页面之间。

您还可以使用Wireframe Map来帮助阐明用户将如何在页面之间导航。事实上，您的线框映射应布置出来显示功能，因为各种页面彼此相关。例如，您可以使用主页面为中央焦点设计电线映射映射，由可以从主页访问的所有附加页面包围。

使用线框映射的好处

有效的沟通是设计过程的一个组成部分。Wireframe Map清楚地传达了一开始的产品设计理念，因此团队成员之间的混淆较少，因为您通过开发过程。如果每个人都在同一页面上，您稍后不太可能在昂贵的修订版本。

线框地图在团队管理方面也非常有用。他们将帮助您阐明项目的全部范围 - 所以您确切地知道工作量将是多大的。他们还将为您提供为个人分配任务的地方。

既然你知道创建线框地图的优势，这就是您可以创建一个的方式。

1.了解您的用户角色。

它看起来很明显，但在你知道你的目标角色需要之前，你不能做任何事情。在绘制任何东西之前，最好返回返回措施来定义和理解您的用户角色。

理想情况下，这涉及与实际用户（或潜在用户）进行对话。但如果这不是一些东西，你现在可以证明，思考和回答由Hubspot的工具提供的提示makemypersona.可以帮助为您的角色创建基础。

2.创建所需内容列表。

使用您对您的角色的了解并开始列出需要出现在站点地图上的所有各种页面或屏幕的列表。有必要在确定要包括的合适元素时，可以想象用户的旅程。

从常用的和常用和最重要的网站页面类型（主页，联系人，约），然后根据需要添加其他页面。您选择合并的页面或屏幕将取决于目标角色的需求。

例如，任何类型的电子商务网站都需要产品页面和结帐页面，而非营利性将需要捐赠页面，也许博客详细说明了他们正在进行的活动。

其他可能的页面包括：

• 推荐书或评论
• 画廊或投资组合
• 常见问题（常见问题）
• 日历或事件
• 按
• 工作或职业生涯

考虑用户流是创建站点地图的关键。有此列表后，根据页面和子页面组织它，指出每个页面上的元素，并将其发送到您的其余团队以获取批准。

您可以添加更多元素，但在创建视觉站点地图之前，您希望拥有最全面的列表。

3.创建站点地图以了解用户流程。

在尝试创建任何线程范围（或编辑初始草图）之前，很重要的是要掌握目标角色如何导航您网站的各种页面。

为了帮助概念化此过程，您将在将进一步的努力投入创建线框之前，您可以开发您的站点地图。

使用您在前阶段中创建的内容列表彼此铺设页面及其关系。虽然您正在进行工作时，您可能会发现页面的额外需求，以帮助您的目标角色实现目标。

除了简单的颜色编码或编号外，使用页面标签（对于更复杂的站点），您会在肉体中填充到网站地图中的各种页面的性质时，将保持组织的内容。从那里，使用箭头在各种页面之间建立链接。指定某些所需功能（如实时聊天或联系人），考虑使用代表图标。

图像源码

有很多不同的方式创建您的网站地图。您可以选择保持模拟：使用良好的老式笔和纸张，或使用索引卡并在工作站上移动它们。还有多种服务专为建立视觉站点地图而设计，包括魅力那FlowMapp.， 和Dynomapper.。

其中一些工具还将允许您与团队成员协作设计您的站点地图，并最终将其转换为有用的项目管理工作流程。

4.创建线框。

此时，您应该解决了创建站点地图以及线框所需的所有内容：要包含的元素列表，详细介绍了它们彼此的关系，以及它们应该出现的页面。

在你开始之前创建线框，使用站点地图确定您需要的线框模板。具有相同功能的页面可以使用相同的模板。具有特殊功能的唯一页面将需要单独的线框。

在构建线框地图时，最好创建低至中等保真线框。您想要一些详细信息，以帮助可视化页面或屏幕的样子，但也很简单，以便快速创建。

通过忽略轻微的变体来节省时间，并确保您创建具有灵活性的线程范围，没有或没有添加（例如，在标题中包含滑块）。

创建线框时需要考虑的一些最佳实践和提示包括：

• 从一个基本的素描开始并通过各种设计阶段加入抛光。
• 从低至中等保真线框移动时要求和合并反馈。
• 使用在线线框工具如invision.或者草图与团队合作分享线框设计和工作。

线框示例

图像源码

此图像显示低保真与高保真线框之间的差异。正如您所看到的，它看起来像左边的低保真线赌灯绘制。钢笔和纸是一个良好的开始，但在你向重要的利益相关者申请审查之前，这是一个好主意，让你的线框更多地波兰语 - 但不是太多！你不想把太多时间放入草稿中，只是为了让有人告诉你这一切都错了。

图像源码

与某些位置一样，有数字工具可以帮助您快速轻松地创建线框。米罗提供建立站点地图的能力，以及线框。除此之外，它旨在记住合作，因此您可以为团队的不同成员分配线框，使过程更快。

5.创建线框映射。

现在你有你的网站地图和你的线框，下一步是把它们放在一起。根据您布置的网站地图排列每个页面的线框。

图像源码

你有它！安排与团队的会面审核，倾听他们的反馈，您可以随时前进到开发过程中的下一步。

开始创建！

像过去的伟大探险家一样，您已创建了一张地图作为视觉指南。然而，而不是领先的旅行者，你精心组装的Wireframe地图将引领您的开发人员 - 并且最终是用户 - 通过您的数字设计视觉的旅程。