激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1:010-59833514 ?咨詢電話:400-810-1418 服務(wù)與監(jiān)督電話:400-810-1418轉(zhuǎn)接2

光子《黎明覺醒》UI負(fù)責(zé)人:如何做出「有靈魂」的設(shè)計?

發(fā)布時間:2024-01-25 09:46:42 瀏覽量:139次


UI設(shè)計,也是對現(xiàn)實(shí)生活的藝術(shù)加工和重現(xiàn)。


整理/馮夢陽

在過去,游戲UI界面設(shè)計在整款游戲的開發(fā)中存在感相對薄弱,往往不太受各類廠商的重視。 但伴隨玩家審美的逐漸進(jìn)化以及多元化,如今游戲UI已經(jīng)成了很多項(xiàng)目提升品質(zhì)的難點(diǎn)和瓶頸,所以相關(guān)從業(yè)者的福利待遇也水漲船高。

12月4日,在由騰訊游戲?qū)W堂舉辦的獨(dú)立游戲孵化器開發(fā)者沙龍(Game Without Borders,簡稱GWB)廣州站上,光子《黎明覺醒》UI負(fù)責(zé)人、《PUBG MOBILE》UI指導(dǎo)專家WenBin分享了一些UI設(shè)計方法和經(jīng)驗(yàn),以及如何從游戲、電影和生活中獲取設(shè)計靈感。相信這些分享會給UI設(shè)計從業(yè)者提供幫助,也會給讀者判斷UI品質(zhì)提供一些參考。

葡萄君對此進(jìn)行整理,部分內(nèi)容有所刪減和調(diào)整。



01

擬物化與扁平化


大家好,我是來自光子設(shè)計中心的一名設(shè)計師,在騰訊待了八年,參與過《全民超神》《超神國際版》《我的王朝》《英雄殺》《PUBG MOBILE》以及后面的《黎明覺醒》等項(xiàng)目的制作。

今天要講的內(nèi)容分為:什么是擬物化設(shè)計、學(xué)習(xí)擬物化設(shè)計的動機(jī)和目的、學(xué)習(xí)和制作擬物化的流程和步驟三部分。


首先,我們看上面有兩張圖,左邊是擬物化設(shè)計,這種設(shè)計會模擬一些像塔羅牌、鐘擺等現(xiàn)實(shí)事物,同時使其擁有游戲的可操作性;右側(cè)則是扁平化的設(shè)計,這種界面主要是來凸顯信息。


擬物化設(shè)計中,做得比較好的有《爐石傳說》《魔獸世界》《暗黑破壞神》系列、《英雄聯(lián)盟》的??怂箍萍嫉鹊?,這些設(shè)計都有什么特征呢?



我將其歸納為,模擬現(xiàn)實(shí)事物特征進(jìn)行藝術(shù)再創(chuàng)造,設(shè)計具備細(xì)節(jié)和敘事性,同時會帶給受眾情感化表達(dá)和認(rèn)同。


例如去年暴雪嘉年華公布的《暗黑破壞神4》的一些圖,便是通過擬物化設(shè)計呈現(xiàn)的。



當(dāng)然,擬物化設(shè)計也有一些缺點(diǎn),比如設(shè)計門檻比較高,要求設(shè)計師有較強(qiáng)的美術(shù)和藝術(shù)功底;其次,這種設(shè)計形式在刻畫細(xì)節(jié)同時,也會舍棄一些信息上的表達(dá)。


因此,擬物設(shè)計的適用場景主要是在歷史題材IP,例如冷兵器戰(zhàn)爭、三國等,或者像《神之浩劫》《全民超神》《爐石傳說》這樣的古典魔幻題材游戲。


扁平化設(shè)計則去除了厚重繁雜的設(shè)計裝飾,保留最原始和單純的幾何形態(tài),強(qiáng)調(diào)抽象和符號化。像暴雪的《守望先鋒》、拳頭的《WALORANT》或者《APEX》等都是采用這種設(shè)計手法。

扁平化設(shè)計的優(yōu)點(diǎn)是可以讓信息直觀地凸顯出來,沒有過多的裝飾干擾注意力。而它的缺點(diǎn)也是因?yàn)闆]有那么多細(xì)節(jié),導(dǎo)致缺乏一些沉浸式或者情緒化表達(dá)。

因此,扁平化設(shè)計的適用場景更多是偏現(xiàn)代和未來的IP,包括電影里的全息投影、軍事科技之類的題材。

那這兩種設(shè)計形式是相互沖突的嗎?

其實(shí),當(dāng)所有的游戲都采用千篇一律的設(shè)計形式時,如果你的產(chǎn)品與眾不同,便可以脫穎而出,所以我覺得扁平化和擬物化設(shè)計不是對立的,而是相互依存,有各自的側(cè)重點(diǎn)。



02
為什么要做擬物化設(shè)計

簡單介紹過擬物化設(shè)計,再來討論一下我們?yōu)槭裁葱枰鰯M物化設(shè)計?

其實(shí)做游戲UI設(shè)計有三個發(fā)力點(diǎn),分別是2D原畫設(shè)計、3D模型設(shè)計和UI動效設(shè)計。我倒是覺得,在現(xiàn)在這么“卷”的設(shè)計環(huán)境中,如果我們能使用組合能力來設(shè)計的話,會在行業(yè)中擁有更高的競爭力。



今天要講的擬物化設(shè)計,也會以2D原畫和3D模型能力為基礎(chǔ)進(jìn)行介紹:

上面說過,擬物化就是模擬真實(shí)的物件并進(jìn)行藝術(shù)加工,比如說看上面這張圖,這個《爐石傳說》的盒子由木頭、寶石、金屬等部件組成,模擬了現(xiàn)實(shí)中的一些物品。但其中的設(shè)計造型、質(zhì)感和光影,則是設(shè)計師利用夸張或者變形之類的手段,進(jìn)行藝術(shù)加工處理而來的,這些設(shè)計會帶來現(xiàn)實(shí)中得不到的效果。


再比如說,上圖里的斧頭,在現(xiàn)實(shí)中我們覺得可能很有質(zhì)感,花紋也非常細(xì)膩,但直接當(dāng)一個游戲圖標(biāo)的話,可能會有點(diǎn)出鏡,跟畫面難以結(jié)合。

因此,我們在繪制時,可以對它的形狀特征進(jìn)行歸納,比如說斧柄、斧刃,然后賦予它一些環(huán)境、光線等,這些東西在現(xiàn)實(shí)中刻意營造也不一定有感覺,但在設(shè)計上都是可以慢慢調(diào)整的。

就好比炒一鍋菜,不同廚師能調(diào)制不同的味道,這也是擬物化設(shè)計的一個特點(diǎn)。

而其另一個特點(diǎn),則是能給受眾帶來沉浸式感受,比如我們看下面這張圖,圖中這個帥哥戴著耳機(jī),想象自己在一個音樂演唱會里面,便營造出了這種氛圍和感覺。

因此,我們在做視覺設(shè)計的時候,也需要通過一些不同元素的組合,將視覺界面賦予情境化感受。

我們看下圖,這是我們給六年前的游戲做的一個商店頁面,拿它跟策劃交流的時候,他們覺得挺好看,沒有什么問題。

但其中有一個策劃提出來,說既然玩家是來消費(fèi)的,那能不能把商店裝修得好一些,讓玩家買得開心。

我覺得這個策劃說得挺有道理的,因?yàn)橐恍┰O(shè)計必須要跟游戲整體感覺匹配,我也在現(xiàn)實(shí)生活中去找一些靈感,比如說電影里的一些藥鋪、日式奶茶店、當(dāng)鋪等等,這些能否引用到我們的游戲中呢?

下圖就是商店最后改版的樣子,我們對貨物大小進(jìn)行收縮;然后因?yàn)楫?dāng)時這款游戲叫《企鵝總動員》,我們就把企鵝設(shè)計成商人站在旁邊;燈光則是從下打上來的,這些都是來營造商店的神秘、稀奇的感覺。

后來他們看到這個界面,也感覺就是想要的效果。

因此,我們在做視覺設(shè)計時,可以多結(jié)合現(xiàn)實(shí)生活中的場景,給玩家?guī)硪恍┧枷肷系墓缠Q。



03

擬物設(shè)計的四大原則


前面講了從普通表達(dá)到情景化表達(dá),那么我們到底是怎么去做的?需要注意什么?這里我用四點(diǎn)來闡述。

首先是主次突出,畫的東西不能喧賓奪主。我們看下圖左側(cè)的游戲商場界面,四周的裝飾畫得很精致,但是太多了,我們玩家點(diǎn)進(jìn)來可能連商品都看不到,浮夸的裝飾影響到了界面的功能性。

右側(cè)的商城界面是《暗黑破壞神3》的,這已經(jīng)是10年前的一張圖了,現(xiàn)在看起來依舊非常精美,而且信息展示得也很直觀,因?yàn)樗难b飾是相對推后的,不像左邊那張圖一樣全部往外溢出來。

第二則是統(tǒng)一性。就是界面設(shè)計的風(fēng)格結(jié)構(gòu)、色彩要和游戲的主題一致。

第三是習(xí)慣和認(rèn)知。最突出的一種表現(xiàn)就是不同時代背景下人群的觀念,比如下圖是兩組美女,左邊的BLACK PINK,老一輩可能都不知道四個人長得有什么區(qū)別;而右側(cè)這些美女站在一起的時候,年輕一輩可能會覺得服裝統(tǒng)一、不好看,但老一輩卻可能知道每個美女的辨識度特征。

因此,我們在做游戲時,也需要考慮不同玩家的審美能力和接受度,探索玩家的認(rèn)知。不是說我們覺得好看就這樣畫,比如我這個游戲是給低齡兒童體驗(yàn)的,卻做得危險恐怖,那定位肯定是錯的。

第四是代表玩家說話,游戲可以通過一些造型、色彩布局來影響玩家的心理。比如下圖的暗紅色警告標(biāo)志和彎曲的鐵絲,就能給玩家營造一種緊張、危險的氣氛。


再比如《糖果傳奇》使用了明亮、高飽和度的顏色和Q版的人物剪影,展示出這是一款休閑游戲。

下圖是《暗黑破壞神3》的大天使馬薩伊爾,輪廓用彎曲和陰暗的藍(lán)色線條勾畫,使人物看起來修長,整體有種肅殺和詭異的氛圍。

上面這三款不同類型的游戲,通過不同的元素、顏色搭配,給玩家呈現(xiàn)出他們想要表達(dá)的視覺感受。



04

擬物設(shè)計的五大模塊


前面已經(jīng)說了設(shè)計的四個原則,在實(shí)際操作中我們還需要注意以下五個模塊。


首先是外輪廓。我把外輪廓分為了兩類,圓角的輪廓感覺比較Q萌,適合在卡通類、休閑類的游戲;而幾何形、有切割感和硬度的輪廓,可能是用在寫實(shí)游戲上,比如戰(zhàn)爭、科幻題材。

第二是體積感,顧名思義就是我們所畫東西的大小,是薄的還是厚的、是單一還是組合?

比如我們看下面兩個勛章,左邊的是體育類的勛章,整體比較簡約,右邊的是《暗黑破壞神》的惡魔獵手勛章,這種設(shè)計可能會用家族的頭盔、帽兜、骨頭等元素組合,來表達(dá)種族特征,這兩個勛章的設(shè)計沒有好壞,只是在使用場景的選擇上不同。

第三是空間層次。這里我解釋為前、后、左、右、上、下之間的距離,主體和陪襯的關(guān)系。比如我們要畫一個東西,它的主體就應(yīng)該突出一些,要比襯底高一些,還要注意有組織、有虛實(shí)、有景深、有穿插,這樣我們的畫面才會更豐富。

第四個點(diǎn)是材質(zhì)。材質(zhì)的話,大家可能會覺得在流程上比較靠后,但我們?nèi)绻胩岣呃L制精度,或者有別于其他設(shè)計時,選材質(zhì)也是一個很重要的環(huán)節(jié)。

這里我講一下選材質(zhì)需要注意什么,一般包括表面色彩、紋理、光滑度、透明度、反射、折射、發(fā)光度等情況。

比如上圖的石頭材質(zhì),為什么叫石頭材質(zhì)?因?yàn)椴馁|(zhì)上有一些隨機(jī)的破損,感覺是天然形成而非人工刻意為之的,此外,石頭也會長青苔、或者形成其他不同顏色的礦物質(zhì),所以在我們畫的時候,就要考慮到這個材質(zhì)能聯(lián)想出什么場景。

再比如金屬材質(zhì),想象中應(yīng)該是比較光滑,紋路也比較規(guī)范,但是隨著時間流逝也會生銹,這些都是自然法則,畫的時候需要注意。

再比如上圖的實(shí)際案例,沒有材質(zhì)填充的圖1,整體的皮膚、骨頭和金屬部分區(qū)別并不大;而填充材質(zhì)后的圖2,皮膚的反射光會均勻一些,金屬會強(qiáng)烈一些,這些都是材質(zhì)特征。

這里有個總結(jié),畫材質(zhì)的時候,要注意貼合物體本身,而不是要把材質(zhì)的屬性畫得非常明顯。另外,平時多去尋找一些現(xiàn)實(shí)中的材質(zhì),能幫助我們做出更精美的設(shè)計。

第五個點(diǎn)就是光影,大家看下圖的燈泡,它發(fā)出的光照在地上,地面也會給燈泡反光,畫東西時也一樣,需要給畫面添加光線才會有一些生氣。


比如還是《爐石傳說》這張圖,它是右上角有一道光打下來,并且有逐漸由暖到冷的變化,而冷光又會反射到金屬上。這種細(xì)節(jié)豐富的設(shè)計,需要設(shè)計師用心地、模擬自然地處理。

但在現(xiàn)實(shí)生活中,你會發(fā)現(xiàn)這東西其實(shí)沒有那么好看的,這也是擬物化設(shè)計的最大特征。


就像下圖,是《全民超神》里面的一個圖標(biāo),它在有光影和沒有的時候是不一樣的:天使光環(huán)相當(dāng)于畫面上的光源,它在照射到翅膀上、底盤上、帽子上都是有符合自然的效果的,光把畫面銜接成一體,如果沒有光,可能每個物件都是獨(dú)立的。


05

具體案例講解:如何尋找設(shè)計靈感


說完了四大原則和五大模塊,我再用一些案例,給大家講一下實(shí)際操作中如何尋找設(shè)計靈感。


我們來看第一個案例,這是我當(dāng)時在《全民超神》的圖標(biāo)需求,叫“萬魔峽谷”,早期的時候,我們會對它進(jìn)行關(guān)鍵詞提取并羅列出來,例如顏色、死亡、惡魔、邪惡等元素,然后繼續(xù)發(fā)散更具體的關(guān)鍵詞。


當(dāng)把關(guān)鍵詞發(fā)展得差不多時,就可以找一些東西來輔助你完成作品的初稿,比如說找一些包含羊頭、蝙蝠、鐵鏈等元素的參考圖。



用最快的素描方法將他們結(jié)合起來形成草圖,之后可以去找我們的上游,詢問這樣的草圖形式是否符合需求,如果確認(rèn)的話就可以繼續(xù)往下走。


確認(rèn)草圖后,我們需要按照上述講的五大模塊進(jìn)行精修,比如他的輪廓還是比較潦草的,體積感也不突出,材質(zhì)上也需要進(jìn)一步表達(dá)。

我們看一下最終成品,它上面還打了光影,把圖標(biāo)的骨頭、金屬等組件融為一體,布料前后的材質(zhì)也做了區(qū)分,來豐富圖標(biāo)的不同質(zhì)感的細(xì)節(jié)。

第二個案例,是《全民超神國際版》的三個圖標(biāo),他的設(shè)計流程和原則跟國內(nèi)版一樣,不過國際版會更多追求全球化,走比較精美的路線,圖標(biāo)的材質(zhì)也非常細(xì)膩,就像3D的,但其實(shí)這些都是手繪完成的。



上面是圖標(biāo)的案例,我們現(xiàn)在來講界面設(shè)計,因?yàn)橐粋€圖標(biāo)不能帶來情景化的感受。

上圖的勝利界面設(shè)計中,左邊的小圖是交互稿,右邊則是第一版設(shè)計的視覺稿,雖然視覺稿非常完美地將交互的功能闡述出來了,但我覺得比較普通,因?yàn)楹芏嘤螒虻膭倮缑娑伎梢赃@么做。

那么我們按照上述聯(lián)想的方法,關(guān)于“勝利”,我們很容易聯(lián)想到凱旋、號角、高頭大馬、榮譽(yù)等關(guān)鍵詞,然后參照著現(xiàn)實(shí)生活中勝利歸來的場景。


此外,我還會分析設(shè)計元素的背景故事,做一些跟故事和IP關(guān)聯(lián)的設(shè)計方法。上圖的游戲是《我的王朝》,是一款中世紀(jì)題材SLG,因此我們在聯(lián)想時也要結(jié)合游戲背景和題材。



我們看下面的成品圖。首先右側(cè)的信息必須保留,左側(cè)就可以有一些設(shè)計,我當(dāng)時想的便是這種“國王騎著高頭大馬,指著劍勝利凱旋”的視覺體驗(yàn);右側(cè)的“勝利”兩字旁邊也設(shè)計了長號、月桂、雄獅之類的元素裝飾,在西方,雄獅一般都是皇族的象征,我們便將其和其他代表勝利的元素相結(jié)合。


這里有個非常重要的點(diǎn),設(shè)計并不只是滿足產(chǎn)品或交互的基本功能,有經(jīng)驗(yàn)的設(shè)計師也會考慮是否有趣、甚至附有靈魂。



再看第二個場景設(shè)計的案例,上圖是《PUBG MOBILE》“黑五”運(yùn)營活動的界面,但我們沒有采用常規(guī)的“抽獎券”形式進(jìn)行售賣,而是想探索出不一樣的設(shè)計。

于是我們對“黑五”進(jìn)行了一些背景調(diào)查,當(dāng)時美國記賬方式比較特別,是用黑色字體代表盈利,用紅色字體代表虧損;此外,當(dāng)?shù)厝艘捕紩诠?jié)日來臨前的晚上,趁商品低價時進(jìn)行囤貨,換句話說,晚上是商人盈利的時候,而且用黑色字體記賬,這便是“黑五”的來源。

我們對這個背景進(jìn)行關(guān)鍵詞提取,黑夜一般需要燈光,當(dāng)時又是七八十年代,因此我們加入了懷舊酒吧的感覺和霓虹燈元素,把獎券界面改成了一個復(fù)古的DVD形態(tài)。

DVD上的“黑五”折扣數(shù)字以跳動狀態(tài)展示,商品品質(zhì)也和霓虹燈管的色調(diào)結(jié)合,不會因?yàn)橥怀鲎仙焚|(zhì)、藍(lán)色品質(zhì)而刻意變色,這是非常符合邏輯的,玩家給予的反響和運(yùn)營數(shù)據(jù)也超出預(yù)期。

第三個案例是《PUBG MOBILE》和《地鐵2033》聯(lián)動活動的任務(wù)界面。我認(rèn)為如果采用扁平化設(shè)計(如下圖),會使界面顯得比較普通、缺少趣味性。

那么我們先分析兩款游戲的共通之處,發(fā)現(xiàn)它們的背景和設(shè)定頗為相似,都是末世題材,充滿了戰(zhàn)損和殘破的場景感。隨后我們以此提煉出相關(guān)元素和設(shè)計參考圖,例如地鐵站的老設(shè)備、破舊鐵質(zhì)等。

我們看一下最終成品(如下圖),這是一個復(fù)古的、類似于電視機(jī)的界面設(shè)計,我們將右上角的小扳手和下方的頁簽結(jié)合起來,玩家無論是扳動扳手還是點(diǎn)擊頁簽都可以切換任務(wù)界面。

這個界面在推出后,有策劃反饋說,玩家對小扳手的點(diǎn)擊率很高,這個交互設(shè)計也取得了不錯的反響。

再看最后一個案例,也是《PUBG MOBILE》的一次活動,要出五款皮膚給玩家獲取,角色是一些黑夜中執(zhí)行正義的形象,像烏鴉、游俠之類的。

接到這個需求后,我們對于角色的背景、身份和性格等進(jìn)行了研究調(diào)查,設(shè)計出了四個界面方案:


第一版中,五個角色中的隊長是飛起來的,其余四個隊友站在兩側(cè);第二版則是扁平化設(shè)計;第三版是模擬出角色被封印住,需要玩家解救的形式,我當(dāng)時還挺推崇,但是這個方案沒辦法展示出角色的整體形象;第四版方案則是營造出了一種類似教堂的神秘氛圍,五個角色逆光背對著玩家,整體很有儀式感。


確定為第四版方案后,我們開始設(shè)計抽獎界面,下圖是我們所采用的3D抽獎轉(zhuǎn)盤,在設(shè)計的時候需要分析轉(zhuǎn)盤在抽獎時如何表現(xiàn),比如轉(zhuǎn)盤的材質(zhì)、花紋、然后到獎品的三維面、模型如何繪制等等,這個過程都需要去摸索。


三維拆解圖

玩家抽獎時可以選擇獎池,抽獎開始后,內(nèi)圈的五個角色胸像激活變亮,不同獎池對應(yīng)不同角色胸像,隨后這個類似教堂的場景會從后面打開門,光也會照進(jìn)來,營造出英雄得到感召的儀式感,也使整個界面擁有較強(qiáng)的渲染力和沉浸感。




下圖便是今天分享內(nèi)容的一些總結(jié),四個設(shè)計原則、設(shè)計方法的五大模塊和一些案例分析,這些設(shè)計理念還是需要我們多去思考和嘗試的。



關(guān)于設(shè)計靈感的獲取,我個人覺得還是要多玩游戲,多看電影,多做自己喜歡的事情。





06

QA環(huán)節(jié)


Q:策劃提出一些具體的建議,會對UI工作有什么影響嗎?

WenBin:策劃提需求時,如果能提出更明確的需求取向的話,對美術(shù)來說是正向的。但需要盡可能把功能點(diǎn)、信息點(diǎn)都提清楚,這樣可以避免在界面效果圖成型后,還要做反復(fù)的修改和增減的情況。




游戲葡萄招聘產(chǎn)業(yè)記者/內(nèi)容編輯,

點(diǎn)擊「閱讀原文」可了解詳情


上海人才戰(zhàn)廣深人才戰(zhàn)二次元用戶分層
英雄聯(lián)盟手游從暴雪到天美哈利波特美術(shù)
崩壞新作光明記憶原神人設(shè)

熱門課程推薦

熱門資訊

請綁定手機(jī)號

x

同學(xué)您好!

您已成功報名0元試學(xué)活動,老師會在第一時間與您取得聯(lián)系,請保持電話暢通!
確定