普及系列——游戲開(kāi)發(fā)中界面設(shè)計(jì)全流程

時(shí)間：2023-09-03 17:36:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-03 17:36:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

普及系列——游戲開(kāi)發(fā)中界面設(shè)計(jì)全流程：雖然不時(shí)的有看到網(wǎng)上一些對(duì)游戲質(zhì)疑的聲音，但是我個(gè)人是極為熱愛(ài)游戲和動(dòng)漫的，在我看來(lái)游戲事業(yè)是可以和電影行業(yè)相比擬的，也可以作為影片一樣帶給我們時(shí)代的印記，在現(xiàn)代游戲的發(fā)展中已經(jīng)注入了越來(lái)越多的思考和民族文化，也不單單是網(wǎng)上評(píng)論的那般簡(jiǎn)單，并且游戲發(fā)展是與科技發(fā)展相扶相持的。現(xiàn)在游戲設(shè)計(jì)的越來(lái)越精美，技術(shù)愈加強(qiáng)悍了，游戲是一款對(duì)科技、技術(shù)、文化、美術(shù)、劇本、創(chuàng)意等等的集成綜合體。但我本人還并不是一位游戲開(kāi)發(fā)者，更不是制作人，只是在這個(gè)浪潮中奮斗和努力的普通人。

下面來(lái)說(shuō)說(shuō)游戲界面的事情吧。隨著近些年游戲行業(yè)的高速發(fā)展，游戲GUI職位在游戲設(shè)計(jì)中的職位越來(lái)越清晰，并在游戲的開(kāi)發(fā)設(shè)計(jì)中占據(jù)重要的位置，但用戶大眾對(duì)這一職業(yè)卻知之甚少。本篇文章將告訴你：GUI的發(fā)展歷程/GUI在游戲開(kāi)發(fā)的流程中占據(jù)的位置/GUI包含的哪些工作內(nèi)容/GUI崗位細(xì)分/GUI在游戲開(kāi)發(fā)中的工作流程。（請(qǐng)耐心閱讀，剛寫(xiě)本站，歡迎朋友們點(diǎn)贊關(guān)注交流～）

游戲：是人的一種娛樂(lè)活動(dòng)，也可以指這種活動(dòng)過(guò)程。UI（User Interface，也稱使用者界面）：系統(tǒng)和用戶之間進(jìn)行交互和信息交換的媒介，它實(shí)現(xiàn)信息內(nèi)部的形式與人類可以接受的形式之間的轉(zhuǎn)換。

游戲的界面設(shè)計(jì)也可以叫GUI，大廠一般直接會(huì)稱呼對(duì)方GUI設(shè)計(jì)師，GUI即圖形界面（Graphical User Interface）、

概括來(lái)說(shuō)，游戲UI設(shè)計(jì)就是游戲軟件中人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。

游戲GUI發(fā)展歷程

• 1972年，美國(guó)雅達(dá)利公司研發(fā)出第一臺(tái)模擬兩個(gè)人打乒乓球的游戲的街機(jī)游戲《PONG》，《Pong》是ATARI賴以成名的鼻祖游戲之一，在國(guó)外最骨灰一級(jí)的玩家中有著無(wú)比的影響力,至今仍然有大量的自制游戲沿用了PONG的設(shè)定。

• 1980年，被認(rèn)為經(jīng)典街機(jī)游戲之一的《吃豆人》風(fēng)靡全球。
• 1997年，諾基亞推出第一款帶有內(nèi)置游戲《貪吃蛇》的手機(jī)。

• 2004年觸屏手機(jī)，PSP游戲機(jī)的產(chǎn)生，真正意義上的游戲軟件界面也應(yīng)運(yùn)而生了，早期的界面設(shè)計(jì)包含永杰和軟件界面兩方面的內(nèi)容。比如XBOX的手柄中的按鈕屬于硬件界面，而在屏幕投影中所呈現(xiàn)的游戲畫(huà)面，彈窗等都是屬于軟件界面。

從游戲的發(fā)展歷程可以看出來(lái)，在游戲的發(fā)展過(guò)程中，UI界面的形態(tài)和表現(xiàn)形式及畫(huà)面的精美程度也隨之變化，現(xiàn)階段玩家對(duì)于游戲畫(huà)面、界面的美術(shù)品質(zhì)、交互體驗(yàn)感的要求也越來(lái)越高了，這也是驅(qū)動(dòng)GUI發(fā)展的原因。

畫(huà)面的美觀程度其實(shí)是技術(shù)的變化，游戲引擎的實(shí)現(xiàn)和大眾時(shí)代審美的變化的結(jié)果。隨著游戲產(chǎn)業(yè)化的日趨成熟，國(guó)內(nèi)的GUI行業(yè)，大概從06年，07年之后到現(xiàn)在十五年的發(fā)展歷程，從無(wú)序到有序，從盲從設(shè)計(jì)到科學(xué)規(guī)劃，現(xiàn)在的GUI行業(yè)儼然是一個(gè)由系統(tǒng)理論支持，科學(xué)的工作流程，崗位細(xì)分明確的一個(gè)“職業(yè)行業(yè)”。當(dāng)然在設(shè)計(jì)一款界面的時(shí)候，首先需要了解這是什么類型的游戲。不同的游戲類型，所需要的界面內(nèi)容是不同的，表現(xiàn)形式也是不同的,需要根據(jù)游戲的玩法來(lái)配合設(shè)計(jì)方便玩家操作的界面。

順便介紹下目前市面上游戲的主要類別（雖然很多朋友可能很會(huì)玩游戲，但是當(dāng)你玩了一些游戲可以告訴別人比如：“我比較喜歡AVG的游戲，巴拉巴拉有哪些，還有美術(shù)特點(diǎn)和機(jī)制”而不是張口，我會(huì)打王者）

• RPG ( Role-Playing Game ) 角色扮演游戲 例如：《塞爾達(dá)傳說(shuō)》《明日方舟》《原神》
• ARPG (Action RPG) 動(dòng)作角色扮演游戲 例如：《劍俠情緣》
• SRPG (Simulation RPG) 模擬角色扮演游戲是一種在日本十分流行的，例如：《圣女戰(zhàn)旗》
• MMORPG 大型多人在線角色扮演游戲 例如：《魔獸爭(zhēng)霸》《夢(mèng)幻西游》
• AVG (Adventure Game) 冒險(xiǎn)游戲 例如：《古墓麗影》，再?gòu)?qiáng)推一下我參與的一款avg文字游戲《墨心》
• ACT (Action) 動(dòng)作類游戲 例如：永遠(yuǎn)經(jīng)典的《魂斗羅》，我小時(shí)候就打這個(gè)
• STG（Shooting Game）射擊游戲 ，電子游戲歷史最古老最悠久的類型。例如：《王牌空戰(zhàn)》
• FPS（First Person Shooting）第一人稱射擊游戲 ，例如：《和平精英》
• FTG（Fighting Game）格斗游戲 例如：《街霸》《拳皇》
• SLG （Strategy Game）戰(zhàn)略游戲 ，例如：《三國(guó)志》
• RTS （Real-Time Strategy Game）即時(shí)戰(zhàn)略游戲， 例如：《戰(zhàn)爭(zhēng)黎明2》《帝國(guó)時(shí)代》
• RAC/RCG (Racing Game) 賽車(chē)類競(jìng)速游戲 例如：《QQ飛車(chē)》
• MOBA，（Multiplayer Online Battle Arena）例如：《英雄聯(lián)盟》、《王者榮耀》
• 包括近些年流行的戀愛(ài)養(yǎng)成類游戲，《未定事件簿》《戀與制作人》等
• 還有非對(duì)稱對(duì)抗競(jìng)技游戲比如《第五人格》也有人稱作大逃殺類游戲，半即時(shí)回合制RPG的《陰陽(yáng)師》

界面設(shè)計(jì)系統(tǒng)的崗位細(xì)分

GUI包含的哪些工作內(nèi)容的流程呢：

環(huán)節(jié)1：游戲頁(yè)面UI/UX設(shè)計(jì)——交互設(shè)計(jì)

當(dāng)一個(gè)游戲已經(jīng)有了非常完整的策劃案的時(shí)候，就需要游戲界面的UX，就是把游戲當(dāng)中的一些功能，通過(guò)圖形界面來(lái)表達(dá)出來(lái)，這時(shí)候需要設(shè)計(jì)師完整的表達(dá)設(shè)計(jì)意圖，當(dāng)然在游戲設(shè)計(jì)中，交互是常常細(xì)分的一個(gè)崗位，在小一點(diǎn)的公司或者不夠龐大的團(tuán)隊(duì)，可能就沒(méi)有交互設(shè)計(jì)有時(shí)候是視覺(jué)設(shè)計(jì)師或者策劃代勞了。UX設(shè)計(jì)的目的是準(zhǔn)確的表達(dá)界面的信息，并和復(fù)合人機(jī)交互的基本規(guī)范，輔助玩家操作，用簡(jiǎn)單準(zhǔn)確的交互邏輯鏈接玩家與游戲?？梢哉f(shuō)一個(gè)好的交互在游戲界面設(shè)計(jì)中發(fā)揮著極致重要的作用。

環(huán)節(jié)2：界面美術(shù)設(shè)計(jì)——視覺(jué)設(shè)計(jì)

當(dāng)交互設(shè)計(jì)設(shè)計(jì)好之后，視覺(jué)設(shè)計(jì)師要實(shí)現(xiàn)的就是在交互原型的基礎(chǔ)上，把一堆條條框框進(jìn)行美化設(shè)計(jì)，當(dāng)然也不是“設(shè)計(jì)”這么簡(jiǎn)單，一個(gè)系統(tǒng)的設(shè)計(jì)往往是整個(gè)團(tuán)隊(duì)完成的，這里需要設(shè)計(jì)師有較強(qiáng)的美術(shù)風(fēng)格把控能力、對(duì)潮流文化有一定的認(rèn)知和預(yù)測(cè)。并且游戲研發(fā)的周期較長(zhǎng)，新項(xiàng)目往往是1-2年以后上線，所以新設(shè)計(jì)的風(fēng)格要有一定的前瞻性。就是說(shuō)你的設(shè)計(jì)必須以最好的界面設(shè)計(jì)為行業(yè)標(biāo)桿，否則可能游戲一出世就low到玩家了。




環(huán)節(jié)3：界面重構(gòu)——視覺(jué)設(shè)計(jì)

這里你需要做的事情其實(shí)是我們常說(shuō)的切圖，而針對(duì)游戲界面設(shè)計(jì)或者移動(dòng)端的UI設(shè)計(jì)的切圖可以說(shuō)是大同小異的，但是內(nèi)部指定的一些規(guī)則可能不同、簡(jiǎn)單的就是，把你的界面拆分成各個(gè)部分。這里我沒(méi)有方便放的圖片，下圖是移動(dòng)端的設(shè)計(jì)，我寫(xiě)給CP的輸出規(guī)范的一部分?？偨Y(jié)做這件事的目的就是，把設(shè)計(jì)進(jìn)行拆分和利用工具做具體的距離數(shù)值切圖，讓前端的開(kāi)發(fā)可以用代碼和你提供的素材完全還原所設(shè)計(jì)的界面。

環(huán)節(jié)4：帶入游戲引擎——TA

目前在國(guó)內(nèi)是相當(dāng)稀缺的ta，就是技術(shù)美術(shù)，技術(shù)美術(shù)所需要的技能相對(duì)來(lái)說(shuō)比較多。首先顧名思義技術(shù)美術(shù)，其實(shí)更偏向于技術(shù)的，ta需要一定的美術(shù)和設(shè)計(jì)基礎(chǔ)，但是不需要達(dá)到專業(yè)的視覺(jué)設(shè)計(jì)師的程度，最重要是要熟悉游戲引擎虛幻4/Unity等，并且需要具備一定的代碼能力。ta就像是美術(shù)和開(kāi)發(fā)之前的橋梁，目前這個(gè)崗位的人才再國(guó)內(nèi)還是比較稀缺的，學(xué)習(xí)代碼是理科的學(xué)生，而學(xué)習(xí)美術(shù)的大都是藝術(shù)生，一個(gè)理性一個(gè)感性，也注定了這個(gè)職業(yè)人才的稀缺性，在國(guó)內(nèi)目前只有游戲大廠和部分比較專業(yè)的制作游戲的公司會(huì)有這類人才。

環(huán)節(jié)5：動(dòng)態(tài)圖形設(shè)計(jì)——?jiǎng)有гO(shè)計(jì)

在游戲引擎還原后，動(dòng)效設(shè)計(jì)師就需要在引擎文件中添加一些動(dòng)畫(huà)，比如說(shuō)切換，退出，點(diǎn)擊效果等等一系列動(dòng)畫(huà)，再配合動(dòng)效軟件AE或者游戲引擎設(shè)計(jì)界面特效。這才算一個(gè)流程走完了，最后交給前端的開(kāi)發(fā)人員，最后呈現(xiàn)在玩家面前。當(dāng)然可能中間要進(jìn)行，ta改，視覺(jué)設(shè)計(jì)改，動(dòng)效設(shè)計(jì)改，反復(fù)改來(lái)改去，甚至推翻重來(lái)等多次設(shè)計(jì)和打磨。

（我覺(jué)得找參考還是非常方便的魔法盒，包括這里英雄聯(lián)盟的所有英雄的技能特效等等，推薦！）




發(fā)布設(shè)置