LO-FI GRUNGE 设计风格

“COME
DOUSED IN MUD
SOAKED IN BLEACH
AS I WANT YOU TO BE
AS A TREND
AS A FRIEND
AS AN OLD MEMORY。”

——NIRVANA


一

就真的不复存在新鲜事物了么？寻找时尚，兴许得重返至几十年前吧。然后，请将你所找到的，剪下、粘贴回现代吧。

在整个六十年代及七十年代初期，电子印刷仅于商业应用上被人们所知。无论是PETER MAX那极具迷幻意味的HAIGHT-ASHBURY演唱会海报，或是ANDY WARHOL的波普汤罐，还是RALPH STEADMAN那墨迹廖廖的插画，它们都只是些以非数码形式存在的印刷品而已。在艺术运动向草根文化紧密靠拢之际，印刷品质量的精确度也在相应下降。结果就导致海报被涂的越来越脏，线条开始缺乏规则，颜色也变的恣意蔓延。换句话说，当时的流行文化界被大量低保真的印刷品所充斥。 当然，在六十年代及七十年代初期，非电子印刷风并非只是一次“复古”潮流。它甚至不被认为是“非电子的”，因为当时没有所谓的电子印刷与其相对应。它只不过是当时众多图形设计师的看法而已。

让我们快速前进至九十年代早期，善于打破旧习的图形设计师DAVID CARSON凭借一本地下杂志RAYGUN风靡一时。至此，在设计文化界盘踞已久的秩序被打乱。CARSON使用有选择性的设计以取代散漫、脏乱的风格。例如，他使用的字体大小在同一版面内变化多端。他还故意取消了行间距，造成行与行文字之间的相互模糊、覆盖与交错，于是，文字本身也仿佛成了抽象艺术的类型之一。CARSON还大量使用一些难看粗糙的字体，比如那些边缘毛糙、并非清晰的字体。想想看，这就好象是六十年代晚期，那些经常在地下海报中使用的字体复活了一样。

九十年代早期，设计被认为是“看到的而非听到的”。它的作用更多的是为内容服务，而非将用户的视线及注意力吸引向设计本身。而CARSON却缔造了他那非常显而易见的（有人会说那是过分炫耀的）设计风格。如今，他的这一设计姿态及哲学深刻的影响和感染了网页设计中的LO-FI GRUNGE时尚。所以，我们有必要在这里简单列出他的几点图形设计思路。

“在每期RAYGUN中，总会有那么一篇文章要比其它文章难读懂的多。然而，先前的设计思路并不是“好吧，让我们来弄脏这篇文章”如此的不负责任。那时，我们想的是要搞懂这篇文章。可越这样做，其中的某些部分就会变得更加难懂。我并不是故意要和它过不去，但我相信读者在识别的过程中会觉得有趣的，特别是我们的那些固定读者。这也是我们的杂志可以与MTV或电脑相抗衡的地方。”

“避免突出设计”的弱点：

“我现在相信，如果铅字不可见，那么文章亦是不可见，甚至无法阅读。至少对于这些读者来说，他们看过更多更好的电视节目。当你递给他们这么一张打印着灰色铅字的实心纸张，说，“瞧瞧这篇精彩的故事吧”。结果，多数人都持一副不理不睬的态度。“难道它看起来很没趣么？那好，让我们来尝试一些新鲜的东西吧。”我认为，如果是因为设计而造成文章的不被注目，那简直不亚于是对如此好文的伤害。

让我们再次快速前进到九十年代后半叶。地点：芬兰，赫尔辛基。十几岁的年轻设计专才MIIKA SAKSI正一边贪婪阅读大量ELLE之类的时装杂志，一边狂热学习及消化PHOTOSHOP技巧，实验并磨练着自己的设计风格。虽说CARSON并非为SAKSI造成直接影响力，他翻阅着的这些国际时尚杂志的设计师们，却是对CARSON风格再熟悉不过了。

当SAKSI在1997年将其作品展示于网络，他的设计风格迅速影响了一大批地下设计团体。至此，网络上的设计不外是以规矩的栅格为基础的。它们看起来不仅如盒子般的四四方方，更是一副受约束、电子化的模样。而SAKSI却做到了将六十年代末期不规则的印刷特质，与CARSON那种自由散漫、抗栅格化的布局完美结合，并未丧失丝毫各自的魅力。除此之外，SAKSI自己还加入了少量欧洲时装设计的影响在内，以达到最终那混合却出色的效果。由此，LO-FI GRUNGE的网页设计风格诞生了。


二

大部分的LO-FI GRUNGE“手艺”是在PHOTOSHOP里完成的——伴随着对笔刷、复合层的实验将滤镜应用到所选图片中。最终，这副PHOTOSHOP文件被分割成块，并被储存为GIF或JPEG格式的图片。在网页制作工具里再将其缝合为一。在此，我就不再提供这些网站作为信息结构或导航条的案例来讲解了。

正因为LO-FI GRUNGE的特色之处是如此的依赖PHOTOSHOP而非HTML得以实现，它也就极容易被安上以平面印刷为核心的标签。事实上，这许多的设计在300DPI的分辨率下看起来会更为出色，简直好似那些印制光滑的平面杂志般优雅。因此，如果本书仅仅是重申印刷设计的那部分特征，为什么不让LO-FI GRUNGE它自己在网页设计风格中占有一席之地呢。这不仅是首先因为，在传统的网页设计中，到处是一片干净清爽，严格分割的景象，更是因为LO-FI GRUNGE起源于那些不规范的，脏乱的，实验性的印刷风格。于是，我不仅仅要识别它的印刷起源，更将其作为一类网络上特殊的设计风格加以介绍。

以下，我将着重解释几点出现在LO-FI GRUNGE中的基本设计元素，看看它是如何充分利用网络优势的。在这之前，让我们先来看看这几个极具LO-FI GRUNGE风格的网站。

（一）实验案例分析

一开始，LO-FI GRUNGE主要被用来设计那些华而不实的时尚或滑板在线杂志。这些杂志其实就雷同于设计作品的展示区（比如SAKSI的很多期SILBATO杂志并无任何内容出现）。接下来，LO-FI GRUNGE风格就被用来设计那些易于导航的自行车轮胎公司或滑雪板零售商店的网站了。于是，它在商业上的应用能力，明显优越过了做为十几岁少年的娱乐消遣集散地而存在。然而，这也不过是LO-FI GRUNGE风格显露出来的初始功效而已。现在，任何以“极限运动”为市场口号的体育运动部门都在寻找和发掘LO-FI GRUNGE设计风格。他们包括了奔跑在各类地形上的赛车，跨训练项目的运动鞋，运动饮料，软饮料，滑雪机，甚至TACO BELL的速食连锁店。

MIIKA SAKSI设计了一个隐藏式的、迷宫般的、充满了循环链接的网站。SMALLPRINT是他的在线时尚/文化杂志，那里只有很少的内容，更多的是各式各样的封面和许多写着“即将完成”的页面。SILBATO是一本在线式的时尚/文化杂志，SUEELLEN则是一本印刷式的时尚/文化杂志。在出版了第七期的SILBATO杂志之后，SILBATO与SUEELLEN合并，并诞生了第一期的以SUEELLEN命名的杂志。如此简单，不是么？除了上述事实，在总共七期的SILBATO杂志中，只有一期真正有些内容，其它的不过是拿来做设计的借口罢了。浏览此类站点，很容易就失去方向感，尤其对不懂得芬兰语的人来说。所以我就不用它来举详细的例子了，只是简略的告诉你它的背景。

SAKSI网站的另一个显著特征就是，其页面并非为了适应浏览器窗口大小而去做自动调整。他的版面设计几乎凝固不变，自左上角开始，逐渐向右下方的空间延伸，直至消散于剩余空间。虽然这样的设计忽略了网络作为设计媒介的若干长处，如此排版倒也避免了设计元素堆挤在一起的现象发生。假使你用1000象素宽的浏览窗口观看SMALLPRINT网站，尽管设计元素只占到了其中的640象素宽，这样的版面也绝对不会显得很难看的。可这是如何实现的呢？
首先，左上角的设计元素看起来好象是从浏览窗口之外的某一空间自己延伸出来的。SAKSI对此是这样解释的，“我知道我把这个角落弄得让人难以理解，可我不是故意这么做的啊。”他那自由随意的设计由此延伸至页面下方，并由一些绿色的、结构规矩的表格做结尾。当然，这可不是一个非值得你去学习的套路。SAKSI这么做，只是想让设计更适应浏览窗口，而非平面印刷而已。

如此版面，它之所以在分辨显示率高的浏览器窗口上面看不算难看，主要是因为使用了白色的背景。而且，它的右边没有使用任何或粗或浓的元素，来划分640象素的终止界限。因此，剩余的空白处也被有意识的当作了设计成分之一。

另一个SAKSI利用空白（作为设计元素）的方法是：使用PHOTOSHOP的笔刷。笔刷是一些简单的图案，使用它们，可以做到不规则的过滤那些原本直来直往的痕迹。笔刷还可以创作出那些带有污迹的、看上去不协调的，类似印刷出版那样的效果。于是，SAKSI在他那些拼贴作品的边缘涂上了笔刷印记，使它们看上去仿佛从空白页面中溢出来一样。至此，SAKSI的设计在图像与空白衔接处实现了平衡连贯。

有些时候，为了避免由未知浏览器窗口大小所可能引起的设计元素间的唐突，SAKSI会故意将设计尺度控制在小范围的伸展空间内.就像他所说的那样，“我放弃了去撑满整幅屏幕，因为我估计不出它到底有多大。我只是想使其中的一部分看起来真的不错，同时使你的视线也集中于此。”

虽然在1998年，LO-FI GRUNGE的全盛期间也出现过可调整的版面设计趋势。SAKSI的这种狭窄的、条带似的设计仍然带给人们众多惊喜，让往往是紧绷的视觉神经为之一松。那时，大多数的人都试图将信息塞满有限的页面。与此相反，一个仅仅包括一纵行内容的页面设计，确实让人看着轻松，并可将有限的注意力集中到设计者所强调的信息内容中来。有一个反对如此做法的理由是，它逼使用户去下拉更长的页面。而DAVID CARSON的精神却在说，“这简直好极了。故意使用一些下拉滚动，对用户不吝是个挑战。籍由此举，用户只会更投入的参与其中。”

你已经注意到那些污迹，和那些故意偏离的蹩脚字体了吧。相信你也已经看到了那些静止不动的排版，以及电视扫描线了吧。什么？你说你还没有看到那些电视扫描线？它们的效用也类似于那些污迹。如果说污迹是为了造成印刷品的类似效果，那么扫描线就是为了使电脑屏幕看起来更逼真的类似于电视机屏幕。我将在后面的技术部分更详细的介绍扫描线和笔刷。

最后我想说的是，别太看中那些使用时装模特做设计元素的方式了。如果你所要进行的设计并不是为了炫耀成列的模特，那么，使用任何人物角色都足足有余了。请确保你所使用的人物元素可以自由的浮动在页面背景上，并使轮廓清晰可见。有着照片边框的作品达不到上述效果，因为它无法融入整体设计的结构当中。

使用这些人物图案（模特或其他）的一个有趣结果是，设计元素将和缩放大小密切相关。当在你的设计中加入人物元素时，你可将其它元素或放大或缩小，以达到与人物大小作对比的较为夸张的效果。由于我们每个人都能较正确的目测身体比例，将一个人物元素嵌入设计，就好象在作品中加入了度量衡一样，使你能够以此为基准，缩放或旋转其它设计元素，以达到你想要表现的第二真实：即来源你自己头脑中的真实。

[1] [2]  下一页