bts防弹少年团演唱会

bts防弹少年团演唱会

转换优化的线框图入门

《转换优化的线框图入门》

如果您是%E8%BD%AC%E5%8C%96%E4%BC%98%E5%8C%96%E5%9B%A2%E9%98%9F%E7%9A%84%E4%B8%80%E5%91%98%EF%BC%8C%E9%82%A3%E4%B9%88%E8%AF%A5%E5%B7%A5%E4%BD%9C%E7%9A%84%E5%BE%88%E5%A4%A7%E4%B8%80%E9%83%A8%E5%88%86%E5%B0%B1%E6%98%AF%E4%B8%8E%E6%82%A8%E5%9B%A2%E9%98%9F%E4%B8%AD%E7%9A%84%E5%85%B6%E4%BB%96%E4%B8%93%E5%AE%B6%EF%BC%88%E5%88%86%E6%9E%90%E5%B8%88%EF%BC%8C%E8%AE%BE%E8%AE%A1%E5%B8%88%EF%BC%89%E8%BF%9B%E8%A1%8C%E6%B2%BB%E7%96%97%E3%80%82″>

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

但是,几乎总是这包括线框图 – 它有助于能够很好地进行线框图。

我们已经谈了很多关于A / B测试的准备 – %E7%A0%94%E7%A9%B6%E5%92%8C%E5%88%86%E6%9E%90%E8%BF%87%E7%A8%8B“>

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

什么是线框?

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

这可能是一个简单而粗略的绘图。

《转换优化的线框图入门》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

或者您可以使用像Balsamiq%E8%BF%99%E6%A0%B7%E7%9A%84%E7%89%B9%E5%AE%9A%E5%B7%A5%E5%85%B7%E6%9D%A5%E5%88%9B%E5%BB%BA%E6%BC%82%E4%BA%AE%EF%BC%8C%E5%B9%B2%E5%87%80%E5%92%8C%E7%B2%BE%E7%A1%AE%E7%9A%84%E7%BA%BF%E6%A1%86%E3%80%82″>

《转换优化的线框图入门》
图像来源

或者你可以使用像Indesign%E8%BF%99%E6%A0%B7%E7%9A%84%E5%B7%A5%E5%85%B7%EF%BC%8C%E8%BF%99%E9%9C%80%E8%A6%81%E6%9B%B4%E5%A4%9A%E7%9A%84%E4%B8%9C%E8%A5%BF%E6%9D%A5%E5%AD%A6%E4%B9%A0%EF%BC%8C%E4%BD%86%E6%98%AF%E4%BD%A0%E5%8F%AF%E4%BB%A5%E7%94%A8%E6%9B%B4%E5%A4%9A%E7%9A%84%E4%B8%9C%E8%A5%BF%E5%81%9A…”>

《转换优化的线框图入门》

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

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

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

重要 :线框不是设计,这应该向所有相关方明确说明。 每隔一段时间你就会碰到那些看不到线框的人,除了最终的设计 – 一旦你想出来,就停止向他们展示线框。 这是浪费时间。

根据CXL创始人Peep Laja的说法,他仔细考虑是否向客户展示线框。 有些人不禁将线框视为最终设计。 这就是为什么有时最好显示最终设计,以节省数小时争论无意义的事情。

线框图流程

一旦你决定在哪个页面上进行治疗,那就是当你打破线框时。

这个过程确实可以采取多种形式。 %E6%A0%B9%E6%8D%AEUXPin“>

Sketch => Wireframe => Lo-fi原型=> Hi-fi样机=> Hi-fi原型(快速)=>代码

这是标准的,通常是最安全/最保守的路线。 在简要勾勒出一些想法之后,他们说,你用线框设置了舞台。 根据这篇文章,“接下来,通过增加交互性,从线框本身创建一个低保真原型; 这是经过测试的有价值的早期反馈测试,可以在精细细节发生之前加入。“

如果想要更精简的选择怎么办? %E6%A0%B9%E6%8D%AEUXPin%EF%BC%8C%E5%AE%83%E5%8F%AF%E8%83%BD%E7%9C%8B%E8%B5%B7%E6%9D%A5%E5%83%8F%E8%BF%99%E6%A0%B7“>

线框=>低保真原型=> Hi-fi-样机=>代码

如果您拥有较少的资源或者您的目标是%E9%AB%98%E6%B5%8B%E8%AF%95%E9%80%9F%E5%BA%A6%EF%BC%8C%E8%BF%99%E6%9D%A1%E8%B7%AF%E7%BA%BF%E4%BC%BC%E4%B9%8E%E6%98%AF%E6%9B%B4%E5%A5%BD%E7%9A%84%E9%80%89%E6%8B%A9%E3%80%82″>

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

《转换优化的线框图入门》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

无论您选择何种流程,线框都应始终保持低保真度。 没有必要花太多时间来设计和完善它们。 正如Balsamiq%E7%9A%84Leon” barnard> ,“线框图就是用户界面设计,因为素描是绘图。”

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

这是他的素描书中共享的一个Peep。 你可以看到他“大声思考”并绘制出一些用户流程。

《转换优化的线框图入门》

线框实际上只是一个概念工具 – 它们允许您以一种具体的方式与您想要的体验进行沟通。 其他概念测试工具和方法可以是站点地图,用户流等。

线框图最佳实践

虽然线框图具有战术上的解释性(尽管最好地传达了愿景),但有一些最佳实践往往会将每个人放在同一页面上。

以下是一些要遵循的……

1.它不是设计,它是一个样机

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

正如Balsamiq%E7%9A%84Leon” barnard> :

《转换优化的线框图入门》 莱昂巴纳德:

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

您可能有一个非常明确的想法,但可能没有意识到最终用户如何连接或理解所有内容,直到您在屏幕上看到页面。 造型,外观和感觉可以在以后出现。 现在是时候探索,玩耍,并将所有不好的想法排除在外!“

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

所以,这篇文章可能是本文中最具启发性的,只是因为使用Lorem Ipsum来规划设计是如此普遍。

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

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

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

Lorum Ipsum看起来不错:

《转换优化的线框图入门》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

直到它没有:

《转换优化的线框图入门》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

有时,可能是因为深夜和艰难的截止日期, %E4%BA%BA%E4%BB%AC%E5%BF%98%E8%AE%B0%E5%88%A0%E9%99%A4%E5%8D%A0%E4%BD%8D%E7%AC%A6%E6%96%87%E6%9C%AC“>

《转换优化的线框图入门》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

这是顶级用户体验设计师和资源%E5%85%B1%E4%BA%AB%E7%9A%84

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

UXPin%E7%9A%84” ux cao> %E8%A1%A8%E7%A4%BA” ipsum>

记住两件事:

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

如果您真的想使用占位符文本,请使用gangsta” lorem ipsum>以保证清晰度。

3.此阶段的变化仍然很便宜

线框水平的变化仍然很便宜; 当你开始编写变体时,并没有那么多。

正如Balsamiq%E7%9A%84Leon” barnard> :

《转换优化的线框图入门》 莱昂巴纳德:

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

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

4.测试你的线框/原型

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

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

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

测试原型/线框有两个具体的好处:

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

谈到第二点,这里是Centresource的数字营销顾问Rami” perry> :

《转换优化的线框图入门》 拉米佩里:

“我们甚至有一个客户端用户测试设计幻灯片 – 甚至不是完整的原型 – 然后去他的董事会。

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

%E8%BF%99%E6%98%AF%E4%B8%80%E6%9C%AC%E5%85%B3%E4%BA%8E%E6%B5%8B%E8%AF%95%E5%8E%9F%E5%9E%8B%E4%BB%A5%E4%BE%9B%E8%BF%9B%E4%B8%80%E6%AD%A5%E9%98%85%E8%AF%BB%E7%9A%84%E7%B2%BE%E5%BD%A9%E6%8C%87%E5%8D%97“>

用于线框图/原型制作的工具

同样,该工具不如概念通信的一般目的重要。 以下是一些工具,可以很容易地制作和共享模型:

不要忘记纸和笔

大多数时候,在纸上绘制想法都出现在任何官方(或数字)线框之前。 但它%E9%80%9A%E5%B8%B8%E4%BB%8D%E7%84%B6

《转换优化的线框图入门》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

何处了解有关线框图和原型制作的更多信息

虽然你不需要成为线框图和原型设计的专家,除非你是一名设计师,你能更好地传达你的想法,你将成为更好的优化领导者。

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

图书:

结论

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

你把它们放在一起的具体方法并不重要。 您必须清楚地向设计师和开发人员传达您的想法,这一点非常重要。

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

相关文章

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注