如何用6个简单步骤创建线框图

分享这篇文章

0 0 0 0

无论你是新手还是业余爱好者,这六个易于遵循的步骤设计线框图将会派上用场!

如果你在用户体验(UX)设计行业工作过一段时间,你可能在某个时候听说过线框图。在一个理想的网页设计场景中,线框图将是你可视化描绘网页最终外观的第一步。

然而,如果你不是很精通设计线框图,或者这是你第一次设计线框图,你可能会遇到一些困难。你可能想知道线框图如何适应更大的设计过程,创建线框图需要哪些步骤,你是否应该使用笔或纸来创建线框图,或者你是否需要专门的工具。

虽然你可以用笔和纸以及线框图工具创建线框图(根据你的需要和方便),但其他问题的答案有点棘手。好消息是,我们将回答这些问题,以及您可能有的其他问题,在这篇文章中,我们讨论如何创建线框图。

如何创建线框图在6个简单的步骤

但在我们深入之前,线框到底是什么?

什么是线框?

线框是网页或应用程序页面的大体结构或布局的模型或表示。它显示了各种组件(如节、选项卡、产品、信息和行动号召)将如何定位,以及空间将如何利用。因为线框代表了网页的初始布局,所以颜色、多媒体内容、字体和其他风格元素通常都保持在最低限度。

MockFlow WireframePro中的样例线框
样品线框正在设计中 MockFlow WireframePro (源)

在此基础上,让我们看看创建线框所涉及的步骤。

进行研究以获得明确的方向

你可能很想马上开始说出你的线框图想法,但在那之前,想想更大的目标:设计一个引人注目的用户界面(UI)。为了做到这一点,您将需要衡量设计项目的需求以及涉众和最终用户的期望。

您的设计不仅应该帮助企业将其信息或产品传递给客户,更重要的是,让客户能够轻松地浏览页面并找到他们需要的东西,而不需要做很多艰苦的工作。

下面是你如何完成这一步的方法:

  • 与项目干系人联系,了解关键项目需求。得到这种清晰度是线框图设计的基础。
  • 研究终端用户,他们的偏好和购买行为,这样你就可以用线框来满足他们的需求。
  • 根据您的最终用户研究,定义常用用例,以便更好地理解您正在为之设计的场景。
  • 进行市场调查和竞争对手分析,以确定设计趋势和最佳实践。

便于查阅研究数据

在您的研究期间,您将收集大量的数据,包括用例、买家概况、市场研究数据和项目需求。在你的线框图绘制过程中,你需要不断地回到这个研究中。

因此,在你开始之前,确保以一种你不会浪费太多时间和精力访问它们的方式记录和组织你所有的研究信息。这将确保你的努力工作,你的研究反映在你的线框,而不是浪费。

下面是一些快速的方法:

  • 一定要把你遇到的所有关键信息都记录下来。
  • 根据宏观和微观的分类,使用文件夹和子文件夹来安排研究。
  • 创建备用单来捕捉关键概念,如买家用例、购买行为或您在研究中可能遇到的任何有趣的用户反馈。

映射用户流以满足用户需求

用户流是指用户在一个网站或应用会话中的路径或旅程。这个过程包括他们进入你的网站/应用的点,他们与网站/应用交互的所有点(如他们访问的页面和他们点击的按钮直到最终交易),以及他们退出网站/应用的点。

用户流程的一个简单例子是:用户点击一则关于灰色德比鞋的广告后进入电子商务网站。登陆你的网站后,这个人可能想通过价格、尺码、品牌等来筛选鞋子;他/她可能想要放大其中的一双或多双鞋子,检查它们的规格,将其中一件添加到购物车中,最终,完成付款和交易。

这些是你的网站/应用中的互动类型,它们共同构成了用户流。

一个电子商务网站访问者的用户流样本

电子商务网站访客的用户流量样本()

这个过程需要映射到用户流程中,这样您就不会错过重要的设计元素,如购物车、价格过滤器或规格清单。缺少这些元素可能会让网站/应用的访问者感到困惑,甚至需要他们联系客户支持以寻求帮助,甚至是基本的导航。

在这种情况下,直接的影响将是不满或沮丧的客户,这也意味着降低转化率和增加放弃。

用户流是你的线框的基础,所以一定要为此花点时间。以下是正确的方法:

  • 通过问问自己来了解用户需求:网站/应用访问者想要达到的目标是什么?他们需要什么功能?他们最初会有什么问题呢?他们需要什么信息才能顺利导航?
  • 创建一个流程大纲,包括用户进入网站/应用的入口点,以及他们在最终交易前可能采取的所有步骤。
  • 确保用户流程符合逻辑,并在导航时包含用户的所有可能需求。

创建一个极简布局线框

现在你需要开始动笔,开始倾注你的布局想法。在这个阶段,您将需要创建一个基本结构,突出显示页面上的元素、UI元素的位置、包含哪些选项卡、文本框的位置以及多媒体元素的位置。

其理念是创建网页的基本框架结构,以满足所有用户和业务需求的方式。

此外,在设计结构时,要抵制添加太多细节的诱惑——在这个阶段,少就是多。忘记字体和颜色,专注于创造一个指示性设计,而不是最后的东西。

下面是一些你可以回答的问题:

  • 我怎样才能最好地组织UI组件来支持访问者的最终目标?
  • 当用户到达页面时,他/她应该看到什么?
  • 我应该把页面的主要信息放在哪里?
  • 哪些信息应该最显著地显示?
  • 用户在网站或应用设计中需要导航哪些按钮?

一旦基本结构准备好了,就把它拿给你的同事或经理看,并得到一些初步的反馈。如果需要,相应地调整布局,以增加可用性。

确定保真度级别并填充细节

现在您已经对项目的方向、用户流程、基本线框布局(也称为模型)和任何需要的改进有了足够的清晰,您可以继续并开始填充一些细节。

在这一点上,你将需要决定你的线框保真级别,换句话说,在你的线框中呈现的细节数量。以下是三个常用级别之间的关键区别的快速快照。

忠诚 特征 要使用
  • 粗略的布局,主要是框和线
  • 几乎没有具体的细节
  • 没有尺度感、像素感或网格感
  • 当表示多个概念或变体时
  • 在最初的设计阶段,当不需要细节时
媒介
  • 更准确的布局描述
  • 细节很少,关键元素单独突出
  • 没有图像或字体
  • 当一个低保真线框需要充实
  • 当线框图需要以容易理解的形式呈现给他人时
  • Pixel-specific布局
  • 颜色、图像和所需的风格元素
  • 几乎没有文本
  • 当批准的线框概念需要进一步完善
  • 当需要准确判断复杂的UI元素时

一旦你决定了保真度,下面是你如何在线框中填充细节:

  • 从上到下,从左到右依次添加细节。
  • 添加基本的可用性细节,如导航栏和搜索栏在右上角或左侧。
  • 加入您认为可以方便客户使用页面的元素,然后看看在哪里可以最好地放置它们。

得到测试!

随着细节的填充,您的线框准备证明它的勇气。您将需要测试线框,以了解它的可用性,也就是说,如果用户可能需要的所有设计元素都存在。

测试还将有助于识别可能缺失的任何基本元素或需要处理的任何附加需求。例如,在登录页面上不是两个字段(一个是用户名,另一个是密码),你的线框只有一个。或者主页上可能没有导航栏,但逻辑上应该有。这样的缺陷需要在线框进一步进入设计过程之前修复。

您可以在此方面得到同事的帮助,或者让实际用户测试最终产品。如果你需要对线框图进行更深入的分析,你也可以考虑让主题专家参与进来。

在用户测试中定义一个新的可用性测试的标准

定义新测试的标准UserTesting()

下面是你如何测试你的线框:

  • 将你的线框图打印在纸上,或者创建数字线框图,并把它们呈现给审稿人。
  • 向审阅者提出一系列问题,以评估他们的经验并记录反馈。一些线框测试工具可能允许更多的交互式线框测试和自动捕获反馈。
  • 尝试用户测试——一种允许你发布线框链接供用户测试的服务。测试后,他们可能会在测试时分享屏幕视频、音频或书面反馈。

一旦您完成了测试并收集了反馈,您可以根据需要进行改进。

准备好迎接一场线框图闪电战了吗?没有这么快!

在你开始行动之前,有一些事情你需要考虑。用笔和纸做线框图很好,因为你不需要安装任何软件,不需要支付任何工具,不需要启动电脑,也不需要连接到互联网。但是使用线框图工具在素描方面有一些不可否认的好处。

线框图工具可以帮助你大大减少设计线框图所需的时间。你可以简单地使用拖放占位符元素和现成的线框模板。一种工具还可以使与团队成员或客户进行协作并实时接收反馈变得容易。此外,您可以与应用程序集成,如Adobe创造性的云Jira创建高质量的线框。

如果你是线框图的预算,你可以看看这个列表免费和开源的线框图工具

正在寻找IT管理软件?必威精装版官网下载看看卡普雷拉的名单最佳IT管理软件必威精装版官网下载解决方案。

分享这篇文章

关于作者

《阿凡达》

Bandita Awasthi

继续下去

内容作者@ Capterra,分享关于财务,会计和客户关系管理的最新见解。德里大学英语文学学士。总部设在印度新德里。为领先的技术和研究公司创造了超过五年的研究密集型和思想领导内容。我是一个政治历史爱好者,喜欢探索不同语言的音乐。

评论

《阿凡达》

这很有帮助。非常感谢

《阿凡达》

感谢您使这些信息如此易读和易理解。多年来与我一起工作的许多开发人员不愿意或不知道线框图是应用程序设计和其他复杂问题解决的初步步骤,这让我感到震惊。免费应用程序的链接也非常感谢!

《阿凡达》

这是超级有用的,特别是链接!谢谢分享你的经历

《阿凡达》

非常感谢您的这篇文章。写得很好,很容易读。它给了我一些关键的缺失部分(主要是Invision产品)!现在我把它添加到书签中,这样我就可以不断地回头看,以确保我保持在正轨上。再次感谢。

《阿凡达》

喜欢这个! !

对本文的评论:


评论指南:
所有的评论在发表之前被审核,必须符合我们的指导方针。评论必须是实质性的,专业的,避免自我推销。版主在批准评论时使用自由裁量权。

例如,注释可能不会:
•包含个人信息,如电话号码或电子邮件地址
•自我推销或链接到其他网站
•包含仇恨或蔑视的语言
•使用假名字或垃圾内容

你的隐私对我们很重要。看看我们隐私政策