如翼視點
首頁>如翼視點>文章內容
游戲UI-核心設計思路
發表時間:2023-11-15
這是一篇大廠才會做的內部文章,我就叛逆,想給更多人看到
我從最初的網頁設計師、視覺設計師一路小打小鬧,直到近兩年堅定想要轉型,繼而開始游戲UI的學習與實踐。
負責UI工作后,作品主要集中在《明日之后》《萬國覺醒》等項目。
游戲UI-核心設計思路
在這個過程中積累了許多踩過的坑、學習到的經驗,今天希望將整理好的游戲UI制作思路
分享給兩類人:
一:打算從游戲平面/視覺轉型到游戲UI的設計師(或者正在進行中);
二:剛剛踏入游戲行業,對UI還處于摸索階段的設計師。
一是熱情。
游戲UI可以參與游戲的核心玩法設計,理解整個游戲的開發流程,無疑是將我的愛好和職業完美結合。
二是專業壁壘更高,收入天花板更高。
轉型后幾乎從頭開始的學習過程同樣是痛苦的、充滿自我懷疑的。
要學習的東西相比于技術類,更多的是思維方向的轉變。
UI的薪水同類型比較的話,確實會豐厚一些,這也是和能力對等的。
話不多說,下面就講講在我轉型的這幾年,對游戲UI設計師這一職業的理解。
游戲UI-核心設計思路
UI設計(或稱界面設計)是指對軟件的
人機交互、操作邏輯、界面美觀
的整體設計。
放在游戲行業里,就是游戲的人機交互、操作邏輯、界面設計。
我們把這三點鋪開來講:
首先是人機交互
它可能是扭轉戰局的技能釋放:按下技能,釋放技能,獲得團戰勝利。
它可能是某個讓你腎上腺素飆升的抽獎畫面:哇哦,金色傳說!
通過你的操作,計算機給予你的響應,交互充滿在游戲的各個層面。
其次是操作邏輯
它是硬件、軟件的底層邏輯。
它是游戲的底層邏輯:你的游戲用什么引擎開發?它是什么游戲類型?
它是人類的基本操作邏輯:你是左撇子還是視覺障礙人士?
最后是界面美觀
為什么把它放在最后,因為我認為在UI制作流程里,
界面美觀一定是放在開發的最末尾!
界面美觀的通常要求,不外乎幾點:層次清晰、風格適配、視覺吸睛。
以上是游戲UI的一些常識,你理解了上述邏輯后,下面我們開始具體的制作流程。
游戲不只是單個環節,而是一套整體的工業流程,因此UI只是游戲中的一環,這里我不列舉一些包含策劃工作,例如:系統功能策劃、世界觀策劃等;美術也會有美術概念設計的內容,整體內容我盡量限制于UI。
游戲UI制作流程我整理為4個步驟:關鍵界面框架-關鍵界面UX-關鍵界面風格產出-全界面真圖。
游戲UI-核心設計思路
首先游戲立項后,作為UI設計師,要根據游戲類型設計原型初稿。
舉個例子,一款開放世界動作游戲,策劃給到功能文檔,美術給定游戲風格圖,那ui就可以開始第一步的關鍵界面框架設計。
關鍵界面是游戲主界面和重要一級跳轉頁(通常為屬性、裝備、背包、地圖、設置)。
游戲UI-核心設計思路
首先是主界面:一款動作類型游戲,核心玩法為動作戰斗,需要玩家長時間停留在這個界面進行游玩,因此戰斗界面即為游戲的主界面。
例如游戲的操作系統為手機,因此我們設計符合手機規范的操作邏輯;
例如針對手機不同的尺寸定義不同的以1334x750或2560x1480的的尺寸規范;
游戲UI-核心設計思路
例如按照調查顯示大拇指的最佳移動范圍去做框架設計圖,用的左移動、右攻擊的方案定位基礎操作位置,符合人體工程學。
我們按照策劃功能設定條條列出需要的內容快速擺放。
動作控件:移動、技能、攻擊。
人物屬性:頭像、名字、等級、血條、經驗條、buff。
怪物:血條、怒氣條、buff。
地圖:小地圖、人物位置、人物朝向、地圖朝向、地理圖。
任務目標:任務標題、文本、數量,指針。
這些內容需要去定義優先級,分布排開。
游戲UI-核心設計思路
然后完成一級跳轉頁的功能模塊,即屬性、裝備、背包、地圖、設置的功能位置。
游戲UI-核心設計思路
按照上述內容設計關鍵界面框架,完成游戲基本的功能邏輯。
關鍵界面UX一般是指關鍵界面框架的導向圖、控件的交互反饋圖。
我們的關鍵UX設計會依據五個準則:
示能,意符,映射,反饋,概念模型。
(交互/設計心理學基礎)
游戲UI-核心設計思路
下面我用一張圖讓你快速get到5個準則是什么意思。
游戲UI-核心設計思路
圖片來自網絡
示能
:是指一個物理對象與人之間的關系。例如做成按鈕就是想讓人明白可以點擊。
意符
:是表達提示。例如“go”文字提示你按鈕的功能,我理解他是需要跳轉。
映射
:表示多組要素之間的關系。例如畫面中出現的正方形圖標回歸類為可獲得道具。
反饋
:你執行了命令,就應該給你反饋。例如你點擊了“go按鈕“這個行為,會有一個按下狀態然后跳轉至活動界面這樣的結果。
概念模型
:快速告知產品的模型。例如你已經理解了這個活動的模型:簽到獲取道具!
但在實際制作過程中界面的復雜程度遠比想象的要困難許多,還需要其他設計準則作為補充。
比如我們可以引入《尼爾森十大設計原則》、《交互設計的7大定律》,有興趣可以搜索。
理論知識作為重要的邏輯參考,也是最終從結果反推過程的驗證,越加復雜的系統會通過理論的取舍達到體驗最優解。
根據5個準則,制作出我們的關鍵UX界面圖:
游戲UI-核心設計思路
有了清晰的關鍵界面框架和關鍵界面UX圖,下一步我們開始關鍵界面的包裝。
在這里我要做個小提醒。
一般在實際工作中,我們會需要各部門對效果圖。就是拿我們制作的圖和制作人、策劃、程序、美術共同考慮每個部分的優先級、實現功能的可行性、核心玩法的方向性、動效鏡頭配合邏輯、界面美術的包裝方向等等一系列未來會出問題去做預設,這就需要大量的經驗(犯的錯越多越好)。
策劃考慮玩法是否有意思,UI考慮這個玩法體驗的更舒服,拼接考慮資源如何處理、美術考慮怎么包裝更牛逼,程序考慮怎么實現玩法更合理,我們需要共同去解決優先級最高的問題。
說人話就是開會,開會,開會,開不完的會。但是這一步也是必不可少的,為后續工作避坑。
游戲UI-核心設計思路
1.理論依據
界面風格的尋找有很多種方法,比如從游戲體驗模型、產品定位、受眾群體等方面找靈感。
主要作用是為了去尋找到能夠支撐我們設計方向的理論依據,稍后我會著重講解游戲體驗模型(Game Experience Model)的設計方案。
舉個著重于游戲的主色調方案的例子,主色調方向并非完全根據原畫圖來作為參考,更重要的是考慮游戲模型、游戲定位、受眾群體等去定位游戲的主色調。
例如提到科幻游戲類型,大部分的科幻類的主色調會偏向藍色,這是因為宇宙星空對于視覺效果的映射,主基調會是藍色,而色相范圍會根據受眾群體的不同做出調整:硬核玩家的藍色,受眾是年輕人的藍色偏向感知上會明顯不同,這里會用到色彩心理的知識內容。
游戲UI-核心設計思路
2.快速風格稿
回到我們的主界面,我們開始用顏色填充我們的UI層。
游戲UI-核心設計思路
假設我通過以上理論依據完成了我的設計方向,那我在原有的交互功能稿上快速出草稿方案,為進一步的細化做鋪墊。
這個過程我會建議大家使用
色塊法
來制作,用色塊法的原因是這個階段只是需要看整體效果,不會去關注過多的細節,做的越細對設計師來講只會越發限制你的發揮。用大色塊去覆蓋,我們看成套的小圖能更快速的發現界面上的問題。 然后處理好黑白灰的關系和文字的排版,以最快速度出效果為目的。
文字的排版我會用到四個原則:
親密性、對齊、重復、對比;
黑白灰關系的原則:
素描中主要運用黑白灰來表達物體的質感、量感、層次感;我們通過黑白灰關系確定層次。
游戲UI-核心設計思路
以上,基本上完成了我們的關鍵界面假圖。接下來就是細化假圖,讓原來的色塊看起來更加工整舒適,滿足基本可以使用的程度即可。
涉及到如此多的知識內容還能堅持住嗎,接下來更是重量級的內容。
3.貼合游戲體驗模型
我們完成了一套基礎UI設計,但是莫得靈魂,沒有靈魂的UI即使套用在不同游戲上也不會奇怪。
那么UI的靈魂是什么?或者說游戲美術的靈魂是什么?
是屬于我們這個游戲獨有的世界觀和游戲機制。
這個階段我要把界面去貼合游戲世界觀,UI的風格走向、細節提煉、風格產出都來源于這一步。 這需要很多人共同去思考、腦暴、尋找、構建在這套世界觀下合理的美術表現。
例如《王者榮耀》最開始的UI是沒有調性和方向的,后來他們通過設計世界觀、游戲機制的探索找到了他們的方向,智械飛升新國風(我的定義)
游戲UI-核心設計思路
新版和舊版對比
這個方法我需要運用到游戲體驗模型(Game Experience Model)的知識。
游戲體驗模型(Game Experience Model)
游戲UI-核心設計思路
游戲體驗的六個要素以及它們之間的關系:
?
機制 - 行為
:機制包括游戲中可能發生的所有動作和所有游戲對象 - 由游戲規則定義的所有內容。動作是機制在每種情況下的運作方式。
?
美學-感官刺激
:美學包括旨在喚起玩家情緒的所有感官和認知設計。呈現給玩家的美感稱為感官刺激。
?故事世界-敘事
:故事世界為游戲提供了實質性的內容。那些沒有的世界,是因為它們沒有被放入游戲中,只是由游戲設計者想象出來的,或者由于所包含的情況而在邏輯上變得必要或可能。 敘述是游戲過程中發生的故事世界中的故事片段。
故事世界通常是游戲設計師設想的一個無限的宇宙。 敘事是玩家在游戲中體驗的故事世界的片段,他們以情節、文字描述、動作場景、聲音、藝術等形式對這個宇宙的一部分進行了美學再現,并在游戲過程中作為故事世界中的敘述呈現給玩家。
如果能理解故事敘事,那就能推導美學的藝術形式;游戲的機制所表現的玩家行為,能夠起到限制/提高美學的效果;優秀的故事會回饋給設計者如何制作核心體驗設計;以此達到三者能夠互推的良性循環。
游戲UI-核心設計思路
我們回過頭來看王者這張圖,游戲機制為moba(多人在線戰術競技游戲),世界觀是
智械飛升新國風
。
以游戲機制(MOBA)推導出美術形式,體現在游戲的美術設計上,如游戲logo,UI的對立設計,平衡設計。
通過獨屬于他的國風世界觀推導出的藝術表現形式,表達在最重要的皮膚表現,游戲的UI上如紋理、圓角處理和色彩走向、古風表現。
而獨屬于智械飛升的設計,從logo的機關小細節、匹配界面的紋理圖所表達。
游戲UI-核心設計思路
游戲UI-核心設計思路
不同的游戲對于游戲體驗模型的使用范圍不同,例如《超級馬里奧》,交互與游戲機制結合。
游戲UI-核心設計思路
而《刺客信條》的UI與故事結合得更加緊密。
提到紋理細節表達,例如《刺客信條英靈殿》中的UI細節,會遵循故事背景,
本作背景設定在維京時代,因此從時代背景推敲出來許多的紋理:包含符合時代的凱爾特紋、維京紋和海盜紋。
這個內容鋪開來講又是一個復雜的內容,有機會可以細聊。推薦去看一些關于紋理設計的書籍。
游戲UI-核心設計思路
當然,把游戲體驗模型玩出花,這當然不是一件輕松的工作。
回到我們的頁面,把我們的關鍵界面按照這個方式去貼合游戲獨有的世界觀,做出這樣的方案。
游戲UI-核心設計思路
或者是這樣的
游戲UI-核心設計思路
我們完成關鍵界面設計以后,再一次通過開會、修改、分析、結果收集等進行合理判斷。在此基礎上確定最終的UI風格。
之后就是建立規范,再去延展設計,最后全方位落地。如何建立規范,完成一套規范,建立控件庫、建立組件庫、建立素材庫、設計手冊(不細說)。
游戲UI-核心設計思路
管線思維導圖
在規范下,開始內容延展:不同UI不同分工,劃分不同功能管線,管理者需要把控每一條管線的執行和推進,以此完成我們長線開發的全界面真圖(即一個游戲的所有界面)。
完成UI后,交付給動效、特效、程序,然后恭喜你,完成了游戲設計的UI部分。
寫在最后
通過完成后的游戲成品,作為游戲UI仍要把控后續每一個界面傳達的實際效果,是否達到預期;每一個動效反饋、每一個抽獎動畫、打擊感的震動,排版的舒適性等細節,都需要反復打磨達到讓玩家最為舒服的水準。
畢竟,同一個動作不同的細節表達,最終的玩家的體驗會完全不同。
鏡頭語言也非常重要,電影游戲畫的視覺震撼和共鳴,能結合實際制作中,達到類似的效果。
例如《蜘蛛俠邁爾斯》各種QTE的鏡頭動作呈現,電影感拉滿。
游戲UI-核心設計思路
最后推薦一本書:《游戲設計的236個技巧》,干貨很多,值得一看!
現在,你理解基礎游戲UI了嗎? 手動狗頭

作者:佳大大丶
如翼推薦
国产九九精品视频免费播放4,美欧精品视频第1页,日本一道本高清视频二区,A片一级片免费