杭州ui培训
达内杭州ui培训中心

0571-56020830

热门课程

20个好玩有趣的游戏化网页设计

  • 时间:2016-06-30
  • 发布:杭州UI培训
  • 来源:优设网


  游戏化的网页设计通常都能令人高兴和愉悦,即使是最简单、最单调的小游戏。

  杭州达内UI设计培训专家介绍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 是一个有趣的在线游戏,你需要在挪威的史诗剧中挑选一个阵营,然后战胜你的对手。





原文来源:http://www.uisdc.com/gamification-website-design-examples
原文地址:Designmodo
原文作者:Nataly Birch
优设译文:@陈子木
上一篇:达内:提升效率的5个设计工具
下一篇:脑洞大开!奇思妙想带来优秀网页设计

795万高校毕业生创历史新高,2017届毕业生就业近况几何?

达内副总裁齐一楠接受新浪专访,解读2016达内耀升级

达内教育总裁韩少云受邀出席GIE国际教育峰会做主题演讲

响应全球编程一小时 达内微软推出“发现杯”中国青少年编程挑战活动

选择城市和中心
贵州省

广西省

海南省