推荐语:如今,产品首页设计趋同的现象愈发常见。是什么让自诩为创意工作者的设计师们走向了同一个方向呢?让这片文章提醒设计师们,应该打破现成的设计框架,不要让我们的设计失去灵魂,做自己的破壁人 你点开一个网站链接,然后页面开始加载。首先出现的是一张巨大的照片,它占据了你的整个视野。照片上是一组人……所谓的产品刚好能在某人的 iPhone 屏幕上看得到。在这张照片之上,有一个简短的句子,用一种不知所谓的方式描述了这个产品。(译注:通常看起来满是「情怀」。)并且这句话使用的肯定是非衬线字体。 上面所说的网站似曾相识对吗?如今,产品首页设计趋同的现象愈发常见。是什么让自诩为创意工作者的设计师们走向了同一个方向呢?今天翻译的这篇文章,原作者 Noah 试图提醒设计师们,应该打破现成的设计框架,不要让我们的设计失去灵魂,做自己的破壁人。下面进入译文。 大约在一年半之前,我就已经感觉到了(网页设计正在失去灵魂)。当时有一条推特进入了我的信息流,和那时候时兴的东西差不多,它是一个链接,指向一个热门新奇的响应式设计的网站。 『噢,我喜欢牛逼的设计』我想到,然后就点开了链接。但我看见的却是灾难:满眼都是盒子模型和栅格。这就是所谓的「牛逼」的新设计吗?在我看来,它不过就是一个与其他响应式设计的网站差不多的鬼东西罢了。 然后,就像普通网友一样,我拟了一条新的推特,『我讨厌 #响应式设计。』 我想了想,觉得这还不够,就又稍微修改了一下语气,『我真心讨厌 #响应式设计』 魔法去哪了? 这条推特像是一种……嗯……对响应式设计的亵渎,对吗?因为所有人都认为它是网页发展的未来。但在我看来,整个网络世界正在失去它的魔力。是的,我认为这是响应式设计的错。为了好好解释这个观点,我们必须先回到 2000 年初的那个网络世界。 在那个时候,K10K,CSS 禅意花园,Stylegala 以及 2advanced,这些网站都是网页设计最大的灵感来源。(译注:这些网站都是当时网页设计探索的先锋,也引领着早期网站设计的潮流。)那时候,Stylegala 每个月都会介绍一个「本月最佳网站」,这对我来说,就像是圣诞节的清晨对一个六岁小孩一样重要。 我会花好几个小时来浏览这些网站,研究所有美妙的细节,以及那些设计师们所投入的激情。 无形之美 说回我的推特。我知道我应该写得少一些粗暴,多一些政治正确——『我感觉响应式设计在吮吸网站设计的灵魂(译注:就像摄魂怪吮吸魔法师的灵魂)。每一个元素都是盒子模型和栅格。那些创造力都去哪里了?』 这条推特发出去后,有人围绕它创建了一个讨论分支,获得了接近 15,000 次浏览。许多人问我,如何定义我所说的「灵魂」。 这又要回到我之前提到的 K10K,Stylegala等网站。它们的设计是那么的独一无二和精雕细琢。我所说的「灵魂」就是这些设计里那些无形的细节。 与众不同的网站 你见过平庸的网站,也见过与众不同的网站。是什么在区分它们?对那些没有受过专业训练的眼睛来说,这些网站看起来差不多。但是对于我们当中那些热爱设计的人来说,有的网站拥有灵魂。我想念这些灵魂。但是为什么我们很难再看到这种与众不同的网站了?我这有个答案。 去年,Elliot Jay Stocks 写了一篇文章,名为《为什么如今的设计师们停止了发梦?》文中写道: 你点开一个网站链接,然后页面开始加载。首先出现的是一张巨大的照片,它占据了你的整个视野。照片上是一组人……所谓的产品刚好能在某人的 iPhone 屏幕上看得到。在这张照片之上,有一个简短的句子,用一种不知所谓的方式描述了这个产品。(译注:通常看起来满是「情怀」。)并且这句话使用的肯定是非衬线字体。 你轻轻地向下滑动页面,那张超大的、漂亮的照片停在那里,慢慢变得模糊直到新的内容从它的下面出现……你再向下滑动一点,许多小图形开始以动画的形式跑进了视野里。 然后……你注意到一个半透明的菜单也已经悄悄地进入了视野,并且把自己锁定在页面的顶部。当你滚动页面并经过产品描述时,这条巨大的、扁平色彩的带子就停留在那里。还有一组一看就是经过精心布光并拍摄完成的团队成员的照片,每个人都努力做出他们最「有意思」的表情。 是不是听起来有点像是你之前见过的网站?这些流行趋势随着商业而来,并且成了被模仿的对象。我喜欢 Stocks 接下来说的话 —— 我们已经拥有了这些简洁的设计模式,但这并不意味着我们这些设计师不用再推动我们自己去创造美妙的在线体验了。 响应式设计的破壁人 响应式设计呢?毫无疑问,比起那些老式的、固定宽度的网站,响应式设计需要花费更多的时间去开发。Happy Cog 的 Chris Cashdollar 写了一篇雄文,谈到了响应式设计也可以打破常规。 有件事情已经成为一种习惯性的做法——当我们看到一个设计需求,接着就会在脑中分解它,然后想想如何使用已有的模块去拼凑它。我们都是基于我们过去的设计经验来做的——所以有时候当一个设计上的挑战让我们卡壳时,往往是因为它不并适用于任何我们所熟知的、已有的模块。 逼迫你自己跳出盒子模型去思考吧。如果你明白了 CSS 定位属性的基础,那么理论上你就可以做任何事情了。如果你还没有完全理解它,或者需要复习一下,我写过一篇文章也许会有帮助。