什么是xAPI:体验API的快速学习指南
写的:
Orana Velarde
每个创意项目都有一个起点。例如，它可以是一篇文章的大纲或数字插图的草图。这同样适用于应用程序设计中线框的使用。
线框图是你使用的每个网站和应用程序的支柱。用户体验和用户交互设计师使用线框图勾勒出可以轻松定制的视觉想法，直到它准备好构建和开发。
如果你打算建立一个网站或应用程序-你自己或UX/UI设计师-你需要知道线框是什么，为什么它是如此重要。
在本文中，我们将帮助您了解线框图对UX/UI项目有益的多种方式，即使它是就像登陆页面一样简单。
我们还将介绍不同类型的线框以及如何使用它们，以及如何开始使用自己的线框的提示。
线框图是网站或移动应用程序UX设计工作流程的第一步。创建线框的概念类似于建筑师从蓝图图纸开始，工程师绘制机械图。
“线框”一词背后的字面意思是一种金属线结构，就像雕塑家、陶艺家和工程师使用的金属线结构一样，用一种修饰材料来建造。在房屋或建筑物中，墙壁和柱子内部都有线框，大型雕塑也有线框作为基础结构，复杂的陶瓷设计也经常建立在线框上。
手机或网站线框是整个信息架构的骨架。它有助于从早期阶段到最终产品的开发过程。线框图使界面可视化，被广泛用作界面设计(也称为UI设计)的工具。
在视觉上，线框图是网站或应用程序完成后的2D可视化。它们是用户界面的初稿，带有灰度形状和最小的设计元素。
下面是一些线框图中常用元素的例子:
线框的整体布局就像鸟瞰图一个网站的所有页面这些页面以列和行并排排列在网格中，它们之间有足够的空间来添加交互说明。
UX/UI设计师使用线框组件来更快地创建线框。下图显示了根据需要将线框组合在一起的不同元素。移动和替换元素很容易，并且节省了迭代之间的时间。
线框图是UX/UI设计的重要组成部分。它们通过简化初始用户界面测试阶段来改进创建过程。使用线框图，UX和UI设计师可以在不花太多时间设计细节的情况下测试他们最初的想法。
根据网页风格指南Patrick J. Lynch和Sarah Horton认为:“线框图迫使团队专注于信息架构和结构设计，而不会被视觉层分散注意力。”
UX/UI设计师还使用线框图向客户和利益相关者快速展示他们最终设计的外观。
线框图是所有团队成员的通用语言:客户、项目经理、设计师和开发人员。通过简约和功能性，它们帮助每个人理解并跟上从想法到最终产品的过程。
在每一个创意项目的开始，都有很多产品的变化和迭代。从线框开始可以减少编辑和应用修复所需的时间。这不仅节省了时间，也节省了金钱。
用户界面线框图之后的下一步是原型制作。一旦结构被涉众和用户测试团队批准，原型就开始了。
术语“线框图”通常与术语“原型”一起使用。这是因为它们是彼此的进展，同时也在某种程度上可以互换。
线框图有三种类型;低保真、中保真和高保真。
低保真线框图是UX/UI设计过程的第一步，在原型之前。中保真度和高保真度线框图与原型最相似，有时被称为原型，尽管它们并不相同。
这两者之间有一个关键的区别，即使它们看起来很相似。
正如我在上面关于线框图和原型的区别的章节中提到的，线框图主要有三种类型。这些是线框图过程的构建模块。
线框的每一层都是前一层的延续。从低保真开始，逐渐移动到中保真，然后高保真。之后，继续制作原型。从中保真甚至高保真线框开始也是可以的——这完全取决于你项目的复杂性。
下面的图片描述了从低保真线框到高保真线框的交互设计过程。正如你所看到的，页面布局是一样的;不同之处在于构图中最终设计元素的数量。
第一种也是最简单的一种是低保真线框。它们要么是手工制作的，要么是用数字工具制作的。
低保真线框图意味着快速和松散的创建，没有任何设计元素。可以把它想象成网站或应用程序的骨架。选择手工创建还是使用工具创建，完全取决于每个人的工作风格。
有一些可打印的模板用于在纸上绘制线框图，也有很多低保真度的模板和工具包用于在线创建这些模板。
低保真线框的主要思想是尽可能地最小化。只使用灰度，一种通用字体，不要使用图像或阴影等设计效果。
中保真度线框比低保真度线框更精细，更接近最终的UI设计。线框可能会显示图像和更详细的可视化布局，页面之间的交互比低保真线框更清晰、更精细。
中保真线框既可以是低保真线框的延续和改进，也可以是第一步。例如，如果这是同一品牌的第二或第三个线框，则可能没有必要从低保真度开始。
第三种类型的线框是高保真的。这是线框图类型中最接近UI设计在完成项目中的样子。UI组件——图像、图标、颜色、字体、按钮和背景——都准备好了，可以变成一个工作原型了。
高保真线框并不总是开始UX/UI项目的最佳位置。如果你没有一个经过可用性测试和多次迭代的低保真线框图作为基础，你就必须用高保真线框图来做这些事情。这太花时间了。
线框图与你特别相关，如果你是:
如果你的业务是在网页和应用程序设计行业，那么使用线框图可能是不需要动脑筋的。即使您使用模板和子主题直接设计高保真原型，使用低保真线框回到基础也是一个好主意。
另一方面，如果你是一家正在制作网站或应用程序的公司，你可能只是听说过线框这个词，或者在设计师的提案中看到过它，但却不知道它是什么。本指南将帮助您理解。
产品概念/设计的项目经理负责向客户展示线框图。他们需要知道如何向从未见过线框图的利益相关者和高管解释线框图。在大多数情况下，产品或项目经理负责原型设计和高级用户测试和开发之前的所有迭代。
你可能想知道为什么线框图很重要。以下是在UX/UI项目中使用线框的六个好处:
在网页或应用程序设计项目中使用线框的第一个好处是让事情进行得更快。线框图将给客户(或你)一个最终项目看起来像什么的相对概念。
当用线框图开始一个项目时，在简短的会议之后的几天内就会有一些东西可以看。
正如我在上面简要提到的，线框图可以为任何大中型网页或应用项目节省成本。乍一看似乎不是这样，但从长远来看，它会产生显著的影响。
来自Expero Blog的Johnny Hill对此进行了完美的解释;
“定义需求最困难的部分之一是收集涉众的一致性。投资者在他们的头脑中有一个愿景，即某些功能或产品应该有多么惊人，但他们不了解他们想要的技术含义。技术主管知道事物需要如何工作，但不能专注于用户友好性。产品负责人希望所有工作都在预算范围内，可能不会预料到某些边缘情况或请求中的细微差别。在项目管理系统中有一个适当的需求文档过程和定义任务可以帮助保持事情的同步，但是这些只在促进涉众的一致性和清晰的沟通方面走得太远了。”
在清晰的沟通和利益相关者的一致中，你可以通过使用线框图来节省资金。详细地说，会议更少，需求编辑的来回更快，开发人员带着对期望的清晰理解进入项目。此外，使用线框图，用户研究和测试问题可以更快地解决，这意味着更少的用户测试成本和更少的用户体验迭代时间。
第二个好处是用户体验测试(或可用性测试)在线框阶段更快。等待原型阶段进行初始可用性测试只会浪费时间。
可用性测试是通过分析每个线框页面如何与下一个相匹配来进行的。要做到这一点，线框必须具有页面之间的交互性连接，从按钮到操作，从菜单项到分类页面。
下面的图片是打印出来并挂在墙上的线框。互动性是可视化的字符串和大头针。
以下是如何使用线框图完成用户体验设计的可用性测试:
用户被要求遵循用户旅程的步骤，并对他们发现的简单、复杂或简单的困惑进行个人记录。然后，设计师根据用户反馈创建一个新的迭代，然后再进行更多的用户测试。
这是最有效的产品设计过程，从最简单到最复杂，中间没有跳过任何步骤。
在UX/UI项目开始时使用功能线框图的另一个好处是，UI可以在原型和最终设计之前轻松更改。
由于线框图是草稿，创建松散，所以很容易快速更改。在这个阶段，大的调整很简单，简单地移动和调整到一个新的位置。
首先，进行可用性测试，看看哪些可行，哪些不可行，然后轻松地进行迭代。
线框图的另一个好处是，在原型或最终设计之前进行可用性测试和迭代，开发人员和程序员的工作效率会更高。
他们知道需要做什么，希望不需要做太多的调整来达到最终的设计。开发和编程阶段非常详细，每一次新的更改都会占用宝贵的时间。
线框图在设计项目的许多阶段都是有益的。首先，低保真线框是构建代码和UI设计的最佳选择。但一旦你完成了这个项目，公司将需要继续创建更多的网页和移动应用程序。
使用最初的线框图和最终的设计来创建一个设计系统，一组特定品牌或公司的品牌元素，以快速开发新的数字产品。
使用设计系统的拼图，创建高保真线框是简单而快速的。你猜怎么着!Visme的品牌设计工具使设计过程更快。您可以创建与您的品牌字体，颜色等相匹配的功能线框。只需将您的网站地址输入到品牌向导中，它就会从您的网站中提取您的设计资产并将其应用到您的线框中。
让客户抢先看到他们的时尚商店或产品开发后的样子。它展示了产品、评论和通讯页面以及用户将在其中找到的信息。你可以添加更多的页面，移动元素，改变文本，图标，布局和添加更多的信息。
使用这个直观的线框模板建立你的网站设计的基本结构和功能。Visme有成千上万的预构建线框组件，图标和资产，使您的线框在视觉上具有影响力。你可以描绘不同的功能，CTA，标志内容和更多。
为金融服务公司创建网站或应用程序?像这样的数字线框图是一个完美的起点。这个线框图在一个画布上捕获了你网站的所有页面。
不像其他线框图，主要使用线，箭头和文本，这个模板结合迷人的视觉效果把它提升到高保真状态。此模板可以完全定制以满足您的需求。您可以编辑内容，应用自定义颜色，使用自己的字体，更改图像等。
使用这个线框图来构建你的手机应用布局，让你从一开始就很容易监督设计和开发。
实时或异步合作，邀请你的团队到董事会留下反馈。将合作者添加到您的工作区并请求即时反馈。你可以标记团队成员，对线框画布进行评论，并在设计过程中使其易于迭代。
构建一个帮助财务团队可视化、跟踪和报告财务kpi的商业智能工具需要全公司的支持。使用线框模板来说明需要在金融服务仪表板上显示哪些功能。
看看这个线框图是如何使用图表、图形和其他数据可视化类型来说明金融数据的。Visme有一个强大的数据可视化库，图标和其他视觉元素，使您的线框的最佳版本。
下载为高分辨率的JPEG, PNG, PDF或HTML5，嵌入到一个或网页，或生成可共享的链接供在线使用。邀请其他人查看、合作并在线框图上留下反馈。
如果您来到这里寻找有关创建您的第一个线框的信息，本节是为您准备的。
下面的建议将帮助你立即开始。
你要做的第一件事就是获取知识。了解所有你需要知道的关于线框是什么和做什么。这篇文章是一个很好的起点。
熟悉低保真线框图、中保真线框图和高保真线框图之间的区别，研究原型以及它们如何需要线框图存在。
搜索可用的线框图数字工具或尝试手工创建它们。先从一个小项目开始，这样你就不会不知所措。
如果你是线框图的新手，Visme是一个很好的开始。使用拖放编辑器，以及其他很酷的功能，任何人都可以在几分钟内创建专业的线框。
更好地创建线框图的一个好方法是从其他线框图中寻找灵感。
浏览Visme的模板库，找到各种线框模板，用于构思、头脑风暴、流程、原型制作等。
其他网站如Behance公司和Dribbble和Envato Elements都是不错的选择。
通过观察灵感，你会更容易创建线框，因为这些想法会在你的大脑中生根发芽。之后，你所需要的就是一点想象力来把它们组合在一起。
如果你倾向于使用笔和纸，试着亲手创建线框。你可以从零开始，为网站、手机应用程序甚至手表应用程序创建框架。然后，在框架内，你可以添加你认为合适的元素，创建线框。
另一种选择是下载一个空的线框模板并手工绘制元素草图。网上有很多高效的可打印线框图;网页、移动应用程序、智能手表应用程序等等。
如果你不想冒险用笔和纸，使用数字工具和在线线框图软件．您将在数字空间中找到许多选项，以帮助您轻松高效地创建线框。
对于更专业的经验，尝试线框图工具，如Visme, Balsamiq, Miro Figma, Adobe XD或Sketch。这些工具包括为移动应用程序或网站设计的虚拟用户旅程构建原理图所需的所有UI组件。
模板是快速的，你不需要设计经验来使用它们。Visme提供了低保真线框模板来帮助您快速入门。你可以为不同的目的和类别创建线框图——网站、移动应用程序、仪表板、表单等等。
编辑器包括一个线框元素库，如图像占位符，简单的排版，线条图标等。线框图项目中的页面或幻灯片数量没有限制。
同样的道理也适用于你一次可以处理的项目数量。此外，您可以将任何图形或照片上传到您拥有使用许可的媒体库。
Visme线框图非常适合那些刚接触这种实践的人，或者如果你正在学习在你的项目中使用它们。有了一个免费的Visme帐户，你可以创建一个低保真线框来启动你的数字项目的创建。
这个技巧是关于坚持基本功的。如果你真的对创建线框图感兴趣，不要从高保真度开始。这将花费你比预期更长的时间来完成工作。当你可以以低保真度布局整个页面时，你会花太多时间寻找正确的标题图像。
不要跳过骨架阶段;用粘土建造没有基础的建筑会使你的项目不稳定，从长远来看很难修复。每一个网页或应用设计都需要一个好的框架，而线框图就是这样提供给你的。
即使原型是物理上测试交互的工具，您仍然需要将交互添加到线框图中。这些对于可用性测试和有效的UI设计非常重要。
没有可视化的线框图只是一组没有明确计划的图像。尽管如此，我们建议您先创建图像，然后添加交互。当您发现缺少一个新操作时，您将添加该页面，直到将其全部设置好为止。
使用Visme，您可以通过线框图或原型实现无限制的目标。你可以在线框图中添加交互元素产生沉浸式体验。将幻灯片、页面或内容块链接到画布上的对象，结合悬停效果或可点击的弹出窗口、特殊效果等等。
线框图的一个主要用例是，在与团队成员就设计思路进行协作时，可以很容易地编辑它们。”
不要在iPad上创建可视化线框页面，然后导入到您的计算机，在Photoshop中添加交互描述，然后打印显示给客户。
一开始使用两个或更多的工具意味着每次需要进行更改时都需要使用所有这些工具。当您从一开始就使用一个工具或系统时，进行迭代和编辑将更容易。
一些数字工具，如Visme，在一个方便的软件包中提供线框和原型功能。它们还提供白板和协作功能，因此您可以作为一个团队在线框上工作，从而进一步缩短处理时间。这些工具中最专业的甚至有与开发人员沟通和交付的选项。
线框图是设计过程中必不可少的一部分，因为它们为开发团队提供了清晰而简洁的视觉指导，并帮助确保最终产品符合预期的规格和用户需求。
现在你已经知道了线框是什么，它的好处，甚至一些关于如何开始的实用技巧，轮到你了创建线框为您的应用程序或网页设计项目。
Visme的线框软件有一些很棒的模板和矢量图形来帮助你入门。选择你喜欢的模板，从Visme的库中拖放图形、图标、形状和动画来定制设计。或者上传你自己的。然后通过下载高分辨率JPEG或PNG, PDF, HTML5或生成在线链接来分享您的线框。
这是你的线框图之旅和巨大的成功!
作者简介
奥拉纳是一个多面手。她是一名内容作家、艺术家和设计师。她和家人周游世界，目前在伊斯坦布尔。了解更多关于她的工作oranavelarde.com