线框图 – 概述、好处和工具

世界正以飞速发展走向科技时代。对我们来说，一切信息都可以在互联网上获取。今天我们将深入探讨我们过去接触过以及未来将会接触到的数百万个网站背后的技术。

在本文中，我们将讨论什么是线框图，线框图的各种好处是什么，以及可以使用哪些不同的工具来制作线框图。线框图可以用笔和纸来绘制，但我们是一个精通技术的时代，我们更喜欢在屏幕上看到我们的视觉设计。

线框图概述

线框图是对网页在互联网上外观的二维描述。它不是一个交互式仪表板，而是网页或仪表板蓝图，例如内容的位置、图像和视频的位置、联系链接以及所有关键的超链接。

线框图就像特定网站的布局或视觉设计，它被进一步用于创建我们看到的由UI和UX设计师以及开发人员设计的交互式和色彩丰富的网页。它还有助于我们理解或展示不同页面之间的路径以及网页上的交互式元素。

在准备线框图时：

• 不要使用颜色
• 不要使用不同的字体样式。不过，使用不同的字体大小来区分H1、H2和正文内容是可以的。
• 不要使用图像。

上述要点用于网页的最终输出，但不适用于布局。

在布局中，我们通常有：

• 搜索栏
• 面包屑导航
• Logo
• 标题或不同字体大小
• 分享按钮选项
• 联系信息或“联系我们”按钮
• 页脚
• 表格

线框图可以以两种不同的方式准备。

• 低保真线框图 – 这些线框图易于准备，也花费较少的时间。它不包含对正文内容的详细描述，而只是一些填充文字。它更抽象，并使用块状图像进行空间管理。

• 高保真线框图 – 由于布局中传达的细节，它们更耗时。实际内容写在需要的地方。它是详细且相关的。它还解释了网页上交互式元素的行为。

线框图的好处

• 它有助于映射抽象结构 – 线框图是创建网站或网页的第一步具体步骤。它帮助我们将我们拥有的抽象想法转化为蓝图。它有助于消除相关各方的疑虑，并确保每个人都走在同一条道路上。它甚至使编辑更容易，因为现在相关各方可以轻松地指出不满意的区域。

• 阐明界面的功能 – 并非参与项目的每个利益相关者都是技术专家或术语专家。高保真线框图有助于利益相关者理解“谷歌地图集成功能”、“呼叫转接功能”、“立即购买超链接”、“产品或服务过滤”面包屑导航等。它还有助于了解内容的外观以及所有这些功能如何在单个网页上放置。

• 专注于核心或可用性 – 通过从线框图中去除颜色、图像和字体，现在不同的参与者可以看到设计的核心。核心可能包括网页提供的便利性、导航系统、各种超链接或号召性用语按钮。简单来说，现在可以关注网页界面对用户来说有多么容易使用。

• 有助于理解导航 – 通过线框图，客户可以了解特定网站或产品在导航、下拉菜单方面是否有帮助，以及是否需要面包屑导航。否则，这些花哨的功能可能会成为用户旅程中的障碍。高效的用户旅程决定了快乐的用户。

• 提高效率并降低成本 – 通过线框图，客户可以一次专注于一个问题，并且更改布局比反复修改最终产品更容易。现在，由于网站或产品的外观和感觉，线框图的整体良好功能不会有任何机会丢失。有了良好的线框图，视觉设计师可以专注于他们的工作，开发人员专注于他们的工作，因为产品的功能和创意方面不会混合在一起。

• 有助于内容开发 – 内容开发者现在确切地知道内容将放在哪里，它有多少空间，将使用什么字体大小以及其他要点。这看起来可能是一件小事，但现在网站或产品的内容创建也将更符合SEO优化，并且更易于阅读。早些时候，内容创建者可能会创建大型内容段落，然后设计师必须放置它们。此过程确保内容开发者为线框图中的每个块准备最佳内容。

不同的线框图工具

虽然线框图只需使用笔和纸就可以准备，因为它们只不过是界面外观的布局，但为了获得整洁和更专业的视觉效果，人们使用不同的应用程序来准备它们。下面列出了一些常用的应用程序、它们的好处和缺点，以便用户可以权衡利弊并为自己选择最佳应用程序。

Adobe Photoshop

Balsamiq

Sketch应用程序

线框图有助于将重点放在用户及其用户旅程上。线框图易于创建，因为它们可以用笔和纸制作，最重要的是，它们可以从客户、视觉设计师、内容创建者以及其他相关专业人员那里获得反馈。线框图还有助于降低成本并提高客户满意度，因为客户获得了他们想要的东西。

在创建网站或产品界面之前应该创建线框图，因为它确保将创建一个高效且具有创意的产品或网页，而不仅仅是另一个低效的产品。

Akshaya Daga

更新于：2022年12月1日

浏览量：266

开启您的职业生涯

完成课程获得认证

开始