游戲網(wǎng)頁是非常受玩家歡迎的，網(wǎng)頁游戲不需要下載，直接在網(wǎng)頁上就可以進(jìn)行游戲操作，真的是非常省事，下面我們跟隨小編一起來了解一下游戲網(wǎng)頁設(shè)計(jì)的相關(guān)資料吧。

游戲網(wǎng)頁設(shè)計(jì)原則

一、視覺流的引導(dǎo)

　　視覺流，就是我們在查看單個(gè)界面時(shí)的視覺流程。暫且先不考慮手勢的熱區(qū)范圍，單從眼動(dòng)軌跡來看，眼睛對于物體的關(guān)注本身是有一定的視覺規(guī)律的，比如最簡單的從上到下從左到右的規(guī)律。一般而言，我們在設(shè)計(jì)頁面的時(shí)候會(huì)盡量考慮人眼的視覺規(guī)律，比如最重要的功能不要放在視覺盲區(qū)范圍內(nèi)。但是在這里筆者要強(qiáng)調(diào)的是，眼睛的視覺流是可以通過對界面控件合理的層級(jí)羅列，恰當(dāng)?shù)牟季謥磉M(jìn)行有效引導(dǎo)的。

二、相似相近原則

　　風(fēng)格統(tǒng)一，要保證同一類圖標(biāo)外形上的一致，即使按鈕因?yàn)樽煮w長短而變得長短不一，但是至少從外形看起來是同一類的。如果按鈕從外形上看不出來是同一類，在每一個(gè)圖標(biāo)的文字下方增加同樣的灰色漸變半透底圖，這種由部分到整體的做法很好的保證了這些功能圖標(biāo)的一致性。如果你的游戲走的是3D真實(shí)風(fēng)格，那么游戲里就一定不能出現(xiàn)一個(gè)二次元妹子，可以考慮增加異次元元素，但是一定要經(jīng)過美術(shù)的專業(yè)處理，讓整個(gè)游戲的畫風(fēng)不至于那么奇怪。里面有很多不同的服裝風(fēng)格，有古風(fēng)的，現(xiàn)代的，西方的，中式的，日式的等等等等，但是做過統(tǒng)一化處理之后，一點(diǎn)違和感都沒有。

　　同類相近，同一類型控件的位置要離的近一些，即使沒有圖案的框選，也能知道它們屬于同一類按鈕。主界面上的功能也很多，但并不讓人覺得雜亂無章，同類功能的按鈕都擺在一起，不同類型的按鈕之間也沒有出現(xiàn)相互干擾。最忌諱沒有規(guī)律的亂擺控件，會(huì)造成玩家找不到可點(diǎn)擊控件的困惑，還會(huì)對功能產(chǎn)生迷茫，不知道該干什么。

（圖片來自網(wǎng)絡(luò)）

三、色彩偏向和色彩層次

　　色彩偏向，在界面設(shè)計(jì)中，都應(yīng)該有一個(gè)色彩的偏向，也就是主色調(diào)。在任何一個(gè)畫面中，色彩都不宜過多，不同色系最好不要超過3種。這就好像穿衣服一樣，除非是高級(jí)設(shè)計(jì)師，擁有很好的配色駕馭能力，很少犯錯(cuò)那種，一般人拍在身上的顏色越多越花哨，整個(gè)檔次就越low。分享一個(gè)小技巧：在游戲界面中，可以使用黃金分割率來做出劃分，主色調(diào)約占60%，輔助色占30%，突出色占10%。

　　色彩層次，在網(wǎng)頁網(wǎng)站設(shè)計(jì)中，因?yàn)榫_度要求很高，色彩的亮度和面積有個(gè)反比應(yīng)用關(guān)系，這很重要，因?yàn)樗苯記Q定了UI原色的主次關(guān)系問題。越亮的、純度越高的顏色在使用面積上慎之又慎，否則就會(huì)造成喧賓奪主以及對玩家視覺上的折磨，為了達(dá)到視覺上的等同效應(yīng)，亮度、冷暖不同的顏色也要在面積上進(jìn)行微調(diào)。背景色經(jīng)常表現(xiàn)為無彩色(黑、白、灰)，或者低飽和度的色彩?？偟膩碚f，面積越小的顏色要越亮越純，面積越大顏色就要增加灰度或者降低亮度，色彩的層次出來了整個(gè)界面的信息傳遞就會(huì)很舒服。

四、字體節(jié)奏

　　很多人會(huì)覺得游戲中畫面最重要，字體是信息傳遞的輔助角色，這就錯(cuò)了，內(nèi)容的可讀性永遠(yuǎn)是排在首位的。我們在看圖標(biāo)的時(shí)候會(huì)發(fā)現(xiàn)很多圖標(biāo)的可辨識(shí)度并不是很高，但是一旦添加了字體，馬上就可以理解功能。好的字體設(shè)計(jì)，形狀和大小都會(huì)直接影響到玩家接收信息的速度。為什么說是字體節(jié)奏?同一個(gè)頁面中，使用同一字號(hào)，同一類型的字體，會(huì)讓信息的傳達(dá)變得冗雜而費(fèi)力。但是如果給字體在信息重要度的基礎(chǔ)上增加點(diǎn)變化，馬上節(jié)奏感就出來了，信息的層級(jí)也一目了然。所以根據(jù)不同的功能場景，使用不同的字體樣式也是極為重要的。

（圖片來自網(wǎng)絡(luò)）

五、目標(biāo)導(dǎo)向原則

　　目標(biāo)導(dǎo)向，在游戲中，每一個(gè)界面都是具有相應(yīng)目標(biāo)功能的，玩法也好養(yǎng)成也罷，界面展示的信息必須是這個(gè)功能需要讓玩家獲得信息。要明確自己的目的，盡量不要為了目的以外的原因影響你的設(shè)計(jì)。除了這個(gè)界面功能最原始的目的，你每想要加一個(gè)東西的時(shí)候都要反復(fù)的問自己：加了額外的東西有什么好處?會(huì)不會(huì)引發(fā)某些問題?如果不加會(huì)有什么壞處?多個(gè)維度好好想想，優(yōu)秀的設(shè)計(jì)都經(jīng)得起反復(fù)推敲。比如，充值界面的左側(cè)為什么一定要加個(gè)白無常?玩家會(huì)在充值的時(shí)候抽個(gè)空來欣賞你的立繪嗎?另外同一張立繪在多個(gè)界面中反復(fù)使用，你是有多缺乏設(shè)計(jì)想法，一定要在每個(gè)頁面中都加一張立繪來體現(xiàn)你有進(jìn)行過設(shè)計(jì)。這樣做的后果是：不僅降低了立繪本身的價(jià)值，也減慢了游戲資源的加載速度，并且讓界面變得復(fù)雜不易識(shí)別，造成玩家的審美疲勞。

　　功能可視化，寸土寸金的界面里面，為什么要有幾個(gè)完全相同的東西存在，既占地方又影響玩家理解。如果表示不同的功能，那么就應(yīng)該在圖標(biāo)上也作出區(qū)分。舉個(gè)我自己遇到的小例子，游戲的生產(chǎn)界面，所有物品擺在那里，同一個(gè)圖案的圖標(biāo)在同一個(gè)頁面里面擺了三次，并且沒有相關(guān)圖案和文字說明的引導(dǎo)，會(huì)玩家很迷茫，完全不知道要怎么操作，其實(shí)我一個(gè)“所謂”的策劃自己也搞了好久才明白是個(gè)什么操作。最后的調(diào)優(yōu)方案是：增加指向箭頭，對原料進(jìn)行框選，對目標(biāo)物品的顯示進(jìn)行排版上的調(diào)整。

（圖片來自網(wǎng)絡(luò)）

總結(jié)反思：策劃制作好了游戲邏輯，不能把邏輯直接擺到玩家面前，這里面需要有一個(gè)功能可視化的過程。玩家并不關(guān)心你的生產(chǎn)過程是什么，他也并不能理解界面里面同一個(gè)圖案的3個(gè)圖標(biāo)，為什么一個(gè)是配方，一個(gè)是圖樣，另一個(gè)是物品。你只需要告訴玩家我點(diǎn)擊目標(biāo)物品，湊夠了原料和金錢，點(diǎn)制作能不能得到就可以了。

　　單一頁面精簡功能，同一個(gè)頁面上可實(shí)現(xiàn)的功能最好不要超過三個(gè)，功能太多，玩家到了這個(gè)頁面潛意識(shí)會(huì)特別煩躁。因?yàn)樵疚业搅艘粋€(gè)頁面得到想要的功能就可以了，你這樣設(shè)計(jì)，讓我對目標(biāo)功能的需求產(chǎn)生了游離，于是我要想一下到底要做什么，也就是說你成功調(diào)動(dòng)了玩家的選擇困難癥。

游戲網(wǎng)頁設(shè)計(jì)相對于游戲軟件設(shè)計(jì)來說還是相對比較簡單的，不過小編還是要提醒大家在做游戲網(wǎng)頁的設(shè)計(jì)的時(shí)候一定要注意游戲界面的整體性哦!