当前位置:首页 > 内容营销 > 正文

用于转换优化的线框图入门

用于转换优化的线框图入门

如果您是转化优化团队的一员,那么这项工作的很大一部分就是与团队中的其他专家(分析师、...

如果您是转化优化团队的一员,那么这项工作的很大一部分就是与团队中的其他专家(分析师、设计师)沟通治疗方法。

根据更改的范围,您可以使用几种不同的工具和方法。

不过,几乎总是这样,这包括线框图——它有助于能够很好地完成线框图。

我们已经谈了很多关于 A/B 测试的准备工作——研究和分析过程。 我们还讨论了很多关于运行测试和分析结果的内容。

但是我们还没有深入了解涉及线框图和原型设计的通信过程,尽管它是一个重要的部分。

什么是线框?

线框是定义网页布局、内容和功能的蓝图。 它们不传达设计——例如颜色、图形或字体。 它们是页面元素的视觉指南。

它可能是一个简单粗暴的绘图。

图片来源

或者你可以使用像 Balsamiq 这样的特定工具来创建一个漂亮、干净和准确的线框。

图片来源

或者你可以使用像 Indesign 这样的工具,它需要更多的学习,但你可以用……做更多的事情。

你可以使用大量不同的工具,真的,因为它们只是达到目的的一种手段。

它主要是关于沟通。 线框图的目的是传达您对体验/治疗应该是什么的想法。 这是您用来向您的团队成员、客户和其他利益相关者传达您的治疗迭代的方式。

因此,无论哪种方法最能传达您的愿景,都是最好的使用方法。

重要提示:线框不是设计,所有相关方都应该清楚这一点。 时不时地,您会遇到一些人除了最终设计之外不能将线框视为任何东西——一旦你弄清楚了,就不要再向他们展示线框了。 这是浪费时间。

据 CXL 创始人 Peep Laja 介绍,他会仔细考虑是否向客户展示线框图。 有些人不禁将线框视为最终设计。 这就是为什么有时最好展示最终设计,而不是节省许多小时为无意义的事情争论的原因。

线框图过程

一旦你决定要在哪个页面上运行处理,那就是你打破线框的时候。

这个过程真的可以采取多种形式。 根据UXPin,这是一种可能的过程:

草图 => 线框 => 低保真原型 => 高保真模型 => 高保真原型(快速) => 代码

这是标准路线,通常也是最安全/最保守的路线。 他们说,在您简要勾勒出一些想法之后,您就可以用线框设置舞台了。 根据文章,“接下来,通过添加交互性从线框本身创建一个 lo-fi 原型; 这经过了宝贵的早期反馈测试,这些反馈可以在细节发生之前纳入。”

如果想要更精简的选择怎么办。 根据UXPin,它可能看起来像这样:

线框 => 低保真原型 => 高保真模型 => 代码

如果您的资源较少或者您的目标是高测试速度,那么这条路线似乎是更好的选择。

他们概述了其他一些流程,但重要的是它们遵循相同的总体进程:信息结构 => 用户流/交互设计 => 视觉保真度。

图片来源

无论您选择何种流程,线框都应始终保持低保真度。 没有必要花太多时间来设计和完善它们。 正如 Balsamiq 的 Leon Barnard 所说,“线框图之于用户界面设计,就像草图之于绘图一样。”

我们推荐的流程? 开始在纸上素描,因为很容易画出几个不同的版本,然后丢弃那些似乎不起作用的版本。 一旦你对它感到满意,你就可以把它变成一个数字线框,你可以发送给人们。

这是从他的速写本中分享的一个 Peep。 你可以看到他“大声思考”并绘制了一些用户流。

线框实际上只是一个概念工具——它们允许你以某种具体的方式交流你想要的体验。 其他概念测试工具和方法可以是站点地图、用户流等。

要遵循的线框图最佳实践

虽然线框图在战术上是解释性的(尽一切可能传达愿景),但有一些最佳实践往往会让每个人都在同一页面上。

以下是一些要遵循的……

1. 这不是设计,这是一个模型

如上所述,请确保每个人都知道此版本不是最终版本。 以后再担心细节。

正如 Balsamiq 的 Leon Barnard 所说:

莱昂·巴纳德:

“现在不是考虑像素尺寸、颜色和字体的时候。 相反,请尝试考虑您要解决的问题以及应用或网站中屏幕之间的流动。

您可能有一个非常清晰的想法,但在您看到屏幕上的页面之前,您可能无法意识到最终用户是如何连接或理解所有内容的。 样式、外观和感觉可以稍后出现。 现在是探索、玩耍并摆脱所有坏想法的时候了!”

2. 使用实际副本而不是 Lorem Ipsum

所以,这个技巧可能是本文中最有启发性的,因为使用 Lorem Ipsum 来规划设计是如此普遍。

我已经做到了。 你可能已经做到了。 这里没有人的手是干净的。

您可能想知道……为什么不使用占位符文本? 与利益相关者沟通时不那么分散注意力,而且您可以稍后更改细节,对吧?

关键是,所有内容都在设计之前。 正如 Peep Laja 告诉我的那样,“信息第一; 设计只是为了支持它。”

Lorum Ipsum 看起来不错:

图片来源

直到它没有:

图片来源

有时,可能是因为深夜和紧迫的截止日期,人们忘记删除占位符文本,这可能会非常尴尬:

图片来源

这是顶级用户体验设计师和资源共享的观点。

Luke Wroblewski 说,“在网页设计过程中使用虚假内容或虚假信息可能会导致产品具有不切实际的假设和潜在的严重设计缺陷。”

根据 UXPin 用户体验内容策略师 Jerry Cao 的说法,“在开发内容上花费的任何额外时间和精力,无论看起来多么多余,都会改进最终产品。 你会希望尽早开始你的内容,并避免使用像 lorem ipsum 这样的通用占位符。”

只记得两件事:

  • 内容优先的设计策略。
  • 不要使用占位符文本。 写副本。

如果你真的想使用占位符文本,为了清楚起见,请使用 gangsta lorem ipsum 生成器..

3.现阶段变化仍然便宜

在线框级别的更改仍然很便宜; 当您开始编写变体时,就没有那么多了。

正如来自 Balsamiq 的 Leon Barnard 为 ThinkApps 所写:

莱昂·巴纳德:

“很高兴看到你的想法开始成形,在所有的部分都到位后,你可能会觉得准备好继续前进。 但仅仅因为它“有效”并不意味着它不可能更好。 不要害怕在这个阶段徘徊。 现在的变化既快速又便宜。 在开始编写代码之前,现在是时候确保您有正确的设计。

在继续之前,挑战自己为应用程序的每个主要部分提出至少三个不同的概念(这里有一些提示和技巧来推动自己的创造性)。”

4. 测试你的线框/原型

在编写代码或通过测试工具部署模型之前,您可以对模型进行快速而肮脏的测试。

那么什么是原型测试? 这与用户测试常规网页相同,只是您使用早期的线框/模型进行测试以获得初步反馈。

UserTesting.com 建议您在有一个想法的粗略模型后立即开始测试,然后在修改原型时继续测试。

测试你的原型/线框会给你两个具体的好处:

  • 您可以发现有关您的设计的意想不到的见解。
  • 您可以将这些见解和验证带给组织内的利益相关者/团队成员。

关于第二点,这里是 Centresource 的数字营销顾问 Rami Perry:

拉米·佩里:

“我们甚至让客户用户测试设计幻灯片——甚至没有完整的原型——然后交给他的董事会。

这让他能够走进房间并说:“这是我们已经收到的反馈。 这些完全客观的人给了我们这些见解; 这是他们告诉我们他们将使用该产品以及他们将如何使用它的时候。”

这是一个很好的测试原型指南以供进一步阅读。

线框图/原型制作工具

同样,该工具不如概念交流的一般目的重要。 不过,这里有一些工具可以让制作和分享模型变得非常容易:

  • 香脂
  • 模拟流
  • OmniGaffle
  • 知更鸟
  • 用户体验引脚

不要忘记纸和笔

大多数情况下,在任何官方(或数字)线框图之前,先在纸上勾勒出想法。 但它通常仍然是流程的重要组成部分,因为它允许您更自由地探索不同的迭代并在您与团队进行沟通之前抛出蹩脚的迭代。

图片来源

在哪里可以了解有关线框图和原型设计的更多信息

虽然除非您是设计师,否则您实际上不需要成为线框图和原型设计方面的专家,但您能更好地传达您的想法,您就会成为更好的优化领导者。

以下是有关该主题的一些课程:

  • NN/g 全天工作坊
  • 网站规划和线框图:Lynda.com 上的实践培训
  • 在 Udemy 上使用 Balsamiq Mockups 进行线框图

图书:

  • 线框图要点
  • 草绘用户体验:工作簿

结论

线框图是一种沟通工具,可将您对体验或治疗的愿景传达给您的团队或客户的其他成员。 在进行研究、规划和确定测试优先级之后,这通常是实际设置 A/B 测试的第一步。

你放在一起的具体方式并不重要。 将您的想法清楚地传达给设计师和开发人员非常重要。

同样重要的是要注意线框图不是设计——它不应该看起来高保真或完美。 这只是一种跨团队沟通的方式。

,

最新文章