網(wǎng)頁(yè)設(shè)計(jì)是否丟失了靈魂?這是否要?dú)w咎于響應(yīng)式設(shè)計(jì)呢?我的朋友兼同事Noah Stokes提出了這些問(wèn)題,不得不說(shuō)是有點(diǎn)聳人聽(tīng)聞。畢竟,響應(yīng)式網(wǎng)頁(yè)不僅能讓我們通過(guò)日益豐富的聯(lián)網(wǎng)設(shè)備瀏覽網(wǎng)頁(yè),還能感受其樂(lè)趣。
作為設(shè)計(jì)師,我們的首要任務(wù)是解決問(wèn)題,這可能遠(yuǎn)遠(yuǎn)超過(guò)其他的事情。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是一種絕妙的解決方案,能創(chuàng)造出適應(yīng)各種設(shè)備的虛擬體驗(yàn)。但仍然有許多問(wèn)題亟待解決,尤其是如何讓各種內(nèi)容都有趣迷人。一頁(yè)純文字可以成為一篇優(yōu)美的博文,一大堆無(wú)關(guān)聯(lián)的JPG圖片可以成為一部專業(yè)的作品集。
然后,問(wèn)題就變成了:我們能同時(shí)實(shí)現(xiàn)兩者嗎?
—— 原文來(lái)自:Joshua Johnson / 可樂(lè)橙(翻譯) 《超越平庸:尋找網(wǎng)站失落的靈魂》 2016-01-17
注:為了提升閱讀體驗(yàn),本文對(duì)原文進(jìn)行了微調(diào),比如刪去了一些鏈接,同時(shí)試著完善了中文標(biāo)題;封面里的氣球素材來(lái)自上官昭儀《尋找靈魂光線》書籍封面
我們所獲得的——
毫無(wú)疑問(wèn),網(wǎng)絡(luò)已經(jīng)成為一個(gè)美學(xué)勝地。基于可靠的網(wǎng)格布局,構(gòu)建簡(jiǎn)單迷人的網(wǎng)站,已經(jīng)成為一種標(biāo)準(zhǔn)。互聯(lián)網(wǎng)的墾荒已經(jīng)完成,以框架和活動(dòng)?xùn)鸥裥问匠霈F(xiàn)的律法與秩序,已經(jīng)掌管這片土壤,開(kāi)始了和平的統(tǒng)治。所有這些都是好事。
簡(jiǎn)單迷人的網(wǎng)站,優(yōu)勢(shì)顯而易見(jiàn)且豐富熟悉,便于用戶瀏覽(操作正確的話)。
1、原型設(shè)計(jì)(相對(duì))簡(jiǎn)單快速
2、建站技術(shù)的高度標(biāo)準(zhǔn)化(流水線取代了工匠)
3、快速布局節(jié)省了大量開(kāi)銷(有一定可能會(huì)轉(zhuǎn)嫁給消費(fèi)者)
4、嚴(yán)格的柵格布局促進(jìn)了響應(yīng)式設(shè)計(jì)(它嚴(yán)重依賴極簡(jiǎn)的布局趨勢(shì))
漫步Awwwards這樣的網(wǎng)頁(yè)設(shè)計(jì)畫廊,其中展出的網(wǎng)站,有成百上千個(gè)都符合簡(jiǎn)單迷人的標(biāo)準(zhǔn)。
毫不夸張的說(shuō),標(biāo)準(zhǔn)化與其相關(guān)技術(shù)確有重大意義。無(wú)數(shù)的個(gè)人與小公司從中受益,通過(guò)簡(jiǎn)單迷人(卻毫無(wú)獨(dú)特性)的網(wǎng)站,向全世界分享他們的品牌。但是,那只是一方面。
我們所失去的——
將個(gè)人行為納入考量,如今的專業(yè)網(wǎng)站看起來(lái)基本上都很棒。拿一個(gè)名不見(jiàn)經(jīng)傳的設(shè)計(jì)師作品集網(wǎng)站,與十年前最好的設(shè)計(jì)機(jī)構(gòu)網(wǎng)站相比,你甚至?xí)姓J(rèn)我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)這件事上,已經(jīng)做得好太多了。然而,四下看看,很容易得到結(jié)論:一切看起來(lái)都趨于同化。
是不是設(shè)計(jì)師都喪失了開(kāi)拓精神?便捷是否犧牲了創(chuàng)造性?在回答這些問(wèn)題前,我們先看看是什么致使今天網(wǎng)頁(yè)設(shè)計(jì)缺乏多樣性。
為何網(wǎng)站看起來(lái)都一樣?
看看如今的網(wǎng)站,同化的背后是什么力量在驅(qū)使?應(yīng)該怪誰(shuí)?事實(shí)證明,并不能簡(jiǎn)單歸咎于某種工具或方法。響應(yīng)式設(shè)計(jì)或許推波助瀾,但它只是諸多因素之一。下面是一些疑犯。
1、布局
有限的布局創(chuàng)意,是網(wǎng)站缺乏多樣性最主要也最顯而易見(jiàn)的原因之一。抽離色彩、動(dòng)畫、視覺(jué)差滾動(dòng)及類似效果之后,你就會(huì)注意到一些基本的網(wǎng)頁(yè)布局原則。有多少網(wǎng)站是在這5種布局上稍作調(diào)整而成的?
5種常見(jiàn)的網(wǎng)站布局
Noah哀嘆“到處都是條條框框”,指的就是這個(gè)。我們似乎停滯了,獨(dú)特的布局成為了一種失傳的藝術(shù)。
2、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)
在以前,你可以確保,所有的網(wǎng)站訪客都在用低分辨率的臺(tái)式電腦屏幕瀏覽。如今,網(wǎng)站在所有尺寸與分辨率上表現(xiàn)良好,這已不是一種奢侈,而是一種必需。寬度活動(dòng)、可伸縮的基本柵格系統(tǒng),使得響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)比隨性的布局更易處理。
3、框架
網(wǎng)頁(yè)設(shè)計(jì)框架或許可以加速設(shè)計(jì)與開(kāi)發(fā)流程。對(duì)許多人而言,它們是建立跨瀏覽器響應(yīng)式網(wǎng)頁(yè)最安全快速的方式。作為獎(jiǎng)勵(lì),他們還會(huì)注意保持內(nèi)容簡(jiǎn)略,從按鈕到表單,涵蓋所有通用元素。Bootstrap和Foundation這類工具有著驚人的人氣,導(dǎo)致成千上萬(wàn)的網(wǎng)頁(yè)設(shè)計(jì)師在他們每個(gè)項(xiàng)目中使用完全相同的代碼庫(kù)、布局、甚至美學(xué)風(fēng)格。
4、原型工具和設(shè)計(jì)流程
即使在從零開(kāi)始的過(guò)程中,設(shè)計(jì)流程也在有意識(shí)地抑制創(chuàng)造力。多數(shù)原型工具都鼓勵(lì)、甚至可能迫使你使用標(biāo)準(zhǔn)化的方框元素,嚴(yán)格遵循網(wǎng)格式的布局。
許多原型工具都鼓勵(lì)使用常規(guī)網(wǎng)格布局結(jié)構(gòu)
5、高清免費(fèi)照片與圖片
獲取優(yōu)美的免費(fèi)設(shè)計(jì)資源真是史無(wú)前例地容易。方便與可承受占據(jù)了支配地位,設(shè)計(jì)師們蜂擁向免費(fèi)照片網(wǎng)站,從一個(gè)小小(但在不斷增長(zhǎng))的池子中獲取相同的資源。
兩張免費(fèi)攝影圖片
在過(guò)去的兩年中,你看到過(guò)多少個(gè)網(wǎng)站用了其中某張照片(或者兩張)?如果你經(jīng)常瀏覽網(wǎng)站,我打賭有幾十個(gè)。
The Village Style和Jigglist; College Essay Guy和Get Busy Make Money
這還不僅僅是照片,還包括圖標(biāo)、字體、設(shè)計(jì)模式等等。好的方面是,沒(méi)有任何預(yù)算的設(shè)計(jì)師也能做出好看的網(wǎng)站;糟糕的是,所有其他設(shè)計(jì)師也在用同樣的資源做著同樣的設(shè)計(jì)。
6、設(shè)計(jì)趨勢(shì)
對(duì)于某些設(shè)計(jì)師而言,“趨勢(shì)”是一個(gè)貶義詞。但它不該是貶義詞。在20世紀(jì)找一個(gè)年代,看那十年的設(shè)計(jì)趨勢(shì)。你會(huì)發(fā)現(xiàn)真叫人著迷。它為那個(gè)時(shí)代賦予了獨(dú)特的風(fēng)格與個(gè)性,往往能反映出整個(gè)文化環(huán)境。即使你看不見(jiàn),它也正發(fā)生在你的工作中。你看到與體驗(yàn)到的一切,都在影響你的行為,互聯(lián)網(wǎng)則前所未有地放大了這種效應(yīng)。導(dǎo)致許多設(shè)計(jì)師從相同的資源獲取靈感,追逐相同的趨勢(shì)。
7、我們?cè)O(shè)計(jì)師
上面列出的每一項(xiàng)工具與資源都極有價(jià)值。它們能簡(jiǎn)化工作,讓網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)的大門向更多人敞開(kāi),也為客戶省錢。我不會(huì)胡亂使用它們,我會(huì)精心挑選。如果真要尋找破壞網(wǎng)頁(yè)設(shè)計(jì)多樣性的元兇,我會(huì)舉起自己的手,就是我。我覺(jué)得不是每個(gè)項(xiàng)目都值得進(jìn)行獨(dú)特的設(shè)計(jì),我要向那些嘗試有趣設(shè)計(jì)的設(shè)計(jì)師們脫帽致敬。
要知道,有一點(diǎn)很重要,你用上面所有這些資源仍然可以創(chuàng)造出獨(dú)特的設(shè)計(jì)。這都取決于你如何使用這些工具。
如何挑戰(zhàn)現(xiàn)狀?
你的網(wǎng)站是否有獨(dú)特的設(shè)計(jì),現(xiàn)在想必你心里有數(shù)了。或許你不在乎這個(gè)——這完全沒(méi)問(wèn)題。但如果你想要打破標(biāo)準(zhǔn)的工作流程,這里有些概念能幫你實(shí)現(xiàn),還有些網(wǎng)站可以作為非常棒的案例。
1、奇異的布局
關(guān)掉你的原型工具,拿出紙筆,思考一下如何創(chuàng)作出有趣且有用的布局,脫離你以前的套路。
(1)Phases Magazine
Phases Magazine就是個(gè)很好的例子,在布局上大膽突破。它也有條條框框——其中有網(wǎng)格——但他們以某種方式創(chuàng)造出了完全不同于標(biāo)準(zhǔn)網(wǎng)站的體驗(yàn)(屏幕截圖不能讓你很好地感受到,請(qǐng)一定要親自打開(kāi)看)。如果你看到這個(gè)覺(jué)得,“哇,這太奇怪了”,那么很好!他們要的就是這個(gè)效果。有人會(huì)喜歡,有人會(huì)討厭,但我喜歡的是他們?cè)趪L試做一些改變。
Phases Magazine用了一種非傳統(tǒng)的網(wǎng)格
不幸的是,這個(gè)網(wǎng)站的整體體驗(yàn)非常糟糕。有不必要的滾屏,表面上是響應(yīng)式布局,但在某些尺寸下嚴(yán)重錯(cuò)亂。
Phases Magazine的布局在小屏幕上完全亂了
(2)Curious Space
這個(gè)概念還有一個(gè)更好的應(yīng)用案例,Curious Space。
Curious Space的布局
這里的網(wǎng)格也有些天然隨性的感覺(jué),但滾動(dòng)功能是常規(guī)的,響應(yīng)式斷點(diǎn)也運(yùn)轉(zhuǎn)良好。
Curious Space適應(yīng)各種不同設(shè)備
操作這個(gè)網(wǎng)站時(shí),你會(huì)注意到許多不錯(cuò)的小設(shè)計(jì)細(xì)節(jié)。例如,鼠標(biāo)懸停會(huì)影響圖片的層疊順序。
鼠標(biāo)懸停會(huì)讓內(nèi)容到前面來(lái)
而且,滾動(dòng)時(shí)還有點(diǎn)小趣味,但至少不會(huì)打亂操作,也與網(wǎng)站隨性的視覺(jué)主題相吻合。logo開(kāi)始是一堆混亂的字母,隨著頁(yè)面滾動(dòng),它們各自歸位,在導(dǎo)航條中組成了“Curious Space”。
隨著滾動(dòng),logo的字母各自歸位
(3)Le Temps D’un Trajet
Le Temps d’un trajet也是一個(gè)有趣的例子。我們?cè)诖擞挚吹搅朔菢?biāo)準(zhǔn)的網(wǎng)格,但它的布局不是零星分散的,而是刻意聚集而成。
undefinedLe Temps d’un trajet的首頁(yè)布局
排列中的每個(gè)方塊都是一張靜止圖片,鼠標(biāo)懸停則變成一則短視頻。但是最酷的地方,是網(wǎng)格隨著焦點(diǎn)流暢地變化。
附:變化效果的視頻演示
2、不要四四方方
為網(wǎng)站營(yíng)造特別氛圍的一種方式,就是跳出條條框框思考。這話聽(tīng)起來(lái)令人生厭,但當(dāng)你向其他幾何圖形敞開(kāi)心扉時(shí),事情就開(kāi)始變得有趣。
(1)Built By Buffalo
Built By Buffalo用了六邊形的布局
看看Built By Buffalo構(gòu)建出的蜂巢。這種圖片集的設(shè)計(jì)對(duì)于移動(dòng)端不太友好,所以他們索性在某個(gè)斷點(diǎn)處變成了矩形。這個(gè)例子完美詮釋了在適當(dāng)時(shí)機(jī)做出獨(dú)特的設(shè)計(jì),同時(shí)了解何處是界限,應(yīng)該收斂一點(diǎn),給用戶提供最佳體驗(yàn)。
在更窄的尺寸中,布局會(huì)變成矩形
(2)Anakin Design Studio
最近看到的 Anakin Design Studio 是這個(gè)系列中我的最愛(ài)之一。不僅因?yàn)椴季制痢⒊龊跻饬希v觀如今的網(wǎng)站,它用到的形狀都遠(yuǎn)遠(yuǎn)超出你的預(yù)期。
Anakin Design Studio 的主頁(yè)
如你所見(jiàn),巨大、遮罩式的文字讓人印象深刻。但除此之外,隨著頁(yè)面往下滾動(dòng),還能看到他們最近的作品。許多設(shè)計(jì)師都會(huì)在這里放幾排簡(jiǎn)單的矩形縮略圖完事,但Anakin則在形狀上玩了花樣,使它更加吸引人。它們?nèi)允蔷匦螆D片,卻用白色背景營(yíng)造出了多種形狀的錯(cuò)覺(jué)。
Anakin Design Studio的作品集
(3)Avex Designs; Mathilde Jacon
還有一些其他網(wǎng)站使用了出乎意料的實(shí)驗(yàn)性形狀。
Avex Designs 和 Mathilde Jacon 使用了非常規(guī)的形狀來(lái)營(yíng)造獨(dú)特的體驗(yàn)
4、賦予生命
(1)Fixate; For Better Coffee
像 Fixate 和 For Better Coffee 這樣的網(wǎng)站結(jié)合了插畫與天然元素,密密麻麻的布局創(chuàng)造出了強(qiáng)烈、令人印象深刻的體驗(yàn)。
Fixate和For Better Coffee運(yùn)用了圖文并茂的布局引人注目
上面這種布局看起來(lái)復(fù)雜,只是因?yàn)?strong>插畫;事實(shí)上,插畫可以輕易拿掉。在一個(gè)迷失于千篇一律、四四方方小縮略圖的世界中,特制的插畫作品是傳達(dá)獨(dú)特品牌個(gè)性的絕佳方案。
For Better Coffee則用了有趣的動(dòng)畫,隨著頁(yè)面滾動(dòng),跟隨咖啡豆親歷整個(gè)咖啡制作過(guò)程。體驗(yàn)非常流暢,頁(yè)面也不會(huì)固定到特定位置,滾動(dòng)變成了講述故事的一項(xiàng)特色。
隨著頁(yè)面滾動(dòng),咖啡豆落入研磨機(jī)
再往下滾動(dòng),新鮮咖啡會(huì)倒入杯中
(2)HappyFunCorp
既然我們提到美妙的插畫型網(wǎng)站,就應(yīng)該看看 HappyFunCorp 。
起初,看起來(lái)就像是個(gè)帶有動(dòng)畫的普通網(wǎng)站。當(dāng)你開(kāi)始操作,奇妙的事情就發(fā)生了。主頁(yè)的場(chǎng)景是其他所有頁(yè)面的基礎(chǔ),當(dāng)你點(diǎn)擊鏈接,不會(huì)加載一個(gè)全新頁(yè)面,而是放大查看場(chǎng)景中的某處細(xì)節(jié)。
這還挺奇特的,不過(guò)我喜歡它的創(chuàng)造性思維。而且正因?yàn)閷?dǎo)航仍以標(biāo)準(zhǔn)方式呈現(xiàn),所以對(duì)于用戶沒(méi)有學(xué)習(xí)負(fù)擔(dān)。整個(gè)體驗(yàn)稍微有點(diǎn)出人意料,但這與網(wǎng)站正常的交互并無(wú)沖突。
5、差異化體驗(yàn)
我們對(duì)于用戶有一條基本的期望,我們希望同一個(gè)網(wǎng)站的每個(gè)訪客有相同的體驗(yàn);要想做點(diǎn)不同的事情,可以把這點(diǎn)拋到九霄云外。Vasilis van Gemert網(wǎng)站不僅使用了獨(dú)特的層疊式方塊布局,它也會(huì)為每個(gè)訪客呈現(xiàn)不同的配色。
Vasilis van Gemert 網(wǎng)站的3種不同配色
這個(gè)極具創(chuàng)意的特征,也延伸到了所有子頁(yè)面中。
子頁(yè)面也會(huì)改變配色
6、創(chuàng)造獨(dú)特的視覺(jué)主題
打造獨(dú)特網(wǎng)站的另一個(gè)方法,是選取有趣或吸引人的主題,以此為基準(zhǔn)左右所有的設(shè)計(jì)決策。這為你所有的行為提供了良好的指導(dǎo),鼓勵(lì)你探索傳統(tǒng)UI之外的世界。
雖然這不適合所有網(wǎng)站(例如政府網(wǎng)站),但對(duì)于活動(dòng)公告或小公司網(wǎng)頁(yè)而言,這令人耳目一新。dConstruct 2015 的新網(wǎng)站就是這方面的絕佳案例。
dConstruct 2015網(wǎng)站中的部分復(fù)古未來(lái)風(fēng)格設(shè)計(jì)
如你所見(jiàn),他們營(yíng)造出了復(fù)古未來(lái)的氛圍,向《杰森一家》致敬。你會(huì)非常樂(lè)于滾動(dòng)看完整個(gè)網(wǎng)站,想要了解他們?nèi)绾纬尸F(xiàn)網(wǎng)站的各個(gè)部分。
undefineddConstruct的一處設(shè)計(jì)細(xì)節(jié)
這個(gè)網(wǎng)站有許多非常棒的細(xì)節(jié)值得注意。首先,大標(biāo)題的處理就極其復(fù)古,結(jié)合了Lamplighter s cript和Andes字體。
但最棒的地方,是這些是實(shí)實(shí)在在的網(wǎng)頁(yè)字體,通過(guò)簡(jiǎn)單的CSS傾斜來(lái)改變方向。斜線貫穿運(yùn)用于整個(gè)網(wǎng)站,有助于設(shè)計(jì)的統(tǒng)一性與創(chuàng)意。
創(chuàng)意地使用風(fēng)格獨(dú)特的網(wǎng)頁(yè)字體,所有文字都可以選中
這個(gè)網(wǎng)站完美詮釋了響應(yīng)式設(shè)計(jì)也未必就無(wú)聊。布局給人感覺(jué)并非四四方方或典型布局,但它仍然做到了各種尺寸適配良好。實(shí)際上我非常喜歡他們極具創(chuàng)意地在小屏幕上呈現(xiàn)元素。例如,隨著屏幕尺寸縮小,下圖的票券圖片通過(guò)動(dòng)畫過(guò)渡,由橫條變?yōu)樨Q條。這是個(gè)小細(xì)節(jié),但非常聰明,反映出他們向整個(gè)布局的方方面面傾注了多少心血。
在窄屏中,票券由橫條翻轉(zhuǎn)成豎條
我要向 Clearleft 脫帽致敬,是他們創(chuàng)造了這件杰作。
把版權(quán)素材作為一種輸入,而非最終結(jié)果
我在 Creative Market 工作,我當(dāng)然喜愛(ài)使用優(yōu)秀的版權(quán)圖片、字體、照片等等。高質(zhì)量的版權(quán)資源,能給每位設(shè)計(jì)師的工作帶來(lái)極大的幫助,但如何使用需要慎重考慮。無(wú)論你是在使用有趣的矢量作品、圖標(biāo)集、或是整套網(wǎng)站主題,考慮付出一些額外的努力,別讓你的作品和其他人看起來(lái)一模一樣。絕大多數(shù)人下載那些資源,都不肯費(fèi)心做出哪怕一丁點(diǎn)定制化設(shè)計(jì),所以只要一點(diǎn)點(diǎn)就大有幫助。
獨(dú)特網(wǎng)站的問(wèn)題
找到令人拍案叫絕的獨(dú)特網(wǎng)站非常困難。為了寫這篇文章,我花了許多小時(shí)搜尋,只找到少數(shù)幾個(gè)可供展示的。我發(fā)現(xiàn)其中有個(gè)壓倒性的傾向,如果設(shè)計(jì)師們真的想要追求獨(dú)特的網(wǎng)頁(yè)設(shè)計(jì),做出的網(wǎng)站用戶體驗(yàn)往往不可靠。
實(shí)驗(yàn)是好的,但如果網(wǎng)站怪異、難以預(yù)料的不愉快體驗(yàn)使用戶感到困惑,則往往偏離了初衷。許多這類網(wǎng)站反而倒退一步,向我們呈現(xiàn)出FLASH時(shí)代的體驗(yàn):加載太久、過(guò)于華麗的動(dòng)畫、跳躍式滾動(dòng)、還有復(fù)雜的用戶流程。有一種折衷,可以讓你創(chuàng)造優(yōu)美、外觀獨(dú)特的網(wǎng)站,但不必徹底顛覆交互。
網(wǎng)頁(yè)設(shè)計(jì)長(zhǎng)存
標(biāo)準(zhǔn)化、可預(yù)測(cè)的設(shè)計(jì)總會(huì)在網(wǎng)頁(yè)中占有一席之地。實(shí)際上,它們或許最適合向各種屏幕展現(xiàn)各類內(nèi)容。也就是說(shuō),我們需要一遍又一遍地,讓我們的創(chuàng)意直覺(jué)與理性本能一決高下。
讓我們盡自己的職責(zé),維護(hù)互聯(lián)網(wǎng)一直以來(lái)的面貌:一個(gè)包容科技、藝術(shù)和設(shè)計(jì)以新穎有趣的方式相互交叉的地方。成為一名開(kāi)拓者,去試著做前所未見(jiàn)的事情——當(dāng)然,路上會(huì)犯許多錯(cuò)誤。時(shí)不時(shí)創(chuàng)造出奇異的東西也很棒,即使被其他人厭惡。這個(gè)叫做互聯(lián)網(wǎng)的瘋狂事物就是這樣建立起來(lái)的,我們也正是這樣在推動(dòng)著它前行。
最后,盡管事實(shí)上大量網(wǎng)站看起來(lái)都一個(gè)樣,但我不相信網(wǎng)頁(yè)設(shè)計(jì)趨于停滯。有數(shù)不清的極有天賦的設(shè)計(jì)師們,創(chuàng)造了許多難以置信的網(wǎng)站,使這個(gè)群體持續(xù)不斷進(jìn)步升華。但這個(gè)話題仍有廣泛爭(zhēng)議。我想聽(tīng)聽(tīng)你的想法,關(guān)于網(wǎng)頁(yè)設(shè)計(jì)的現(xiàn)狀,還有你覺(jué)得誰(shuí)在做著最有趣的工作。
關(guān)于作者:Josh Johnson is the Product Manager for Creative Market. He's also a writer, designer, and photographer, and currently lives in Phoenix.
關(guān)注公眾號(hào),獲取更多H5設(shè)計(jì)、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)資訊