线框图在网页设计中的重要性和创建线框图的9种工具

设计线框图和原型在每个web开发项目中都扮演着重要的角色。无论你是一个创意机构还是个人,在开发之前对你的设计进行线框图可以帮助你节省宝贵的时间和金钱。

“在我看来,好的设计必须对人们的生活产生影响,不管它看起来有多小。好的设计会改变一切。”- - -Garr Reynolds

网络的原型节省任何营销传播的成本,这可能是必要的,以弥补品牌损害造成的一个运作不良的网站和令人沮丧的用户体验。昂贵的网站重新设计往往是为了纠正这类问题。增加几天来创建一个线框图和测试一个原型,确保重新设计的网站不会引入任何新的原因,用户的挫折感或进一步侵蚀品牌资产。

当然,设计师不需要重新发明每个新的线框图。站点中的每个页面都将共享一些元素,即使页面不遵循相同的模板。

这些共同的元素是必须具备的,如果缺少这些元素,就会导致访问者感到沮丧和怨恨,这种情绪可能会在他们转到其他站点后很长时间内仍然存在。疏远访客和制造负面的品牌印象对网站所有者没有帮助

疏远访问者和制造负面的品牌印象不会帮助网站所有者实现其商业目标,也不会节省资金。例如,每个页面都需要有明确的导航,这样访问者就可以很容易地从一个页面转到下一个页面,从站点的一个部分转到另一个部分,而不必返回到主页。

什么是线框图?

理解如何使用线框图是创建成功网站原型的关键。

线框图演示了web页面的布局。使用不同的形状(如方框、椭圆和菱形)来表示内容、功能和导航元素,这些形状将显示它们在页面上的位置。HTML程序员使用这些图来“连接”每个页面、连接链接、附加内容等等。

视觉设计师使用线框图作为渲染的基础,显示元素的层次重要性和位置(页面的每个常规部分都有标记);没有任何潜在的分心设计治疗。

使用简单的形状可以让您首先关注信息设计,以确保它满足用户的需求,然后再转向漂亮的图片。对于现有的站点,线框图是从屏幕截图中抽象出来的,有新的内容、功能和导航元素。

线框图与视觉设计的区别

通常,您的客户希望在web开发过程的早期看到可视化设计。我鼓励你勇敢一点,必要时可以拖延一下,但无论如何,不要屈服于这个要求。

为什么?一个非常重要的原因是为了省钱。为什么要在底层信息设计完成之前花时间在图形上呢?

同样重要的是,对标志和其他图形元素的色彩、字体和风格处理会引发情感反应(“我讨厌这种粉红色”;"我喜欢那种蓝色”;"那个版本的商标让我恶心),从而偏离了为页面确定最佳信息设计的任务。

线框图让每个人都关注这一步最重要的事情:清楚地理解每一页上都有什么,它去了哪里,为什么去那里,这样你就可以为每一页实现最好的整体平衡和结构。线框图是页面布局的草图。草图可以在计算机中使用插图应用程序或手绘在纸上。任何一种方法都可以,只要它能清楚地传达你的想法。

信息设计将随着线框图的变化而发展,在这一步结束时,结合可用性测试的结果,以更好地满足用户需求的方式反映页面元素的位置。在这个阶段保持信息设计的灵活性将帮助你创造一个更积极的长期品牌体验,所以你不希望任何人在游戏的早期就对特定的外观产生党派偏见。

视觉设计师注意事项

在这个过程中,视觉设计师应该进行探索性的会议,了解客户的视觉偏好和客户品牌的视觉元素。等到线框图设置好后,再向客户端显示页面的任何视觉设计处理。

对客户的报告

对于那些坚持更早而不是更晚看到视觉效果的客户,请视觉设计师设计页面模型,代表可能的颜色、图像、外观和感觉,以及现阶段正在考虑的可能的风格。但是,只有在绝对必要的情况下(也就是说,如果他们不接受“不”作为答案的话),您才应该这样做,并且一定要强调这些实物模型绝不能反映最终的设计(尽早并经常重复这个警告)。

当这些人看到最终的设计加上文本、链接和信息时,他们可能会不高兴。在这个阶段,只关注线框图可以帮助你避免对网站的最终外观和感觉产生不切实际的期望,因为有最大的灵活性来发展网站的信息设计是必要的。

数字创建线框的9个应用工具

传统上,交互式网页设计师使用铅笔和纸或Photoshop来做一个模型。然而,近年来,有一些网站允许设计师创建原型,线框或网站地图数字化。

这里有9种你可以考虑使用的工具。

# 1 Balsamiq

使用BALSAMIQ样机给你的感觉就像你在画画,但它是数字化的,所以你可以调整和重新安排控制很容易,最终的结果是更干净。团队可以提出一个设计,并在会议过程中对其进行实时迭代。

# 2 UXPin

UXPin是另一个强大的线框图和原型制作工具,它允许您创建交互式线框图,甚至在与队友协作的同时作为一个团队进行项目工作。起价为每月19美元。

# 3奇迹的应用

惊奇是一个新的原型制作工具,非常适合初学者。它有一个漂亮的用户界面,带有一个拖放生成器,用于快速设计线框图。它甚至为个人提供了一个免费的永久计划。

# 4 Auxre RP

这是一个模型工具,主要适用于小型企业和设计机构。该软件具有一系列令人难以置信的功能,包括动画线框、数学功能、动态内容等。

# 5 InVision

InVision与Marvel类似,但更适合高级用户。它包括一系列强大的原型设计工具,特别是用于设计移动应用程序。InVision应用程序也有一个免费的永久计划。

# 6 Mockplus

这是一个不同类型的线框图工具。Mockplus是一款桌面软件,你可以下载并安装到你的PC或Mac上,设计原型,而不需要互联网连接。你可以免费使用。

# 7的OmniGraffle

OmniGraffle是一个出色的软件,可以处理从网站线框图到电子系统、家谱、地图等所有东西。唯一的缺点是,该软件不能在Windows上使用。

# 8 iPlotz

使用iPlotz,您可以创建可点击的、可导航的线框图来创建真实网站或软件应用程序的体验。您还可以邀请其他人对设计进行评论,并且一旦准备就绪,您就可以为开发人员和设计人员管理构建项目的任务。

# 9架框

如果你正在寻找一个轻量级的线框图应用程序来设计基本的模型,那么这是一个适合你的工具。框架框是完全免费使用,它在你的浏览器上工作。不需要注册或下载。

结论

说到设计,没有正确的方法。不同的人有不同的设计方法。但是,不管您的设计过程是什么样子的,始终要记住在这个过程中给原型和原型一个主要的角色。

2020-01-14 18:52
相关热门