游戲UI 第3章　網(wǎng)頁(yè)游戲UI設(shè)計(jì)學(xué)習(xí)課件

3.1.1網(wǎng)頁(yè)游戲的優(yōu)勢(shì)

3.1了解網(wǎng)頁(yè)游戲網(wǎng)頁(yè)游戲又稱為Web游戲和無(wú)端網(wǎng)游，是可以直接使用瀏覽器玩的游戲，不需要下載任何客戶端，任何地方、任何時(shí)間、任何地點(diǎn)、任何一臺(tái)能上網(wǎng)的電腦都可以快樂(lè)的進(jìn)行游戲，非常適合上班一族。網(wǎng)頁(yè)游戲經(jīng)過(guò)多年的發(fā)展，已經(jīng)趨于成熟，在網(wǎng)頁(yè)游戲的界面和動(dòng)態(tài)交互過(guò)程中，玩家?guī)缀跻呀?jīng)難以區(qū)分這是瀏覽器上的網(wǎng)頁(yè)應(yīng)用，還是一個(gè)獨(dú)立的游戲程序。1．便利性進(jìn)行網(wǎng)頁(yè)游戲不需要購(gòu)買或者安裝任何的客戶端游戲軟件，這是它與傳統(tǒng)的電視/電腦游戲最大的區(qū)別。傳統(tǒng)的網(wǎng)絡(luò)游戲，無(wú)論是大型游戲還是休閑游戲，都需要下載并安裝相應(yīng)的游戲客戶端，對(duì)電腦配置要求也越來(lái)越高，而且運(yùn)行游戲需要占用一定的內(nèi)存和空間，很難同時(shí)進(jìn)行其他工作或娛樂(lè)。而網(wǎng)頁(yè)游戲則僅需要使用瀏覽器就可以隨時(shí)隨地進(jìn)行游戲，不需要下載安裝任何客戶端，在不影響新聞瀏覽、聊天等其他網(wǎng)絡(luò)行為的同時(shí)，體驗(yàn)全新的網(wǎng)頁(yè)游戲理念的娛樂(lè)。

2．跨平臺(tái)區(qū)享網(wǎng)頁(yè)游戲不單單停留在網(wǎng)頁(yè)表現(xiàn)形式上，它還將會(huì)向手機(jī)WAP和手機(jī)客戶端圖形網(wǎng)游方式聯(lián)合發(fā)展，是跨平臺(tái)的，兩個(gè)平臺(tái)訪問(wèn)的是同一服務(wù)器，離線后，玩家可以通過(guò)手機(jī)繼續(xù)進(jìn)行且資料庫(kù)共享。3．很強(qiáng)的用戶粘黏性因?yàn)榫W(wǎng)頁(yè)游戲具有很高的便利性，所以網(wǎng)頁(yè)游戲具有很強(qiáng)的用戶粘黏性。只要打開(kāi)瀏覽器進(jìn)入相應(yīng)的游戲網(wǎng)頁(yè)即可進(jìn)入游戲，其進(jìn)入游戲的方式非常簡(jiǎn)便，在方便性上比QQ游戲有過(guò)之而無(wú)不及。3.1.2網(wǎng)頁(yè)游戲的用戶群網(wǎng)頁(yè)游戲是一種新型的游戲模式，由于網(wǎng)頁(yè)游戲不需要客戶端，打開(kāi)網(wǎng)頁(yè)就能玩，相對(duì)于網(wǎng)絡(luò)游戲有著很大的便利性，所以網(wǎng)頁(yè)游戲非常適合大多數(shù)人群的操作。并且大多數(shù)網(wǎng)頁(yè)游戲都比較簡(jiǎn)單，通過(guò)鼠標(biāo)和鍵盤即可進(jìn)行游戲操作，不需要任何的外部設(shè)備，并且在游戲進(jìn)行過(guò)程中，通常都會(huì)設(shè)置相應(yīng)的游戲提示，幫助玩家更好的進(jìn)行游戲。3.1.3網(wǎng)頁(yè)游戲的分類網(wǎng)頁(yè)游戲和網(wǎng)絡(luò)游戲的分類大體上是相同的，但是網(wǎng)頁(yè)游戲因?yàn)槠浔旧淼奶厥庑缘年P(guān)系，其類型比網(wǎng)絡(luò)游戲更加豐富。目前網(wǎng)頁(yè)游戲大致可以分為“戰(zhàn)爭(zhēng)策略類”、“角色扮演類”、“模擬經(jīng)營(yíng)類”、“模擬養(yǎng)成類”和“休閑競(jìng)技類”5種類型。1．戰(zhàn)爭(zhēng)策略類戰(zhàn)爭(zhēng)策略類網(wǎng)頁(yè)游戲也可以叫做策略角色扮演。策略角色扮演的特點(diǎn)在于戰(zhàn)斗系統(tǒng)上，敵我雙方都有若干個(gè)角色組成的作戰(zhàn)單位，在地圖上按照自身的能力和限定規(guī)則進(jìn)行移動(dòng)、支援或攻擊，以達(dá)成特定的勝利條件。但是現(xiàn)在隨著游戲多元化的發(fā)展，目前的戰(zhàn)爭(zhēng)策略類網(wǎng)頁(yè)游戲還包含了經(jīng)營(yíng)、外交、養(yǎng)成等特色在里面，豐富了游戲的可玩性。2．角色扮演類角色扮演網(wǎng)頁(yè)游戲一般是指由玩家在網(wǎng)頁(yè)游戲中扮演的一個(gè)或數(shù)個(gè)角色，有完整的故事情節(jié)，強(qiáng)調(diào)劇情發(fā)展和個(gè)人體驗(yàn)，具有升級(jí)和技能成長(zhǎng)要素的游戲。3．模擬經(jīng)營(yíng)類模擬經(jīng)營(yíng)網(wǎng)頁(yè)游戲一般是以企業(yè)、城市等非生命體為培養(yǎng)對(duì)象，玩家扮演的是投資者或決策者的角色，主要目的是在經(jīng)營(yíng)過(guò)程中獲取利潤(rùn)，并不斷擴(kuò)大規(guī)模。模擬經(jīng)營(yíng)類網(wǎng)頁(yè)游戲的最大特色在于與人之間的較量。4．模擬養(yǎng)成類模擬養(yǎng)成網(wǎng)頁(yè)游戲顧名思義就是玩家模擬培養(yǎng)虛擬對(duì)象的游戲。模擬養(yǎng)成網(wǎng)頁(yè)游戲的特點(diǎn)在于可以培養(yǎng)的對(duì)象多種多樣，可以是小動(dòng)物，可以是戰(zhàn)斗寵物等等，游戲中各種奇怪的裝扮，搞怪的、靈異的、鮮艷的，讓人目不暇接，大大的增加的游戲的娛樂(lè)性。5．休閑競(jìng)技類休閑競(jìng)技網(wǎng)頁(yè)游戲是當(dāng)前最受歡迎的網(wǎng)頁(yè)游戲之一，用戶可以在放松身心的同時(shí)獲得游戲帶來(lái)的樂(lè)趣。休閑競(jìng)技網(wǎng)頁(yè)游戲通常操作簡(jiǎn)易，畫(huà)面以卡通形象為主，內(nèi)容又十分豐富，同時(shí)游戲又帶有一定的競(jìng)爭(zhēng)性，是玩家?guī)в袏蕵?lè)的心態(tài)去競(jìng)技。3.1.4網(wǎng)頁(yè)游戲的不足網(wǎng)頁(yè)游戲相對(duì)于客戶端游戲優(yōu)點(diǎn)有很多，但是和傳統(tǒng)網(wǎng)絡(luò)游戲相比，網(wǎng)頁(yè)游戲還是有許多不足的地方。1．部分游戲模式互動(dòng)性不強(qiáng)在網(wǎng)頁(yè)游戲中，除了角色扮演類網(wǎng)頁(yè)游戲，其他類型的網(wǎng)頁(yè)游戲都需要玩家時(shí)刻在線，所以很難直接讓游戲玩家以一種直觀的方式和別的玩家進(jìn)行溝通。2．游戲節(jié)奏緩慢網(wǎng)頁(yè)游戲由于不需要實(shí)時(shí)在線的特性，使得大部分類型的網(wǎng)頁(yè)游戲節(jié)奏相對(duì)來(lái)說(shuō)比較緩慢。3．游戲畫(huà)面表現(xiàn)力不夠網(wǎng)頁(yè)游戲是在瀏覽器窗口中運(yùn)行的，瀏覽器窗口的局限性導(dǎo)致網(wǎng)頁(yè)游戲的畫(huà)面很難達(dá)到客戶端游戲的程度，畫(huà)面表現(xiàn)力有所下降。在網(wǎng)頁(yè)游戲UI設(shè)計(jì)中，除了應(yīng)首先考慮游戲的風(fēng)格以外，按鈕的具體使用字體，顯示的位置要清晰明了。必須將游戲功能分清楚，然后再繼續(xù)深入。

3.2網(wǎng)頁(yè)游戲UI設(shè)計(jì)流程1．游戲玩家調(diào)查分析判斷一個(gè)游戲的優(yōu)劣，在很大程度上取決于潛在玩家的使用評(píng)價(jià)，因此在網(wǎng)頁(yè)游戲開(kāi)發(fā)的最初階段尤其需要重視游戲中人機(jī)交互部分的用戶需求。2．游戲任務(wù)分析確定游戲設(shè)計(jì)任務(wù)后，要多與策劃人員和多數(shù)玩家反復(fù)交流，根據(jù)策劃人員和多數(shù)玩家的意見(jiàn)來(lái)構(gòu)思游戲UI的風(fēng)格，并定位文化背景，具體而言，要把界面視覺(jué)效果與游戲的時(shí)代聯(lián)系在一起，不能不倫不類。不管怎樣，形式服務(wù)于內(nèi)容，一切的藝術(shù)效果都要建立在易用、高效的原則下。3．創(chuàng)建游戲界面模型草繪游戲界面模型，探索游戲界面風(fēng)格的各種可能性，這樣可以大致確定出一至兩種游戲界面風(fēng)格。根據(jù)玩家特性，以及系統(tǒng)任務(wù)和環(huán)境，制定最為適合的游戲交互類型，包括確定人機(jī)交互的方式，估計(jì)能為交互提供的支持級(jí)別，預(yù)計(jì)交互活動(dòng)的復(fù)雜程度等。4．設(shè)計(jì)游戲UI界面圖形接下來(lái)就需要對(duì)游戲界面中的各種元素進(jìn)行視覺(jué)效果設(shè)計(jì)了，設(shè)計(jì)師可以使用各種繪圖軟件來(lái)輔助繪制游戲UI界面圖形，需要依次繪制出游戲中的所有界面效果，并且詳細(xì)的列出每一個(gè)界面中所包含的圖像和按鈕等。5．游戲交互效果測(cè)試完成游戲的交互效果開(kāi)發(fā)后必須經(jīng)過(guò)嚴(yán)格的測(cè)試，以便及時(shí)發(fā)現(xiàn)錯(cuò)誤，對(duì)游戲進(jìn)行改進(jìn)和完善。動(dòng)手實(shí)踐——設(shè)計(jì)網(wǎng)頁(yè)游戲按鈕動(dòng)手實(shí)踐：設(shè)計(jì)網(wǎng)頁(yè)游戲按鈕源文件：光盤\源文件\第3章\網(wǎng)頁(yè)游戲按鈕.psd視頻：光盤\視頻\第3章\網(wǎng)頁(yè)游戲按鈕.swf動(dòng)手實(shí)踐——設(shè)計(jì)網(wǎng)頁(yè)游戲?qū)Ш絼?dòng)手實(shí)踐：設(shè)計(jì)網(wǎng)頁(yè)游戲?qū)Ш皆次募汗獗P\源文件\第3章\網(wǎng)頁(yè)游戲?qū)Ш?psd視頻：光盤\視頻\第3章\網(wǎng)頁(yè)游戲?qū)Ш?swf即從任務(wù)、信息的表達(dá)、界面控制等方面與用戶理解熟悉的模式盡量保持一致。同一款網(wǎng)頁(yè)游戲中，所有的菜單選項(xiàng)、對(duì)話框、用戶輸入框、信息顯示和其他功能界面均需要保持統(tǒng)一的風(fēng)格。1．界面布局一致性從進(jìn)入游戲的主畫(huà)面到詳細(xì)的對(duì)話框的設(shè)計(jì)風(fēng)格，游戲中各種控件的排列、位置等，在整個(gè)網(wǎng)頁(yè)游戲的所有界面中都要盡可能保持一致。2．操作方法一致性網(wǎng)頁(yè)游戲界面中響應(yīng)控制設(shè)備的設(shè)計(jì)，如對(duì)鏈盤中回車鍵、Esc鍵、鼠標(biāo)等操作方法的定義應(yīng)該盡可能與操作系統(tǒng)上的定義一致，如回車鍵對(duì)應(yīng)“確認(rèn)”操作，ESC鍵對(duì)應(yīng)“取消”操作等。3．語(yǔ)言描述一致性在游戲界面中的項(xiàng)目名稱、功能名稱、提示語(yǔ)句、錯(cuò)誤信息等的信息描述方式和表現(xiàn)效果要統(tǒng)一，與游戲行中的相關(guān)術(shù)語(yǔ)盡量一致。3.3.1界面風(fēng)格統(tǒng)一

3.3網(wǎng)頁(yè)游戲UI設(shè)計(jì)原則在對(duì)網(wǎng)頁(yè)游戲UI進(jìn)行設(shè)計(jì)時(shí)應(yīng)該遵守一定的設(shè)計(jì)原則，這樣所設(shè)計(jì)出來(lái)的網(wǎng)頁(yè)游戲才能夠讓游戲玩家很容易的認(rèn)知、掌握游戲的玩家，并且，由于游戲本身情節(jié)的推進(jìn)，界面的變化應(yīng)該符合游戲用戶的需求。3.3.2方便用戶操控游戲游戲界面的易用性的主要內(nèi)容是使界面具有很強(qiáng)的直觀性，功能直觀、操作簡(jiǎn)單、狀態(tài)明了的游戲界面才能讓游戲玩家更加容易操控游戲。游戲界面的易用性原則通常包括以下幾個(gè)方面。（1）界面中盡量采用形象化的圖標(biāo)和圖像。（2）盡量與同類型的游戲保持一致或相近的操作設(shè)計(jì)。（3）盡量提供充分的提示信息和幫助信息。3.3.3界面要足夠的友善網(wǎng)頁(yè)游戲界面需要足夠的友善，能夠及時(shí)防止出現(xiàn)諸如退出游戲沒(méi)有存檔、創(chuàng)意游戲失敗之類的錯(cuò)誤，這就要求游戲界面具有很好的容錯(cuò)性。1．重要的操作提醒玩家在進(jìn)行一些有重大影響的操作時(shí)，及時(shí)的提醒用戶可能引起的后果。2．自動(dòng)糾正玩家錯(cuò)誤對(duì)于游戲玩家的錯(cuò)誤操作進(jìn)行系統(tǒng)自動(dòng)的更正。比如在策略類游戲中，一方玩家給予友方玩家資源的輸入數(shù)量大于目前自己本身有的數(shù)量時(shí)，系統(tǒng)自動(dòng)調(diào)整到最大可給予對(duì)方的冷資源數(shù)量。3．操作完整性檢查檢查玩家操作的完整性，防止玩家疏忽，遺漏必要的操作步驟。3.3.4簡(jiǎn)潔易用網(wǎng)頁(yè)游戲的界面需要盡量做到精簡(jiǎn)，以免太多的按鈕和菜單出現(xiàn)在畫(huà)面上，并且過(guò)于華麗的修飾也會(huì)干擾到玩家的注意力，很可能分散玩家的注意力，是玩家不能集中精力于游戲世界。操作界面應(yīng)該盡量做到簡(jiǎn)單明確，并且盡量少占用屏幕空間。3.3.5及時(shí)的信息反饋信息反旨游戲用戶對(duì)游戲界面進(jìn)行操作后從游戲本身得到的信息，表示游戲系統(tǒng)本身對(duì)用戶操作的反應(yīng)。如果游戲本身沒(méi)有反饋，玩家就無(wú)法判斷他的操作是不是為游戲本身所接受，操作是否正確，是否應(yīng)該進(jìn)行下一步操作。在對(duì)網(wǎng)頁(yè)游戲界面進(jìn)行設(shè)計(jì)時(shí)應(yīng)該對(duì)玩家的操作做出及時(shí)的反應(yīng)，給出反饋信息。例如，玩家按到相應(yīng)的操作鍵的時(shí)候出現(xiàn)界面出現(xiàn)相應(yīng)的變化，用戶輸入不正確的命令或參數(shù)時(shí)，游戲系統(tǒng)發(fā)出錯(cuò)誤警告的聲音等。如果在執(zhí)行某個(gè)操作需要較長(zhǎng)的時(shí)間（超過(guò)3秒），就要告訴玩家請(qǐng)求正在被處理，旋轉(zhuǎn)沙漏的鼠標(biāo)形狀和進(jìn)度條是比較好的表現(xiàn)形式。3.3.4增強(qiáng)游戲玩家的沉浸感游戲界面中的各個(gè)元素有助于維持玩家直接參與游戲世界的幻想，圖形元素可以讓玩家在視覺(jué)上體驗(yàn)游戲世界的環(huán)境、活動(dòng)和地方特色，音樂(lè)和聲音效果創(chuàng)建了一種特殊的情調(diào)，并使游戲的事件顯得更栩栩如生。動(dòng)手實(shí)踐——設(shè)計(jì)網(wǎng)頁(yè)游戲登錄界面動(dòng)手實(shí)踐：設(shè)計(jì)網(wǎng)頁(yè)游戲登錄界面源文件：光盤\源文件\第3章\網(wǎng)頁(yè)游戲登錄界面.psd視頻：光盤\視頻\第3章\網(wǎng)頁(yè)游戲登錄界面.swf動(dòng)手實(shí)踐——設(shè)計(jì)拼圖網(wǎng)頁(yè)游戲界面動(dòng)手實(shí)踐：設(shè)計(jì)拼圖網(wǎng)頁(yè)游戲界面源文件：光盤\源文件\第3章\拼圖網(wǎng)頁(yè)游戲界面.psd視頻：光盤\視頻\第3章\拼圖網(wǎng)頁(yè)游戲界面.swf

3.4網(wǎng)頁(yè)游戲界面設(shè)計(jì)目標(biāo)3.4.1可用性目標(biāo)以用戶為中心是網(wǎng)頁(yè)游戲界面設(shè)計(jì)的重要原則，中心問(wèn)題是要設(shè)計(jì)出一個(gè)既便于游戲玩家使用又能提供愉悅游戲體驗(yàn)的游戲界面。游戲界面設(shè)計(jì)的目標(biāo)包括可用性目標(biāo)和用戶體驗(yàn)?zāi)繕?biāo)?？捎眯阅繕?biāo)是關(guān)于游戲界面本身所要承擔(dān)的人機(jī)交互功能的目標(biāo)，而用戶體驗(yàn)?zāi)繕?biāo)則是用戶對(duì)于整個(gè)游戲界面設(shè)計(jì)的使用體驗(yàn)。對(duì)于可用性的定義，一般可以被概括為有用性和易用性兩個(gè)方面。有用性是指游戲界面能否實(shí)現(xiàn)特定的功能，而易用性是指玩家與界面的交互效率、易學(xué)性以及玩家的滿意度?？捎眯阅繕?biāo)體現(xiàn)在要求網(wǎng)頁(yè)游戲界面具有一定的使用功能且是有效的游戲和用戶的交互功能，人機(jī)交互效率要高，易于游戲玩家學(xué)習(xí)和使用，具備一定的通用性。簡(jiǎn)單性原則是游戲界面設(shè)計(jì)中最重要的原則，簡(jiǎn)潔的游戲界面能讓玩家更快地找到所需要操作的對(duì)象，提高操作效率。3.4.2用戶體驗(yàn)?zāi)繕?biāo)用戶體驗(yàn)指的是游戲玩家在玩游戲、與整個(gè)游戲系統(tǒng)進(jìn)行交互時(shí)的體驗(yàn)感覺(jué)，是基于游戲玩家本身主觀體驗(yàn)的主觀要求。例如，可以把一款游戲的界面設(shè)成“十分絢麗多彩的”、“吸引人的”、“有趣的”、“新奇好玩的”等。用戶體驗(yàn)?zāi)繕?biāo)注重的不是游戲界面的有效、可靠性，而是否能讓游戲用戶滿意、是否能增強(qiáng)游戲的沉浸感、是否能激發(fā)游戲玩家的創(chuàng)造力和滿足感等。動(dòng)手實(shí)踐——設(shè)計(jì)桌球網(wǎng)頁(yè)游戲界面動(dòng)手實(shí)踐：設(shè)計(jì)桌球網(wǎng)頁(yè)游戲界面源文件：光盤\源文件\第3章\桌球網(wǎng)頁(yè)游戲界面.psd視頻：光盤\視頻\第3章\桌球網(wǎng)頁(yè)游戲界面.swf

3.5專家支招網(wǎng)頁(yè)游戲界面設(shè)計(jì)對(duì)于網(wǎng)頁(yè)游戲是相當(dāng)重要的，他能夠?qū)⒂螒虻拿總€(gè)部分順暢的聯(lián)系在一起，并且使玩家更快捷、方便的操作游戲，從中得到更大的樂(lè)趣。3.5.1什么是人性化的網(wǎng)頁(yè)游戲界面？答：人性化的網(wǎng)頁(yè)游戲界面設(shè)計(jì)就是將交互設(shè)計(jì)理念完美的融入網(wǎng)頁(yè)游戲界面設(shè)計(jì)中，將形式和內(nèi)容通過(guò)交互設(shè)計(jì)達(dá)到一種自然的狀態(tài)，是玩家才做起來(lái)更加順暢而方便，提高游戲的娛樂(lè)性。人性化網(wǎng)頁(yè)游戲界面設(shè)計(jì)不僅要考慮到玩家大眾的心理，使用習(xí)慣，使用環(huán)境等因素，還要更好的研究大眾的文化，審美等因素對(duì)游戲的影響。只有達(dá)到平衡才能使玩家和游戲之間順暢而自然地進(jìn)行信息交流。3.5.2網(wǎng)頁(yè)游戲界面為什么要具有一定的可擴(kuò)充性？答：網(wǎng)頁(yè)游戲和一般的網(wǎng)絡(luò)產(chǎn)品不同，它會(huì)不斷地更新版本，增加新的功能，這樣才能適應(yīng)不同玩家的不同需求，適應(yīng)市場(chǎng)競(jìng)爭(zhēng)。這樣也要求設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁(yè)游戲操作界面的時(shí)候，要給