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

目前大熱的頁游絕大多數在交互上更貼近以往傳統的端游，而我們說的游戲化網頁則是另外一種情況，它們在交互和體驗上有著更高的標準和更創新的思路。這些網站中的小交互、小游戲也許沒法將中土世界里面七八個種族幾萬年歷史都塞進來，但是它們讓整個網站體驗更加優異，讓人難以忘懷。總的來說，游戲化的網頁設計也越來越接近于一個設計趨勢。

游戲化的網頁設計通常都能令人高興和愉悅，即便是最簡單、最單調的小游戲，都有著這樣的潛質。今天的這20個網頁設計案例都各有特色，也許其中某幾個能給你以啟發，讓你的下一個設計項目擁有截然不同的未來。

Colony TV

這個網站是為一個美國科幻劇所創建的，當你打開網頁的時候，會被其中的地圖和劇情所吸引，在不斷完成任務的過程中解鎖成就，了解故事走向，直到欲罷不能。

The Most Decisive Game

一天完成一項任務對于絕大多數用戶而言并不容易，不過游戲本身挺好玩就是了。拿起你的手機或者平板，開啟豎屏模式能夠更好的感受這個像素風的游戲。

Futurama: Game of Drones

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

Game of Scroll

汽車工業和游戲產業一樣，通常都是最能體現現代流行趨勢的。而雪鐵龍的這個頁面則融合了兩個產業的特點，這個游戲的玩法則是滾動頁面，簡單，但是非常有效的宣傳了雪鐵龍的這個廣告活動。

The Avenging Llama

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

Maratropa

Moratoria 是一個涉及到復雜技術的先進的概念，它可以將你的Twitter 帳號完全可視化，所有的推特、鏈接和內容都將融入到無盡的動態抽象景觀中來。

Trump Donald

這個項目看起來簡單，但是非常有趣，相當吸引人。即使你對美國政治了解不多，目前總統大選熱門川普想必你也多少聽說過吧？這個網站就是與此相關。你可以在這個網站找到有趣的內容并截圖，分享給你的朋友。

Celebrity Betmatch

這個網站為用戶提供了獨特的在線交互體驗，你可以在這里體會到非洲的迷人光景。

FarCry Primal

FarCry Primal 是一個夢幻般的宣傳網站，網站通過精致的場景將游戲的氛圍營造了出來，每一個細節都清晰地展現出屬于石器時代的獨特風貌。

Get Vive Ready

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

Collapse

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

TravelZoo

TravelZoo 為你提供了一個有趣的測試，測試內容是關于英國文學，借此將你拉入這個國家宏偉的文學地圖。你只有30秒來完成這個任務。

Mira

Mira 以一種更加娛樂的方式為你展示了Hydra framewrk的性能。設計師通過Mira 這個網站給用戶帶來了絕佳的冥想般的體驗。用戶可以借助屏幕上閃動的顆粒來營造出迷幻的聲響，相當有趣。

Defi Ingenieurs

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

Cash Contagion

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

SyFy: The Magicians

這是這個網站新推出的“魔術師”系列，其中包含了大量可交互的細節和有趣的視頻與圖像，這一切都被一個故事劇情串了起來。

D’Addario Nickel Bronze Strings: Hear the Difference

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

Hunt or Be Hunted

這是游戲的官方網站，通過短促有力的動畫電影展現了游戲的豐富質感，而網站本身的氣場和細節也相當的到位。

Eyezen Challenge

網站的名字就已經相當能夠體現設計者的想法了。開發人員旨在創造一種身臨其境的體驗，打開網站之后，你需要用你的眼睛來完成挑戰。

Occupied

Occupied 是一個有趣的在線游戲，你需要在挪威的史詩劇中挑選一個陣營，然后戰勝你的對手。

【技多不壓身的設計師才有高薪資！】

1. 平面設計：《超贊！設計師完全自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成為優秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發：《天貓高手來教你！零基礎如何系統地學習前端開發？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》
8. 交互設計自學路徑圖：《零基礎入門！給非科班生的自學路徑圖之交互設計篇》

原文地址：Designmodo
原文作者：Nataly Birch
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com