跳到主要内容

线框并没有死:他们只是在改变

Image courtesy of Web Without Words: http://webwithoutwords.com

图片由Web Without Words提供:http://webwithoutwords.com

鉴于敏捷和精益UX方法在数字设计中的兴起,许多人质疑线框图的价值。他们说,详细的一次性可交付成果的日子已经结束,团队必须优先考虑交互式原型,以实现其在可用性测试和生活文档中的价值。

嗯,他们是完全正确的。

然而,我们要澄清的是,线框并不像以前那样。线框图并没有死,它只是改变了。这不是要将早期设计正式化,以避免利益相关者的恐慌想象,而不是设定不切实际的设计期望。是关于分歧探索,创建一个更加结构化的概念草图,与其他产品团队成员一起反弹。

为了看到无形概念,线框成型。使用某些工具,您甚至可以开始为原型构建基础。不要为了创建设计工件而使用线框,这些工件很容易让人们认为它完全代表最终的形式。

这篇文章是对线框的庆祝。我们将解释它们是什么,为什么它们是实用的,不同的创建方法,以及它们如何适应不同的UX设计过程。

什么是线框?

你知道那些带有X和文字的黑白盒子,看起来就像有人从网站或应用程序中删除了所有细节后留下的东西吗?这是一个线框。

Photo credit: Baldiri: www.flickr.com/photos/baldiri

照片来源:Baldiri:www.flickr.com/photos/baldiri

有时候,你会遇到一些关于术语的混淆,人们可以互换地使用线框,草图和模型等术语来指代粗略的设计工作。让我们澄清一下:草图是最粗糙的,线框更有条理,而模型通常是中低保真度。

如中描述的那样线框图指南,线框是简单,低保真设计的框架,在设计项目的初期阶段探索内容结构。线框的保真度可以从餐巾纸上绘制的盒子到实际照片和清晰排版的更复杂。

一般而言,线框应该更倾向于更低,更简单的保真度 - 当混凝土甚至不干燥时,担心油漆没有多大意义。

线框的目的,以及我们仍然发现它们有用的原因是它们可以帮助您专注于网站的结构和轮廓,以便您了解您正在构建的内容。追求更高保真度的设计人员可能很容易忽略整个信息架构的某些方面,从而导致类似Jenga的重新设计过程。通过将早期阶段用于规划线框,设计人员可以构建项目的蓝图,而不会分散像素的完美性。

好和坏

那么为什么在砧板上进行线框图?

Dawn of the Anna by 55Laney69

图片由55Laney69提供:www.flickr.com/photos/hansel5569/9420060493/

在任何竞争市场中,定期重新评估流程的每个阶段都是一件好事。而且,与其他步骤一样,线框图肯定有其缺点:

  • 对最终产品的描述不准确 - 它们的低保真度意味着观众必须利用他们对最终产品外观的想象。这会伤害利益相关者的陈述,也会抑制判断最终产品的“肠道”反应。如果你想谈论任何互动的东西,你需要大量的笔记或狂野的手势来获得重点(如果有的话)。
  • 不太适合可用性测试 - 在相关的说明中,最好的可用性测试是使用原型完成的,因为用户实际上可以做出反应和玩耍。虽然测试线框可以暗示基本的UX问题(例如,如果用户找不到主要内容),线框可以像冷技术文档一样容易感觉到。
  • 过度依恋 - 您花在线框图上的时间越多,您就越不愿意改变页面或网站结构中的任何基本缺陷。只有人性才能感受到你为自己感到骄傲的工作情感。更危险的是,线框图可以鼓励一种切换心态,在这种心态中,您需要更多的细节,以便更好地传递给开发人员(就好像他们是WYSIWIG机器一样)。

Image courtesy of Apple's Keynote

图片由Apple的主题演讲提供

在我们看来,关于线框图的最有效的抱怨与缺乏交互性和减慢快速原型制作方法(我们在上面描述)相关。

现在,让我们来看看一些优点:

  • 结构化轮廓 - 毫无疑问,这是线框的主要优势,也是其自身的理由。线框是网站的蓝图,展示了什么在哪里,以便所有内容都可以构建为整体的一部分,无需猜测或“随时随地搞清楚”。另一种方法是向后进入阶段,没有明确指示你要去的地方......但是就像在坚固的地面上建造一座塔楼一样,在一切都崩溃之前只是时间问题。
  • 表达无法解释的想法 - 设计过程并不总是那么容易用文字解释,草图很容易被误解。使用每个人都熟悉的工具构建线框使通信变得更加容易。
  • 促进内容优先设计- 所有用户都想要内容,而不是设计。在线框时,您需要根据内容的级别和类型考虑设计元素需要多少空间。事实上,当您手头有一些真实的内容时(如果它很粗糙,则完全没问题),或者您甚至可以使用我们在免费电子书中推荐的竞争对手内容时,最好使用线框图人眼的Web UI设计

虽然线框图的优点保持不变,但您可以通过使您的流程适应新技术来克服许多缺点。

新的线框

投诉在Bermon Painter的文章在过去是有效的 - 用于提供浪费的线框(特别是作为Photoshop中的死胡同可交付成果),他们曾经无法测试可用性。但是这种线框图的观点已经过时了。

Image courtesy of UXPin

图片由UXPin提供

通过正确的线框图和原型设计工具,线框可轻松适应交互性。它们成为一种低保真原型,能够在不花时间设计细节的情况下测试可用性(尚未)。这使它们成为快速原型设计的理想选择 - 原型的交互性允许它们在早期进行测试,但线框的低保真度使它们易于构建。

另一个常见的抱怨是线框只是另一种一次性交付,但这也不再准确。同样,当您使用专用工具时,您的线框只会滚动到下一个阶段 - 如果您愿意,可以演变为能够处理更高保真度的内容,如模型或高保真原型。

Image courtesy of UXPin via Photoshop

图片由UXPin通过Photoshop提供

较低保真度的线框是最灵活的。如果您在线框图或原型制作工具中创建它们,您可以稍后在工具中添加保真度,或者如果您需要视觉完美,请移至Photoshop。无需花费大量时间,您就可以更好地了解内容结构。

下一页:创建线框...



翻译字数超限