认识达内从这里开始

线框图是UI设计师在学设计的时候需要重点掌握的设计能力之一，而今天我们就一起来了解一下，线框图的使用方法以及工具类型都有哪些。

1.减少颜色的使用

如果你在线框图中使用了丰富的配色，你应该提醒自己线框图的目标是什么(展示产品包含什么元素，以及他们如何相互作用)，并思考多余的颜色是否有助于实现这个目标。

在某些情况下，配色确实会起作用。但一般线框图里的颜色可能会分散读者的注意力，使得后续调整变得更困难。此外，并非所有客户对于用户体验工具都有所认识，这时候也可能需要使用彩色的线框图。

除了黑白两色，你也可以使用其他的颜色。有时候使用颜色突出显示特定的组件是合理的，例如可以用红色表示错误状态，用蓝色表示注释等。

2.使用简单的组件设计

当你在线框图上添加组件时，选择基础的设计即可，不需要放置过于详细的组件。这些组件对团队来说，应该是易识别的、一目了然的。花费大量时间和精力去设计详细的线框图组件不一定有用。

3.保持一致性

相似的组件在所有线框图上看起来应该是相同且一致的。如果相同的组件看起来不一样，开发人员会质疑其是否一致，影响他们的判断，甚至要为不同的设计增加额外的开发成本。在制作线框图的时候，请记住：保持一致，减少混乱。

4.使用真实内容

我们有时候会看到UI/UX设计师不在线框图上添加真实内容，而是使用“loremipsum”一类的无意义文字。很少有设计师意识到这是不对的。你可能会说，内容在设计阶段反正不可用。确实，我们建议你使用内容草稿就可以了。

在真实情境中，内容会影响你的设计，使用草稿则能帮你做出更好的设计。如果你用的是无意义文字，界面就可能会丧失与真实环境的一致性和整体性，后续可能需要对用户界面进行大量调整，甚至是创造一个无法落地的设计并推倒重做。总之，真实的内容可以为线框图提升价值，串联上下文，提供更有说服力的解释。

5.使用注释

有时候可能会出现一些设计方案无法用视觉来说明的情况，因此上级、客户或开发人员可能会对它们产生疑问。例如，某些控件背后的逻辑是什么。在这种情况下，你可以提供一定的注释来解释其背后的逻辑。一来团队能理解，二来你不需要再解释。

6.低保真到高保真

没有严格规定说你应该使用低保真线框图还是高保真线框图，这取决于项目本身。所以在特定情况下，当你需要为线框图添加更多的细节时，不需要纠结。但是正如EricRies所说，如果这些细节不能带来价值，你就不要做多余的“无用功”。先从基础开始做起，再根据需要不断完善和添加细节。例如，当你需要开发者关注到一些个性化的解决方案上来时，可以添加更多的细节，并在线框图中说明清楚。

7.将线框图扩展到原型

作为设计师，我们需要和不同的产品打交道，有些产品交互简单而普通，有些则相当复杂。有时候线框图不足以说明其复杂性和典型性，你就可以将线框图升级扩展为可交互原型，而不是写冗长的笔记并花费大量时间来解释它。

现在市面上我们有一系列简单而强大的工具，比如Figma、Invision、AdobeXD、UXPin、Axure、Moqups等。只需要进行适度的评估就能选择合适的工具来设计线框图，开发简单的原型。

用来做线框图的工具主要有以下两个目的与特性：

1.简易性：门槛低，对于刚入行UI/UX的新人和缺乏使用复杂软件经验的人来说，它们再完美不过。

2.协作性：强调协作性的工具一般都包含丰富的团队协作功能。协作是现代软件开发的支柱，因此好的线框图工具不仅提供大量的功能，还允许参与设计过程的所有团队成员之间能进行高效简单的协作

以下是绘制线框图的主流工具：

Figma：一款基于云协作的工具，功能强大，支持Windows和macOS的Web端和桌面端。Figma为构建线框图、原型、UI绘制等提供了许多强大的功能。

Sketch：在UI/UX设计师中使用广泛，还可安装插件来实现多种功能。与竞品不同，Sketch只能在macOS上使用，还需要用户依靠三方来解决协作的问题。

有很多工具都能用来设计线框图，我们建议你不应该只是根据产品的功能和特性来进行选择。相反，我们建议你多尝试和探索，并决定哪个工具才是适合你的。

为了展示现代设计工具的强大力量，这里我将分享个人的经历来展示我和我的团队如何使用上述工具来完成一个完整有效的线框图设计流程。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请在707945861群中学习了解。