網(wǎng)頁(yè)設(shè)計(jì)已死？來(lái)瞧瞧這些打破平淡魔咒的網(wǎng)頁(yè)設(shè)計(jì)

@飛屋睿UIdesign ：網(wǎng)頁(yè)設(shè)計(jì)發(fā)展到今天，雖然短短不過二十年，就已有人喊出網(wǎng)頁(yè)設(shè)計(jì)已死的呼叫。不管這種呼聲是否有現(xiàn)實(shí)意義，筆者不得已也悄悄發(fā)現(xiàn)目前網(wǎng)站有著看似雷同的弊病。扁平化、網(wǎng)格式卡片、大圖背景……也許你仍然覺得這是時(shí)髦設(shè)計(jì)的元素，但是作為設(shè)計(jì)師們卻為此苦惱。因?yàn)樵O(shè)計(jì)師最討厭的就是時(shí)髦！設(shè)計(jì)師也許是走在最前沿的那群人，但當(dāng)他在前沿之時(shí)，正是還沒有得到大眾認(rèn)可的時(shí)候。這有些像登高望遠(yuǎn)的那群人，總是很遠(yuǎn)就看到有人走過來(lái)，但是原地的人仍然覺得是空無(wú)一人。

扁平化有他的好處，針對(duì)響應(yīng)式設(shè)計(jì)的需要，幾乎解決了大部分網(wǎng)站的結(jié)構(gòu)繁冗的問題?！吧偌词嵌唷币沧尯芏嗳顺撩栽趩滩妓篂槲覀儎?chuàng)造的現(xiàn)代神話里。但是我們大部分精力已經(jīng)忙于應(yīng)付如何簡(jiǎn)化網(wǎng)站，卻忘記了網(wǎng)站的另一個(gè)功能，那就是“吸引”。沒錯(cuò)，媚俗！你能說媚俗不好嗎？大部分嗤之以鼻的招引態(tài)度，其實(shí)每個(gè)人內(nèi)心深處也躍躍欲試。難道我們做網(wǎng)站就是為了孤芳自賞嗎？

網(wǎng)站設(shè)計(jì)不是藝術(shù)品創(chuàng)作，但它也并不是獨(dú)立于藝術(shù)而存在。找到其中的平衡點(diǎn)可不是件簡(jiǎn)單的活。能帶給用戶全新流暢的體驗(yàn)，我們可以為此談上大半本書，但是這種調(diào)子太多，只會(huì)讓我們行動(dòng)上不知從何處開始。

除了把我們的創(chuàng)造力磨練得更為敏銳以外，我們可以從國(guó)外一些成功俘獲了用戶芳心的網(wǎng)站上吸取一點(diǎn)實(shí)戰(zhàn)經(jīng)驗(yàn)。你可以從這些設(shè)計(jì)師的作品里看到他們做出的改變現(xiàn)狀的努力，一起來(lái)打破平平淡淡的魔咒！

1、Phasesmag

略顯靜態(tài)，但絕對(duì)反規(guī)則。界面依然簡(jiǎn)潔，細(xì)節(jié)卻已經(jīng)讓人耳目一新，比如側(cè)轉(zhuǎn)90度的文字。很多人覺得文字必須清晰易讀，但如果當(dāng)文字旁輔佐的圖片成為主角時(shí)，你可以試試用不一樣的呈現(xiàn)文字的方式，降低它的辨識(shí)度也許也不失為一種好辦法。

2、Curiousspace

除了頁(yè)面中對(duì)圖片重重疊疊的范式外，我還特別看中網(wǎng)頁(yè)的標(biāo)識(shí)設(shè)計(jì)，幾個(gè)隨機(jī)擺放的字母，等你往下拖動(dòng)鼠標(biāo)時(shí)，文字就各就各位變得歸正。背景紋理的運(yùn)用讓網(wǎng)站整體風(fēng)格趨于華麗，但不會(huì)凌亂。

3、Letempsduntrajet

從網(wǎng)站的登陸頁(yè)開始，網(wǎng)站就以動(dòng)態(tài)的效果示人，驚喜連連。

4、Builtbybuffalo

在考慮拋棄傳統(tǒng)的網(wǎng)格卡片式圖片，這個(gè)網(wǎng)站顯然是想從形狀上對(duì)圖片加以改變。雖然每個(gè)圖片占比不大，但是作為縮略圖吸引用戶點(diǎn)擊，已經(jīng)足夠了。而且值得一提的是，這個(gè)網(wǎng)站在手機(jī)上顯示時(shí)，就放棄了蜂巢式的圖片展示效果，而以傳統(tǒng)的兩列卡片式樣展示。這是為了PC網(wǎng)站的風(fēng)格獨(dú)特性而做出的小調(diào)整。

5、Anakin

用超大號(hào)字母來(lái)隱顯下方的圖片，讓人眼前一亮。特別是網(wǎng)站下方展示圖片的設(shè)計(jì)，對(duì)縮略圖稍加修飾，不再拘泥于四四方方的形態(tài)，讓它們各具特色，然而在整體上又不失和諧，這真是個(gè)亮點(diǎn)！

6、Fixate

讓網(wǎng)站獨(dú)一無(wú)二的方式，還可以運(yùn)用插畫。下面幾個(gè)網(wǎng)站都是運(yùn)用插畫來(lái)設(shè)計(jì)網(wǎng)頁(yè)的例子。插畫讓網(wǎng)站更具個(gè)性，當(dāng)然也投入更多的時(shí)間和人力。

網(wǎng)站得搭梯子。

7、Forbetter coffee

8、Happyfuncorp

這個(gè)插畫的首頁(yè)咋一看去沒什么特色，但是當(dāng)你點(diǎn)擊插畫的其中一個(gè)部分，比如風(fēng)車，這時(shí)就會(huì)出現(xiàn)一些讓你意想不到的效果。這讓網(wǎng)頁(yè)充滿玩樂的趣味。

9、Dconstruct

這個(gè)網(wǎng)頁(yè)的插畫帶著懷舊風(fēng)格，還保留整體傾斜的一種律動(dòng)感。

10、Objetorocha

一個(gè)內(nèi)容非常少的網(wǎng)站，只有幾張圖片和一個(gè)鏈接。設(shè)計(jì)師將網(wǎng)頁(yè)處理得非常精細(xì)，拋棄了常規(guī)的圖片展示方式，每張圖片甚至能根據(jù)鼠標(biāo)的移動(dòng)而呈現(xiàn)出不同角度的陰影。這點(diǎn)讓人印象深刻。

11、Sa-studio

展示圖片的方式比較特別，在空間上增加了層次，給圖片更多想象空間。

12、Neiouma

配色和圖片搭配得很巧妙，而且筆者最喜歡的是設(shè)計(jì)師巧具匠心的把下一個(gè)圖片的文字背景露出一小部分作為提示也可以點(diǎn)擊，同時(shí)，還加強(qiáng)了色彩的對(duì)比，讓畫面更加豐富。

13、Vo2-group

有時(shí)候，在展示出動(dòng)感效果的時(shí)候，僅僅只是需要一些簡(jiǎn)單而大膽的用色，和一個(gè)大號(hào)字母，也許就能扭轉(zhuǎn)乾坤。