游戏！ 20个有趣好玩儿的网站游戏化设计案例
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
游戏！ 20个有趣好玩儿的网站游戏化设计案例
好看的网站成千上万，但是好玩的网站相比之下并不多。不过，现代技术的发展为新的玩法提供了更多的可能性。Flash 的死亡并不值得哀悼，它为WebGL、HTML5等更优秀的技术提供了更大的施展空间和契机。更优秀的性能控制和更大的施展空间，让想法更加跳脱的设计师和开发者在网页中玩出更多的花样。而今天我们要聊的，就是这些充满活力、玩转交互的游戏化的案例。
目前大热的页游绝大多数在交互上更贴近以往传统的端游，而我们说的游戏化网页则是另外一种情况，它们在交互和体验上有着更高的标准和更创新的思路。这些网站中的小交互、小游戏也许没法将中土世界里面七八个种族几万年历史都塞进来，但是它们让整个网站体验更加优异，让人难以忘怀。总的来说，游戏化的也越来越接近于一个设计趋势。
游戏化的通常都能令人高兴和愉悦，即便是最简单、最单调的小游戏，都有着这样的潜质。今天的这20个网页设计案例都各有特色，也许其中某几个能给你以启发，让你的下一个设计项目拥有截然不同的未来。
这个网站是为一个美国科幻剧所创建的，当你打开网页的时候，会被其中的地图和剧情所吸引，在不断完成任务的过程中解锁成就，了解故事走向，直到欲罢不能。
一天完成一项任务对于绝大多数用户而言并不容易，不过游戏本身挺好玩就是了。拿起你的手机或者平板，开启竖屏模式能够更好的感受这个像素风的游戏。
虽然游戏并没有集成到这个网页当中，但是游戏化的设计思路被融入到了其中。网页基于动漫《飞出个未来》来设计，布局采用的是动漫式的结构，大量的GIF和视频元素被融入其中，明亮、鲜艳又充满吸引力。
汽车工业和游戏产业一样，通常都是最能体现现代流行趋势的。而雪铁龙的这个页面则融合了两个产业的特点，这个游戏的玩法则是滚动页面，简单，但是非常有效的宣传了雪铁龙的这个广告活动。
The Avenging Llama 这个网页将吐痰这个事情变成一个有趣的游戏。你需要通过电子邮件分五个步骤来完成一个好玩儿的恶作剧。
Moratoria 是一个涉及到复杂技术的先进的概念，它可以将你的Twitter 帐号完全可视化，所有的推特、链接和内容都将融入到无尽的动态抽象景观中来。
这个项目看起来简单，但是非常有趣，相当吸引人。即使你对美国政治了解不多，目前总统大选热门川普想必你也多少听说过吧？这个网站就是与此相关。你可以在这个网站找到有趣的内容并截图，分享给你的朋友。
这个网站为用户提供了独特的在线交互体验，你可以在这里体会到非洲的迷人光景。
FarCry Primal 是一个梦幻般的宣传网站，网站通过精致的场景将游戏的氛围营造了出来，每一个细节都清晰地展现出属于石器时代的独特风貌。
这个浏览器小游戏是用来测试你的HTC Vive VR的，游戏中的邪恶Boss正威胁着整个世界的安全，需要你去打败他。
Collapse 是一个被精心设计的游戏，其中包含了宏伟的故事剧情，模拟了整个城镇社会的走向，其中的数据则是源自于真实。如果你持续玩儿下去，或许能得到某些启示。
TravelZoo 为你提供了一个有趣的测试，测试内容是关于英国文学，借此将你拉入这个国家宏伟的文学地图。你只有30秒来完成这个任务。
Mira 以一种更加娱乐的方式为你展示了Hydra framewrk的性能。设计师通过Mira 这个网站给用户带来了绝佳的冥想般的体验。用户可以借助屏幕上闪动的颗粒来营造出迷幻的声响，相当有趣。
考虑到有法国国营铁路公司在这个网站背后做支撑，浏览网站过程中之所以能看到的这么多奇妙景象就好解释了。看起来简约的场景，也许需要时间来习惯，却是如此的令人着迷。
Cash Contagion 的内容其实是来自 Tom Clancy 的一个故事，而故事剧情则是源自于一个假设：钞票能够传递病毒。
这是这个网站新推出的“魔术师”系列，其中包含了大量可交互的细节和有趣的视频与图像，这一切都被一个故事剧情串了起来。
这并非是一个游戏，但是比游戏更加有趣。网站通过引人入胜的视频为你对比和比较铜弦和镍铜弦的特性和差别。
这是游戏的官方网站，通过短促有力的动画电影展现了游戏的丰富质感，而网站本身的气场和细节也相当的到位。
网站的名字就已经相当能够体现设计者的想法了。开发人员旨在创造一种身临其境的体验，打开网站之后，你需要用你的眼睛来完成挑战。
Occupied 是一个有趣的在线游戏，你需要在挪威的史诗剧中挑选一个阵营，然后战胜你的对手。
【技多不压身的设计师才有高薪资！】
平面设计：
交互设计：
前端开发：
抠图技巧：
配色方案：
交互设计自学路径图：
原文地址：
原文作者：
优设译文：
本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量160万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
我们的团队
大家在关注努力加载中，请稍候...
您的位置：>>>
华人设计师谈游戏平衡：要玩都能玩才是平衡
&　　昨日，拳头公司华人设计师方凡在微博与玩家互动，大谈英雄平衡性修改的问题，引起了玩家的广泛关注。在留言中，很多玩家都表示拳头公司在进行英雄平衡性修改方面的思路就是&强势-削弱-重做的死循环&，对此，另一位华人设计师李施主李淳也在微博中表示：拳头公司在做英雄平衡性修改的时候并不会遵循那样的思路。
最近李淳也在负责盲僧的修改
　　&既然我看到如此之多的人同意这个论点&你们做平衡就是强势-削弱-重做的死循环&，那么你们就来告诉我，你们心目中被一次nerf直接砍的生活不能自理的英雄(还有那次具体改动)都有谁吧?&李淳表示。随后，他对玩家提出的问题作出了简单的回答。
　　玩家：我觉得没有一个这样的吧。只要机制还在就好咯，比如圣枪的被动，和放逐之刃的被动等等。
　　其实两年以来只有一个olaf勉强可以算，别的完全没有..
　　玩家：其呢，女刀h已消失很久了。
　　wicked最近没事比赛就选，胜率83.33%(我没记错的话)，你逗我?
　　玩家：蝎子，刀妹，大头，都是两年前砍的，现在还不能玩，排位一选就有人挂机。
　　蝎子刚重做，胜率中游;刀妹之前解释过了;大头目前胜率排行全联盟第二，你觉得这看起来像生活不能自理的英雄么。。
　　玩家: 要玩都能玩，你不觉得上....
　　要玩都能玩才是平衡，玩的好才强也是平衡。现在虽然还是少量无脑强悍的英雄，但是我们一直朝着那个方向前进着。
另外..特定英雄的强弱在我眼里不重要，当然我理解在喜欢这个的玩家的眼里这非常非常重要，所以我想这是我们之间有如此多误会和分歧的地方。
　　玩家: 我承认可以理解并认同你的这个思路，但是实现这个思路的方法似乎不是很妥当&
　　我认为倒不如说咱们中国玩家没有看数据库的渠道...地球玩家是可以上lolking看第三方数据的(虽然他们统计的基数不是很大，但是还是有一定参考价值的)。
　　玩家: 要玩都能玩 只是不好玩了 既然你们也知道现在玩家普遍对你们的削弱重做循环感到愤怒 为何还要跟玩家对着干。
　　因为我们想要绝大多数玩家享受的快乐，而不是被op英雄不讲道理的欺负。这就是你们可能暂时不能理解的游戏健康度了(另外你还没发现，压根没这个循环啊!)
[编辑：Echo]
推荐阅读更多&&
热门标签：你所在的位置： >
布置小游戏大全
【布置小游戏专题】
简介：2344小游戏为您提供最热门【布置】小游戏在线免费玩和各类布置小游戏下载，好玩的布置小游戏排行榜，尽在2344游戏大全!
人气：260815人气：249037人气：106311人气：99630人气：98948人气：83094人气：81246人气：76417人气：74191人气：73965人气：71256人气：67583人气：62921人气：60840人气：56906人气：52911人气：51479人气：44230人气：43652人气：43386人气：42270人气：41002人气：37759人气：37757人气：33408人气：33091人气：32280人气：31179人气：30474人气：29794人气：29015人气：28407人气：28219人气：28122人气：27628人气：26303人气：25738人气：24841人气：24131人气：23424人气：23387人气：23303人气：22748人气：21602人气：21454人气：21118人气：20992人气：20706人气：19953人气：19882人气：19443人气：19269人气：19010人气：18869
1第 1 页第 2 页第 3 页第 4 页第 5 页第 6 页第 7 页第 8 页第 9 页第 10 页第 11 页第 12 页第 13 页第 14 页第 15 页第 16 页第 17 页第 18 页第 19 页第 20 页第 21 页第 22 页第 23 页第 24 页第 25 页第 26 页第 27 页第 28 页第 29 页第 30 页第 31 页第 32 页第 33 页第 34 页第 35 页第 36 页第 37 页第 38 页第 39 页第 40 页第 41 页第 42 页第 43 页第 44 页第 45 页
Copyright & 44小游戏 All Rights Reserved.
苏ICP备号-1
温馨提示：抵制不良游戏，拒绝盗版游戏，注意自我保护，谨防受骗上当，适度游戏益脑，沉迷游戏伤身，合理安排时间，享受健康生活
所有的【布置小游戏】版权归作者所有，如果侵犯了您的版权，请联系我们，本站将在3个工作日内删除打开微信“扫一扫”，分享到朋友圈
更多有趣好玩的内容
尽在品玩微信公众号
PingWest品玩移动客户端
PingWest账号登录
微信扫码登录
var initposts = [{"title":"\u8d44\u6df1\u6e38\u620f\u8bbe\u8ba1\u5e08\uff1a\u56db\u4e2a\u65b9\u6cd5\u8ba9\u4f60\u5f00\u53d1\u\u620f\u66f4\u597d\u73a9","imgurl":"http:\/\/\/wp-content\/uploads\/8.jpg","is_hailuo":0,"name":"ronghui","comnum":"0","cat":"\u4eba\u7269","caturl":"http:\/\/\/category\/figure\/","wburl":"http:\/\/\/share\/share.php?appkey=&url=http:\/\/\/nicole-lazzaro\/&ralateUid=&title=\u\u6df1\u6e38\u620f\u8bbe\u8ba1\u5e08\uff1a\u56db\u4e2a\u65b9\u6cd5\u8ba9\u4f60\u5f00\u53d1\u\u620f\u66f4\u597d\u73a9\u3011&pic=http:\/\/\/wp-content\/uploads\/8.jpg","contenthtml":"\nNicole Lazzaro\u662f\u4e00\u4f4d\u4e16\u754c\u77e5\u540d\u\u620f\u8bbe\u8ba1\u5e08\u548c\u\u8005\uff0c\u591a\u5e74\ue\u7f8e\u56fd\u827a\u\u620f\u516c\u53f8\u3001\u8fea\u58eb\u5c3c\u7b49\u516c\u53f8\uc\u8bbe\u8ba1\u6e38\u620f\u\u63d0\u51fa\u8ba9\u6e38\u620f\u66f4\u597d\u73a9\u7684\u56db\u4e2a\u6cd5\u5219\uff0c\u5e76\u4ee5\u6b64\u505a\u4e86iPhone\u4e0a\u7b2c\u4e00\u4e2a\u52a0\u901f\u6e38\u620fTilt\uff0c\u5e76\u63d0\u51fa\u5e0c\u671b\u80fd\u5c06\u6e38\u620f\u4e2d\u\u4e9b\u\u4f20\u64ad\u\u5b9e\u751f\u6d3b\u4e2d\u\u522b\u662f\u516c\ud\u52a1\u4e2d\u\n\u7ecf\u8fc7\u591a\u5e74\u\u4f5c\u7ecf\u9a8c\u548c\u8d85\u8fc720\u5e74\u\u\u9a8c\u\uff0cNicole Lazzaro\u8ba4\u4e3a\u6700\u80fd\u\u\u53c2\u4e0e\u6e38\u620f\u\u662f\u4e00\u5b9a\u\u8da3\u597d\u73a9\uff0c\u6700\u96be\u\u662f\u589e\u52a0\u529f\u80fd\u\u603b\u7ed3\u8ba9\u6e38\u620f\u66f4\u597d\u73a9\u7684\u56db\u4e2a\u65b9\u6cd5\ub\uff1a\n1\uff09\u65b0\u\u\u4e3a\u8fd9\u4e00\u70b9\u610f\u\u\u5f88\u7b80\u\u4e50\u8da3\uff0c\u662f\u201c\u\u6e38\u620f\u8bbe\u8ba1\u\u\u6cab\u201d\u\u53ef\u4ee5\u628a\u5b83\u\u\u6b3e\u6e38\u620f\u5fc5\u987b\u\u7b80\u\ub\u60c5\u8282\uff0c\u8ba9\u\u80fd\u\u4f4e\u\u672c\u4e86\u89e3\u5b83\u600e\u4e48\u73a9\uc\u4f60\u77e5\u\u4e2a\u\u-10\uf\u8fd8\u5f04\u4e0d\u660e\u767d\u8fd9\u4e2a\u6e38\u620f\u662f\u4ec0\u4e48\u5c31\u4f1a\u7acb\u523b\u653e\u5f03\uff0c\u5e76\u4e14\u6c38\u8fdc\u4e0d\u4f1a\u5c1d\u8bd5\u4e86\udNicole\u8bf4\u3002\n2\uff09\u\u3002Nicole\u89e3\u91ca\u8fd9\u4e00\u70b9\u\u\uff0c\u\u620f\ue\u53ef\u4ee5\u53c2\uf\u6d3b\u4e2d\u\u591a\u4e8b\u60c5\uff0c\u5b83\u4e5f\uc\u4e00\u4e2a\u4eba\u89e3\u51b3\u95ee\u\u80fd\u529b\uc\u\u620f\u7684\u4eba\u6700\u4eab\u53d7\u\u662f\u5f53\u4ed6\u514b\u670d\u4e86\u4e00\u4e2a\u56f0\u96be\u83b7\u5f97\u\u\u4e00\u523b\uff0c\u4f60\u600e\u4e48\u8bbe\u7f6e\u8fd9\u4e2a\u56f0\u96be\u548c\u8fd9\u4e2a\u\u5f88\u91cd\u\u201d\n3\uff09\u793e\u4ea4\u3002\ua\u\u620f\u90fd\u4f1a\u\u5728\u81ea\u5df1\u\u620f\u4e2d\u52a0\ue\u4ea4\u\u7d20\uc\u670b\u53cb\u4e00\u8d77\u\u620f\u4e2d\u8fdb\u884c\u89d2\ue\u6f14\u3001\u4eab\u53d7\u\u96be\u\u8fc7\u7a0b\u662f\u\uc\u6b22\u\u620f\u4e0e\u793e\u4ea4\u\u\u3002\n4\uff09\uf\u4e49\u3002\u8fd9\u662f\u8ba9\u6e38\u620f\u66f4\u\u6700\u96be\u\u\u\u6e38\u620f\u5bf9\u\u\u503c\ua\u5e38\u4eba\u4eec\u4f1a\u8ba4\u4e3a\u6e38\u620f\u5c31\u662f\u6e38\u620f\uff0c\u4f46\u662f\uc\u\u8fd9\u56db\u4e2a\u9012\u8fdb\u\u952e\u8bcd\u\u\u\u606f\uff0c\u8ba9\u\u\u620f\u4e2d\u4f53\u9a8c\u\u4e60\u\u7a0b\u548c\u611f\u53d7\u751f\u6d3b\uf\u4e49\u662f\u6700\u91cd\u\u4e5f\u662f\u6700\u96be\uNicole\u8bf4Tilt\u91cc\u\u4e2a\u4efb\u52a1\u662f\u8ba9\u\uc\u8fbe\u52a0\u65af\u52a0\u79cd\u690d\u4e00\u767e\u4e07\u68f5\u6811\uff0c\u5e76\u\u620f\u548c\u73b0\u5b9e\u56fe\u\u\u65b9\u5f0f\u8ba9\u\u770b\u\u679c\uff0c\u201c\u8fd9\u662f\u\u620f\u548c\u73b0\u5b9e\u7ed3\u\u\u611f\u53d7\u5230\u81ea\u5df1\u\u589e\u503c\u\u201d\n\u201c\ue\u73a9\u6e38\u620f\u5c31\u4ee3\u\u4e00\u4e2a\u4eba\u\u5b66\u4e60\u\u7a0b\uff0c\u4f60\u5bf9\u4ec0\u4e48\u4e8b\u60c5\u611f\u\ue\u4e48\u89e3\u51b3\u95ee\u\u600e\u4e48\u\u4e2a\u8fc7\u7a0b\u4e2d\u5b66\u4f1a\u793e\u4ea4\u\u5de7\u5e76\u953b\u70bc\ub\u7684\u80fd\u529b\udNicole\u8bf4\uff0c\u\u8bbe\u8ba1\u6e38\u620f\u4e4b\u4f59\u4e5f\u4e00\u76f4\u81f4\u529b\u4e8e\u4ece\u6e38\u620f\u4e2d\u\u4eba\uc\u529b\u3002\n\u66f4\u591a\u\uff0c\u\u54c1\u73a9\u5fae\u4fe1\u53f7\uff1awepingwest\u9650\u91cf\u5f00\u653e\u\u\uPingWest\u54c1\u73a9\u\u670b\u53cb\u4e86\uff1f\u4f55\u4e0d\u626b\u\u5ba2\u670d\u8fdb\u7fa4\u804a\n","gtime":"","taghtml":"