好看的網(wǎng)站成千上萬，但是好玩的網(wǎng)站相比之下并不多。不過，現(xiàn)代技術(shù)的發(fā)展為新的玩法提供了更多的可能性。Flash 的死亡并不值得哀悼，它為WebGL、HTML5等更優(yōu)秀的技術(shù)提供了更大的施展空間和契機(jī)。更優(yōu)秀的性能控制和更大的施展空間，讓想法更加跳脫的設(shè)計(jì)師和開發(fā)者在網(wǎng)頁中玩出更多的花樣。而今天我們要聊的，就是這些充滿活力、玩轉(zhuǎn)交互的游戲化的網(wǎng)頁設(shè)計(jì)案例。

目前大熱的頁游絕大多數(shù)在交互上更貼近以往傳統(tǒng)的端游，而我們說的游戲化網(wǎng)頁則是另外一種情況，它們?cè)诮换ズ腕w驗(yàn)上有著更高的標(biāo)準(zhǔn)和更創(chuàng)新的思路。這些網(wǎng)站中的小交互、小游戲也許沒法將中土世界里面七八個(gè)種族幾萬年歷史都塞進(jìn)來，但是它們讓整個(gè)網(wǎng)站體驗(yàn)更加優(yōu)異，讓人難以忘懷。總的來說，游戲化的網(wǎng)頁設(shè)計(jì)也越來越接近于一個(gè)設(shè)計(jì)趨勢(shì)。

游戲化的網(wǎng)頁設(shè)計(jì)通常都能令人高興和愉悅，即便是最簡(jiǎn)單、最單調(diào)的小游戲，都有著這樣的潛質(zhì)。今天的這20個(gè)網(wǎng)頁設(shè)計(jì)案例都各有特色，也許其中某幾個(gè)能給你以啟發(fā)，讓你的下一個(gè)設(shè)計(jì)項(xiàng)目擁有截然不同的未來。

Colony TV

這個(gè)網(wǎng)站是為一個(gè)美國(guó)科幻劇所創(chuàng)建的，當(dāng)你打開網(wǎng)頁的時(shí)候，會(huì)被其中的地圖和劇情所吸引，在不斷完成任務(wù)的過程中解鎖成就，了解故事走向，直到欲罷不能。

The Most Decisive Game

一天完成一項(xiàng)任務(wù)對(duì)于絕大多數(shù)用戶而言并不容易，不過游戲本身挺好玩就是了。拿起你的手機(jī)或者平板，開啟豎屏模式能夠更好的感受這個(gè)像素風(fēng)的游戲。

Futurama: Game of Drones

雖然游戲并沒有集成到這個(gè)網(wǎng)頁當(dāng)中，但是游戲化的設(shè)計(jì)思路被融入到了其中。網(wǎng)頁基于動(dòng)漫《飛出個(gè)未來》來設(shè)計(jì)，布局采用的是動(dòng)漫式的結(jié)構(gòu)，大量的GIF和視頻元素被融入其中，明亮、鮮艷又充滿吸引力。

Game of Scroll

汽車工業(yè)和游戲產(chǎn)業(yè)一樣，通常都是最能體現(xiàn)現(xiàn)代流行趨勢(shì)的。而雪鐵龍的這個(gè)頁面則融合了兩個(gè)產(chǎn)業(yè)的特點(diǎn)，這個(gè)游戲的玩法則是滾動(dòng)頁面，簡(jiǎn)單，但是非常有效的宣傳了雪鐵龍的這個(gè)廣告活動(dòng)。

The Avenging Llama

The Avenging Llama 這個(gè)網(wǎng)頁將吐痰這個(gè)事情變成一個(gè)有趣的游戲。你需要通過電子郵件分五個(gè)步驟來完成一個(gè)好玩兒的惡作劇。

Maratropa

Moratoria 是一個(gè)涉及到復(fù)雜技術(shù)的先進(jìn)的概念，它可以將你的Twitter 帳號(hào)完全可視化，所有的推特、鏈接和內(nèi)容都將融入到無盡的動(dòng)態(tài)抽象景觀中來。

Trump Donald

這個(gè)項(xiàng)目看起來簡(jiǎn)單，但是非常有趣，相當(dāng)吸引人。即使你對(duì)美國(guó)政治了解不多，目前總統(tǒng)大選熱門川普想必你也多少聽說過吧?這個(gè)網(wǎng)站就是與此相關(guān)。你可以在這個(gè)網(wǎng)站找到有趣的內(nèi)容并截圖，分享給你的朋友。

Celebrity Betmatch

這個(gè)網(wǎng)站為用戶提供了獨(dú)特的在線交互體驗(yàn)，你可以在這里體會(huì)到非洲的迷人光景。

FarCry Primal

FarCry Primal 是一個(gè)夢(mèng)幻般的宣傳網(wǎng)站，網(wǎng)站通過精致的場(chǎng)景將游戲的氛圍營(yíng)造了出來，每一個(gè)細(xì)節(jié)都清晰地展現(xiàn)出屬于石器時(shí)代的獨(dú)特風(fēng)貌。

Get Vive Ready

這個(gè)瀏覽器小游戲是用來測(cè)試你的HTC Vive VR的，游戲中的邪惡Boss正威脅著整個(gè)世界的安全，需要你去打敗他。

Collapse

Collapse 是一個(gè)被精心設(shè)計(jì)的游戲，其中包含了宏偉的故事劇情，模擬了整個(gè)城鎮(zhèn)社會(huì)的走向，其中的數(shù)據(jù)則是源自于真實(shí)。如果你持續(xù)玩兒下去，或許能得到某些啟示。

TravelZoo

TravelZoo 為你提供了一個(gè)有趣的測(cè)試，測(cè)試內(nèi)容是關(guān)于英國(guó)文學(xué)，借此將你拉入這個(gè)國(guó)家宏偉的文學(xué)地圖。你只有30秒來完成這個(gè)任務(wù)。

Mira

Mira 以一種更加娛樂的方式為你展示了Hydra framewrk的性能。設(shè)計(jì)師通過Mira 這個(gè)網(wǎng)站給用戶帶來了絕佳的冥想般的體驗(yàn)。用戶可以借助屏幕上閃動(dòng)的顆粒來營(yíng)造出迷幻的聲響，相當(dāng)有趣。

Defi Ingenieurs

考慮到有法國(guó)國(guó)營(yíng)鐵路公司在這個(gè)網(wǎng)站背后做支撐，瀏覽網(wǎng)站過程中之所以能看到的這么多奇妙景象就好解釋了。看起來簡(jiǎn)約的場(chǎng)景，也許需要時(shí)間來習(xí)慣，卻是如此的令人著迷。

Cash Contagion

Cash Contagion 的內(nèi)容其實(shí)是來自 Tom Clancy 的一個(gè)故事，而故事劇情則是源自于一個(gè)假設(shè)：鈔票能夠傳遞病毒。

SyFy: The Magicians

這是這個(gè)網(wǎng)站新推出的“魔術(shù)師”系列，其中包含了大量可交互的細(xì)節(jié)和有趣的視頻與圖像，這一切都被一個(gè)故事劇情串了起來。

D’Addario Nickel Bronze Strings: Hear the Difference

這并非是一個(gè)游戲，但是比游戲更加有趣。網(wǎng)站通過引人入勝的視頻為你對(duì)比和比較銅弦和鎳銅弦的特性和差別。

Hunt or Be Hunted

這是游戲的官方網(wǎng)站，通過短促有力的動(dòng)畫電影展現(xiàn)了游戲的豐富質(zhì)感，而網(wǎng)站本身的氣場(chǎng)和細(xì)節(jié)也相當(dāng)?shù)牡轿弧?/p>

Eyezen Challenge

網(wǎng)站的名字就已經(jīng)相當(dāng)能夠體現(xiàn)設(shè)計(jì)者的想法了。開發(fā)人員旨在創(chuàng)造一種身臨其境的體驗(yàn)，打開網(wǎng)站之后，你需要用你的眼睛來完成挑戰(zhàn)。

Occupied

Occupied 是一個(gè)有趣的在線游戲，你需要在挪威的史詩劇中挑選一個(gè)陣營(yíng)，然后戰(zhàn)勝你的對(duì)手。