线框映射（如何避免示波器蠕变） _原型设计

本文概述

如何创建线框图？
使线框工作流程更上一层楼

想象一下这种情况：你正在一个新的网站上并且正在创建线框。在你的审核会议中, 你会收到来自客户和团队的反馈, 从而为不可避免地生成变更请求, 建议的改进和更新做准备。经过几次审核会议, 你仿佛陷入了一个无休止的循环中—不断进行更改和撤消更改, 客户对更多功能的需求似乎永远存在, 并且达成协议似乎是不可能的。
或相反, 发生的情况是：你展示自己的线框, 每个人都点头同意, 并且线框可以很好地进入下一个阶段。但是, 随着工作的进行, 你意识到它并不能反映你的意图-越来越多的功能被塞满了, 流程也随之而来。
发生了什么？答案很简单：沟通不畅。
与线框更有效地交流
作为UX设计师, 我们主要的通信工具之一是线框, 这是使我们成为Web设计设计师的黑白” 蓝图” 。尽管线框缺少视觉设计的多彩细节, 但它们是产品设计的基础, 就像建筑计划是建筑物最终建筑的基础一样。
线框不只是静态贴图。使用房屋的类比, 他们不仅显示一个房间, 而且显示整个房子以及用户可以在房子周围移动的所有不同方式。它们还包括内部, 定义了每个房间的主要目的。
此外, 线框显示的不仅仅是房间。他们帮助计划行程并定义访客在房屋中漫步的体验。你可以将线框用于很多事情, 随着项目的发展, 你的团队和客户需要了解很多事情。 UX设计师的工作之一就是当一名翻译, 以确保每个参与人员都了解预期的愿景。
使用线框图将线框提升到新的水平
那么, 你如何传达用户旅程呢？你如何以一种易于理解的方式来绘制用户体验, 以便你的团队和客户可以对其进行可视化？如何确保旅程保持简单, 并为每个房间提供所有必要的元素, 而又不会造成令人沮丧的障碍？
这是一个有助于更有效地通信和组织线框的有用工具：线框图。
线框图是一种使线框与网站(或产品的用户流)的站点地图相匹配的方法。对于此映射过程, 你需要代表特定页面类型的线框模板(例如, 表单页面, 目标页面, 产品列表页面, 产品详细信息页面)。这就像先确定房屋中每个房间的用途, 然后确定每个房间中的元素一样。模板将是带有厕所和水槽作为共同内容元素的浴室。
创建线框图将以多种方式使你受益：

帮助估计项目的范围(我需要多少个线框模板？)
提供需要创建的所有不同模板的概述(作为样式指南的索引也很有价值, 或者提供一个简单的清单来识别可用于其他页面的模板)
改善有关线框目标的沟通, 并帮助客户更好地了解预期的用户旅程

如何创建线框图？创建线框图涉及三个步骤。
步骤1：识别内容元素
在开始研究线框之前, 考虑一下线框上需要存在的所有不同部件(例如你想要在每个房间中拥有的物品, 以确定房间的大小)会很有帮助。对于电子商务网站, 示例可能是：搜索栏, 产品过滤, 产品描述, 产品图片, 价格, 数量选择器, “ 添加到购物车” 按钮, 推荐产品, 购物车图标……用户故事可能对你有所帮助考虑必要的UI组件。

开始列出你可以想到的所有内容元素(组件)-考虑要提供的功能, 以帮助用户了解并满足业务需求。
为页面类型添加另一列(例如, 产品详细信息页面, 购物车, 登录页面等), 以将内容元素聚类。
在第三栏中, 按重要性(即低, 中, 高)对内容项进行排名。
如果你确实有用户故事, 则可以添加另一列来引用相关的故事编号

文章图片
内容元素列表的示例
为什么对内容元素进行排序有帮助？它有两个主要目的：

创建层次结构：排名定义了每个页面的内容层次结构, 并为你提供了线框的准则(内容应位于顶部)
避免混乱：对内容元素进行优先级排序将有助于使方法保持最小化, 并帮助你与团队就真正需要的内容进行决策

你的内容项定义了工作范围。拥有内容元素列表将帮助你更轻松地进入计划阶段, 并且可以使用它来定义过程并估计线框的工作。 (例如, 我们如何构造冲刺？我们首先要处理什么内容？)
在有关需求的任何讨论期间, 内容列表也将派上用场。你可以轻松地确定你同意的内容元素以及正在请求并将哪些其他元素视为变更请求。
步骤2：定义网站地图和用户流
你具有需要提供的内容元素并将它们分组为页面。让我们看看它们的布局。它们如何互连？用户如何浏览他们以实现其目标？
通过创建站点地图(对于网站)或用户流(对于应用程序), 可以达到此级别：

站点地图：显示所有页面及其层次的概述。
用户流：可视化关键用例场景中页面的互连方式。

文章图片
站点地图和用户流程的简化版本
步骤3：绘制线框
既然你知道需要提供什么内容, 在哪些页面上提供它们以及如何连接它们, 那么就可以开始在线框上工作了。

根据站点地图和用户流定义需要线框的页面模板。 (每个需要独特功能的页面都将是一个不同的模板。)

文章图片
代表唯一页面的线框模板

如果你遇到某些模板的细微变化(例如, 标题页中带有滑块的内容页面, 而没有标题的内容页面), 则可以在母版页上进行处理, 而忽略此类细微变化。你的线框应包含该母版页模板上存在的所有主要组件。
现在, 将线框映射到站点地图和用户流-你可以使用每种页面类型的线框缩略图更新站点地图。颜色编码或编号将使事情保持同步, 有助于更好地概述并帮助客户了解他们需要的线框。

文章图片
颜色编码站点地图的示例

文章图片
根据站点地图进行颜色编码的线框模板示例

文章图片
线框模板图的示例。站点地图在左侧, 线框在右侧, 并带有相应的颜色代码。

文章图片
对于非常复杂的网站, 编号系统可能会比彩色编码更有意义
为什么此映射过程会有所帮助？在创建项目的高级概述时, 它是一个很好的工具。不仅可以逐页查看独立的线框, 线框图还可以让你和你的团队在上下文中查看线框。用户来自哪里？他们下一步要去哪里？
回到房屋类比—这是你创建的平面图, 用于可视化房屋的结构, 因此继续查看每个房间的第一个渲染图(每个页面模板的线框), 然后分享最终结果和总体愿景。
使线框工作流程更上一层楼总而言之, 这就是为什么线框图是有用的交流和组织工具的原因：