如何制作网站线框图:非设计师指南

如何制作网站线框图:非设计师指南

如何将一个赚钱的点子,甚至是现有的业务,转化为一个能够让它在线上焕发生机的网站?

此外,再补充一个要素:如何在没有任何设计培训或专业知识的情况下做到这一点?

制作网站的关键步骤之一,你可能从未听说过——线框图。

via GIPHY

线框图简化了网站规划和创建的过程,确保最终产品美观大方,方便访客和购物者使用,并且不会造成任何代价高昂的意外或延误。

即使你从未听说过这种方法,好消息是,线框图不需要复杂的设计工具,也不需要用户体验方面的专业技能……只需要理解这项技术,制定一个可靠的实施策略,以及一些避免错误操作的提示,这样你就不会陷入网页设计的泥潭,很容易迷失方向。

别即兴发挥,用线框图来做吧。我们现在就向您展示如何操作。

线框图背后的含义和原因

线框图是网站、应用或数字产品设计早期阶段使用的简化视觉指南。它概述了基本结构和布局,重点关注功能和用户流程,而非具体的视觉设计元素。

线框图

线框图的目的是规划出关键组件(例如菜单、按钮和内容区域),并展示这些元素之间的关系。通过剥离装饰性细节,线框图可以帮助您理清布局和设计决策背后的逻辑,为最终打造一个坚如磐石的网站奠定战略基础。

以下是一些值得您投入时间和精力在网站创建过程的这个阶段的最重要的原因。

节省金钱和时间

在线框图上进行更改和修复错误比在完全设计并上线的网站上进行修复更简单、更快捷、更经济!

优化用户体验

线框图可以帮助您收集来自真实潜在用户以及专业设计师的反馈,让您在构建开始之前就能真正确定设计、功能和整体用户体验 (UX)。

确定您的资产和目标的优先级

线框图之于网站建设,就如同大纲之于论文写作。它可以帮助您组织网站的资源,建立清晰的层次结构,优先考虑最重要的功能和信息,并确保每个设计决策都与您的最终网站目标保持一致——从建立品牌知名度到实现在线销售,以及介于两者之间的一切。

如何构建您的第一个线框(5个步骤 + 工具)

创建您的第一个网站线框需要时间。但是,现在花时间解决问题将使您的网站更有可能在未来赢得浏览者的青睐。

以下是我们建议您如何投入前期时间以实现最大影响力的建议。

1. 进行目标用户和用户体验设计研究

在正式开始绘制线框之前,进行一些研究会很有帮助。

首先,您需要了解您的目标受众是谁,以帮助确定哪些功能需要在网站上最突出,以便访问者能够找到他们需要的内容。

用户角色可以成为此过程中有用的设计工具。尝试为你的潜在用户群体创建一些人物角色,这样你在整个线框设计过程中就可以参考它们。人物角色还能帮助你制定后续的营销策略,所以要好好利用它们。

目标用户和用户体验设计

温习网页设计的核心要素也是明智之举。在设计网站时,你不应该过于突破常规,因为用户会发现,一个遵循惯例的网站更容易浏览。

同时,你也不应该完全忽视当前的用户体验设计趋势。在网上搜索一下,找到一篇最新的文章,详细介绍什么是前沿且性能良好的网站。

结合这些研究和用户画像规划,你将能够深入了解你最终想要在网站上包含的内容以及如何布局。

2. 确定最佳用户流程

用户流程是指访问者在您的网站上完成特定目标的路径。例如,如果您有一个电商网站,一个用户流程可能从特定的产品页面延伸到结账流程的结束。

确定用户必须在您网站上完成的关键任务可以帮助您为每个潜在目标创建最直观的用户流程。这些流程将告诉您网站需要什么样的内容和交互——从而构建您即将完成的线框图的框架。

话虽如此,了解假设用户的意图可能很困难。在尝试确定主要用户流程时,问自己以下问题会有所帮助:

  • 您打算为用户解决哪些问题?他们访问您的网站可能希望实现哪些目标?
  • 您如何组织内容(例如按钮、链接和菜单)来支持这些目标?
  • 用户访问您的网站时,首先应该看到什么?这能帮助他们找到方向,让他们知道自己来对地方了?
  • 用户对像您这样的网站的期望是什么?
  • 您将提供哪些行动号召 (CTA) 元素?您应该将它们放在哪里才能让用户注意到?

3. 绘制线框图

现在您已经收集了线框图的关键信息,可以开始绘制草图了。

请记住,此任务的目的并非为您的网站创建完整的设计。您只关注用户体验,以及如何创建易于浏览的页面,以便用户在转化过程中进行操作。

为此,您的线框图应包含对用户如何与您的网站互动和使用至关重要的功能和格式。这些可能包括:

  • 布局:注明图片、品牌元素、文字内容和视频播放器的放置位置
  • 导航菜单:包含所有项目的列表及其显示顺序
  • 链接和按钮:页面上必须显示的内容
  • 页脚内容:例如您的联系信息和社交媒体链接
  • 动态元素:例如搜索功能和下拉菜单,以及它们如何与网站的其他部分互动

您在上一步中回答的问题可能也会对这一阶段有所帮助。在页面上放置这些元素时,请记住考虑网页设计惯例(尤其是在网站可访问性方面)、用户期望和信息层次结构。

创建线框图主要有两种方法:手绘或电子版。

如果您选择前一种方式,那么您只需要一种写作方法就可以开始了。如果你更喜欢低技术含量的解决方案,纸笔、白板,甚至是便利贴和空白墙面,都是绘制简单线框图进行头脑风暴的好方法。之后,你随时可以使用数字线框图工具升级到更详细、更实用的版本。

手绘线框图

Source

如果您计划在线框图阶段之后自行构建网站,则可能无需创建更强大的线框图版本。但是,如果您要聘请其他人进行技术创作,那么将您的初稿发布到一个可以共享和改进的平台上会很有帮助。

以下是一些将线框图上传到线上的工具:

Wireframe.cc

对于首次接触线框图设计的人来说,像 wireframe.cc 这样的免费工具非常适合。您可以使用拖放界面轻松创建设计,并在草稿中添加注释,以免遗漏重要信息。

Wirify

另一个选择是 Wirify,这是一个可以添加到浏览器中的书签小工具。此工具的界面可以将现有网页转换为线框图。您可以使用它创建示例,以此为基础创建您自己的新线框图,或在重新设计现有网站时应用它。

Balsamiq

如果您愿意花一点钱,可以考虑 Balsamiq。它拥有易于使用的协作式线框图界面,非常适合有意协作制作线框图的企业主。

4. 将线框图转换为模型或原型(可选)

线框图可以存在于低保真度和高保真度设计之间的任何范围内。

将线框图转换为模型或原型

低保真线框图可能像餐巾纸背面的手绘草图一样简单,展示页面或产品的基本布局和信息架构。

高保真线框图可能包含极其具体的细节,例如精确的规格和像素位置。它最终可能看起来更像是建造房屋的蓝图。

高保真与低保真线框图

你的线框图在这个范围内的位置取决于你计划如何使用它。在使用快捷的 WordPress 主题完成 DIY 网页设计之前,只是想理清思路?你可能不需要全力以赴地制作一个详细的数字化版本。

但是,如果你正在处理一个更复杂的项目,并打算交给设计师或开发团队,你可能需要更进一步地完善你的线框图。

原型会将特定的设计选择应用于你的线框图。它们通常包含颜色、字体和图像,以使设计更接近完成。或者,它们会使用占位符来表示图像和文本(例如“Lorem ipsum”)。

模型是一种静态图像,有助于了解最终产品的视觉效果,但无法帮助您了解直接使用时的感受。

以下是一些为您的线框图增添更多活力的工具:

Sketch

超级灵活的数字“画布”、可堆叠元素以及更强大的功能,让您可以轻松地使用 Sketch 从头开始创建实际的设计元素,并将单调的线框图转化为未来网站的明亮、符合品牌形象的呈现。

Visme’s Mockup Generator

借助模板和易于使用的设计界面,即使没有任何用户体验经验的用户也可以使用 Visme 的样机生成器输入字体、颜色、图形等,以更好地可视化其网站最终页面的外观。

Visme’s Mockup Generator

接下来是原型。这些是网站的半功能版本,通常可以实现计划中的设计和一些元素,让你可以测试预期的用户行为。

创建原型通常对于更复杂的设计项目至关重要,因为它可以让你测试实际功能并收集用户反馈。

原型设计

准备好将你的网站构想付诸实践,并在进入设计开发阶段之前进行最后的调整了吗?以下工具将帮助你构建一个优秀的原型:

Figma

Figma 是一款功能全面、协作优先的设计工具,可以轻松创建简单的线框图,甚至构建交互式原型(以及许多其他功能!)。

Uizard

Uizard 利用人工智能将草图、屏幕截图,甚至简单的文本提示转换为高保真线框图,你可以浏览这些线框图,了解最终的网站体验。

5. 测试,测试,测试!

初始线框图(此时称为模型或原型)完成后,你需要进行一些测试。这将帮助您确定它是否已完成其目标,即规划出网站最重要的用户流程。

除了亲自体验每个流程之外,还有一些工具可以为您的线框提供更客观的可用性测试:

Lyssna

使用 Lyssna 了解真实用户对您设计的反应。您可以收集行为数据和周到的用户反馈,以便进行有依据的调整,从而帮助您未来的网站更有效地运行。

Maze

将 Figma、Sketch 或其他网站规划工具中的设计导入 Maze,即可获得诸如整体可用性得分、显示真实用户如何浏览布局的热图结果,甚至屏幕停留时间等指标等洞察。

线框图示例(3个级别)

正在寻找灵感?这里有一些不同细节级别的线框图示例,可以为您的作品提供方向和愿景。

低保真线框图

首先:Grace Colbert 在 Dribbble 上设计的这款低保真手绘移动应用程序,它表明即使是技术含量最低的线框图也能有效地传达所有不同页面和功能应如何协同工作。

在创建网站时,这种细节级别应该可以指导您确保所有功能都已到位。它快速、灵活,非常适合在最终确定任何内容之前进行头脑风暴或完善早期想法。

低保真线框图

中保真线框图

Data Techniques 的这款中保真线框图在餐巾纸草图和精美模型之间找到了最佳平衡点。它虽然是手绘的,但使用方格纸和详细的标签有助于保持条理清晰。如果在电脑上完成,它可能会保持灰度,以便将焦点集中在布局上。

与低保真线框图相比,此版本添加了结构、流程和注释,让您更容易了解完整首页的整体构成。您可以看到从导航元素和内容块到功能标注和新闻通讯注册的所有内容,从而更清晰地了解布局和优先级,而不会迷失在设计细节或文案中。

此级别的线框图是一个很好的检查点:足够精细,可以与利益相关者或合作者共享,但仍然足够灵活,可以不断发展。

Note:如果您的项目不需要它,那就不要着急!事实上,大多数设计师都是直接从低保真过渡到高保真或原型网站。

中保真线框图

高保真线框/模型

Moqups 的这个示例虽然简洁易懂,但超越了标准的高保真线框。它不仅包含结构和布局,还融入了色彩、字体和光影等品牌元素。在这个层面上,线框和模型之间的界限开始变得模糊。

传统上,线框通常使用灰度占位符,以突出可用性和流畅性。然而,在更高级的版本中,添加一些视觉样式——例如单一品牌颜色或示例按钮处理——可以帮助传达视觉层次或阐明设计意图。只需确保这些设计细节不会分散对核心目标的注意力:规划出一个可用的布局。

如果您正在与设计师合作,并且心中已经有了清晰的愿景,那么这种混合线框可以成为在进入完整视觉设计之前进行协调的明智之举。

Note:我们来快速谈谈模型与原型。模型与线框图类似,因为它是静态的。它是您网站的视觉呈现。原型是一个带有功能链接的交互式展示,可供用户测试和评估。

高保真线框/模型

下一步:从线框图到网站

好的。现在,您对网站的运作方式,甚至外观都有了具体的了解。

现在,您如何迈出这一步,让真正的网站运行起来呢?

我们认为,基本上有两种选择,正如我们上面讨论过的——您可以自己动手,也可以雇佣他人。

DIY 选项并不像听起来那么可怕。如今,市面上有数十种(甚至更多!)网站构建工具。它们中的大多数都使用模板和拖放功能,帮助您在几个小时内构建一个功能齐全、外观精美的网站。

但是,如果您想要一个真正能帮助您将网站上线并让您的受众能够找到您的网站的选项,您必须谨慎选择!

评论留言