what？網(wǎng)頁(yè)設(shè)計(jì)正在失去靈魂

大約在一年半前，我就已經(jīng)感覺到了(網(wǎng)頁(yè)設(shè)計(jì)正在失去靈魂)。當(dāng)時(shí)有一條推特進(jìn)入了我的信息流，和那時(shí)候時(shí)興的東西差不多，它是一個(gè)鏈接，指向一個(gè)熱門新奇的響應(yīng)式設(shè)計(jì)的網(wǎng)站。

『噢，我喜歡牛逼的設(shè)計(jì)』我想，然后就點(diǎn)開了鏈接。但我看見的卻是災(zāi)難：滿眼都是盒子模型和柵格。這就是所謂的「牛逼」的新設(shè)計(jì)嗎?在我看來(lái)，它不過(guò)就是一個(gè)與其他響應(yīng)式設(shè)計(jì)的網(wǎng)站差不多的鬼東西罷了。

然后，就像普通網(wǎng)友一樣，我擬了一條新的推特，『我討厭 #響應(yīng)式設(shè)計(jì)?！?/p>

我想了想，覺得這還不夠，就又稍微修改了一下語(yǔ)氣，『我真心討厭 #響應(yīng)式設(shè)計(jì)』(╯°Д°)╯︵ ┻━┻

魔法去哪了?

這條推特像是一種……嗯……對(duì)響應(yīng)式設(shè)計(jì)的褻瀆，對(duì)嗎?因?yàn)樗腥硕颊J(rèn)為它是網(wǎng)頁(yè)發(fā)展的未來(lái)。但在我看來(lái)，整個(gè)網(wǎng)絡(luò)世界正在失去它的魔力。是的，我認(rèn)為這是響應(yīng)式設(shè)計(jì)的錯(cuò)。為了好好解釋這個(gè)觀點(diǎn)，我們必須先回到 2000 年初的那個(gè)網(wǎng)絡(luò)世界。

在那個(gè)時(shí)候，K10K，CSS 禪意花園，Stylegala 以及 2advanced，這些網(wǎng)站都是網(wǎng)頁(yè)設(shè)計(jì)最大的靈感來(lái)源。(譯注：這些網(wǎng)站都是當(dāng)時(shí)網(wǎng)頁(yè)設(shè)計(jì)探索的先鋒，也引領(lǐng)著早期網(wǎng)站設(shè)計(jì)的潮流。)那時(shí)候，Stylegala 每個(gè)月都會(huì)介紹一個(gè)「本月最佳網(wǎng)站」，這對(duì)我來(lái)說(shuō)，就像是圣誕節(jié)的清晨對(duì)一個(gè)六歲小孩一樣重要。

我會(huì)花好幾個(gè)小時(shí)來(lái)瀏覽這些網(wǎng)站，研究所有美妙的細(xì)節(jié)，以及那些設(shè)計(jì)師們所投入的激情。

無(wú)形之美

說(shuō)回我的推特。我知道我應(yīng)該寫得少一些粗暴，多一些政治正確——『我感覺響應(yīng)式設(shè)計(jì)在吮吸網(wǎng)站設(shè)計(jì)的靈魂(譯注：就像攝魂怪吮吸魔法師的靈魂)。每一個(gè)元素都是盒子模型和柵格。那些創(chuàng)造力都去哪里了?』

這條推特發(fā)出去后，有人圍繞它創(chuàng)建了一個(gè)討論分支，獲得了接近 15,000 次瀏覽。許多人問(wèn)我，如何定義我所說(shuō)的「靈魂」。

打破你對(duì)盒子模型的依賴吧，Noah Stokes 鼓勵(lì)道。

這又要回到我之前提到的 K10K，Stylegala等網(wǎng)站。它們的設(shè)計(jì)是那么的獨(dú)一無(wú)二和精雕細(xì)琢。我所說(shuō)的「靈魂」就是這些設(shè)計(jì)里那些無(wú)形的細(xì)節(jié)。

與眾不同的網(wǎng)站

你見過(guò)平庸的網(wǎng)站，也見過(guò)與眾不同的網(wǎng)站。是什么在區(qū)分它們?對(duì)那些沒(méi)有受過(guò)專業(yè)訓(xùn)練的眼睛來(lái)說(shuō)，這些網(wǎng)站看起來(lái)差不多。但是對(duì)于我們當(dāng)中那些熱愛設(shè)計(jì)的人來(lái)說(shuō)，有的網(wǎng)站擁有靈魂。我想念這些靈魂。但是為什么我們很難再看到這種與眾不同的網(wǎng)站了?我這有個(gè)答案。

去年，Elliot Jay Stocks 寫了一篇文章，名為《為什么如今的設(shè)計(jì)師們停止了發(fā)夢(mèng)?》文中寫道：

你點(diǎn)開一個(gè)網(wǎng)站鏈接，然后頁(yè)面開始加載。首先出現(xiàn)的是一張巨大的照片，它占據(jù)了你的整個(gè)視野。照片上是一組人……所謂的產(chǎn)品剛好能在某人的 iPhone 屏幕上看得到。在這張照片之上，有一個(gè)簡(jiǎn)短的句子，用一種不知所謂的方式描述了這個(gè)產(chǎn)品。(譯注：通常看起來(lái)滿是「情懷」。)并且這句話使用的肯定是非襯線字體。

Elliot Jay Stocks 問(wèn)道，為什么如今的設(shè)計(jì)師們停止了發(fā)夢(mèng)?

你輕輕地向下滑動(dòng)頁(yè)面，那張超大的、漂亮的照片停在那里，慢慢變得模糊直到新的內(nèi)容從它的下面出現(xiàn)……你再向下滑動(dòng)一點(diǎn)，許多小圖形開始以動(dòng)畫的形式跑進(jìn)了視野里。

然后……你注意到一個(gè)半透明的菜單也已經(jīng)悄悄地進(jìn)入了視野，并且把自己鎖定在頁(yè)面的頂部。當(dāng)你滾動(dòng)頁(yè)面并經(jīng)過(guò)產(chǎn)品描述時(shí)，這條巨大的、扁平色彩的帶子就停留在那里。還有一組一看就是經(jīng)過(guò)精心布光并拍攝完成的團(tuán)隊(duì)成員的照片，每個(gè)人都努力做出他們最「有意思」的表情。

是不是聽起來(lái)有點(diǎn)像是你之前見過(guò)的網(wǎng)站?這些流行趨勢(shì)隨著商業(yè)而來(lái)，并且成了被模仿的對(duì)象。我喜歡 Stocks 接下來(lái)說(shuō)的話 —— 我們已經(jīng)擁有了這些簡(jiǎn)潔的設(shè)計(jì)模式，但這并不意味著我們這些設(shè)計(jì)師不用再推動(dòng)我們自己去創(chuàng)造美妙的在線體驗(yàn)了。

響應(yīng)式設(shè)計(jì)的破壁人

響應(yīng)式設(shè)計(jì)并不意味著停止探索，Chris Cashdollar 說(shuō)道。

響應(yīng)式設(shè)計(jì)呢?毫無(wú)疑問(wèn)，比起那些老式的、固定寬度的網(wǎng)站，響應(yīng)式設(shè)計(jì)需要花費(fèi)更多的時(shí)間去開發(fā)。Happy Cog 的 Chris Cashdollar 寫了一篇雄文，談到了響應(yīng)式設(shè)計(jì)也可以打破常規(guī)。

有件事情已經(jīng)成為一種習(xí)慣性的做法——當(dāng)我們看到一個(gè)設(shè)計(jì)需求，接著就會(huì)在腦中分解它，然后想想如何使用已有的模塊去拼湊它。我們都是基于我們過(guò)去的設(shè)計(jì)經(jīng)驗(yàn)來(lái)做的——所以有時(shí)候當(dāng)一個(gè)設(shè)計(jì)上的挑戰(zhàn)讓我們卡殼時(shí)，往往是因?yàn)樗徊⑦m用于任何我們所熟知的、已有的模塊。

逼迫你自己跳出盒子模型去思考吧。如果你明白了 CSS 定位屬性的基礎(chǔ)，那么理論上你就可以做任何事情了。如果你還沒(méi)有完全理解它，或者需要復(fù)習(xí)一下，我寫過(guò)一篇文章也許會(huì)有幫助。

響應(yīng)式設(shè)計(jì)是未來(lái)，這是毫無(wú)疑問(wèn)的，而且我們當(dāng)中的有些人已經(jīng)走在了前面。我很期待看到我們的設(shè)計(jì)師因?yàn)槌掷m(xù)地學(xué)習(xí)并掌握響應(yīng)式開發(fā)的技能，然后做出東西來(lái)。更重要的是，我很期待看到你們中的一些人將靈魂帶回到你們的工作中，并將那些遺失的魔法重新帶回我們的網(wǎng)絡(luò)世界。

via：http://www.creativebloq.com/web-design/why-web-design-losing-its-soul-51514950