游戏! 20个有趣好玩儿的网站游戏化设计案例 - 优设网 - UISDC

游戏! 20个有趣好玩儿的网站游戏化设计案例

2016/06/29 13897评论区

gamification-website-design-examples-1

好看的网站成千上万,但是好玩的网站相比之下并不多。不过,现代技术的发展为新的玩法提供了更多的可能性。Flash 的死亡并不值得哀悼,它为WebGL、HTML5等更优秀的技术提供了更大的施展空间和契机。更优秀的性能控制和更大的施展空间,让想法更加跳脱的设计师和开发者在网页中玩出更多的花样。而今天我们要聊的,就是这些充满活力、玩转交互的游戏化的网页设计案例。

目前大热的页游绝大多数在交互上更贴近以往传统的端游,而我们说的游戏化网页则是另外一种情况,它们在交互和体验上有着更高的标准和更创新的思路。这些网站中的小交互、小游戏也许没法将中土世界里面七八个种族几万年历史都塞进来,但是它们让整个网站体验更加优异,让人难以忘怀。总的来说,游戏化的网页设计也越来越接近于一个设计趋势。

游戏化的网页设计通常都能令人高兴和愉悦,即便是最简单、最单调的小游戏,都有着这样的潜质。今天的这20个网页设计案例都各有特色,也许其中某几个能给你以启发,让你的下一个设计项目拥有截然不同的未来。

Colony TV

1-Colony-TV

这个网站是为一个美国科幻剧所创建的,当你打开网页的时候,会被其中的地图和剧情所吸引,在不断完成任务的过程中解锁成就,了解故事走向,直到欲罢不能。

The Most Decisive Game

2-The-Most-Decisive-Game

一天完成一项任务对于绝大多数用户而言并不容易,不过游戏本身挺好玩就是了。拿起你的手机或者平板,开启竖屏模式能够更好的感受这个像素风的游戏。

Futurama: Game of Drones

3-Futurama

虽然游戏并没有集成到这个网页当中,但是游戏化的设计思路被融入到了其中。网页基于动漫《飞出个未来》来设计,布局采用的是动漫式的结构,大量的GIF和视频元素被融入其中,明亮、鲜艳又充满吸引力。

Game of Scroll

4-Game-of-Scroll

汽车工业和游戏产业一样,通常都是最能体现现代流行趋势的。而雪铁龙的这个页面则融合了两个产业的特点,这个游戏的玩法则是滚动页面,简单,但是非常有效的宣传了雪铁龙的这个广告活动。

The Avenging Llama

5-The-Avenging-Llama

The Avenging Llama 这个网页将吐痰这个事情变成一个有趣的游戏。你需要通过电子邮件分五个步骤来完成一个好玩儿的恶作剧。

Maratropa

6-Maratropa

Moratoria 是一个涉及到复杂技术的先进的概念,它可以将你的Twitter 帐号完全可视化,所有的推特、链接和内容都将融入到无尽的动态抽象景观中来。

Trump Donald

7-Trump-Donald

这个项目看起来简单,但是非常有趣,相当吸引人。即使你对美国政治了解不多,目前总统大选热门川普想必你也多少听说过吧?这个网站就是与此相关。你可以在这个网站找到有趣的内容并截图,分享给你的朋友。

Celebrity Betmatch

8-Celebrity-Betmatch

这个网站为用户提供了独特的在线交互体验,你可以在这里体会到非洲的迷人光景。

FarCry Primal

9-FarCry-Primal

FarCry Primal 是一个梦幻般的宣传网站,网站通过精致的场景将游戏的氛围营造了出来,每一个细节都清晰地展现出属于石器时代的独特风貌。

Get Vive Ready

10-Get-Vive-Ready

这个浏览器小游戏是用来测试你的HTC Vive VR的,游戏中的邪恶Boss正威胁着整个世界的安全,需要你去打败他。

Collapse

11-Collapse

Collapse 是一个被精心设计的游戏,其中包含了宏伟的故事剧情,模拟了整个城镇社会的走向,其中的数据则是源自于真实。如果你持续玩儿下去,或许能得到某些启示。

TravelZoo

12-TravelZoo

TravelZoo 为你提供了一个有趣的测试,测试内容是关于英国文学,借此将你拉入这个国家宏伟的文学地图。你只有30秒来完成这个任务。

Mira

13-Mira

Mira 以一种更加娱乐的方式为你展示了Hydra framewrk的性能。设计师通过Mira 这个网站给用户带来了绝佳的冥想般的体验。用户可以借助屏幕上闪动的颗粒来营造出迷幻的声响,相当有趣。

Defi Ingenieurs

14-Defi-Ingenieurs

考虑到有法国国营铁路公司在这个网站背后做支撑,浏览网站过程中之所以能看到的这么多奇妙景象就好解释了??雌鹄醇蛟嫉某【?,也许需要时间来习惯,却是如此的令人着迷。

Cash Contagion

15-Cash-Contagion

Cash Contagion 的内容其实是来自 Tom Clancy 的一个故事,而故事剧情则是源自于一个假设:钞票能够传递病毒。

SyFy: The Magicians

16-Brakebills-University

这是这个网站新推出的“魔术师”系列,其中包含了大量可交互的细节和有趣的视频与图像,这一切都被一个故事剧情串了起来。

D’Addario Nickel Bronze Strings: Hear the Difference

17-Hear-the-difference

这并非是一个游戏,但是比游戏更加有趣。网站通过引人入胜的视频为你对比和比较铜弦和镍铜弦的特性和差别。

Hunt or Be Hunted

18-Hunt-or-Be-Hunted

这是游戏的官方网站,通过短促有力的动画电影展现了游戏的丰富质感,而网站本身的气场和细节也相当的到位。

Eyezen Challenge

19-Eyezen-Challenge

网站的名字就已经相当能够体现设计者的想法了??⑷嗽敝荚诖丛煲恢稚砹倨渚车奶逖?,打开网站之后,你需要用你的眼睛来完成挑战。

Occupied

20-Occupied

Occupied 是一个有趣的在线游戏,你需要在挪威的史诗剧中挑选一个阵营,然后战胜你的对手。

【技多不压身的设计师才有高薪资!】

  1. 平面设计:《超赞!设计师完全自学指南》
  2. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  3. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  4. 前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》
  5. 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》
  6. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
  7. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》
  8. 交互设计自学路径图:《零基础入门!给非科班生的自学路径图之交互设计篇》

原文地址:Designmodo
原文作者:Nataly Birch
优设译文:@陈子木

yestone-uisdc-2

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网ag游戏网站“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
设计微博:拥有粉丝量160万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.www.bvfyw8.cn

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.bvfyw8.cn/gamification-website-design-examples

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

转场动效 设计师 扁平化设计 优设专访 交互设计师 界面设计 优设大课堂 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 AI教程 设计理论 设计师专访 神器下载 字体下载 平面设计 设计趋势 psd下载 用户体验设计 海报设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里