譯文:值得每位開發(fā)者學習的6款經典UI設計

原文鏈接:http://www.gamasutra.com/view/news/289637/6_examples_of_UI_design_that_every_game_developer_should_study.php

譯者語

先科普一下HUD(Head Up Display)平視顯示器,是運用在航空器上的飛行輔助儀器。游戲里的狀態(tài)條,顯示各種數值給玩家查看,UI的一部分。

我語文不太好,有時候只能在茶壺里煮餃子,表達不清楚,o(>﹏<)o別噴我。我不做設計,有些梗看不懂,比如毛妹的例子吧,我覺得守望里每個英雄HUD設計都一樣。大家見笑啦!

正文

游戲開發(fā)過程中,人們對HUD和UI設計缺乏足夠的重視。HUD和UI決定了玩家如何與游戲核心系統進行交互。它們不僅僅是展示玩家的人物數值和內世界環(huán)境,還能幫助游戲塑造玩家的行為。比如,一個生命符號提示玩家受了重傷,又或用一個小地圖突出任務系統,這些設計都會顯著影響玩家與游戲的交互,決定哪個游戲元素要優(yōu)先處理。

為了更好的了解HUD和UI設計,我們采訪了在這一領域經驗豐富的開發(fā)者。他們分享了業(yè)內的一些優(yōu)秀設計,以及制作經驗。

1)皇室戰(zhàn)爭 - 展示和滾動

皇室戰(zhàn)爭中有很多設計值得借鑒。大部分游戲內容都從一個簡單的按鈕開始(對抗塔防游戲,每個玩家通過部署攻勢,保衛(wèi)國王和兩個塔),里面包含的內容布置得井然有序,設計精巧。

DIGIT Game工作室的UX負責人Om Tandon稱贊皇室戰(zhàn)爭,跳出了大多手機游戲為了吸引中度玩家(界于休閑和重度游戲之間)而陷入的設計坑。“縱觀當今的中度手機游戲,你看到的都是極其相似的主界面,每個大廳都布滿了通往戰(zhàn)場,任務,商店,社交等各種入口。”Tandon認為這種設計會帶來一種不和諧的矛盾,玩家經常要在不同界面之間來回切換,或者必須回到主界,每個界面的美術風格和背景又不同。這使得游戲加載的次數增加,隨著“越來越多的動態(tài)增加的數據需要與服務器交互,因為它們不是保留在本地的。” 皇室戰(zhàn)爭的HUD里有玩家所有操控選項,而不隱藏在次級菜單中。簡潔明了的UI設計便于玩家在多標簽下自由切換。“每個主板塊下的次級信息也都在其上方區(qū)域內展開,大大減少了下拉菜單。”O(jiān)m說道“每個板塊的內容瞬時加載,使得滾動標簽的設計進一步完善,遲緩的加載減少了。”

小結:皇室戰(zhàn)爭平滑設計的重要參考價值,在于把信息在界面中充分展現,盡可能做到易于進入。讓用戶在一大堆菜單中等待加載不是很有趣。

2)半條命2 - 動態(tài)和聽感

Valve素來擅長打造簡單平滑的HUD,美觀貫穿游戲始終,而半條2最具代表性。Bungie公司的UI主設計師David Candland稱其巧妙的設計,在半條2上線時還沒有其他人嘗試過。

“這是我最喜歡的HUDs之一”Candland說道,“單琥珀色調色板看起來很獨特,成為游戲不可或缺的特點。其簡潔又不破壞游戲的戰(zhàn)斗環(huán)境。我十分喜歡足跡經濟(economy of the footprint)。”他特別指出,半條2的HUD里舍棄了那些不會馬上用到的元素,比如存放著的武器。“簡明的有需數據塊讓認知負荷變輕了。”他說道,“而當它們出現時,動畫即精簡又響應迅速。”“語音在HUD中與視覺同等重要。”“你會清楚記得游戲里那些聲音。在激烈戰(zhàn)斗中,當你想了解隧道中的情況,可屏幕邊緣可見度很低。獨特而清晰的語音提示足以告訴你是撿到了彈藥,身處險境,還是回血了,即使在最緊張的戰(zhàn)斗環(huán)境下。沒有HUD時也不會有問題,半條2的設計是一個非常好的實例,對我的作品影響深遠。”

小結:半條2向我們展示了HUD不是設計最后才要考慮的內容,或者將其從游戲美術整體中剝離出來。其實HUD也可以設計得有吸引力,而不僅僅是為了從視覺上傳達信息。

3)爐石 - 觸覺和清晰

和皇室戰(zhàn)爭一樣,爐石將簡單成熟的公式用不同尋常的風格呈現。該風格最大特點是信息的通暢,HUD突出重點的信息,在用戶用時能看明白。Ubisoft的一位游戲設計師Stanislav Costiuc指出,卡牌游戲的觸覺呈現和HUD的易讀性是游戲成功的重要因素。

“主要信息必須明確,誰能進攻,誰將要承受致命傷害,誰加法力”Costiuc說道,“無論是在戰(zhàn)斗還是單純點擊菜單,爐石對于游戲內每一種操作的視覺上和聽覺上給予的反饋都處理的非常好。即便只是繞著屏幕移動卡牌,這樣簡單地點擊都令人滿意,。”

小結:讓HUD真正成為游戲的一部分,而不是為了完成界面額外添加的一些層。順暢體驗才能讓玩家專注在玩上。

4)守望先鋒 - 緊湊和集中

和其他基于分類(class-based)的多人射擊游戲一樣,守望先鋒也有面臨同樣困擾,如何讓HUD的設計適用于每個英雄。

Massive Entertainment的高級UI美術Oliver Janoschek認為毛妹的HUD最有效,即讓玩家獲得了重要信息又可以保持行動。

“我所擁護的UI設計理念是,要把所有信息都放到一個用戶可集中精力的區(qū)域,不要讓他的眼睛四處觀望。”Janoschek說道,“毛妹的能量條正好位于實際的十字線,玩家很容易看到和評估信息。精細的設計也不會讓這一元素影響到玩家操作。保持在同一位置,也便于玩家對于游戲中的各種狀況作出反應,對于快節(jié)奏的FPS游戲來說這很重要。”

小結:在小范圍內所嵌入的信息越多并且易懂,越好。

5)刺客信條 - 少即是多

有時候,整體去掉HUD才是打造偉大設計的高手段。來自Ubisoft的設計師Stanislav Costiuc這樣說道。“我必須講一下刺客信條,不是因為它的HUD做得好,而是因為游戲關掉HUD之后體驗更好。游戲在設計之初就沒有考慮HUD,體驗當然不同。”

在游戲里去掉HUD,像刺客信條,在一個開放大世界里進行刺殺,親切(lovingly)地渲染環(huán)境可以帶來沉浸感,如果時常有提醒出現不會讓你覺得自己是在玩一個模擬刺客的游戲。沒有HUD,純粹呈現動作,讓玩家與游戲人物之間的關聯更純粹,所有人物都是一個密碼。

“當你在刺客大廳被告知,要去猶太人中心附近的市場里尋找信息時,你不會想按個鈕就到,然后草草完成任務。”他說道,“你會爬上房頂,四下觀察,找到遠方大門上的Star of David,那就是你要去的地方!到達之后,你會在附近的市場搜索,用Eagle Vision找信息,通過那些名聲不太好的人打探消息,或者你碰巧聽到傳令官正說起你的目標。整個調查隨著你對這個城市的深入了解發(fā)展下去,如何捕捉你所看到的和聽到的信息差異,引導著你最終達成目標。”比起在小地圖上創(chuàng)建一個任務圖標,這樣的設計體驗會更有帶感和成就感,當然也需要環(huán)境設計,任務設計以及劇情設計的配合。

小結:設計哲學中可圈可點的是,沒有HUD的一些情況下游戲表現會更突出。

6)Dead Space - 融合與吸引

去掉HUD對于像刺客信條這樣的游戲來說是一個好的選擇,還有游戲選擇將其融入其中,比如Dead Space的HUD是一定要的,其設計既沒有犧牲功能性,又提升玩家沉浸度。Epic Games高級設計師Jim Brown稱贊Dead Space的做法讓HUD即服務了游戲內人物,又滿足真實玩家的操作需求。

“玩Dead Space需要很多操作,設計HUDs時要有創(chuàng)意。”Brown說道,“生命值在你的后背顯示,頭上的地圖投影是樓層規(guī)劃,引導你進入下一目標。這是一個突破性的設計,完全打破傳統HUD設計理念。這一設計對于游戲的影響力甚至大于游戲本身的玩法,而這個事實卻往往少被提及。Dead Space是一款結合了射擊和生存的恐怖游戲,HUD對于游戲內營造游戲恐怖氣氛起到了非常好的作用:比起把它們從游戲中剝離出來單獨疊在2D中,現在的變現形式更助于玩家每時每刻保持注意力。”

在設計HUD/UI時,注意力分散是開發(fā)者要面對挑戰(zhàn)之一,Brown說道,不過EA Redwood Shores用一種獨有的方式非常好地解決了問題。

“在你制服上的生命條同時是玩家眼睛的焦點,在黑屋子里也是你僅有的光源,這有助于營造緊張的氛圍,讓玩家產生壓迫感或想一探究竟。”投射線(projected lines)是引導玩家通過復雜級別的好方法,但同時放慢了玩家腳步,當他們需要查閱自己的目標時,會被鎖在一個地方。玩家一旦停止移動,就會陷入易受攻擊的狀態(tài),玩家需要在游戲過程中要做出很多重要決定。再一次證明,好的UI設計不僅是有趣,而有助于營造游戲緊張懸疑的氣氛。

小結:通過Dead Space我們學習到,那些被其它游戲處理得平庸和缺乏重要性的元素,在高階設計中可以成功結合為優(yōu)秀內容。做得好的HUD不僅僅是HUD,它更像是游戲世界的固有組成部分。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,663評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 98,125評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,506評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,614評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,402評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,934評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,021評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,168評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 48,690評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,596評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,784評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,288評論 5 357
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,027評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,404評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,662評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,398評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,743評論 2 370

推薦閱讀更多精彩內容