14、线框图

线框图是一个蓝图,可用于帮助您、您的团队和利益相关者思考和交流您正在构建的软件、网站和产品的结构。在编写任何代码和完成任何视觉设计之前,使用线框开始您的项目,将为您节省大量时间,并将帮助您和您的团队在锁定一个想法之前测试更多想法。

线框促进探索性想法

低保真明确表明设计不是最终的,迫使相关人员专注于结构和开发,而不是简单的细节或视觉设计。线框还促进了快速和富有成效的反馈会议,因为一切都非常容易制作和更改。

笔和纸

您可以使用许多软件来开发线框图,但大多数人从仅使用笔和纸绘制屏幕/产品开始。任何人都可以绘制正方形和矩形,快速绘制有助于更快地获得想法。

线框图的缺点

由于线框图不包含任何设计,因此对于您团队中的一些人和一些利益相关者来说,很难理解和可视化这个概念。这意味着您需要确保自己是展示自己作品的人。确保传达您的概念,直到每个人都理解它。

用户还可以查看线框图

您绝对可以在发布前与用户一起测试您的线框图,这有助于您了解产品是否适合以及是否已为用户做好准备。“绿野仙踪”原型测试方法非常适合这一点。绿野仙踪允许测试和修改概念。您可以

在此处

了解有关此方法的更多信息。

线框设计工具

让我们来讨论一些我们可以使用的令人惊叹的线框工具!

香脂

如果您使用 Microsoft Office,则可以使用 Balsamiq。它非常易于使用,并且在市场上已有 10 多年的历史,因此您可以相信该工具非常适合您的所有需求。无限用户的计划起价为每月 9 美元。

ADOBE XD

它是免费的,是一个一站式的线框工具。您可以轻松地设计和制作线框原型,并将它们分享给您的所有队友。此外,您还可以在线实时与他人共同编辑(协作)。

无花果

1 个项目免费,是实时协作的最佳线框工具之一。Figma 也有原型设计选项,而且它是基于云的。由于它是基于 Web 的应用程序,因此您的团队可以轻松地从任何地方登录并访问线框。

INVISION 手绘

如果您更喜欢在每个人都可以贡献和修改的白板上创建线框图,那么此工具适合您。

练习:欢迎屏幕的线框

我为此使用 Adobe Photoshop,但您可以只使用笔和纸。

首先,绘制一个 iPhone X 屏幕。

然后,绘制一个正方形作为图像或插图的占位符。

在图像方块下画几条线作为描述文本的占位符。

为“登录”选项绘制一个按钮。

和“登录”的文本按钮。

结论

最好使用的工具是您最熟悉、最适合您所处的情况并完成工作的工具。以快速而廉价的方式测试许多想法会带来很多价值,而线框图是做到这一点的最佳方式之一。