什么是线框图

---

什么是线框图？

线框图是系统的屏幕草图，有时也被称为蓝图或骨架。它们的创建目的是向客户展示和解释系统设计思路，最终促成对所提出想法的共识。

线框图展示与所提议功能相关的“足够”信息。每个线框图都包含代表屏幕组件或屏幕组件占位符的基本图形元素。线框图展示屏幕布局以及屏幕内容的排列方式。它关注的是屏幕的功能以及用户如何与系统互动以满足其需求，而不是最终屏幕的实际外观。

在继续之前，让我们先看一下基于 youtube.com 创建的一个线框图

如你所见，线框图就是如此简单直接。每个人都能轻松理解。它有助于开发团队轻松解释用户将如何与网站互动。

线框图仅是一个蓝图

线框图只是用户界面的低保真版本，本意并非真实屏幕的呈现。线框图旨在展示功能、用户交互和屏幕流程，而无需明确说明屏幕组件的外观以及组件应如何表现以实现最高可用性。

线框图示例

这是一个主页的网页线框图示例：

以下是一些安卓应用的线框图示例：

这是一个针对 iPad 应用的 iPad 线框图示例：

这是一个针对 iPhone 应用的 iPhone 线框图示例：

最后，这是一个桌面应用程序的线框图示例：

使用线框图的好处

明确用户界面

客户可能不理解像滑块、翻转框、Bootstrap 等技术性屏幕设计术语。线框图由每个人都能理解的基本图形元素组成，有助于客户了解功能如何运作，以及他们如何与系统互动以实现目标。

早期考虑可用性

如今，用户体验（UX）是每个软件的重要考量。在需求收集阶段使用线框图，将用户体验的考虑提前至项目初期。即使尚未开发任何原型或绘制真实屏幕设计，用户仍能体验系统将如何运作。

成本效益高

创建完整且高保真的屏幕设计需要时间和专业技能，最终导致高昂的成本。线框图是一种快速且低成本创建基础屏幕草图的方式。它还使得修改甚至彻底重做草图变得简单且成本低廉。

更愿意做出修改

设计变更不可避免。使用完整的系统原型或模拟来确认设计想法的问题在于，已经投入了大量工作，后续需要大量返工，意味着额外的时间、精力和成本。在这种情况下，客户和开发团队更不愿意表达担忧或提出修改。相反，制作和修改线框图所需时间要少得多。每个人都会更愿意提出和进行修改。

客户积极参与

由于线框图较为粗糙和宽松，为客户提供了头脑风暴和提出建议的空间。而且，线框图的优化周期短，客户会积极提供反馈，从而更有可能认可最终设计。

如何有效使用线框图？

使用线框图可以为开发团队和客户带来诸多好处，但前提是必须明智且恰当地使用。线框图的一个典型误用是将其视为屏幕设计的替代品。这会使制作和优化变得困难且成本高昂，从而降低线框图的实际效用。在本节中，我们将介绍一些有效的线框图制作技巧。

1. 线框图本应简单且足够。它要简单，以便能够快速轻松地制作，并且在需要时毫不犹豫地丢弃和重做。低保真的呈现方式也使其更具全面性和沟通性。因此，无需花费太多时间在美化绘图、对齐元素或使用漂亮的字体等方面。
2. 在线框图中，我们无需展示实际内容，可以用文本占位符替代大段文本（实际内容）。这样可以避免不必要地花费时间准备内容，也能防止读者被文本内容分散注意力。但如果确实需要显示文本，可以考虑放置一些示例文本。你可以在互联网上轻松找到文本占位符生成工具。
3. 使用注释可以帮助你描述一个元素（例如“公司标志”）或解释与其行为相关的内容（例如“5秒后隐藏”）。如有必要，请使用。但再次强调，不要试图记录每个线框元素。只有在必要时才使用注释。
   
4. 线框图可以手绘，但我们通常使用软件来创建线框图，以便更高效且更容易管理我们的工作。此外，一些线框图软件提供了纸笔无法实现的功能。以下是其中三种：
   1. 状态 – Visual Paradigm 的线框图工具支持状态概念，允许你基于现有线框图创建子线框图。这不仅节省了创建一系列相似子线框图的屏幕流程所需的时间，还使得对相关子线框图的修改更加容易（因为我们在初始状态的线框图中进行修改时，这些更改也会反映在所有子状态的线框图中）
   2. 故事板 – 故事板展示了特定场景的屏幕流程。它使线框图更易于管理，展示也更加简便。
      
   3. 通过用户故事管理线框图 – 用户故事是记录用户关注点和需求的敏捷工具。将线框图作为用户故事场景的一部分，可以展示用户如何在该用户故事所描述的工作部分中使用该功能。此外，当开发人员开始实现用户故事时，可以通过查看线框图来了解用户期望。
      

Visual Paradigm 提供了绘制网页线框图、桌面应用程序线框图、安卓应用线框图和 iOS 应用线框图（iPhone 和 iPad）所需的所有线框图工具和元素。它还支持敏捷软件开发以及用户体验设计工具，其中包括用户故事工具, 冲刺开发, 故事板等