在设计网站之前创建线框的 6 个好处（+ 示例）
已发表: 2022-01-20设计一个有效的网站需要许多元素——设计布局、考虑用户体验 (UX)、了解如何实现某些功能、编写内容以及整合搜索引擎优化 (SEO) 最佳实践等等。 这一切都始于头脑风暴会议，所有参与的创意人员与客户一起确定他们需要什么以及他们希望在网站上包含什么。
列出所有这些要求后，您可以通过以下两种方式之一继续前进：告诉您的创意人员开始工作，完成他们的项目部分（例如编写内容、设计模型等……）并向上帝祈祷你们都是在同一页面上，或者您可以创建线框以确保每个人都可以按照与网站外观完全相同的愿景来工作。 后者可以通过创建线框来完成。
什么是线框？
线框是要设计的主要网页的视觉指南。 其目的是为从事该项目的每个人提供蓝图。 这样，每个参与的人都将确切地知道每个组件的去向——Hero 横幅、导航栏、标题、副标题、内容、图像、视频、号召性用语按钮、图表等……
从设计的角度来看，它们非常简单。 您还不需要添加颜色或实际图像或特定文本。 取而代之的是，您包含占位符，用于表示站点完成后无处不在的位置。 这包括用于表示图像的正方形或矩形、用于内容的 lorem ipsum 文本以及用于标题和副标题的 H1、H2 和 H3 字体大小。
资料来源：Balsamiq
线框的类型
创建线框的方法有很多种。 如果你愿意，你可以用铅笔在笔记本上画草图。 毕竟，这不是你提交给艺术比赛的东西。 但是，如果您使用软件来创建它们，则不同的软件程序允许使用不同类型的线框：
低保真线框
低保真线框显示简单的图像。 介绍段落在这里。 产品描述在那里。 这个带有 X 的正方形最终应该是您办公室的一张照片，上面有微笑的员工，他们很高兴在您的公司工作。 您可以向您的客户解释该图像，但页面上的所有内容都是非常基本的。
高保真线框
高保真线框反映了网站看起来更真实的外观和感觉。 它们包括实际的网站内容和功能——例如可点击的 CTA 按钮，可将读者引导至 CTA 打算将它们带到的页面。 它们还可以包括徽标、排版、图像尺寸等。
创建网站线框的 6 大好处
一旦您开始将这种做法融入您的网站设计过程，您就会立即开始意识到它的许多好处：
1. 他们提供网站蓝图
你可以让 10 个人在同一个房间里讨论如何设计一个网站。 他们都可以就网站需要的页面、每个页面中包含的信息以及使网站在竞争中脱颖而出的功能达成一致。 但这并不意味着他们的脑海中都会有完全相同的图像，这会是什么样子。
因此，如果内容编写的主页文本比 Web 开发人员预想的要长得多，要么项目将被发送回内容以缩短它，要么设计将需要额外的时间来重新设计布局。 通过使用线框，这个过程变得更有效率。
2. 他们让你更好地评估用户体验 (UX)
有些事情在理论上听起来很棒，但在实践中效果不佳。 假设您的 UX 设计师想要在导航栏上包含 X 个项目，以及子页面的下拉菜单。 但是当一切都完成后，你会意识到这只会让人感到困惑。
通过将所有元素写在纸上，您可以在设计过程开始之前看到这些问题。 这样，您可以在一个更容易处理的阶段解决它们。
3. 他们确保每个人都在同一个页面上
由于设计团队中的每个人都确切地知道每个网页在创建之前会是什么样子，因此他们都可以带着更好的方向感去工作。 如果有人对这一切将如何发展有任何疑问或疑问，他们可以在最初的头脑风暴会议上提出。
这个过程让每个人都能听到疑虑并一起提出想法，并彻底了解每个决策背后的思考过程。
4.他们简化了设计过程
创建线框后，不再浪费时间来回进行更改。 虽然这一步仍然是任何项目的一部分，但在开始项目之前让每个人都同意的蓝图意味着每个团队成员都能够更有效地工作。
这也意味着您将花费更少的时间在每个网站上工作，从而增加您在截止日期之前完成并让您的客户满意的可能性。
5. 他们使开发网站内容变得更容易
内容写作是一个主观的过程。 一些最佳实践包括遵循风格指南、品牌声音和考虑特定买家角色的写作。 但是，它的长度和格式仍然可能有很大差异。
开发线框可以让作者了解长度限制或首选格式。 您不需要指定字数，但显示两个或三个短 lorem ipsum 段落的线框让他们知道将托尔斯泰小说留到另一个场合。
6. 您可以在网站建成之前向您的客户展示
设计网站最令人失望的经历之一是，当您对自己创建的内容感到兴奋时，却让您的客户做鬼脸并说这不完全是他们的想法。 这并不意味着你们创造的东西不好，而是你们俩想象的结果大不相同。
创建线框可以让客户非常清楚地了解他们网站的基本版本在创建之前会是什么样子。
线框图最佳实践
现在，虽然有不同的方法来创建线框，但遵循某些步骤以确保获得最佳结果是一种很好的做法：
与您的团队进行头脑风暴
如前所述，第一步是与所有从事网页设计工作的人聚在一起。 这样，你们都可以提出想法，并让其他人知道其背后的原因。 每个人还可以考虑影响他们在项目中的特定角色的因素，这些因素可能不在其他人的雷达上。
先画出想法
虽然您可以在头脑风暴时（或使用线框图软件）从技术上开始在笔记本上绘制线框，但使用干擦板甚至笔和纸来完成第一次迭代可能更容易。 完成后，您可以为它们拍照并将它们通过电子邮件发送给将创建线框的团队成员。 将它们包含在项目管理卡上的任务描述中也是一种很好的做法，以便于参考。
资料来源：WhatPixel
最小化颜色
线框图时无需详细介绍颜色和特定图像。 蓝图就是这样——对网站外观的简单描述。 您可以包括指示方向的注释（例如这里的品牌颜色，那里的空白），但要关注主要的设计元素。
记录功能
记下网页的某些区域将如何工作。 例如，如果某事将成为下拉菜单、图像轮播、访客测验或某种工具。 一般细节将为网页设计师提供清晰的指导。
创建桌面和移动线框
每个网站都应该有一个响应式设计。 由于网站在台式计算机上的加载方式与在智能手机上的加载方式不同，因此请创建线框来展示两种显示器的外观。 也许导航栏变成了一个汉堡菜单，或者在更大的屏幕上并排的卡片会堆叠在移动设备上。 如果您正在使用已经响应的网站模板，则可以绕过此步骤。
线框图时不该做什么
行。 因此，既然您知道该怎么做，这里列出了要跳过的内容。
不要线框每一页
线框图的全部意义在于节省时间。 因此，如果您正在设计一个包含 42 种不同产品的网站，只需对一个产品/服务页面进行线框设计。 然后专注于大件物品，例如主页、关于页面、定价、博客和联系我们页面。
不要花太多时间试图让它们变得完美
线框不必看起来令人印象深刻。 他们只需要展示网页的骨架会是什么样子。 当您实际设计网站时，请努力美化它们。
不要包括每一分钟的细节
虽然您应该包含每个元素含义的有用注释，但不要迷失在细节中。 直截了当，继续设计下一页。 您的艺术总监或网页设计师可以在以后扩展所有内容。
创建线框的工具
在笔记本上绘图是一个简单直接的过程。 无论如何，如果这对你有用，那就去吧。 但是对于那些喜欢易于共享的媒体的人来说，有很多软件程序可供您使用。 一些最受欢迎的包括：
香脂
Balsamiq 非常易于使用，几乎没有学习曲线。 它只允许创建低保真线框，但这足以完成工作。 他们还提供多个分层计划，并通过让您能够邀请团队成员观看您实时创建它们来允许协作。
Adobe XD
Adobe XD 可让您设计高保真线框，并使您能够让客户访问线框。 然后，他们可以留下注释，为线框的每个元素提供反馈，而无需实际对其进行任何修改。 它还附带了改进 UX 和 UI 设计的教程。
来源：xd.adobe.com
草图
Sketch 仅适用于 Mac 用户。 （我的意思是，它就是这样）。 它使您可以与整个团队实时协作以创建高保真线框。 虽然它没有模板库，但它与许多插件兼容。
模拟流
MockFlow 是一种数字绘图工具，感觉就像在干擦板上画草图。 它们还包括一个庞大的模板库，并允许您将线框导出到其他平台，例如 PowerPoint 和 Adobe PDF。 他们提供免费版本，但付费层包括更多有用的工具。
资料来源：模拟流
成帧器
对于预算较紧的初创公司和企业来说，Framer 是一个很好的工具，因为它提供了一个免费的选项和广泛的工具。 您还可以构建基本线框，将其保留在库中并作为未来项目的布局重复使用。
时间是金； 当它丢失时，你将永远无法找回它。 在您的网页设计过程中实施线框图将帮助您更有效地使用它。 更聪明地工作。 避免挫折。 更快地完成您的项目。 这是一个双赢的解决方案，无论您如何看待它。