帮你奠定设计项目基础的线框图五步法

很多设计项目都是从线框图的设计开始的，但是真正专业的线框图应该经历哪些步骤呢？今天的文章来自UXPin设计师Faye Bridge的文章帮助您总结了一套实用的线框图设计五步法，帮助您从最早的阶段为整个项目奠定基础~

线框图是整个数字产品或设计项目结构化的最早和最重要的组成部分。线框图向整个团队展示了关键问题，如布局、导航、视觉水平、信息架构和内容优先级。它概述了整个项目的基本轮廓，并呈现了关键信息。

今天的文章将帮助你了解提高线框图设计质量所需要知道的一切。如果你继续阅读，你会知道为什么线框图如此重要，如何使用不同的工具，以及如何通过一步一步地完成线框图的设计。

为什么线框图这么实用？

在形式上，线框图使用了大量的占位符，如标记框图，然后将其填充到实际内容中。在绝大多数情况下，设计师将使用和设计线框图：

·结构化设计：在细化到具体技术细节之前，明确整个界面的运行模式和交互方向·构建基础：导航和布局的构建几乎决定了整个项目的总体方向。如果有迫切需要解决的问题，最好从一开始就开始解决，而不是在高保真原型阶段寻找解决方案。·以内容为中心的设计：线框图的设计理念以内容为中心，鼓励你思考页面的哪些部分更重要，然后设计一个合理的布局。·更有创意和尝试：因为线框图足够简单，这意味着你可以更容易地创建，尝试不同的想法，并提出各种有创意的解决方案，而不需要花费太多的精力。

线框图是设计框架。

线框图设计思路

线框图的设计没有固定的形式。您可以在图片编辑器中完成，也可以通过特殊的线框图工具制作，甚至可以直接在纸上绘制。接下来，让我们来看看不同方法的优缺点。

·纸张：最基本的线框图离草图不远。如果你想探索不同的想法来寻找最好的解决方案，你可以忽略视觉的准确性，并在纸上快速勾勒出来进行探索。

来源：UXPin

·专业平台：UXPin等设计平台可制作线框图和高保真原型，多适合团队合作。

来源：UXPin

·显示软件：如果您不想使用像UXPin这样的收费平台，也可以使用Keynote。 Powerpointpoint 这样的软件可以显示。优点自然是省钱，但缺点是大部分时间必须通过邮件来回传输，然后编辑，沟通设计成本高。

来源：Keynote

·图片编辑器：一些设计师喜欢在Photoshop和Sketch等图片编辑软件中解决所有的设计问题。如果你也是这类工具的重度用户，那么创建线框图所使用的形状和视觉元素就足够容易了。但请记住，您需要重新创建后续的高保真原型（在UXPin等工具中，线框图可以在后续创建高保真原型时重用）。

媒体的选择只是一个开始。接下来，让我们来看看设计的具体步骤。

线框图5步流程

虽然线框图的设计没有标准规范，但我们发现以下五个步骤的设计过程是最实用的：

1、内容清单2、视觉层次3、内容线框图4、打磨线框图5、低保真原型

接下来我们来看看每一步都是怎么操作的。

1、内容清单

首先，你必须创建一个内容清单，它汇集了所有相关材料，并在创建线框图之前合理整理。

来源：Maadmob

最好将内容列表制作成电子表格，根据页面进行划分，并清楚地列出所有需要单独呈现的内容。内容列表帮助您设计以内容为中心的内容在你的想法下，你会更准确地判断哪些元素更重要。

最好按照以下流程制作内容清单：

·列出所有内容，附上URL和简短描述，根据主题组织内容项目，将每个内容项目分配到最合理的页面，将出现在多个不同页面的内容项目标记，筛选冗余内容，删除您不需要的内容，删除的内容越多，留下的内容就越有价值，如果你愿意，你可以将你的团队分成不同的组，并将特定的人分配到特定的页面或目录

接下来，您需要根据您的内容列表创建视觉层次。

2、视觉层次

当你的内容清单整理出所有可用的项目时，筛选出每个页面的优先级并不难。

然后，您可以根据电子表中的优先级标记每个项目的一、二、三个内容项目，这是我们想要划定视觉水平的基础。

3、内容线框图

这部分将把你之前计划的内容分成不同的块。

就像UXPin创建的案例一样，内容线框只是关于内容的方向，而不是显示。如果您的工具支持，格栅系统可以很好地帮助您，特别是当多个页面涉及相同的布局时。

在大多数情况下，线框图适用于移动终端的优先设计。当您的线框图优先考虑小屏幕时，只需优先考虑最重要的部分，然后随着尺寸的增加添加细节和元素。另一种处理方法是在开始时设计所有元素，然后随着屏幕尺寸的缩小而删除元素，但问题是耗时，界面元素很容易分离。

4、打磨线框图

上一篇：20个惊艳而全面的优秀网页设计

下一篇：室内设计产业“合纵连横” 抱团取暖VS独行江湖