【PC遊戲】殺戮尖塔的UI設計細節


3樓貓 發佈時間:2022-12-04 14:13:49 作者:加雞腿遊戲 Language

【PC遊戲】殺戮尖塔的UI設計細節-第0張

殺戮尖塔作為DBG的巔峰之作,在核心機制樂趣的設計上出類拔萃。過牌、抽牌、出牌、連招、洗牌、檢索的樂趣,無論是在本體還是在mod中都被髮揮得淋漓盡致。

【PC遊戲】殺戮尖塔的UI設計細節-第1張

作為一個偽資深打牌玩家和一個業餘DBG遊戲開發者,今天不想過多討論分析該遊戲的機制設計(大神們都已經分析了無數次了),而是想分享一下我在遊玩殺戮尖塔的過程中,在交互一些小細節上所獲得的額外樂趣,也作為後續DBG遊戲的玩家賞析和開發者優化產品的一個參考。

第一部分——卡牌

作為一個DBG遊戲,自然缺少不了卡牌,卡牌作為戰鬥技能在戰鬥過程中的具象存在除了將輸出手段變成獨立的幾段之外,還讓玩家有了打實體牌和收集實體牌的遊戲體驗,下面就先總結一下卡牌的UI所包含的信息吧。

邊框與底色

邊框與底色代表著卡牌所屬的職業,並且與英雄的原畫的主色用色一致。

橙、綠、藍、紫分別代表了戰士、獵手、機器人、觀者。

【PC遊戲】殺戮尖塔的UI設計細節-第2張

卡牌圖標邊框顏色

卡牌圖標邊框顏色代表著卡牌的稀有度,其中灰色代表普通,藍色代表稀有,金色代表傳說,三種顏色也符合目標用戶對於卡牌價值的認知。

【PC遊戲】殺戮尖塔的UI設計細節-第3張

卡牌圖標邊框形狀

卡牌圖標邊框形狀代表著卡牌的類型,其中倒五邊形為攻擊卡、圓角矩形為技能卡、橢圓形為能力卡。

【PC遊戲】殺戮尖塔的UI設計細節-第4張

卡牌名稱與名稱字體顏色

強化前的卡為純文字的卡,強化後的卡會在文字後面增加1個“+”號,可以無限強化的卡則會在“+”號之後用阿拉伯數字標記累計強化的次數,強化後卡牌名稱的字體由白色變為綠色。

【PC遊戲】殺戮尖塔的UI設計細節-第5張

第二部分——戰鬥

卡牌的UI設計是大部分有遊戲閱歷的玩家都能感受到的,相較於卡牌的UI,戰鬥中如何在玩家做決策前給到最清晰充分的反饋也是十分重要的。

手牌展示

卡牌呈弧線狀排列,並且將卡牌圖標和卡牌名稱全部展示出來,給玩家一種抓牌在手的感覺。

【PC遊戲】殺戮尖塔的UI設計細節-第6張

卡牌大小與關鍵詞

卡牌被選中時會放大顯示,若卡牌帶有特殊效果的關鍵詞,則會在右側顯示關鍵詞描述。

【PC遊戲】殺戮尖塔的UI設計細節-第7張

卡牌邊框發光

通過是否發光與發光的顏色去傳達卡牌當前狀態,邊框無發光為不可用狀態、邊框發藍光為可用未激活狀態,邊框發金光為可用激活狀態。

【PC遊戲】殺戮尖塔的UI設計細節-第8張

能量圖標

不同的英雄,擁有不同外形和不同顏色的能量圖標。

【PC遊戲】殺戮尖塔的UI設計細節-第9張

【PC遊戲】殺戮尖塔的UI設計細節-第10張

敵人意圖

通過敵人頭頂的圖標和數字,來向玩家傳達敵人意圖以及對玩家威脅度:

0-5點傷害使用小劍圖標、5-10點傷害使用大劍圖標、10-15點傷害使用彎刀圖標、15-20點傷害使用屠刀圖標、20-25點傷害使用斧頭圖標、25點以上的傷害使用鐮刀圖標、綠色漩渦表示負面效果、紫色漩渦表示強大的負面效果等等。

【PC遊戲】殺戮尖塔的UI設計細節-第11張

英雄狀態

英雄下方的帶有層數的狀態圖標會顯示計數,綠色數值為強化狀態,紅色數值為弱化狀態。

【PC遊戲】殺戮尖塔的UI設計細節-第12張

指向箭頭

拖動卡牌選擇目標時會出現一個指向箭頭,同時被選中的目標周圍出現邊框,如果選擇的對象無法成為攻擊目標則箭頭會變成灰色,且想要選中的目標周圍不會出現邊框

【PC遊戲】殺戮尖塔的UI設計細節-第13張

【PC遊戲】殺戮尖塔的UI設計細節-第14張

遺物計數

帶有計數效果的遺物會在右下角顯示計數。

【PC遊戲】殺戮尖塔的UI設計細節-第15張

中毒狀態

中毒的所造成的傷害會提前通過綠色條顯示在敵人血量上。

【PC遊戲】殺戮尖塔的UI設計細節-第16張

效果添加

效果添加、移除的卡牌會在戰鬥頁面中央放大停留並配合1秒以上的動畫表現。

【PC遊戲】殺戮尖塔的UI設計細節-第17張

第三部分——冒險

戰鬥相關的UI是相對理性的部分,而感性的、故事性的部分,將通過冒險中的UI細節來傳達。

地圖圖例

通過簡單的圖例告知玩家地圖上的路線信息。

【PC遊戲】殺戮尖塔的UI設計細節-第18張

戰利品清單

戰鬥勝利後,戰利品會像清單一樣進行排列,並且每個都需要去點擊,才算採集獲得,除了讓玩家自由選擇是否獲取外,也可以讓戰鬥的收穫感變強。

更重要的是,戰利品的分割羅列讓跟戰利品掉落和獲取相關的遺物在生效時更加清晰。

【PC遊戲】殺戮尖塔的UI設計細節-第19張

戰利品選擇時的有趣小提示

遊戲戰利品選擇時,頁面底部會顯示有趣的NPC小提示,不僅介紹了遊戲的規則,還營造出NPC都在盡全力支持的你冒險的感覺。

【PC遊戲】殺戮尖塔的UI設計細節-第20張

戰利品圖標

戰利品圖標中卡包圖標會通過不同顏色將卡包內卡牌的品質提前顯示出來。

【PC遊戲】殺戮尖塔的UI設計細節-第21張

【PC遊戲】殺戮尖塔的UI設計細節-第22張

神秘事件描述字體顏色

神秘事件中與不同英雄相關的背景故事,會用該英雄的主色調作為字體顏色。

【PC遊戲】殺戮尖塔的UI設計細節-第23張

神秘事件選項字體顏色

遊戲中所有的懲罰/弱化信息均顯示為紅色,獎勵/強化信息均顯示為綠色,包括神秘事件選項,卡牌強化,狀態數字等。

【PC遊戲】殺戮尖塔的UI設計細節-第24張

神秘事件動畫

神秘事件會觸發特殊動畫效果,如抖動、散落金幣等動畫表現。

【PC遊戲】殺戮尖塔的UI設計細節-第25張

商人的手指

商店會顯示商人的話和手,這隻手也會指向鼠標懸停的商品。

【PC遊戲】殺戮尖塔的UI設計細節-第26張

休息點背景

在休息點互動後,休息點背景畫面中的火把會熄滅。

【PC遊戲】殺戮尖塔的UI設計細節-第27張

【PC遊戲】殺戮尖塔的UI設計細節-第28張

小結

從殺戮尖塔UI的細節設計上我們可以看出開發者對於該產品開發的專業程度與投入的心血。

很多不為玩家所關注的地方,都進行了大量的努力和設計。

除了上述的這些內容外,還有哪些沒有被發現的細節和彩蛋,歡迎大家留言討論。


© 2022 3樓貓 下載APP 站點地圖 廣告合作:asmrly666@gmail.com