大家好，我是Jack，今天突然接到一個任務，給個游戲分析UI，滿腦子很疑惑是哪個游戲，當拿到任務卡，發現是“暴風英雄”，并看了相關游戲截圖后，立馬痛快的接受了這個任務。哈哈，暴雪游戲一直是我的最愛，能有幸分析一下自己喜歡的游戲是一件很快樂的事情，謝謝7.game主編大人給予機會讓我和大家分享這個UI設計。
讓我們先來了解下這個游戲背景吧。
《風暴英雄》（英文：Heroes of the Storm 簡稱：Heroes，臺服譯為：暴雪英霸） 是一個由暴雪娛樂開發的一款運行在Windows和Mac OS上的在線多人競技游戲。游戲中玩家所扮演的英雄全部來自于暴雪三大經典游戲系列：《魔獸世界》、《暗黑破壞神》和《星際爭霸》。它與《星際爭霸2》同屬一個團隊開發，基于同一個引擎。《風暴英雄》為免費游戲，官方將通過英雄、皮膚和坐騎進行收費，是暴雪在多人競技領域的新嘗試。2014年4月22日，網易公司與暴雪娛樂聯合宣布，網易獲得暴雪娛樂《風暴英雄》在中國大陸的獨家運營權，為期三年，并同時開啟內測申請
百度相關詞條介紹：http://baike.baidu.com/view/10963915.htm?fr=aladdin
這是一張游戲中戰斗界面的截圖，作為一個合格的UI，在拿到項目相關的游戲截圖就應該能馬上在腦子構思整體UI的大致創意、風格、顏色和表現樣式，不知道大家有沒有這個習慣：）
在分析這個游戲UI之前我認為大家看看視頻會對這個游戲的世界觀，玩法，ＵＩ表現形式和交互有個大致的了解，送上兩個不錯的視頻傳送門。
相關視頻觀看地址：
游戲簡介：http://v.game.163.com/video/2014/3/9/6/V9N6BTA96.html#from=flv_back
游戲片頭：http://v.game.163.com/video/2014/3/F/9/V9N6AFEF9.html#from=$relvideotag
等等，這個簡化，高科技的UI不符合暴雪的習慣，早期的是什么樣呢？
帶著疑問Jack在網上搜索了這個游戲的相關大量視頻來“補課”，終于我發現了幾年前的早期版本UI，他還保留著老版本暴雪游戲的布局和一些UI表現效果，見下圖：
大家都知道游戲研發是一件非常通苦的事情，年初我參加北京的CDC 2014游戲者開發大會了解到騰訊一款游戲UI能改版10多次以上，最終才上線，然后是大賣，對于暴雪這款游戲我不知道研發人員換了多少版UI，我只能說我很喜歡他們的最終這版效果，簡約、時尚、大氣，顏色豐富，細節到位，很現代，符合目前簡約突出功能至上的設計理念……
好了，讓我們來欣賞下這個游戲的UI的相關截圖吧。
先是海外版和中國版的logo對比。
官網的宣傳海報
登錄界面
好科幻的登錄界面哦，讓我想起“WILDSTAR”游戲，附上一個他們的登錄對比，UI同學一定不會陌生，哈哈。
如果希望了解這個“WILDSTAR”游戲，可以看我博客相關介紹，我詳細展示分析了下UI和相關原畫，傳送門：
加載界面
陣營
人物選擇界面，嘿嘿，暴雪出品的魔獸、暗黑、星際爭霸三個游戲我們喜歡的英雄和BOSS都有的選，
來個我暗黑天天為了暴裝備被虐的DIABLO，哈哈：）
這個設計很棒，最大化展示選擇人物，其它需要選擇的人物卡牌化處理，突出重點，以后大家設計選人布局，同學們也可以學習這種方法哦。
讓我們來欣賞一些其他的界面。
是不是看了上面的游戲截圖已經感覺很棒了！
再分析一些該游戲UI的交互和設計細節，如果是初學UI的同學可以拿小本本記下這些設計技巧，后期你們工作中肯定能用上。
當有需要玩家點擊操作的時候，游戲會自動壓黑下面游戲背景，方便玩家選擇，這在UI里面是一個很巧妙的技巧，避免因為信息量大，讓玩家找不到操作按鈕，這樣XX再也不需要擔心我的UI信息量過多，按鈕不突出啦~~
按鈕懸浮態在鼠標滑動時有一個輕微的加亮效果區分，目前有很多按鈕開始嘗試加入底紋細節，不知道同行UI朋友發現這一趨勢沒有，連Mike大神也是如此哦。
下面２圖為Mike作品，是不是疊加圖案已經是國外趨勢了，有莫有？
來個Mike的小作品
下面的創意有點眼熟不，哈哈，果然是“英雄所見略同”，恩恩：）
VICTORY！，歐耶，再也沒有小星星了，簡潔明快，真爽。
戰斗UI的一些細節表現，圓形頭像框和漸變底板搭配，讓戰斗UI更好的融入戰斗場景，避免UI設計生硬感問題。
血條設計，生命突出（血條粗），魔法次要（血條細），左右加了2個黃色亮光設計，立馬設計高大上了，哈哈。
地圖設計只突出英雄和玩家單位，把以往地圖顯示其他信息弱化了，很直觀，英雄面板突出攻擊力，簡單暴力。
這個游戲的UI和相關按鈕我原畫人“UI的那點事”做過視頻分享，教大家制作了，如果有喜歡的朋友可以訪問我的優酷地址，里面大量視頻分享UI界面和圖標設計，希望對大家有幫助 ：）
優酷網觀看地址：（視頻分享）http://i.youku.com/Deviljack99
謝謝支持Jack的UI分享，最近這款游戲馬上中國將開始測試，喜歡暴雪游戲的同學也請速度關注吧：）
最后分享下這款游戲的暴雪開發團隊視頻和截圖。
我很認可國外的開發環境和工作態度，國外的游戲完全是以玩家至上理念去開發的，游戲中每個細節都設計的很好，認真-永遠是精品游戲的必備條件之一。
開發者訪談：http://v.game.163.com
如果喜歡可以看看該游戲試玩視頻，特地給大家找了個中文解說的，30分鐘左右，游戲介紹的很詳細，給解說點個贊。
游戲試玩視頻：（中文配音）http://v.163.com
如果喜歡UI的同學也可以加我群一起交流學習：376162355（沒有廣告，招聘的純技術群，不歡迎HR，獵頭哈，望理解）
我個人的一些地址，如果喜歡的朋友可以認識下。
Jack博客：http://blog.sina.com
Jack微博：http://weibo.com
花瓣畫板：（圖片分享）http://huaban.com
優酷網觀看地址：（視頻分享）http://i.youku.com
游戲好文合集：
超勁爆的游戲官網放送！
《視覺龍卷風！16個超酷炫的國外游戲網頁設計欣賞》游戲大咖秀！設計師的北漂之旅！
《游戲大咖秀！資深游戲設計師Jack的北漂之旅》游戲中的優秀引導模式范例！
《借力打力！游戲設計中有哪些值得學習的移動引導模式？》
投稿者：@DevilJack-99
【優設網 原創文章 投稿郵箱：2650232288@qq.com】
================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量83萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的”福利”嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：
非特殊說明，本文版權歸原作者所有，轉載請注明出處
本文地址：http://www.uisdc.com/storm-hero-ui-analysis
