你是会员吗?寄存器要么登录

什么是线框&如何设计:初学者指南

每一个结构,每一栋建筑,每一个设计都是从一个线框开始的。它是设计工作流的重要组成部分,决定了整个项目的成功与否。

无论您是使用数字用户界面设计或横幅设计工作,线框图应该是你的设计过程的一部分。在本指南中,我们将帮助您了解什么是线框以及它们为何重要。

我们为初学者和高级设计师制定了本指南,以传达线框图的重要性。您将学到从如何设计线框到最佳线框工具、避免常见错误的技巧等等。

让我们开始吧。

200万个+数字资产,具有无限下载

获得200万+的设计资源,主题,模板,照片,图像和更多的无限下载。雷竞技iosENVATO元素开始每月$ 16,而且是我们所见过的最佳创意订阅。

探索Envato元素

什么是线框?

什么是线框图

想象一下,你正在构建一个房子。你直接去建造建筑物没有任何准备?没有!您可以通过将绘图板和设计房子的计划开始。通过创建一个布局定义建筑的建设。

同样,可线框说。它可以帮助你保持接地,并创建了您的布局,并根据布局合理规划设计。

有许多不同类型的线框。在用户界面设计中,线框用于为网站、web应用程序、移动应用程序等创建布局。线框甚至用于海报和信息图形等印刷设计,以帮助改善用户体验。

为什么线框很重要

当涉及到用户界面设计,大多数设计师往往忽视线框的重要性。他们直奔建设过程中,因为他们已经熟悉了设计的常用结构。

当你看够了网站的设计和应用程序知道在哪里头,菜单,按钮,就可以直接去没有一个线框设计。这就是孕育灾难性的网站和应用产生由破坏用户体验非常低的用户交互。

线框允许您事先了解设计的轮廓或框架,从而有助于防止出现这种情况。

设计过程

除了各具特色的人性化和有效的设计,也有以线框一些其他的好处。

  • 开始有了明确的布局:线框有助于你得到原型阶段用一记清晰的布局。这有助于你保持专注,创造更多的效益和结构设计。
  • 获得的早期反馈:有了线框,你可以从你的客户那里得到早期的反馈。这将有助于避免在后期对设计进行多次修改。
  • 更好的结构:您可以使用线框来规划设计的基本结构,以便与最终用户进行有效的通信。
  • 更好的合作:与团队协作时线框还帮你。特别是获得来自开发者的反馈时。

线框图的主要内容

线框中应该包括什么?这通常取决于你正在进行的设计类型。设计线框没有规则或标准。但是,有一些概念可以用来制作更好的线框。

遵循K.I.S.S.的概念

保持它傻瓜最简单的,这是一个流行的概念,你可以在许多不同类型的项目,尤其是在设计项目中使用。

线框的主要目的是设计用户界面的结构。没有必要创建深入的设计。只要保持简单和干净的最小元素。

基本结构

大多数线框都有一个基本结构,可以用来构建。例如,网站线框应该包括标题部分、徽标、菜单等。

它开始线框有了这个基本结构是很重要的。它创建于线框的其余内容主要轮廓。

正文内容

线框的身体的特点是内容在那里。对于网站的线框图,这是你有特色,产品组合,定价表和其他重要路段。

不过,在制作线框时,不必担心细节。你不必添加文本描述,命名每个按钮或图标,甚至不必担心标题。主要目标是为所有内容创建占位符并将其映射出来。

低富达VS高保真

还有一种线框称为高保真线框。与低保真度线框具有最少的内容不同,这些线框具有更详细的结构。您将在指南的示例部分中看到差异。

无论哪种方式,它是由你来选择线框你设计的哪种类型。它通常取决于你的一个项目有多大就多少时间,你在工作日程。

不同的线框例子

为了帮助您了解线框的外观,以下是一些您可以研究的示例设计。

Web应用程序仪表板线框

Web应用程序仪表板线框

这种网络信息中心线框由Dribbble用户Ivon斯托伊洛夫节目设计包括什么,什么不该在高保真线框包括。

网站线框

网站线框

这是Dribbble用户米哈尔Roszyk制作一个简单的网站线框的一个很好的例子。

移动应用线框

移动应用线框

一个完整的应用程序的线框由Dribbble用户设计的单声道。其特点为应用程序用户界面多屏的设计。

低富达网站线框

低富达网站线框

这是一个低保真线框设计的可驾驶用户科里哈格德。如你所见,它们足够制作一个有效的线框。

事情,以避免在设计线框

在设计线框时,还应始终避免一些常见的错误。

不包括图片

做实体模型或原型不要混淆线框。线框是所有有关规划和勾勒的结构。有没有必要在线框图像或图形。

让设计轮廓的清晰视图 - 事实上,在一个线框添加图形将只与制作线框摆在首位的主要目标干扰。

避免使用颜色

一些设计师喜欢在线框中使用不同的颜色来突出设计的重要部分。但没必要。线框设计坚持灰色和黑色。

请详细到最低限度

把太多的注意力放在完善线框中的小细节上只是浪费时间。即使在设计高保真线框时,也要尽量限制细节,以保持整体设计的最小外观。

使用模板雷竞技ios或工具

最大的错误之一创建线框当设计师做的是试图用钢笔和纸或使用软件绘制如Photoshop从头开始绘制。

还有,你可以使用作任何努力,设计线框许多伟大的工具和模板。雷竞技ios它们包括规划整个结构预制的部件。你可以用它们作任何努力,设计线框图。

最佳线框工具

有很多很好的工具可以使用,使线框。我们讨论了一些最好的工具在前面的文章. 以下是最佳工具的简要概述。

使用模板雷竞技ios

线框模板雷竞技ios

设计线框的最简单和最经济的方法之一是使用线框模板工具包。这些模板套件与数十个元素捆绑在一起,您将需要制作线框。它们在素描、Figma和Photoshop等应用程序中运行良好。

你可以找到更多的模板我们雷竞技ios最好的移动应用程序的线框图网站线框模板雷竞技ios集合。

UXPin

uxpin

UXPin是一个非常灵活的工具,可以用来设计线框。它还允许您轻松地从线框图到模型和功能原型。定价从每月19美元开始。

肥姑妈

的figma-应用

FIGMA是可以用来设计一切从线框到原型和更自由的基于云的编辑器。这个工具,但是,当你用线框模板套件使用效果最好。雷竞技ios

模拟流

模拟流

MockFlow非常适合自由职业者。它的特点是一个非常容易使用的界面,您可以设计线框和模型轻松。这个工具也提供了一个免费的计划。

如何开始

创建线框是过程的最容易的部分。

如果你已经下载了一个线框图模板工具包,它是那么容易,因为在图形编辑您所雷竞技ios选择的应用程序打开该模板文件。如Photoshop或素描。然后你就可以开始定制布局。

figma线框

例如,在FIGMA线框图是很容易的。它可以提供预先制作的布局,你需要开始组件。或者,你可以加载模板包。所有你需要做的是拖放项目到画布上,并开始重新安排他们设计的线框。就这么简单!

这似乎在第一铺天盖地。但是,随着实践的一点点,你就可以手艺线框没有工作。只要记住遵循提示,我们在本指南中列出的建议。

在接下来的步骤中的流程

线框只是设计过程中许多步骤中的一个。现在可以使用线框从客户端获取反馈。返回绘图板以改进线框。得到客户的认可。在下一阶段的工作-设计模型或原型。最后,进行设计。

不用说,将线框图集成到您的工作流程中可以以一种不可思议的方式改进您的设计和工作。把额外的时间花在线框舞台上,从长远来看会给你很好的回报。