《风暴英雄》（英文：Heroes of the Storm 简称：Heroes，台服译为：暴雪英霸） 是一个由暴雪娱乐开发的一款运行在Windows和Mac OS上的在线多人竞技游戏。游戏中玩家所扮演的英雄全部来自于暴雪三大经典游戏系列：《魔兽世界》、《暗黑破坏神》和《星际争霸》。它与《星际争霸2》同属一个团队开发，基于同一个引擎。《风暴英雄》为免费游戏，官方将通过英雄、皮肤和坐骑进行收费，是暴雪在多人竞技领域的新尝试。2014年4月22日，网易公司与暴雪娱乐联合宣布，网易获得暴雪娱乐《风暴英雄》在中国大陆的独家运营权，为期三年，并同时开启内测申请 百度相关词条介绍：[url]http://baike.baidu.com/view/10963915.htm?fr=aladdin[/url] [img=image004,554,315]http://www.uisdc.com/wp-content/uploads/2014/10/image0041.jpg[/img] 这是一张游戏中战斗界面的截图，作为一个合格的UI，在拿到项目相关的游戏截图就应该能马上在脑子构思整体UI的大致创意、风格、颜色和表现样式，不知道大家有没有这个习惯：） 在分析这个游戏UI之前我认为大家看看视频会对这个游戏的世界观，玩法，ＵＩ表现形式和交互有个大致的了解，送上两个不错的视频传送门。 相关视频观看地址： 游戏简介：[url]http://v.game.163.com/video/2014/3/9/6/V9N6BTA96.html#from=flv_back[/url] 游戏片头：[url]http://v.game.163.com/video/2014/3/F/9/V9N6AFEF9.html#from=$relvideotag[/url] 等等，这个简化，高科技的UI不符合暴雪的习惯，早期的是什么样呢？ [img=image006,554,318]http://www.uisdc.com/wp-content/uploads/2014/10/image0061.jpg[/img] 带着疑问Jack在网上搜索了这个游戏的相关大量视频来“补课”，终于我发现了几年前的早期版本UI，他还保留着老版本暴雪游戏的布局和一些UI表现效果，见下图： [img=image008,554,335]http://www.uisdc.com/wp-content/uploads/2014/10/image0081.jpg[/img] 大家都知道游戏研发是一件非常通苦的事情，年初我参加北京的CDC 2014游戏者开发大会了解到腾讯一款游戏UI能改版10多次以上，最终才上线，然后是大卖，对于暴雪这款游戏我不知道研发人员换了多少版UI，我只能说我很喜欢他们的最终这版效果，简约、时尚、大气，颜色丰富，细节到位，很现代，符合目前简约突出功能至上的设计理念…… [img=image010,554,319]http://www.uisdc.com/wp-content/uploads/2014/10/image0101.jpg[/img] 好了，让我们来欣赏下这个游戏的UI的相关截图吧。 先是海外版和中国版的logo对比。 [img=image012,326,177]http://www.uisdc.com/wp-content/uploads/2014/10/image0121.jpg[/img][img=image014,553,248]http://www.uisdc.com/wp-content/uploads/2014/10/image0141.jpg[/img] 官网的宣传海报 [img=image016,353,429]http://www.uisdc.com/wp-content/uploads/2014/10/image0161.jpg[/img][img=image018,553,352]http://www.uisdc.com/wp-content/uploads/2014/10/image0181.jpg[/img] 登录界面 [img=image020,554,324]http://www.uisdc.com/wp-content/uploads/2014/10/image0201.jpg[/img][img=image022,554,320]http://www.uisdc.com/wp-content/uploads/2014/10/image0221.jpg[/img] 好科幻的登录界面哦，让我想起“WILDSTAR”游戏，附上一个他们的登录对比，UI同学一定不会陌生，哈哈。 如果希望了解这个“WILDSTAR”游戏，可以看我博客相关介绍，我详细展示分析了下UI和相关原画，传送门： 加载界面 [img=image024,554,309]http://www.uisdc.com/wp-content/uploads/2014/10/image0241.jpg[/img] 阵营 [img=image026,554,227]http://www.uisdc.com/wp-content/uploads/2014/10/image0261.jpg[/img] 人物选择界面，嘿嘿，暴雪出品的魔兽、暗黑、星际争霸三个游戏我们喜欢的英雄和BOSS都有的选， [img=image028,554,336]http://www.uisdc.com/wp-content/uploads/2014/10/image0281.jpg[/img] 来个我暗黑天天为了暴装备被虐的DIABLO，哈哈：） [img=image030,554,300]http://www.uisdc.com/wp-content/uploads/2014/10/image0301.jpg[/img][img=image032,554,300]http://www.uisdc.com/wp-content/uploads/2014/10/image0321.jpg[/img][img=image034,554,299]http://www.uisdc.com/wp-content/uploads/2014/10/image0341.jpg[/img] 这个设计很棒，最大化展示选择人物，其它需要选择的人物卡牌化处理，突出重点，以后大家设计选人布局，同学们也可以学习这种方法哦。 [img=image036,554,316]http://www.uisdc.com/wp-content/uploads/2014/10/image0361.jpg[/img] 让我们来欣赏一些其他的界面。 [img=image038,554,311]http://www.uisdc.com/wp-content/uploads/2014/10/image0381.jpg[/img][img=image060,554,327]http://www.uisdc.com/wp-content/uploads/2014/10/image0601.jpg[/img][img=image058,554,373]http://www.uisdc.com/wp-content/uploads/2014/10/image0581.jpg[/img][img=image056,554,313]http://www.uisdc.com/wp-content/uploads/2014/10/image0561.jpg[/img][img=image054,553,343]http://www.uisdc.com/wp-content/uploads/2014/10/image0541.jpg[/img][img=image052,554,314]http://www.uisdc.com/wp-content/uploads/2014/10/image0521.jpg[/img][img=image050,554,309]http://www.uisdc.com/wp-content/uploads/2014/10/image0501.jpg[/img][img=image048,553,203]http://www.uisdc.com/wp-content/uploads/2014/10/image0481.jpg[/img][img=image046,554,196]http://www.uisdc.com/wp-content/uploads/2014/10/image0461.jpg[/img][img=image044,554,197]http://www.uisdc.com/wp-content/uploads/2014/10/image0441.jpg[/img][img=image042,554,346]http://www.uisdc.com/wp-content/uploads/2014/10/image0421.jpg[/img][img=image040,554,317]http://www.uisdc.com/wp-content/uploads/2014/10/image0401.jpg[/img] 是不是看了上面的游戏截图已经感觉很棒了！ 再分析一些该游戏UI的交互和设计细节，如果是初学UI的同学可以拿小本本记下这些设计技巧，后期你们工作中肯定能用上。 当有需要玩家点击操作的时候，游戏会自动压黑下面游戏背景，方便玩家选择，这在UI里面是一个很巧妙的技巧，避免因为信息量大，让玩家找不到操作按钮，这样XX再也不需要担心我的UI信息量过多，按钮不突出啦~~ [img=image062,554,319]http://www.uisdc.com/wp-content/uploads/2014/10/image0621.jpg[/img] 按钮悬浮态在鼠标滑动时有一个轻微的加亮效果区分，目前有很多按钮开始尝试加入底纹细节，不知道同行UI朋友发现这一趋势没有，连Mike大神也是如此哦。 [img=image064,545,137]http://www.uisdc.com/wp-content/uploads/2014/10/image0641.jpg[/img] 下面２图为Mike作品，是不是叠加图案已经是国外趋势了，有莫有？ [img=image068,208,236]http://www.uisdc.com/wp-content/uploads/2014/10/image0681.jpg[/img][img=image066,554,187]http://www.uisdc.com/wp-content/uploads/2014/10/image0661.jpg[/img] 来个Mike的小作品 [img=image070,504,557]http://www.uisdc.com/wp-content/uploads/2014/10/image0701.jpg[/img] 下面的创意有点眼熟不，哈哈，果然是“英雄所见略同”，恩恩：） [img=image072,345,104]http://www.uisdc.com/wp-content/uploads/2014/10/image0721.jpg[/img][img=image074,554,156]http://www.uisdc.com/wp-content/uploads/2014/10/image0741.jpg[/img] VICTORY！，欧耶，再也没有小星星了，简洁明快，真爽。 [img=image076,554,244]http://www.uisdc.com/wp-content/uploads/2014/10/image0761.jpg[/img] 战斗UI的一些细节表现，圆形头像框和渐变底板搭配，让战斗UI更好的融入战斗场景，避免UI设计生硬感问题。 [img=image078,412,304]http://www.uisdc.com/wp-content/uploads/2014/10/image0781.jpg[/img] 血条设计，生命突出（血条粗），魔法次要（血条细），左右加了2个黄色亮光设计，立马设计高大上了，哈哈。 [img=image080,314,378]http://www.uisdc.com/wp-content/uploads/2014/10/image0801.jpg[/img] 地图设计只突出英雄和玩家单位，把以往地图显示其他信息弱化了，很直观，英雄面板突出攻击力，简单暴力。 [img=image082,420,564]http://www.uisdc.com/wp-content/uploads/2014/10/image0821.jpg[/img] 这个游戏的UI和相关按钮我原画人“UI的那点事”做过视频分享，教大家制作了，如果有喜欢的朋友可以访问我的优酷地址，里面大量视频分享UI界面和图标设计，希望对大家有帮助 ：） 优酷网观看地址：（视频分享）[url]http://i.youku.com/u/UMjk4NTc1NjUy[/url] 谢谢支持Jack的UI分享，最近这款游戏马上中国将开始测试，喜欢暴雪游戏的同学也请速度关注吧：） 最后分享下这款游戏的暴雪开发团队视频和截图。 我很认可国外的开发环境和工作态度，国外的游戏完全是以玩家至上理念去开发的，游戏中每个细节都设计的很好，认真-永远是精品游戏的必备条件之一。 [img=image086,800,461]http://www.uisdc.com/wp-content/uploads/2014/10/image086-800x4611.png[/img][img=image094,800,475]http://www.uisdc.com/wp-content/uploads/2014/10/image094-800x4751.png[/img][img=image092,800,469]http://www.uisdc.com/wp-content/uploads/2014/10/image092-800x4691.png[/img][img=image090,800,487]http://www.uisdc.com/wp-content/uploads/2014/10/image090-800x4871.png[/img][img=image088,800,452]http://www.uisdc.com/wp-content/uploads/2014/10/image088-800x4521.png[/img] 开发者访谈：[url=http://v.game.163.com/video/2014/3/0/D/V9N6B1F0D.html#from=$relvideotag]http://v.game.163.com[/url] 如果喜欢可以看看该游戏试玩视频，特地给大家找了个中文解说的，30分钟左右，游戏介绍的很详细，给解说点个赞。 游戏试玩视频：（中文配音）[url=http://v.163.com/paike/V8H1BJHKV/VA7E54RSC.html#from=search]http://v.163.com[/url]