突破无趣：寻找网络失落的灵魂

网页设计是否已经失去了它的灵魂？这应该归咎于响应式设计么？这些问题是我朋友和同事Noah Stokes提出的，这充其量是一种挑衅的说法。毕竟响应式网站不仅仅适应了我们目前浏览互联网日益增多的屏幕尺寸，我们还很乐意去接受它。

作为设计师，我们首先任务是解决问题，这比其他任何事情都重要，这就是我们所要做的。响应式网页设计是一个奇妙的、能解决这些问题的方案，它通过创建虚拟场景去适应不同的设备。我们被呼吁去解决一些其他的问题，不过，使各种内容显得有趣和引人入胜显然已经不是最重要的事情了。一个纯文本的网页编程一个漂亮的博客。一堆无关的JPG组合成为一个专业的集合。

之后问题就变成：我们能否成功地一起解决这些问题。

我们从中获得了什么

毫不怀疑，网页已经成为了一个美观漂亮的地方。简单的而有吸引力的网是建立在固定的网络布局上的，这已成为了标准。网络上混杂的情况已经被肃整，而各种框架和不固定的网络格式已经被法律和秩序所取代。

下面列举了一些好的事情，简单而有吸引力的网站的好处就是明确而丰富。

1  熟悉和易于用户浏览（当操作正确时）

2  原型设计（相对）快速和简便

3  标准化地建立网站（装配线已取代了工匠）

4  快速的布局会带来巨大的成本节约（可能不会被传递给客户）

5  严格的网格布局本身就需要响应设计（小布局的这种趋势是由这个需求驱动的）

漫步在一个网页设计画廊类似于Awwwards这样数以百计的优秀网站，都是符合简单而具有吸引力的标准的

不能过分夸大标准和相关技术的巨大价值。无数的个人和小型企业从中获益，他们用简单而具有吸引力（而不是独特）的网站去向全世界分享他们的品牌。然而这只是故事的一个侧面。

我们已经失去了什么

个人而言,现在专业网站看起来不错。拿十年前最好的设计机构的网站和如今一个低端的设计师个人作品集网站做比较，你不得不承认如今的网页设计已经变得越来越好。然而，当你看看你的周围，你会很轻易地发现，每一件事情都看起来是那么的相似。

设计师们失去了先锋精神吗?为了追求方便是否把创造力都泯灭了？在回答这些问题之前,让我们看一看是什么导致了今天的网页设计缺乏变化。

网站为什么看起来都一样的原因

我们今天所看到的网站感觉千篇一律其背后的驱动力是什么？归咎于哪里？根据目前情形，它并不像仅用一个工具或方法就能发布出来这么简单。响应式网页设计(RWD)也许是原因，但是这仅仅是长清单上的一项，冰山中的一角。这里有一些猜想。

布局

有限的布局理念是网页缺少变化的众多突出且显著的原因之一。除去颜色，动画，视差滚动效果等，然后你开始发现了网络的基本布局。你能说出多少个网站只使用这些细微变化的五个布局？

五个相似的网站布局

这就是Noah感叹他所看到的“全都是箱子和格子”的意思。我们似乎到达了一个停滞点，一个独特的布局失去了艺术的点。

响应式Web设计

从前，你能保证每个人都在低分辨率的电脑屏幕上访问你的网页。现在，在任何屏幕分辨率下都能很方便地浏览网页已经不是一件奢侈的事情了，而是一件很平常的事情。基础的布局，不固定的宽度，打破常规的构架，使得响应式Web设计比其他系统的布局设计起来更加的简单。

框架

网页设计框架能潜在地提高设计和开发工作流程的速度。对于许多人来说，网页设计框架是他们完成一个响应式的跨浏览器网站最安全、最简单的方法。除此之外，他们也负责完成各种常见的元素的样式，从按钮到表单。像Bootstrap和Foundation这样有名到难以置信的框架，导致了许多网页设计师在他们承担的每一个项目中都使用了完全相同的代码库、布局甚至是审美风格。

原型设计工具和流程

即使在开始设计的时候我们已经有意地降低了设计创意的难度。大多数的原型工具都鼓励、甚至是强迫你去使用标准的、四四方方的元素，使设计图达到严格标准布局。

许多的设计原型工具都支持常见的网格布局结构

高质量的免费照片和图片

以前漂亮又免费的设计素材是很难轻易获得的，此外，便利性和可负担性至关重要。所以我们可以看到设计师对免费图片素材的网站趋之若鹜，从相似的小的（但却逐渐丰富）资源池里获取素材。

两张免费的图片

这两年，你在多少网站上见过这两张照片其中一个（或两个都）？如果你经常上网，我敢打赌你绝对见过几十次。

乡村风和Jigglist两个网站的对比；学院散文及如何赚钱网站对比

这就超越了照片本身的意义，延伸到了按钮、字体、图案等等。这样的好处是，即使是毫无经验的设计师仍然可以做一个看起来很不错的网站。坏处是每一个设计师都在用相同的素材做同样的事情。

设计趋势

对于一些设计师而言，“趋势”是一个肮脏的词，它不应该存在。20世纪中选择十年并看看那时候的设计趋势，会发现什么叫做迷人。那个时间段展现的独特的风格和个性往往就是整个文化的反应。即使你看不到它它也确实实实在在地发生在你的工作中，你看见或经历的每一件事情都影响着你如何去做。并且网页放大了这种前所未有的效应，其结果就是很多设计师从相似的资源中获得灵感并且追求着相同的趋势。

你和我

以上列举的每一个工具和资源都是非常宝贵的，这些东西使得我们的工作变得更加简单，设计网页和开发网页给更多的人，并且节省客户的钱。我们不能随意地选择他们，我们要使用他们。如果非要归咎网页设计中缺少变化是谁的原因，那么我举手，这是我做的。虽然我不认为每一个项目都胜在他们独特的设计上，但是我要对那些试图做一些有趣事情的设计师致以深深的敬意。

同样重要的是，你可以使用以上的任何或者全部的工具，也仍然能创造独特的设计。这一切都由你来决定。

如何挑战现状

在这个点上，你已经决定了你是否关心你的网站设计是独一无二的，也许这不是你的东西——这也完全是可以接受的。如果你发现你自己想要摆脱现状，那么，这里有一些想法让你去做以及一些网站作为一些很好的例子参考。

奇怪的布局

关闭你的设计软件，拿出纸笔，思考怎样设计出有趣、有用的，而且自己从未尝试的布局。

Phases杂志

Phases Magazine是网站使用奇特布局的绝佳例子。它是四四方方的，有一个网格在起作用，然而它又让我们觉得它完全在标准网页设计之外（屏幕截图无法真正感受到这一点；请浏览网站）。如果你看到它就会思考，“哇，真奇怪。”很好！这就是他们想要达到的效果。有的人可能会喜欢，有的人则可能会讨厌它，但我很佩服他们对奇特事物的尝试。

Phases Magazine使用了一种非常规的布局

不幸的是，这个网页整体体验实在很差。它存在一些不必要的滚屏，而且看似响应的布局在有些很常用的窗口中非常混乱。

Phases Magazine的布局在小屏幕上显示十分混乱。

“求知地带”（Curious Space网站，下同）

还有一个应用这种理念比较好的例子就是“求知地带”。

“求知地带”的网页布局

它的网页布局更能彰显一种有机感，而滚动功能很正常，断点也恰到好处。

“求知地带”对不同的设备都能很好地适配。

当你浏览网页上时，你会发现其中也有很多交互式的小细节设计。比如说悬停鼠标时图片的变化：

悬停鼠标时，内容便会凸显出来

滚动鼠标时也有点意思，但这丝毫不会妨碍到浏览，而且这与网站本身的凌乱式设计相呼应。刚开始Logo是一堆混杂的字母，然而当你滚动鼠标之后，它们便在导航栏上整齐地排列成“Curious Space”。

当你滚动鼠标后组成Logo的杂乱字母便会整齐地排列起来。

Le Temps D’un Trajet（法语：时间路径，下同）

另一个有趣的例子是Le Temps D’un Trajet，再次让我们看到了一个不标准的布局，但它不是分散的，它的布局是更加有意识的和聚集的。

Le Temps D’un Trajet的主页布局

每一个区域都是一个静态图像变成一个循环播放的短视频。不过，最酷的部分是如何利用网格的转换使流媒体适应不同的屏幕。

不要做成正方形的

一个简单的方法，给你的网站定义一个不同的氛围来跳出固有思维模式。这听起来是挺兴奋的，,当你打开了自己的思维创造不同的几何形状时，事情可能会变得很有趣。

Built By Buffalo（“野牛制造”网站，下同）

Built By Buffalo主页使用六边形布局

让我们看一下Built By Buffalo的网页如何适应不同情况。这种展示设计不太适用于移动设备，所以缩放到一定数值就转换到矩形布局。这是一个非常好的例子：在合适的情况下展示特别的设计，不要过于追求与众不同而忽略你的用户的良好体验。

在窄的窗口下切换成矩形布局

Anakin 设计工作室

最近看到的布局设计，Anakin 设计工作室的网站是我最喜欢的设计之一。巧妙的设计，自由的布局，采用了让你意想不到的形状，这是现在其他网站上看不到的。

Anakin 设计工作室主页

你可以在图片上看到，大大的印刷字体夺人眼球。往下是最近作品展示区。大多数设计师会做个简单的矩形缩略图框架就算完成了，但是Anakin 玩起了形状游戏，使这一块区域变得更有趣味性。虽然本质上还是矩形图片，但是因为白色背景，看上去好像是使用了不同形状。

Anakin 设计工作室作品集

（人名，之前有一篇20个惊艳导航就是他的个人作品集，下同）

这里还有一些其他的令人意想不到的、有趣的网站。

Avex Designs 和 Mathilde Jacon用一些不常用的形状创造了一些独特的网站

变得统一

Fixate; For Better Coffee网站

像Fixate和 For Better Coffee这样的网站就是系统和疯狂忙碌布局的有机结合，使得整个网站强大到令人难以遗忘。

Fixate 和 For Better Coffee用高水平的布局使得他们能够如此出众。

以上的布局因为艺术品而显得复杂，事实上，它们很容易被替换掉。自定义插图的工作是一个传达独特品牌个性的奇妙方式，它使得独特的品牌个性在这样一个迷失在缩略图的世界里看起来都很相似。

For Better Coffee用有趣的动画来追踪咖啡豆的咖啡制作过程，当你鼠标滚动时，画面就开始变化，整个体验是流畅的，并且它不会跳转页面到预定义的点，所以滚动成为了一个讲故事的功能。

当页面滚动时，咖啡豆落向一个磨床

再往下一页，滚动鼠标时，把新鲜的咖啡倒入一个杯子中

HappyFunCorp

当我们讨论到精美插图网站时，你应该去看看HappyFunCorp。

刚开始，它看起来是一个相当正常的网站，有一些有趣的小动画。当你开始浏览的时候，有趣的事就会发生。主页上的场景作为整个站点的基础，所以当你点开一个链接，它不是加载到一个全新的页面，而是将整个场景的细节进行放大。

以下链接放大到一个细节。

这看起来是非常奇特的，但我喜欢他这种新颖的想法。此外，因为导航仍然以一个标准的方式呈现，这意味着用户并不需要重新学习如何使用。这整个经历都是出乎意料的，但从某种程度上说，这跟你使用的普通网站的方法是相通的。

不同的经验

用户最基础的期望是登陆同一个网站的时候能够让每一个人都存在相似的体验；窗口以一个独特的有趣的方式弹出。Vasilis van Gemert的网站不仅采用了独特的、重叠的块状布局，也为每一个访问者改变了它的整体色彩方案。

Vasilis van Gemert网站的三种不同配色方案

这种创造性的功能逐渐超越了主页的所有主要子页。

子页也开始改变它的色彩方案

创造一个独特的视觉主题

另一个让你的网站设计独特的方法是制作一个令人兴奋或者愉悦的主题，你可以用它作为你所有设计决策的基础。它为你做每一件事情都提供了一个很好的框架，并鼓励你去探索超越传统UI的界限。

然而这并不适用于所有网站（例如一个政府网站），例如，活动公告或者小公司的页面需要使人耳目一新。dConstruct 2015的新网站就是这种思想的一个很好的诠释。

dConstruct 2015网站部分复古未来主义的设计

正如你所看到，他们追求复古未来主义的感觉，让人很大程度上联想起摩登家族动画片里的场景。结果就是在这个网站里你可以不知疲倦地滚动鼠标，因为你发现了他们是如何呈现每一个新的部分的。

dConstruct网站设计的一个细节

这个网站有很多真正值得注意的事情。首先，标题的处理非常复古，使用了Lamplighter脚本和Andes的结合的方式。

然而，最好的部分是，通过一个简单的CSS偏移实现了这些生动的网络字体。整个网站都充满了对角线倾斜的重复使得设计体现出一致性和创造性。

使用有创意的网页字体，所有文本都是可以选择的

这个网站是一个如何使响应式设计不无聊的一个很好例子。它的布局不会让人觉得四四方方或者传统，而且它能够很好地适应任意窗口大小。事实上，我真的喜欢他们为小屏幕切换时使用的创意性元素。例如，当你的窗口收缩时，在下方显示的标签图形跳入一个从水平方向到垂直方向的动画转换。这是一个很小的细节，但是这个设计很聪明，展示了对待布局的每个方面投入了多少精力。

对于小窗口，标签图形由水平方向滑到垂直方向。

Clearleft在这一点做出了杰出的工作，我们表示致敬。

使用存储的资源作为开始，而不是最终结果

我在Creative Market工作，因此，我绝对赞成使用大量的预存的图形、字体和照片等等。高质量的存储资源对每个设计者来说都是极大的帮助，但是怎样使用他们就是一个很重要的决定。你是否使用一些有趣的矢量作品，一个图标集、或者是一个成熟的网站主题，考虑投入一些额外的设计，让你的设计看起来和其他人的不一样。绝大多数人在下载这些资源的时候不会很麻烦，也没有任何的定制，所以你还需要走很长的路。

独特网站的麻烦之处

寻找一些真正让人惊讶和独特的网站是一个很高的目标。我花费了很多时间浏览网站来准备本篇文章，还是觉得我没有什么可以拿出来展示的网站。我发现的一个不可阻挡的趋势就是：通常来说只有设计师们真正的追求独特的网站设计才会生产出靠不住的用户体验。

实验的方法是好的，但是网站使用户感到困惑和奇怪，意想不到和不愉快的体验往往达不到他们的目标。之前有许多这样的网站告诉我们一些喜欢Flash的体验：装卸时间长、过于华丽的动画、跳跃滚动和大量的用户流量。这是一个中间地带，你可以创造美丽的、独特的网站，而不是重蹈覆辙。

网页设计生活

标准化和可预测的设计在网络上永远有自己的位置。事实上，它们可能是在能出现的各种类型上显示内容的最佳解决方案。也就是说，我们应该让我们的创造性与我们的分析能力一起对抗它。

我们需要做点什么以确保网站本身的表现形式：一个将技术，艺术和设计以新的和有趣的方式重叠的地方。做一个先锋，尝试一些别人从未做过的事情- 是的，在前进的道路上会犯下很多错误。即使其他人讨厌它，但是有时候我们创造的一些怪诞的东西其实是很伟大的事情。这就是所谓的疯狂的东西，我们通过网络建立，然后继续推动它向前。

最后，尽管很多网站看起来很相似，但我不认为网页设计已经到达了一个停滞的状态。有不计其数的非常有才华的设计师会创作令人赞不绝口的网站，并不断提高在同龄人中的界限。本主题是广泛开放的辩论，同时我也很想听听大家对网页设计的看法，以及你们认为谁在做的工作最有趣。

—————————————————————————————————————————————————


我们是DATS翻译小组，我们爱设计爱英语，通过翻译设计的文章共同学习进步，虽然我们还有许多不足，但是只要把每个人的微小的力量聚集起来，总有一天会发出耀眼的光芒~（加入方式请看DATS设计翻译组的主页）


文章来源：http://www.smashingmagazine.com/2015/07/06/hunt-for-the-webs-lost-soul/

本文翻译由DATS翻译小组成员：海莉、叶子、Ckz、G、樱RR 、包公、韩小乖、Vincent、风聆紫、Seagra、超飛、楼兰舞踏鞭、Vanilla、MC 、晓雨曼殊、陌上花开 共同翻译完成。

翻译校对：晓雨曼殊

视觉设计：樱RR