创建适合您的线框

一旦完成了对场地的所有规划并初步完成了想法,我们必须开始为设计和结构提出具体的想法。最终,我们将达到我们在Photoshop(或浏览器,如果适合您)的工作点,并精心制作像素完美的设计,但首先我们需要确定我们正在设计的内容。

在本文中,我们将讨论缩略图,线框和灰盒子。我们将了解它们如何适合我们的工作流程以及它们的服务目的。本文应作为线框图过程的介绍,并概述其涉及的关键决策。

Steps in the design process: thumbnails, wireframes and grayboxes

设计过程中的步骤:缩略图,线框和灰盒子

为什么不直接去Photoshop呢?

老实说,这取决于你喜欢的工作方式。没有任何一个过程适用于每个人,你可能会相信自己的直觉足以让它一气呵成并一气呵成。如果是这样的话,你会有更大的力量,但我对此表示怀疑。在我们与他们合作之前,我们大多数人需要一些结构来理清我们的想法。

我认识一些设计师,他们基本上跳过了整个过程的预设阶段并直接进入了喜欢的阶段Photoshop CS6为他们的模型。他们推动像素,直到找到他们满意的设计并将其提供给客户。有时它可以工作,设计被接受,标记并运出。有时却没有。

通常情况下,能够在没有草图或线框图的情况下进行出色设计的设计师可以快速制定内部决策流程。设计师要么采用第一个想法,要么他们能够快速,果断地接受或拒绝想法。实际上,他们正在经历我所概述的相同过程,他们只是在内部进行。无论哪种方式,当攻击空白的Photoshop画布时,仍然会发生一个过程。

警告:通常,内部解决这些问题的能力需要大量的经验。我相信通过一个明确的过程提供的结构可以帮助确保您将设计的每个方面都给予它所需的关注。

结构和形式

当我提到设计的结构时,我说的是两件事。必须在每页的基础上直观地构建设计。布局必须易于解析,内容应以一种让用户知道什么是重要的和什么是辅助的方式进行组织。

但除了组织页面内容之外,我们的设计必须使网站的其余部分易于访问且易于解析。他们应该向用户提供有关他们在哪里,他们刚刚做了什么,以及他们如何能够获得他们想要的下一条信息的反馈。

我认为它给出了所见信息的结构(页面上的可见信息)和隐藏(所有内容不在当前页面上)。两者都同样重要,最好的设计找到了融合两者的方法。

线框

“对于客户服务,有时您需要开发一个可为客户提供服务的线框,有时则不需要。如果你不这样做,有时你仍然会发展它,但对你自己......我认为不应该有一种方法每次做所有事情。“ -丹鲁宾

Alrighty。现在是我们解决好事的时候了。

线框是超低保真度(这意味着简单:线条,框,文本)设计,专注于内容层次结构,总体布局和功能。线框应排除颜色,纹理或图像。相反,它是一个纯粹的结构化文档,试图在没有设计元素可以创建的所有视觉混乱的情况下组织内容和交互。

Two wireframes, one project: quick and loose versus tight and detailed

两个线框,一个项目:快速和松散与紧密和详细

在一些公司中,UX设计师和界面设计师是同一个人,但情况并非总是如此。如果您在代理机构或团队中工作,线框图任务可能会落到另一个人身上。无论谁在做UX,都可能会给你一堆线框供你工作,所以我建议坦诚地和那个人说话,以确保你收到一个适合你的细节层次的线框。

我应该如何详细地制作线框?

进入线框的细节水平是一个主观决定。线框的深度通常取决于决策制定过程留给界面设计者的程度以及UX设计者控制了多少。详细的线框意味着UX设计人员已经对布局和内容层次结构做出了强有力的选择。但通常情况下,线框不是“一成不变”的文档,因此界面设计师在制作最终模型时有很大的移动内容的自由度。

线框细节也可能受到页面上内容量或内容类型的影响,如下图所示。具有几行文本和几个大图像的主页不需要详细的线框。由于页面上的元素非常少,因此不需要仔细地组织它们。

Wireframes can be as simple or as complex as you wish

线框可以像您希望的那样简单或复杂

相比之下,具有多列内容,特色故事,社交媒体提要和视频剪辑的新闻网站的主页将需要预先计划。在繁忙的网站上,由于需要结构,线框应该得到更多的关注。

通常情况下,线框的质量取决于线框的使用方式。在某些情况下,线框可用于敲定非常具体的布局和层次结构决策。在其他情况下,线框作为设计人员在制作设计时参考的一般指南。

极低保真度的线框可以在设计布局时为您提供足够的灵活性,但通常很少提供有关功能细节和设计结构必需品的线索。高保真线框可以提供有关页面详细信息的大量信息,但可以让您感受到您的设计选择。您的设计不必完全遵循线框,如下例所示。

Wireframes can be a quick reference for the design elements required and their intended location

线框可以是所需设计元素及其预期位置的快速参考

线框是最终设计的一种简写。因此,共同元素具有简化的表示。图像表示为正方形,并在其中穿过线条。表格是顶部标题的方框。水平导航元素是具有均匀间隔标题的长框。文字是......好吧,文字。但我要强调一点:没什么特别的!线框几乎与最终设计的外观无关,如下图所示。

Use a wireframe loosely if that fits your process

如果适合您的过程,请松散地使用线框

在起草线框时,您应该问自己四个问题:

  • 页面上需要什么内容?
  • 不同的内容如何相互关联?
  • 怎么可能安排他们?
  • 用户应该如何与内容交互?

而已。如果您正在考虑字体和图像,那么您可能会领先于自己。只关注内容和结构。

本文是由SitePoint出版的Giovanni DiFeterici的Web Designer路线图的独家摘录。这本192页的全彩书涵盖了从最初的灵感到完成设计的所有步骤,有助于使您成为更专业的网页设计师。

您可以注册接收免费样本章节在你面前订购这本书



翻译字数超限