很久沒有發(fā)帖子了,距離上次發(fā)帖貌似有4個(gè)多月。。。(KUSO,工作忙?。。。?/font>
4個(gè)月時(shí)間基本都在研究 :游戲交互,游戲UI設(shè)計(jì),等我們很多原畫不感冒的區(qū)域。。。。
其實(shí)游戲美術(shù)在我看來(lái)遠(yuǎn)遠(yuǎn)不只是把畫畫好。畫好畫是一定的,修行慢慢來(lái)別急,但是游戲美術(shù)塊很大,就像一個(gè)木桶里面裝滿了水,這個(gè)木桶就是游戲美術(shù)師的整體實(shí)力,原畫這塊板子很長(zhǎng),但是UI這塊很短,同樣你的水滿不了多少,就是我們所說(shuō)的短板!其實(shí)要把握整個(gè)游戲的美術(shù)基調(diào)光有原畫真的遠(yuǎn)遠(yuǎn)不夠,原畫再牛逼,沒有好的3D還原和UI展示以及動(dòng)畫的配合,再牛逼的原畫也沒有用。到時(shí)候只能團(tuán)隊(duì)起內(nèi)訌。這不可取啊~畢竟真正玩家玩到的是游戲的內(nèi)容,畢竟游戲產(chǎn)品才是我們最后呈現(xiàn)在玩家面前的東西嘛。說(shuō)多了,大家都懂的??!
下面這個(gè)是我在做UI美術(shù)時(shí)經(jīng)常會(huì)去注意的一些要點(diǎn),這些要點(diǎn)的作用是在和動(dòng)畫,程序,策劃等隊(duì)友們溝通時(shí)經(jīng)常會(huì)用到的一些點(diǎn),我把這稱為G點(diǎn)(哈哈)哈哈主要有8點(diǎn),溝通時(shí)最怕砸不中對(duì)方的G點(diǎn),這樣會(huì)增加溝通成本,增加成本的事咱不干,所以拿出來(lái)分享一下這8個(gè)G點(diǎn),這八點(diǎn)是我的隊(duì)友們總結(jié)并告訴我的,并非我獨(dú)創(chuàng),但我有必要拿出來(lái)配上圖,講的更明白一下,可能還是有些籠統(tǒng),細(xì)的東西在我們公司的UI部門里,這是個(gè)強(qiáng)大的部門,他們非常專業(yè),現(xiàn)在也缺人,想進(jìn)的聯(lián)系我~(我跟他們老大很熟,好基友嘛哈哈)
廢話少說(shuō):
G點(diǎn)一. 簡(jiǎn)單
游戲界面應(yīng)以簡(jiǎn)單,樸素為主,大家最忌諱就是各種菜單面板鋪滿天飛,各色文字很難閱讀,分辨,顏色紛雜,毫無(wú)主次,令人眼花繚亂.
你看到上面這種畫面你想玩不
最終幻想14做的就很好,有很好的功能區(qū)域劃分。
請(qǐng)對(duì)比上面某游戲和最終幻想14的游戲畫面下方正中央的icon區(qū)域,你會(huì)發(fā)現(xiàn)一個(gè)有趣的現(xiàn)象,上面某游戲在icon周圍外邊框用了很搶眼的金黃色,還有龍頭浮雕等元素,而最終幻想14做的很簡(jiǎn)約,(有人會(huì)說(shuō)暗黑3不也有這些花紋嘛大哥~仔細(xì)看下人家UI上的背景花紋是處在暗色調(diào)里的好不,那個(gè)色調(diào)根本不搶icon的主角地位,你UI背景太亮了太搶icon的地位~~就會(huì)造成UI界面過(guò)花呀) (抱歉我懶一下,手動(dòng)度娘下暗黑三的UI吧)
游戲進(jìn)入不超過(guò)3步。
步數(shù)多了玩家每次就不想進(jìn)這個(gè)游戲了。
在ios游戲上大多數(shù)游戲進(jìn)入界面只需2-3步 ~真的很快呦
對(duì)話框的深度不要超過(guò)3層
菜單層級(jí)在3-4層之間不會(huì)太深太深阿拉會(huì)疼的~!開個(gè)玩笑太深會(huì)使用戶找不到方向,用戶玩這個(gè)游戲時(shí)絕對(duì)不會(huì)去找一個(gè)隱藏在4,5層彈窗里的功能的!??!
G點(diǎn)二. 友善
游戲的icon在縮小的時(shí)候清晰可見,減少文字的出現(xiàn),盡量用圖來(lái)說(shuō)話,隱藏復(fù)雜性。
游戲Dota2 的游戲界面 主要看下排圖標(biāo)處文字信息較少
Dota2 中的icon邊緣剪影非常清晰。
繪制游戲中的icon的要點(diǎn),1.讓主題邊緣清晰,2.主體在有限的空間里盡量飽滿,3.色彩飽和,高對(duì)比。4.不能太花,盡量簡(jiǎn)化內(nèi)容,和邊緣的復(fù)雜程度。(這些都是為了在icon縮小的情況下能很清晰的展現(xiàn))
(圖二)圖一icon構(gòu)圖飽滿圖二顯得很孤獨(dú)
適當(dāng)?shù)目鋸堊冃斡欣?/span>icon的飽滿
繪制步驟可以以草圖(主要解決2和4)------鋪色(主要解決3)-------清晰邊緣(主要解決1)
IOS上的APPicon更講究,這塊咱能扯上一天!
明顯區(qū)分功能數(shù)據(jù)
信息分區(qū)的好處在于玩家想要去找同種屬性的信息時(shí)不會(huì)去另外的區(qū)域去找,就像上圖星際爭(zhēng)霸2的UI一樣,要控制這個(gè)單位行動(dòng)你只會(huì)在最右邊的選擇單位行動(dòng)區(qū)去找,而不會(huì)去什么地圖區(qū)去找。
常用對(duì)話框之間的切換要在150毫秒到200毫秒之間
這點(diǎn)切記針對(duì)的是常用UI,部分不常用的UI可以動(dòng)下腦子,讓他出現(xiàn)的時(shí)候可以有點(diǎn)意思。
舉個(gè)例子吧,F(xiàn)F系列(最終幻想)里玩家對(duì)于查看自己信息,改變裝備等屬性菜單的切換都很快一定是在150毫秒到200毫秒之間 但是進(jìn)入戰(zhàn)斗時(shí)的切換會(huì)稍微慢點(diǎn),一般是一種較為動(dòng)感的動(dòng)畫,1是要加載場(chǎng)景2這種切換明顯將RPG探索部分和戰(zhàn)斗部分區(qū)分開。3是為進(jìn)入戰(zhàn)斗的感覺做一個(gè)鋪墊,(呵呵,更不要說(shuō)進(jìn)入boss戰(zhàn)前總得有一到兩段長(zhǎng)到爆的動(dòng)畫做鋪墊)
按鈕的注意事項(xiàng):
按鈕的制作應(yīng)當(dāng)明顯,讓玩家能感覺到這個(gè)東西是能點(diǎn)擊的。
部分按鈕我們會(huì)期待玩家去點(diǎn)擊,比如付費(fèi)按鈕(暗笑)這種按鈕我們盡量要做的誘惑性強(qiáng)一些 1.質(zhì)感2.色彩3.動(dòng)畫特效
對(duì)于質(zhì)感我要講一下水晶按鈕:
對(duì)于上圖和下圖的對(duì)比你會(huì)更想去點(diǎn)那個(gè)按鈕呢?
答案當(dāng)然是上圖了
上圖的質(zhì)感會(huì)讓你聯(lián)想到誘惑的美食:
人的食欲被質(zhì)感無(wú)形中調(diào)動(dòng)了起來(lái),所以水晶按鈕更具有誘惑你想去點(diǎn)的沖動(dòng)。
而且按鈕我們一定要做的是能按下去的感覺而不是平面的一張紙呦親~所以在按鈕一般會(huì)做的有體積一些。
按鈕色彩的選擇:
這點(diǎn)主要還是要和游戲的整體風(fēng)格搭調(diào):(暗黑三被選中的按鈕就用了紅色,未選中的用了無(wú)色相,因?yàn)槿思矣螒騏I整體的基調(diào)就是紅黑兩色,給你隱性的傳達(dá)巖漿,地獄,惡魔等感覺。咋又拿暗黑三說(shuō)事啊~度娘下吧)
這里提到一點(diǎn),我們注意以下兩種按鈕色彩給你傳達(dá)的情感:
綠色相對(duì)于紅色更能讓人聯(lián)想到前進(jìn)的感覺,所以,像類似于next之類的前進(jìn)感覺的按鈕可以設(shè)置為綠色,而不會(huì)設(shè)置為紅色。原理各位想想紅綠燈就知道了。色彩在這里起到串聯(lián)作用。
來(lái)吧,吐槽下圖吧。
G點(diǎn)三. 可容錯(cuò)
大部分游戲要有可讓玩家反悔的選項(xiàng),避免誤操作給玩家?guī)?lái)的不便啊~
還有啊,返回鍵啊,取消鍵啊 什么的都是可容錯(cuò)屬性啊~
G點(diǎn)四. 一致性
游戲UI風(fēng)格要和游戲中的內(nèi)容一致。
星際爭(zhēng)霸的3個(gè)種族分別做了3種UI,每個(gè)種族的特征都在UI上有所體現(xiàn)
人族的UI采用的視覺元素為直線切割,給人硬朗的感覺,而且現(xiàn)代工業(yè)也是采用了這種切割,一些元素會(huì)用到人族原畫上的元素。(此圖請(qǐng)對(duì)比機(jī)槍和UI 上的元素)
星際爭(zhēng)霸神族的配色采用黃色和藍(lán)色的配色,高貴未來(lái),神秘,采用的線條為曲線切割,帶有未來(lái)流線感。
蟲族的UI設(shè)計(jì)中采用暗棕色,有畸變生長(zhǎng)的元素。
下圖為我們以前做的忍者類再早前的版本,此版本的UI我可以說(shuō)不丑還算簡(jiǎn)潔,但是問題在于他并不像個(gè)熱血的忍者類游戲。感覺更像個(gè)冷冷的應(yīng)用類游戲,并不能讓玩家感覺到一進(jìn)來(lái)就能想象成火影忍者得世界(好吧我承認(rèn)是要山寨哪路多了)。
下圖是后來(lái)這個(gè)忍者類游戲的版本,我們可以看到在UI的配色上有了主次,以及引入了一些忍者世界的一些視覺元素,比如展示框的邊角處也用了手里劍等元素,UI底板用了木頭的紋理,但是UI感覺有些像應(yīng)用程序類的UI。UI傳達(dá)出的信息有些正式,不夠活潑。
下圖是接下來(lái)再次進(jìn)行修改后的這個(gè)游戲的UI界面, 在每個(gè)UI的展示上用了各種方法,比如上面的拉面店的UI我們把UI設(shè)計(jì)成類似于拉面菜單的樣子,武器店用了類似于鐵鎖以及硬朗的外框等能讓人聯(lián)想到鐵匠鋪的元素,當(dāng)然這些元素要符合第一個(gè)G點(diǎn)啦~
主界面場(chǎng)景
武器店和拉面店
在文件大小允許的情況下我們可以在彈窗上適當(dāng)?shù)淖鲂┗?,使游戲更加活潑,記住前提是文件大小允許(問我怎么知道文件大小允許不允許?問程序去~)
再者,信息呈現(xiàn)的位置也要保持一致性。
同級(jí)菜單的部分按鈕請(qǐng)保持位置一致,讓玩家養(yǎng)成習(xí)慣。
G點(diǎn)五. 功能優(yōu)先
重中之重啊 先確定方向,再進(jìn)行美化
開始設(shè)計(jì)時(shí)一定要是畫的是草稿啊親,千萬(wàn)別畫成成品啊,要不改動(dòng)成本太大了。
這和我們做設(shè)計(jì)時(shí)是一樣的,一定要先有樣稿!
美化的前提一定是不能讓游戲卡 這里一定要和程序策劃溝通好!
G點(diǎn)六. 習(xí)慣
不得隨意改變玩家習(xí)慣操作,這樣會(huì)造成玩家難于上手
比如HP一般是綠色MP一般是藍(lán)色
WASD的方向操作,E或者F為使用
美版PS3叉子鍵是確認(rèn)圓圈鍵是取消
日版PS3叉子鍵是取消 圓圈是確認(rèn)、
等等 。。。。
這需要很多游戲經(jīng)驗(yàn),所以,多玩游戲是必要條件。
G點(diǎn)七. 可擴(kuò)充
可擴(kuò)充功能邊框的設(shè)計(jì)要點(diǎn):1.重復(fù)性的簡(jiǎn)單背景,千萬(wàn)別把背景設(shè)計(jì)的過(guò)于花哨從而導(dǎo)致擴(kuò)充功能時(shí)抓瞎。2.功能區(qū)分層
dota2 這個(gè)區(qū)域在改變屏幕尺寸時(shí)會(huì)有遮蓋!但不會(huì)對(duì)信息產(chǎn)生影響
G點(diǎn)八. 視覺完美
在有游戲畫面的界面中盡量使UI沒有特別的重心,最好做到無(wú)形入化。
在UI設(shè)計(jì) 視覺元素的用法時(shí)要拿捏適度,不能因?yàn)橐曈X元素過(guò)多而影響游戲的體驗(yàn),也不能因?yàn)闆]有視覺元素而降低游戲整體的傳達(dá)。
下圖為老版本的那個(gè)忍者游戲(因?yàn)橛螒蜻€沒正式發(fā)布,所以我先不提真名,請(qǐng)諒解) 在UI上有很大的缺陷
以上是我的一些經(jīng)驗(yàn),其實(shí)在UI這塊還有很多細(xì)節(jié),而我本人的能力有限,也只能先寫這么多,大家多多包涵,有問題請(qǐng)直接指出或補(bǔ)充,互相學(xué)習(xí)。
最后我再?gòu)U話一點(diǎn):游戲美術(shù)在團(tuán)隊(duì)中的作用其實(shí)是很大的這取決于我們的能力,這個(gè)能力絕對(duì)不止是在繪畫上追求極致。 進(jìn)入這行先試問自己真的喜歡游戲嗎?還是只是喜歡繪畫?這是不同的兩條路,我并沒說(shuō)前者比后者牛逼,絕對(duì)沒有,后者牛逼的照樣屌?。ㄉ镀拼朕o啊)只是我選擇的是前者,所以~走下去吧~~少年他氣呦~~