产品开发中线框图的综合指南
已发表: 2018-04-13Web 开发项目与建造房屋有很多共同之处。 当你盖房子的时候，你自然会选择能胜任这项工作的最佳人选。 您会想要有经验、知识渊博的人，并且您会想要确保建筑商有正确的流程来在规定的时间内和批准的预算内完成工作。 是什么让你确信这一点？ 蓝图，对吧？ 好吧，在网络开发领域，它是线框图。
目录
什么是线框图？
简而言之，线框图是网页的插图。 线框是网页的布局，它阐明了什么样的界面元素将在重要页面上找到位置。 它是交互设计过程的重要组成部分。
线框图的主要目标是在项目的最早阶段提供对页面的视觉理解，以获得所有利益相关者和项目团队成员的批准。 线框还用于创建全局和辅助导航，以确保站点中包含的术语和结构符合用户期望。
线框、模型和原型之间的区别？
线框
线框就像网站的骨架或基本结构。 线框图更关心功能。 例如，网站或应用程序的线框将描绘导航、主要按钮、列等。它可以等同于建筑设计的蓝图。
小样
另一方面，模型是产品的更真实的表示。 与线框模型不同，它侧重于细节。 颜色、字体、图标、图表、图像等所有方面都需要考虑。
原型
原型为您的项目提供了高保真的视觉表示。 您可以将原型视为模型的宝贵补充。 顾名思义，原型准确地展示了产品的外观。 原型设计包括将您的线框连接在一起、将按钮连接到各自的登录页面、分层下拉菜单等。
为了进一步简化，这些是产品设计过程的所有阶段，从草图（设计的最简单的主要阶段——手绘）开始，到原型的创建结束。
移动应用程序的线框图
移动应用程序的线框图与为网站制作线框图提供了类似的好处。 它清楚地说明了应用程序的外观和功能。 没有人喜欢购买一个模糊的想法。 线框图在项目过渡时提供了极大的便利。 它还降低了产品开发的总体成本，因为可以在早期阶段进行更改。
在为移动应用程序线框图时要记住的一件重要事情是考虑您将在其上发布产品的平台（iOS 或 Android）。 
线框图时要记住的重要事项
在创建线框时，请务必记住，它们只是您网站的主要内容和导航元素将出现在页面上的位置的指南。 由于插图的目的不是描绘视觉设计，因此始终最好保持简单。 它节省时间和精力。 以下是一些线框图制作时会派上用场的技巧：
- 从简单的低保真线框开始。
- 避免使用颜色。 您可能希望坚持使用灰度来描绘差异。
- 无需使用图像。 只需使用几何形状而不是图像来提供总体思路。
- 使用通用字体并在制作线框图时始终保持相同。 排版不是该过程的重要组成部分。
- 无需为每一页线框。
线框图是一个思考问题和指定接口的过程。 请记住，与其他形式的开发过程一样，如果处理不当，线框图可能会产生危险。
线框中示例的基本元素
线框图的元素很大程度上取决于您要构建的网站类型、客户要求等。 但是，某些元素通常作为标准线框元素合并，例如页眉、页脚、徽标、搜索字段、导航系统、正文内容、共享按钮、面包屑。
线框类型
线框可以从它们的生产过程（纸质草图与计算机绘制的图像）到它们包含的细节量不同。 广泛用于表示线框制作的两个术语是 - 低保真和高保真线框。
- 低保真线框——它们易于开发且快速。 它们有助于促进团队沟通。 低保真线框通常包含简单的图像，lorem ipsum 文本作为填充物。
- 高保真线框——由于它们的详细程度更高，它们更适合文档。 这些线框包含有关页面上每个小项目的信息。
我们为什么要创建线框？
以下是线框图的一些重要好处：
- 线框图在 Web 或应用程序开发期间的通信中起着关键作用。 它为所有利益相关者提供了机会； 客户，开发人员，设计师可视化并获得网站结构的清晰图片。
- 使用线框更容易交流和传达您的想法。
- 线框增加了项目的清晰度，它还允许您完成所有交互和布局需求。
- 线框图使内容开发设计变得友好。
- 线框触发客户思考他们的需求，并帮助他们定义他们的项目目标和他们的主要关注点。
- 它有助于在很早的阶段收集有关您的产品的反馈。
- 线框允许设计师为网站的许多部分创建布局，从而使创作过程更加流畅。
线框图制作过程中的重要步骤
线框图制作时要遵循的一些重要步骤包括：
- 研究——了解其他设计师是如何设计线框图的，这将极大地帮助你找到灵感。
- 选择您的工具- 有多种工具可用于创建线框。 您可以根据自己的方便选择一个。
- 设置网格- 有几个网格模板可供免费下载，您甚至可以在 Telerik、UI-grid 等的帮助下自定义自己的网格模板。
- 确定布局——放下盒子，添加内容（如果有），在这个阶段让你的客户参与沟通，如果有任何差异。
- 将其转换为原型。
一些流行的工具来创建线框
无论您的目标是哪种线框图，低保真或高保真，使用线框图工具可以帮助您变得更加专业，并以更优先和更有条理的方式工作。 以下是您可以有效使用的七种线框图工具的列表：
- 香脂
- 模拟流
- 可视化
- 线框.cc
- HotGloo
- 皮多科
- 轴心
线框图是作为产品开发人员获得的基本技能之一。 要成为一名成功的产品经理，您需要具备对线框图和其他产品开发技能的整体方法，这是理解产品设计基础的基础。 这肯定会成为您在产品开发方面获得成功的途径。
从世界顶级大学在线学习产品管理课程。 获得硕士、Executive PGP 或高级证书课程以加快您的职业生涯。
