向高手學習!超多圖的暴風英雄遊戲UI分析
大家好,我是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之前我認為大家看看視訊會對這個遊戲的世界觀,玩法,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大神也是如此哦。
下面2圖為Mike作品,是不是疊加圖案已經是國外趨勢了,有莫有?
來個Mike的小作品
下面的創意有點眼熟不,哈哈,果然是“英雄所見略同”,恩恩:)
VICTORY!,歐耶,再也沒有小星星了,簡潔明快,真爽。
戰鬥UI的一些細節表現,圓形頭像框和漸變底板搭配,讓戰鬥UI更好的融入戰鬥場景,避免UI設計生硬感問題。
血條設計,生命突出(血條粗),魔法次要(血條細),左右加了2個黃色亮光設計,立馬設計高大上了,哈哈。
地圖設計只突出英雄和玩家單位,把以往地圖顯示其他資訊弱化了,很直觀,英雄皮膚突出攻擊力,簡單暴力。
這個遊戲的UI和相關按鈕我原畫人“UI的那點事”做過視訊分享,教大家制作了,如果有喜歡的朋友可以訪問我的優酷地址,裡面大量視訊分享UI介面和圖示設計,希望對大家有幫助:)
優酷網觀看地址:(視訊分享)http://i.youku.com/u/UMjk4NTc1NjUy
謝謝支援Jack的UI分享,最近這款遊戲馬上中國將開始測試,喜歡暴雪遊戲的同學也請速度關注吧:)
最後分享下這款遊戲的暴雪開發團隊視訊和截圖。
我很認可國外的開發環境和工作態度,國外的遊戲完全是以玩家至上理念去開發的,遊戲中每個細節都設計的很好,認真-永遠是精品遊戲的必備條件之一。
作者:@DevilJack-99
來源:優設
原地址:https://www.uisdc.com/storm-hero-ui-analysis
相關文章
- 《風暴英雄》裡那些超棒的遊戲設計遊戲設計
- 向頂級設計公司學習如何進行“頭腦風暴”
- “頭腦風暴”改造我們的學習——樂高頭腦風暴教授米切爾·瑞斯尼克訪談
- 《英雄聯盟》手遊UI設計分析UI
- 官方遊戲--學習筆記二(英雄指令碼)遊戲筆記指令碼
- 故障分析 | Redis 主從複製風暴Redis
- “超級 App”正在迎來價值重構的風暴APP
- 分析“英雄射擊遊戲”的角色設計遊戲
- 暴風科技釋出可升級超體電視
- 漫畫|面試風暴面試
- 超全的Python學習路線圖Python
- 向豐田學習 “五WHY分析法”
- 通過學習,人工智慧變成了玩遊戲高手人工智慧遊戲
- 透過學習,人工智慧變成了玩遊戲高手人工智慧遊戲
- 學習UI設計要懂哪些內容?最新UI學習路線圖告訴你UI
- 暴風魔鏡4效果怎麼樣暴風魔鏡4評測
- 超級英雄遊戲需要拋棄「現實主義」遊戲
- https學習筆記以及在retrofit/okhttp中的使用(超多圖,爪機慎入)HTTP筆記
- 事件風暴 vs 事件建模事件
- 大氣熱力學(16)——風矢端圖的分析方法(上篇)
- 大資料分析——市場風向標大資料
- 資料視覺化之風向圖視覺化
- DDD事件風暴的詳細議程事件
- 成為php高手的學習路線PHP
- Android UI學習 - Tab的學習和使用AndroidUI
- 今天開始頭腦風暴
- 大局事件風暴:尋找差距事件
- 股市風暴4.0的外殼分析與脫殼方法(一) (7千字)
- 向水學習
- 破局之作!《如鳶》公測首日風暴級席捲遊戲界遊戲
- 事件風暴與領域故事的比較事件
- Python 學習筆記之類「物件導向,超類,抽象」Python筆記物件抽象
- semantic UI學習(二)UI
- 向《月圓之夜》學習如何做好遊戲敘事遊戲
- 風控沙龍 | 圖分析方法在業務風控中的應用
- win10系統下暴風影音中暴風盒子載入不出來如何解決Win10
- 暴風魔鏡5釋出 暴風新一代VR手機盒子又來了VR
- “遊戲第一股”掌趣是怎麼煉成的?暴風可否借鑑?遊戲