畢業(yè)設計（論文）pc游戲中圖形用戶界面(gui)設計淺析網頁游戲中的圖形用戶界面設計

1、北京師范大學論文題目：PC游戲中的圖形用戶界面（GUI）設計姓 名 院 系 專 業(yè) 計算機科學與技術 年 級 學 號 指導老師 2010年11月28日PC游戲中的圖形用戶界面（GUI）設計淺析網頁游戲中的圖形用戶界面設計摘要論文介紹了主流的網頁游戲界面設計的特點，根據人機界面設計的原理，綜合網頁界面設計和游戲界面設計的各自特點淺談網頁游戲界面設計的原則、方法、流程，并應用于實際開發(fā)中來指導網頁游戲的界面設計。論文主要闡述了人機界面設計的基本原理，包括界面設計原理，認知心理學和視覺習慣基礎理論，具體分析以上要素在網頁游戲界面設計中的作用。根據人機界面設計基本原理，即符合用戶需要的“簡單、自然、友

2、好、一致”界面設計基本原則的基礎上，結合網頁界面設計的原則和游戲界面設計原則三方面綜合分析得出網頁游戲界面設計的原則。根據先前得出的設計原則來 作為對網頁游戲具體評價的依據來進行設計功能和設計效果評價。用論文所得出的原則和方法來對網頁游戲界面進行指導和規(guī)范設計后，較原版本游戲用戶更加認可，有更好的滿意度。是的確符合以用戶為中心的界面設計理論，是可以用來指導未來的網頁游戲的界面設計。關鍵詞:網頁游戲，人機界面設計，游戲界面設計GRAPHICAL USER INTERFACE DESIGN OF THE PC GAMEANALYSIS ON GRAPHICAL USER INTERFACE DES

3、IGN OF THE WEBGAMEABSTRACTUser Interface which as a bridge between WebGame and user has great difference with other games in interface design. This paper first introduced and anatomized the doctrine of WebGame and Human-Computer Interaction technology. Then presents our research work: the principal,

4、 method and workflow which can serve as a guide for future Graphic UI design.WebGame is one of Online Gaming which made with web page programming language such as JAVA, ASP and ActiveX. Game player can play it in web browser directly and do not need download and install any client software in their

5、PC. Along with the internet technology unceasing development, WebGame get a rapid development over the past few years and will be likely to replace traditional online games in the future. Recently, the industry of Game regards browser as a virtual operating system, which makes the prospect of web ga

6、me even better.We hope that principles and method which we concluded is effective and valid and we also hope it can guide the future of interface design in WebGame. Finally, we have applied principles and method which we concluded to WebGame interface development and validate it is correct and scien

7、tific using User monitoring and user survey method.Keywords: WebGame, Interface Design, Game Interface Design目錄1 緒論 11.1 論文的選題背景及意義 11.1.1 背景知識 11. 無端網游 12. 游戲界面設計 21.1.2 論題研究目的與現實意義 21. 目的 32. 研究的意義 81.2 本文的主要工作及結構 92 界面設計理論基礎 102.1 人機界面設計理論 102.1.1 人機界面的概念 102.1.2 界面設計的分類 111. 功能性設計界面 112. 情感性設計界面

8、 113. 環(huán)境性設計界面 112.1.3 界面設計的發(fā)展 121. 命令語言 122. 菜單和圖形用戶界面的廣泛應用 133. 面向窗口的點選界面 134. 多媒體用戶界面及多通道用戶界面的發(fā)展 135. 虛擬現實技術的應用 132.2界面對用戶心理的影響 132.3 視覺習慣 142.4 網頁游戲概述 142.4.1 網頁游戲的概念 142.4.2 網頁游戲的特性 151網頁游戲的技術特性 152網頁游戲的游戲特性 163網頁游戲的用戶和市場特征 174網頁游戲的不足 172.4.3 網頁游戲的發(fā)展 183網頁游戲中界面設計的方法和流程研究 203.1 網頁游戲界面設計方法的研究 203.

9、1.1 可用性目標 203.1.2 用戶體驗目標 211. 切實關注用戶需要的設計 212. 適合不同“級別”用戶的設計 213. 關注用戶“有限注意力”的設計 213.2 以用戶為中心的網頁游戲設計方法 221. 以用戶為中心的設計 222. 用戶參與設計 223.3 網頁游戲界面設計的主要流程 221. 調查用戶要求或環(huán)境 232. 用戶調查分析 233. 游戲任務分析設計 234. 建立交互界面模型 245. 界面的圖形設計 246. 交互的測試和評估 254總結 26參考文獻 27致謝 281緒 論1.1 論文的選題背景及意義1.1.1 背景知識1. 無端網游休閑娛樂已經成為我們這個時

10、代生活很重要的一部分，游戲(Game)是一種參與、交互式的娛樂形式。這一概念是相對于被動式的娛樂形式而言的，看電視、讀書、看電影都是被動式的娛樂方式，在這些方式中，娛樂是展現式的，大眾只能被動參與。游戲則要復雜很多，當人們玩游戲時，因積極參與而獲得快樂。隨著計算機以及圖形圖像技術的發(fā)展，出現了電子游戲。電子游戲指以電子 元器件組裝成的設備為運行平臺的游戲。這與傳統(tǒng)的游戲方式是不同的，傳統(tǒng)的 游戲需要現實中的游戲道具，如：象棋、撲克牌等。而電子游戲則是通過控制電 子游戲設備與電子游戲進行交互的游戲方式。在互聯網時代，電子游戲已經發(fā)展成為網絡游戲。玩網絡游戲也已經成為當 今人們休閑娛樂最為流行的一

11、種方式。網絡游戲擁有強大的人與人之間的交流平 臺，用戶在游戲中得到充足的虛擬現實體驗，這是過去傳統(tǒng)游戲不能比擬的。同 時，人的思想和行為等方面在玩游戲的過程中已經受到了游戲的影響1。網絡游戲是利用 TCP/IP 協議，以 Internet 為依托，可以多人同時參與的游 戲項目。網絡游戲按照聯網方式分為：脫網單機游戲和網絡游戲；而網絡游戲按 照客戶端模式則分為：需要安裝相關內容客戶端軟件的傳統(tǒng)網游和不需要客戶端 的無端網游。無端網游的主要形式為 WebGame，即網頁游戲。社會在進步，技術在發(fā)展，而互聯網和 Flash 技術的深層次發(fā)展讓“傳統(tǒng)客 戶端網游”運行在瀏覽器中的美好愿望已經成為現實。

12、無論從游戲的功能性、系 統(tǒng)的完善性和畫面的視覺沖擊力等方面，全新的無端網游都已達到傳統(tǒng)2D網游精品的水準，甚至在某些方面有所超越，比如在游戲的便捷性和優(yōu)秀的環(huán)境適應能力等方面。未來的計算機軟硬件技術的發(fā)展，不僅個人電腦，使得手機，電視，PDA 等都可以作為客戶終端，由于互聯網無處不在，擁有海量信息存儲空間的服務器端超級強大，本地客戶端甚至不需要硬盤來存儲信息。微軟認為未來的時代，連軟件使用都希望完全通過網絡來實現，而不需要在去買什么光盤回家安裝什么軟件。無端網游終將取代傳統(tǒng)游戲，成為未來游戲的主流和發(fā)展方向。2. 游戲界面設計在人和機器的互動過程(Human-Machine Interacti

13、on)中有一個層面，即我們所說的用戶界面(User Interface)。它是計算機科學與認知心理學、設計藝術、人機工程學、人因學(Human Factors)、社會學、語言學等交叉研究領域。人機界面是人與機器之間傳遞和交換信息的媒介。從心理學意義來分，界面可分為感覺(視覺、觸覺、聽覺等)和情感兩個層次。界面的功能可分為實用功能和審美功能。實用功能完成界面溝通人和機器的使命；審美功能在滿足用戶審美要求的同時并輔助實用功能。用戶界面設計(User Interface Design)是屏幕產品的重要組成部分。界面設計是一個復雜的有不同學科參與的工程，認知心理學、設計學、符號學等都扮演著重要的角色。

14、游戲界面指游戲軟件的用戶界面，包括游戲畫面中的按鈕、動畫、文字、聲 音、窗口等與游戲用戶直接或間接接觸的游戲設計元素。游戲界面設計(Game Interface Design 簡稱 GID)，是指對電子游戲中與游戲用戶具有交互功能的視覺元素進行規(guī)劃、設計的活動。1.1.2 論題研究目的與現實意義歷史總在不斷重演并且驚人的相似，正如網絡游戲取代傳統(tǒng)單機游戲一樣，眼下，動態(tài)無端網游取代客戶端網游的趨勢開始愈發(fā)明顯。網頁游戲正是屬于網絡游戲范疇，它是指無需下載和安裝客戶端程序、基于 ASP、PHP、Java 和 ActiveX 等 WEB 編程技術和 Flash 技術，運行于 WEB 瀏覽器 的網絡

15、在線游戲。是伴隨著互聯網技術的成熟高速發(fā)展起來的新種類游戲。1. 目的 今年網頁游戲突然之間變得很熱門，盛大、騰訊、17173、新浪等大公司都很積極的關注，甚至連百度也摻和了進來。WebGame 究竟針對什么用戶？它究竟要發(fā)展向何方？有對這個問題的研討。大家的意見主要還是說WebGame主要針對上班一族，也就是當作小菜來吃。很多人都認為WebGame是不可能成為主流。但是我認為，WebGame最終將取代現存的網絡游戲，而不是一種配菜。從受眾群體容量來說，網頁游戲有天然優(yōu)勢。能通過瀏覽器上網的人都是網頁游戲的潛在受眾。根據最新的調查顯示：預計到今年年底全球互聯網用戶數量將會超過 10億，而中國網

16、民數量已經達到2.2億，超過美國成為世界第一，網民上網最主要目的是為了娛樂。網頁游戲，使用瀏覽器把游戲體驗的途徑簡化到了極致：能上網的人，都可以“無需下載任何東西，無成本、無等待”地玩網頁游戲，只要輸入URL 就可。這種簡化是革命性的，與PC網游成鮮明對比。PC網游需要下載300M以上（有的甚至超過 1G）的客戶端，無法與網頁游戲的便利性相比。從科技發(fā)展角度來說，未來的計算機軟硬件技術的發(fā)展，不僅個人電腦，使得手機、電視、PDA等都可以作為客戶終端，由于互聯網無處不在，擁有海量信息存儲空間的服務器端超級強大，本地客戶端甚至不需要硬盤來存儲信息。微軟都認為未來的時代，連軟件使用都希望完全通過網絡

17、來實現，而不需要在去買什么光盤回家安裝什么軟件。WebGame最終取代現存的網絡游戲，也是大勢所趨。而且現在已經有一些開發(fā)者在從事這個方面的研究。我們也看到大型網絡游戲的網頁化，網頁游戲隨著科學技術的提升，IE7等瀏覽器技術的成熟和普及，WebGame2.0 的時代即將到來，也將會為網絡游戲產業(yè)帶入了一個新的時代。2008年10月歐洲Maid Marian Entertainment Inc.推出的Sherwood Dungeon（舍伍德地牢）3D高品質網頁游戲已經相當的出色，從很多方面可以和一些3D網絡游戲相媲美。從圖1-1、1-2可以看出，它的畫面已經完全可以媲美當今的網絡游戲。圖 1-1

18、 舍伍德地牢的界面截圖Fig.1-1 Interface screenshot of Sherwood Dungeon圖 1-2 舍伍德地牢的界面截圖Fig.1-2 Interface screenshot of Sherwood Dungeon2009年6月萬眾矚目的3D動作新游Robo Rescue在充滿創(chuàng)新元素的在線游戲平臺Kalydo火爆上線。耗時一年開發(fā)，全新曝光的Robo Rescue Episode 1為3D網頁游戲設立了新標準，這款游戲充滿了驚險刺激的快速動作，又不乏幽默。其完全的適配和兼容性保證將一切視覺沖擊原汁原味的移植到老款PC機和筆記本電腦中。從圖1-3、1-4可以看出

19、，曲折的道路和流暢的動作已經做得非常完美。圖1-3 Robo Rescue的界面截圖Fig.1-3 Interface screenshot of Robo Rescue圖1-4 Robo Rescue的界面截圖Fig.1-4 Interface screenshot of Robo Rescue國內最新的“閃游”小小忍者，還在測試階段，但是從圖 1-5、1-6、1-7中可以看出它的界面已經完全可以媲美傳統(tǒng)網絡游戲。而在游戲系統(tǒng)方面也做到了玩家之所需，任務，戰(zhàn)斗，寵物，聊天，裝備打造，非常全面系統(tǒng)。小小忍者是一款國內首創(chuàng)“一角色，多職業(yè)”的以動漫為主題的網頁游戲，顛覆了傳統(tǒng)網頁游戲“一個角色只

20、能玩一個職業(yè)”的單一玩法。在游戲的過程中，玩家能獲得上百種不同的動漫人物形象以及他專屬的職業(yè)與隱藏技能，并且能隨時變換你的角色，感受這些動漫角色帶來的不同職業(yè)與技能的樂趣。在游戲畫面上，小小忍者突破了以往網頁游戲簡單圖片加文字描述的游戲方式，以更直觀的畫面表現來豐富游戲過程。圖1-5 小小忍者的界面截圖Fig.1-5 Interface screenshot of 小小忍者圖1-6 小小忍者的界面截圖Fig.1-6 Interface screenshot of 小小忍者圖1-7 小小忍者的界面截圖Fig.1-7 Interface screenshot of 小小忍者2. 研究的意義從網頁游

21、戲整個行業(yè)發(fā)展來說，雖然目前網頁游戲產業(yè)帶來的利潤越來越豐厚，但仍然有很多新的網頁游戲在抄襲已有經典游戲模式的現象存在，很多國產游戲只注重商業(yè)效應，對于游戲性和游戲的人機設計的探索卻還是原地踏步，甚至可以說是毫無創(chuàng)新!游戲質量的良莠不齊，有的甚至違背了最基本的人機交互設計原則，只想憑借華麗的游戲畫面和簡單的游戲博弈以及低廉的費用來吸引玩家一時的好奇心。國內網頁游戲雖然是如火如荼地進行著，但整個行業(yè)缺乏系統(tǒng)的理論作為指導，導致很多失敗的游戲案例。業(yè)界最近把瀏覽器作為一個虛擬的操作系統(tǒng)來看，這使得網頁游戲的前景更加美好。從用戶角度來說，用戶愈為迫切地需要符合“簡單、自然、友好、一致”原則的人機界面

22、。游戲的使用者也從計算機專家迅速擴大到了廣大未受過專門訓練的普通用戶。計算機用戶發(fā)生了改變，非計算機專業(yè)的普通用戶成了用戶的主體，這一重大轉變使游戲的可用性問題變得日益突出起來。游戲人機界面的重要性在于它極大的影響了最終用戶的使用，影響了游戲的推廣應用。著名的游戲開發(fā)者Bill Volk 曾經對游戲設計寫下了一個等式“界面+產品要素=游戲。很明顯，Bill Volk 的意圖并不是說設計一款游戲就是簡單的加法，而是強調在游戲設計中界面的重要性。他認為“你的游戲就是你的界面”。游戲界面是人和游戲機之間溝通的橋梁，它起到連接玩家和游戲內核的作用。玩家在玩游戲時，所見、所感、所接觸的是游戲界面，而不是

23、游戲內核，只有通過游戲界面，玩家才能夠體會到游戲的內核帶來的游戲樂趣，因此對游戲本身來說，界面在很大程度上影響著游戲的可玩性(Playable)。游戲Age of Empires 的設計者們曾提出“前十五分鐘法則”，即對一款游戲來說，如果入門玩家不能在前十五分鐘順利地弄明白基本操作規(guī)則和策略，或者鐵桿玩家不能在前十五分鐘感受到興趣和挑戰(zhàn)的話，他們將永遠離開這個游戲，不再做進一步嘗試。因為人們玩游戲的目的是娛樂，在工作之后能夠放松、娛樂一下，所以我們不能要求用戶像學習其它應用軟件那樣花一天甚至一個星期時間去弄清到底怎么玩這個游戲。雖然目前有少數國外的資深游戲設計師在其著作中談到網頁游戲界面設計，

24、但也只是簡單的概略性的介紹，對整個網頁游戲界面設計方法缺乏系統(tǒng)、全面、具體的介紹和分析。游戲界面是游戲的外在表現，是游戲中與游戲用戶直接相互影響的部分，在整個游戲設計中占據很重要的地位。游戲界面設計從游戲文化背景確定到界面構想產生、可行性分析到提出方案、方案分析、篩選、修正和評估必須是有理、有序、系統(tǒng)化的一個完整過程系統(tǒng)，應該有相應的系統(tǒng)理論來指導。1.2 本文的主要工作及結構本論文是在致力于以用戶為中心的人機交互界面的設計與評估技術的研究工作的基礎上撰寫而成，論文主要根據網頁游戲的特點，提出一些用以規(guī)范游戲界面設計的原則，并遵循該原則提出了游戲用戶參與的迭代式界面設計方法和流程，并對該方法和

25、流程進行了應用驗證。論文的主要工作如下： eq oac(,1):分別對人機界面設計的原理和用戶的認知心理和視覺習慣三個方面來研究網頁游戲界面設計； eq oac(,2):分析當前網頁游戲的概念、特點、分類、目標用戶從而來分析網頁游戲界面并進行相關研究； eq oac(,3):得出網頁游戲界面設計的原則、實現方法、流程和評價4個方面的基本理論并進行相關應用驗證。本文旨在通過根據得出的理論來優(yōu)化和改善網頁游戲中的界面設計，使網頁游戲能夠更加受到用戶的喜愛，為未來的網頁游戲界面設計提供有理、有序、系統(tǒng)化的理論指導，促進網頁游戲的進一步發(fā)展。本章主要介紹了網頁游戲和用戶界面設計的基本概念和發(fā)展，闡述了

26、論文研究的背景、意義，論文的目的及論文結構。2 界面設計理論基礎2.1 人機界面設計理論在人和機器的互動過程（Human-Machine Interaction）中，有一個層面，即我們所說的界面（interface）。從心理學意義來分，界面可分為感覺（視覺、觸覺、聽覺等）和情感兩個層次。用戶界面設計是屏幕產品的重要組成部分。界面設計是一個復雜的有不同學科參與的工程，認知心理學、設計學、語言學等在此都扮演著重要的角色。用戶界面設計的三大原則是：置界面于用戶的控制之下；減少用戶的記憶負擔；保持界面的一致性2。界面的說法以往常見的是在人機工程學中?！叭藱C界面”是指人機間相互施加影響的區(qū)域，凡參與人機

27、信息交流的一切領域都屬于人機界面。而設計藝術是研究人一物關系的學科，對象物所代表的不是簡單的機器與設備，而是有廣度與深度的物；這里的人也不是“生物人”，不能單純地以人的生理特征進行分析。人的尺度，既應有作為自然人的尺度，還應有作為社會人的尺度；既研究生理、心理、環(huán)境等對人的影響和效能，也研究人的文化、審美、價值觀念等方面的要求和變化。2.1.1 人機界面的概念介于人與計算機之間，人與機器的通信，人機界面(HCI)：軟件+硬件所謂界面，即人機界面(Human-Machine Interface)，是人與機器進行交互的操作方式，即用戶與機器互相傳遞信息的媒介，其中包括信息的輸入和輸出。好的人機界面

28、美觀易懂、操作簡單且具有引導功能，使用戶感覺愉快、興趣增強，從而提高使用效率。界面可以分為硬界面和軟界面，也可以分為廣義的和狹義的人機界面3廣義界面廣義的人機界面，指人與機之間存在一個相互作用的媒介，人通過視覺和聽覺等感官接受來自機器的信息，經過腦的加工、決策，然后做出反應，實現人機的信息傳遞。我們可以把人機界面看作一個有著交互的系統(tǒng)，在分析人機界面系統(tǒng)模型時，建立并分析人的行為模型，從而建立并設計人機界面系統(tǒng)?？梢娧芯咳藱C界面就是研究機器怎樣適應人的有效工作的問題。狹義界面狹義的人機界面指計算機系統(tǒng)中的人機界面，即所謂的軟界面。人機界面(Human-Computer Interface) ，

29、 又稱人機接口、用戶界面(User Interface)、人機交互(Human-Computer Interaction)，軟界面是人和計算機之間的信息交流界面，人機界面的設計直接關系到人機關系的和諧和人在工作中的主體地位，以及整個計算機系統(tǒng)的可使用性和效率4。本文主要研究的是人機軟件界面。2.1.2 界面設計的分類美國學者赫伯特.A .西蒙提出：設計是人工物的內部環(huán)境(人工物自身的物質和組織)和外部環(huán)境(人工物的工作或使用環(huán)境)的接合，所以設計是把握人工物內部環(huán)境與外部環(huán)境接合的學科，這種接合是圍繞人來進行的?！叭恕笔窃O計界面的一個方面，是認識的主體和設計服務的對象，而作為對象的“物”則是設

30、計界面的另一個方面。它是包含著對象實體、環(huán)境及信息的綜合體，就如我們看見一件產品、一棟建筑，它帶給人的不僅有使用的功能、材料的質地，也包含著對傳統(tǒng)思考、文化理喻、科學觀念等的認知。為了便于認識和分析設計界面，可將設計界面分類為：功能性設計界面、情感性設計界面和環(huán)境性設計界面。1. 功能性設計界面即接受物的功能信息、操縱與控制物。這一界面反映著設計“人”造物的協調作用。2. 情感性設計界面即物要傳遞感受給人，取得與人的感情共鳴。這種感受的信息傳達存在著確定性與不確定性的統(tǒng)一。情感把握在于深入目標對象的使用者的感情，而不是個人的情感抒發(fā)。設計師“投入熱情，不投入感情”，避免個人的任何主觀臆斷與個性

31、的自由發(fā)揮。這一界面反映著設計與人的關系。3. 環(huán)境性設計界面界面設計要考慮外部環(huán)境因素對人的信息傳遞,任何一件或一個產品或平面視覺傳達作品或室內外環(huán)境作品都不能脫離環(huán)境而存在，環(huán)境的物理條件與精神氛圍是不可忽缺的界面因素。尼葛洛龐帝指出：“一般個人電腦的界面，也被當成是物理設計的問題。但是界面不僅和電腦的外表或給人的感覺有關，它還關系到個性的創(chuàng)造、智能化的設計，以及如何使機器能夠識別人類的表達方式”5。挑戰(zhàn)將遠遠不止是為人們提供更大的屏幕，更好的音質和更易使用的圖形輸入裝置；這一挑戰(zhàn)將是，讓電腦認識你、你的需求、了解你的言詞、表情和肢體語言。但這并不是因為它能找出聲音信號上的微小差別，而是因

32、為它懂得你的意思。這才是好的界面設計。圖2-1 ：人機界面關系模型Fig.2-1 Model of HMI應該說，設計界面是以功能性界面為基礎，以環(huán)境性界面為前提，以情感性界面為重心而構成的，它們之間形成有機和系統(tǒng)的聯系，如圖2-1 所示。2.1.3 界面設計的發(fā)展這里所指的人機界面設計，是指計算機系統(tǒng)的用戶界面上控制輸入的設計方法，大致經過了五代的演變：1. 命令語言在圖形顯示、鼠標、高速工作站等技術出現之前，現實可行的界面方式只能是命令和詢問方式，通信完全以正文形式并通過用戶命令和用戶對系統(tǒng)詢問的響應來完成。這種方式使用靈活，便于用戶發(fā)揮其創(chuàng)造性，對熟練的用戶有很高的工作效率，但對一般用戶

33、來說要求高，易出錯，不友善并難于學習，它的錯誤處理能力也較弱。2. 菜單和圖形用戶界面的廣泛應用圖形用戶界面和人機交互過程極大地依賴視覺和手動控制的參與，因此具有強烈的直接操作特點。這種方式與命令行方式相比不易出錯，可以大大縮短用戶的培訓時間，減少用戶的擊鍵次數，可以使用對話管理工具，錯誤處理能力有了顯著提高。但使用起來仍然乏味，可能出現菜單層次過多及菜單選項復雜的情形，必須逐級進行選擇，不能一步到位，導致交互速度緩慢。3. 面向窗口的點選界面此類界面亦稱WIMP 界面，即窗口(Windows)、圖標(Icons)、菜單(Menus)、指示器(Pointing Device)四位一體，形成桌面

34、(Desktop)。這種方式能同時顯示不同種類的信息，使用戶可在幾個工作環(huán)境中切換而不丟失幾個工作之間的聯系，用戶可通過下拉式菜單方便執(zhí)行控制型和對話型任務，引入圖標、按鈕和滾動桿技術，大大減少鍵盤輸入，對不精于打字的用戶無疑提高了交互效率。4. 多媒體用戶界面及多通道用戶界面的發(fā)展自然語言與應用軟件進行通信，把第三代界面技術與超文本、多任務概念結合起來，使用戶可同時執(zhí)行多個任務(以用戶的觀點)。隨著文字、圖形、語音的識別與輸術技術的進一步發(fā)展，多媒體技術在人機界面開發(fā)領域內的進一步發(fā)展，自然語言風格的人機界面將得以迅速的發(fā)展，最終走向實用化。5. 虛擬現實技術的應用虛擬現實系統(tǒng)向用戶提供身臨

35、其境(immerse)和多感覺通道(multi-sensory)體驗，作為一種新型人機交互形式，虛擬現實技術比以前任何人機交互形式都有希望徹底實現和諧的、以人為中心的人機界面。2.2界面對用戶心理的影響富有表現力的界面就是使用富有表情的圖標或其它圖形元素來表達情感狀態(tài)。例如，很多軟件在表示它的運行狀態(tài)時都會有一個很明顯的情感圖形特征，即如果是正常運行的話會出現一個笑臉，如果是運行錯誤的話則會出現一個哭臉。笑臉傳遞了友好善意的信息，在與用戶的第一次見面的時候就把這種友好的情感傳遞給了用戶，能夠讓用戶感覺自在并回報以微笑，另外，笑臉形式的圖標也能讓用戶感到放心，傳達了一個一切正常的良好的信息。而哭

36、臉則表達了相反的信息，表示失敗、消極的含義。2.3 視覺習慣視覺是人類獲取信息的主要通道，視覺傳達的信息占所處理信息總量的80%以上，但對信息的加工人類視覺有其自然的習慣，先看什么，后看什么，體現了視覺流動的規(guī)律，形成了畫面閱讀的視覺流程。一般人們的視覺流程為：從上到下、從左到右、從動態(tài)到靜態(tài)、由明到暗、由粗線條到細線條，突然運動或者改變運動狀態(tài)的物體比靜止的物體更能引起人們的關注，箭頭、下劃線等也能引導觀察者的視線，這些習慣的形成與人類的視覺生理特性、思維發(fā)展的邏輯順序和思維習慣有關。心理學研究表明，人類對視覺范圍內的物體井不是予以同等重視的，而是從中篩選一些對象。影響選擇的因素有色彩、位置

37、、經驗等，不同的波長的色彩對人的視覺刺激強度不同，波長越長刺激越大，暖色大于冷色，原色大于補色，紅色最強。通常，上半部讓人感到輕松和自在，下半部則讓人感到穩(wěn)定和壓抑，左半部給人的感覺是輕松和自在，右半部則會給人穩(wěn)定和壓抑的感覺。視覺影響力上方強于下方，左側強于右側，所以上部和中上部被稱為“最佳視域”，也就是最優(yōu)選的區(qū)域。62.4 網頁游戲概述2.4.1 網頁游戲的概念所謂WebGame 翻譯成中文就是“網頁游戲”，是指無需下載和安裝客戶端程序、基于ASP、PHP、Java 和ActiveX 等WEB 編程技術和Flash 技術，運行于WEB瀏覽器的網絡在線游戲。是伴隨著互聯網技術的成熟高速發(fā)展

38、起來的新種類游戲。隨著internet 的深入發(fā)展和WEB 編程技術的跟新換代發(fā)展，網頁游戲獲得了長足的發(fā)展。WEBGAME 異軍突起，大有取代傳統(tǒng)游之勢。網頁游戲作為一種特殊的游戲類型，WEBGAME 由來已久，對廣大早期的網游玩家而言并不陌生。早在網絡游戲盛行之前的Mud 時代就已經存在，并憑借其方便性和簡易性吸引了一大批早期的網頁用戶。以第九城市笑傲江湖等為代表的早期作品多是基于BBS 社區(qū)和聊天室為基礎擴展而來，其可玩性雖然不高，內容也不夠豐富，但是交流性和交互性極強，已經初步具備了網游的基本特征。而隨后的king wars和戰(zhàn)神等策略型WEBGAME 則已經完全脫離了交流社區(qū)的范疇，

39、而正式發(fā)展成為獨立的游戲類型，并開始逐步提高其游戲性和可玩性，在內容設計和系統(tǒng)數值上也有了進一步地深入和完善。2.4.2 網頁游戲的特性網頁游戲顧名思義，即有網頁的特性又屬于游戲的范疇。他的目的是為了娛樂，所用的手段和運行平臺確是網頁瀏覽器。網頁游戲的發(fā)展離不開互聯網技術和瀏覽器技術的發(fā)展。技術的發(fā)展為網頁游戲提供了豐富的表現手段。1網頁游戲的技術特性網頁游戲依賴于網絡技術的發(fā)展，最早的網頁游戲其實就是一些用HTML 寫的簡單網頁，界面簡陋，交互手段貧乏，玩家與游戲的每次交互都會引起瀏覽器刷屏一次。用戶體驗與PC 單機游戲相比，判若云泥，天差地遠。界面與交互手段的限制，使網頁游戲在游戲玩法設計

40、上也無法施展，因此網頁游戲一直難以登堂入室，不被玩家認可。近兩年來，技術的發(fā)展為網頁游戲提供了豐富的表現手段。最近幾年興起的豐富互聯網應用(Rich Internet Application，簡稱RIA)技術，能在瀏覽器這個應用最廣的平臺上做出美不勝收的顯示和交互效果來。拿目前最流行的網頁游戲貓游記作為例子：它的界面和動態(tài)交互過程，已經讓人難以區(qū)分這是一個獨立的游戲程序，還是瀏覽器上的網頁應用。網頁游戲天然就是網絡游戲。在這里，網絡通信細節(jié)被瀏覽器實現了，使得游戲開發(fā)者和游戲玩家都無需購買昂貴的網游引擎和計算機設備，就可廉價地實現網絡游戲。網頁游戲，使用瀏覽器把游戲體驗的途徑簡化到了極致：能上

41、網的人，都可以“無需下載任何東西，無成本、無等待”地玩網頁游戲，只要輸入URL 就可。這種簡化是革命性的，與傳統(tǒng)網游成鮮明對比。傳統(tǒng)網游需要下300M以上（有的甚至超過1G）的客戶端，無法與網頁游戲的便利性相比。因此，網頁游戲有巨大的潛在受眾，又把體驗游戲的過程簡化到了極致，其發(fā)展?jié)摿Σ蝗莺鲆?。對網絡帶寬的要求相對較低，玩家?guī)缀蹩梢栽谌魏螘r間任何地點任何一臺能上網的電腦上快樂地游戲，不會受到其他客觀條件的制約。等種種特點，也非常適合長時間呆在辦公室和校園的OFFICE一族和大學生一族，他們可以輕松地“在老板眼皮底下”享受游戲的樂趣，這些都是傳統(tǒng)網游所不能比擬的。而這部分用戶大多具備消費游戲的經

42、濟能力和消費需求，因此市場潛力相當巨大。網頁游戲的未來潛力還體現在其跨平臺的拓展能力上。隨著瀏覽器技術的不斷發(fā)展，網頁游戲已不再局限于網頁表現形式。而是實現了WEB+WAP 的兼容。目前在手機上已經能夠玩到多款網頁游戲。未來網頁游戲還將向手機客戶端圖形網游(J2ME)的方向發(fā)展。多平臺無疑將為網頁游戲帶來更高的受眾覆蓋率與贏利空間。這正是相較于包括傳統(tǒng)網游在內的任何游戲均不具備的巨大優(yōu)勢。2網頁游戲的游戲特性不同于以前的單機休閑小游戲，網頁游戲雖然“輕巧”卻絕不簡單。網頁游戲種類繁多，其游戲形態(tài)包含了角色扮演、戰(zhàn)爭策略、模擬經營、社區(qū)養(yǎng)成、休閑競技等多種類型，題材則覆蓋了科幻、歷史、武俠、魔幻

43、、體育等眾多熱門領域。在游戲深度與耐玩性上，與傳統(tǒng)網游相比并不遜色。不同于傳統(tǒng)網游中存在大量NPC(電腦人物)供玩家練功、升級，網頁游戲的世界中一般只有人類玩家，“與人斗爭”成為貫穿網頁游戲的“主旋律”、PK、復仇、互助、交易、聯盟等發(fā)生在人與人之間的交往與斗爭在網頁游戲中被表現得淋漓盡致，“互動性”這一網游最成功也是最吸引人的要素在中體現的更為突出。游戲模式新穎，不花時間、無需在線是很多用戶的夢想。網頁游戲一個很大的特色就是不需要用戶實時在線，安排好工作之后，隨著自然時間的增加游戲自然在發(fā)展，這個特性是客戶端網游無可比擬的。網頁游戲進入門檻低，打開IE 就可以玩。這種方式可以使很多不適合玩游

44、戲的場所也可以進行游戲。比如說：上班時、看電影時。通過手機甚至可以在汽車上。網頁游戲的另一大特點是“輕松”。相對于緊張刺激，追求畫面音效享受的傳統(tǒng)網游，網頁游戲以文字及簡單圖形作為主要表現形式，游戲節(jié)奏也要慢很多。不需要隨時在游戲中控制，所以網頁游戲玩起來輕松愜意，這讓玩家不必花費太多時間就能照看好自己的“生意”。而正因為游戲過程無需投入太多精力，網頁游戲不會如傳統(tǒng)網游那樣成為令玩家欲罷不能的“雞肋”?！俺撩浴边@一在傳統(tǒng)網游蹤無法回避的問題在網頁游戲中基本不可能出現。網頁游戲輕便、有趣、輕松的特色使其在短時間內迅速興起并風靡一時，并被人們形象的稱為“綠色網游”。目前網頁游戲已經在國內擁有一批龐

45、大的玩家群體。與傳統(tǒng)網游的玩家呈現相對低齡化不同，網頁游戲的玩家群體主要以年輕的上班族為主，特別是所謂的“白領”一族。究其原因，這與很好的迎合了“白領”們渴望休閑但不愿過多花費精力，期望打發(fā)時間但以不影響工作為前提的生活理念有著直接關系。3網頁游戲的用戶和市場特征網頁游戲的受眾群體極其廣泛?？蛻舳司W頁因為其需要用戶長時間在線的特性，以及題材方式的限制，導致很多用戶無法進入。而網頁游戲因為覆蓋面廣，不需在線等特性，只要能夠打開網頁就可以運行游戲，其潛在受眾群體是一個讓大家驚訝的數字。據市場統(tǒng)計，中國2006一年的網絡游戲收入是59億，人群達到率70%，其中，QQ 游戲到達率37%（5000 萬人

46、），聯眾：20%（2700 萬），盛大：19%7。就受眾人群的知識層次與消費能力而言，以“白領”玩家為主的網頁游戲無疑已成為網絡游戲中的“高端產品”。考慮到“白領”群體巨大的消費欲望與經濟實力，這一新興市場迅速為多方所看好，并被普遍認為具有巨大的挖掘潛力。網頁游戲的獨特魅力與巨大潛力使之迅速成為互聯網行業(yè)中的“新貴”，僅國內就有眾多企業(yè)投入這一領域并開發(fā)制作出了大量網頁游戲。4網頁游戲的不足網頁游戲相對于客戶端網游優(yōu)點有很多，但是和傳統(tǒng)網游相比，網頁游戲還是有很多不成熟完善的地方。而劣勢其實集中在畫面表現力上（傳統(tǒng)RPG 也可做到網頁上，節(jié)奏感上將不是劣勢，而畫面上去難以比擬）。而隨著互聯網技

47、術的發(fā)展，網頁上的畫面表現力也得到了長足的發(fā)展。相對傳統(tǒng)網頁游戲的純文字表現，現在的網頁游戲已經逐步向多媒體方向發(fā)展。1) 部分游戲模式互動性不強因為網頁游戲中，除了角色扮演題材，其他題材都需要用戶時刻在線，所以很難直接讓游戲用戶以一種直觀的方式和別的用戶溝通。2) 游戲節(jié)奏緩慢因為網頁游戲不需要實時在線的特性，使其大部分題材的游戲節(jié)奏是緩慢的。3) 游戲畫面表現力不夠瀏覽器的局限導致網頁游戲的畫面很難達到客戶端網游的程度。4) 網頁游戲剛剛誕生、游戲內容不夠豐富新興的娛樂模式，重視還不夠，發(fā)展時間較短，游戲內容還大大的不夠豐富。雖然目前網頁游戲尚無法與傳統(tǒng)網游在市場規(guī)模上相提并論，但可以肯定

48、的是，隨著WEB 技術的不斷發(fā)展和網頁游戲認知度與影響力的不斷提升，網頁游戲市場將迎來一波快速發(fā)展的高潮。2.4.3 網頁游戲的發(fā)展近兩年來，尤其是近一年來，國內外網頁游戲生猛出現，日新月異，目不暇接。那么，網頁游戲的興起原因是什么？網頁游戲作為一個新生事物，它的過去、現在和將來會是怎樣的？而網頁游戲的悄然崛起，在某種程度上表明游戲已經進入了一個全新的分眾時代。網頁游戲出現得很早，最早的網頁游戲其實就是一些用HTML 寫的簡單網頁，界面簡陋，交互手段貧乏，玩家與游戲的每次交互都會引起瀏覽器刷屏一次。這時的網頁游戲，用戶體驗與PC 單機游戲相比，判若云泥，天差地遠。界面與交互手段的限制，使網頁游

49、戲在游戲玩法設計上也無法施展，因此網頁游戲一直難以登堂入室，不被玩家認可。當年在網絡泡沫經濟的推動下，國內涌現了不少規(guī)模較大的WebGame。例如第九城市、逸飛嶺等，以及活躍在各信息港的不同版本的笑傲江湖。它們是國內第一批基于WEB 瀏覽器而產生的WebGame。當時它們所冠的頭銜不是Game，而是虛擬社區(qū)。除了基本的BBS 功能之外，網民還可以在虛擬社區(qū)里練級、打工、賽馬、喂養(yǎng)寵物、建立家庭等等?；旧衔覀兡茉诰W絡游戲中所做的事，在當時的虛擬社區(qū)一樣可以做。不同的是，網絡游戲更直觀一些，而虛擬社區(qū)則是以大量文字和少許圖片的形式來表現。虛擬社區(qū)最紅火的時候，成千上萬的網民為了那些虛擬數據，通宵

50、達旦地守候在電腦面前不斷刷新頁面。網站訪問量自然瘋了似地往上飆升！在網絡泡沫經濟最紅火的時期，能增加網站訪問量就等于大把地撈進鈔票。自然大大小小的網站都不遺余力地抽出人力物力去開發(fā)和維護虛擬社區(qū)。不可思議的巨額網站訪問量蓋過了虛擬社區(qū)先天和后天的不足。但比網站訪問量增加得更快的是服務器不堪重負的壓力。隨著網絡泡沫經濟的破滅，網站訪問量逐漸化為“浮云”，虛擬社區(qū)受到災難性的重創(chuàng)。不少虛擬社區(qū)由免費變?yōu)槭召M，習慣吃免費大餐的網民自然難以接受，更何況大部分虛擬社區(qū)的質量和管理都讓人不敢恭維。時至今日，存活下來的虛擬社區(qū)已經寥寥無幾，而且鮮為人知。但是誰也不曾料想到，一款國外引進過來的星戰(zhàn)題材OGAM

51、E和貓撲網以圖形化社區(qū)演變而來的貓游記能使早已在國內衰敗的WEBGAME 死灰復燃，并掀起了其在國內火熱的第二股高潮。近兩年來，網頁游戲的興旺發(fā)展、逐漸為人所知乃至被一些受眾接受和喜愛，是瀏覽器技術發(fā)展的必然產物。技術的發(fā)展為網頁游戲提供了豐富的表現手段。雖然網頁游戲在目前還不是主流游戲，但是他的發(fā)展前景是誘人的。從科技發(fā)展角度來說，未來的計算機軟硬件技術的發(fā)展，不僅個人電腦，使得手機，電視，PDA 等都可以作為客戶終端，由于互聯網無處不在，擁有海量信息存儲空間的服務器端超級強大，本地客戶端甚至不需要硬盤來存儲信息。連微軟都認為未來的時代，連軟件使用都希望完全通過網絡來實現，而不需要在去買什么

52、光盤回家安裝什么軟件。RIA 的各種技術目前還在發(fā)展，網頁游戲乘其勢，總的發(fā)展勢頭是樂觀的。目前，網頁游戲這個市場正在迅猛發(fā)育中。網頁游戲將會向手機WAP 和手機客戶端圖形網游（J2ME）方式聯合發(fā)展，是跨平臺的，而不會單單停留在網頁表現形式上。多平臺的受眾覆蓋率和贏利空間更大?，F在已經有些公司在這方面已經邁出了第一步，同時在WEB 上和手機上推出產品，既是網頁游戲，又是J2ME 圖形手機網游，兩個平臺訪問的是同一服務器。網頁游戲進入門檻低，競爭非常激烈。產品多，淘汰率高，精品少。國內的網頁游戲在設計理念、玩法設計、細節(jié)處理等方面都無法與國外相比，因此會出現一到兩年的模仿抄襲階段。但是國內的網

53、頁游戲競爭，最終比的是如何深入挖掘玩家需求，如何根據本土玩家的趣味和網頁游戲本身的特征，設計出最佳游戲來。本章主要闡述了界面設計原理，認知心理學，視覺習慣的基礎理論，分析以上要素在游戲界面設計中的地位。另外對網頁游戲的概念，分類、特點以及發(fā)展進行相關介紹。3網頁游戲中界面設計的方法和流程研究網頁游戲界面同普通的軟件開發(fā)過程一樣，必須有一個大體流程作控制，運用流程操作可以更方便的發(fā)現和解決問題，掌握游戲的開發(fā)進度并監(jiān)督執(zhí)行。通過界面設計理論的建立和界面設計一般方法的研究，我們可以用界面設計的方法來研究網頁游戲的界面設計。3.1 網頁游戲界面設計方法的研究以用戶為中心原則是網頁游戲界面設計的重要原

54、則，中心問題是要設計出一個既便于游戲用戶使用又能提供愉悅游戲體驗的游戲界面。一個好的游戲界面設計應該是既有實用功能又能滿足使用者的審美需求。游戲界面設計的目標包括可用性目標和用戶體驗目標?？捎眯阅繕耸顷P于游戲界面本身所要承擔的人機交互功能的目標，而用戶體驗目標則是用戶對于整個游戲界面設計的使用體驗?？捎眯阅繕伺c用戶體驗目標所關注的目的是不同的，究竟哪一個目標的實現更為重要取決于對特定的用戶需求和用戶任務。3.1.1 可用性目標對于可用性的定義，一般可以被概括為有用性和易用性兩個方面：有用性是指用戶界面能否實現特定的功能，而易用性是指用戶與界面的交互效率、易學性以及用戶的滿意度?？捎眯阅繕梭w現在

55、要求網頁游戲界面具有一定的使用功能且是有效的游戲和用戶的交互功能，人機交互效率要高，易于游戲用戶學習和使用，具備一定的通用性。把可用性目標表達成一種特定的問題形式的時候，可用性目標就轉變?yōu)榭捎眯詷藴?，就可以用這些可用性標準來衡量系統(tǒng)是否具有一定的可靠性、有效性、易學性等可用性。常用的可用性標準包括：用戶對于游戲界面的學習時間，執(zhí)行任務的效率，執(zhí)行任務的步驟、用戶的執(zhí)行出錯率和用戶的使用滿意度等8。目前，在很多網頁游戲界面的設計中，過分使用新的技術而忽略了游戲用戶因素的現象，從而導致了游戲界面本身很多的有用性問題。其表現為：1. 許多游戲本應該有的操作不能通過游戲界面去完成；2. 游戲界面本身就

56、不具備完整的人機交互功能；3. 過多的功能造成界面混亂；4. 很多不需要的界面功能的閑置等等。以上這些問題都說明了網頁游戲界面可用性指標的重要性。具有好的可用性的用戶界面可以大大減少用戶的誤操作，提高工作效率，減少學習時間和技術支持，提高游戲的市場競爭力。3.1.2 用戶體驗目標用戶體驗指的是游戲用戶在玩游戲、與整個游戲系統(tǒng)進行交互時的體驗感覺，是基于游戲用戶本身主觀體驗的主觀要求，是個涉及面很寬泛的問題24。例如：可以把一款游戲的界面設計成十分“絢麗多彩的”、“吸引人的”、“有趣的”“新奇好玩的”等等。用戶體驗目標注重的不是游戲界面的有效、可靠性，而是否能讓游戲用戶滿意、是否能增強游戲的沉浸

57、感、是否能激發(fā)游戲用戶的創(chuàng)造力和滿足感等等。1. 切實關注用戶需要的設計用戶在網頁游戲站點上的一組操作，所有的操作，都是在完成特定的“任務”，操作流程，也就是“任務流”。分析用戶使用游戲提供的一個功能時，會出現的各種可能情況以及其后續(xù)可能的發(fā)展，可以把“任務流”組織成一個樹狀的結構。對任務流的結束點的處理方式（尤其是操作失敗的情況），可以間接體現游戲的用戶友好程度。2. 適合不同“級別”用戶的設計用戶分類是個不小的話題。一個在線游戲中有各種級別的玩家，不同級別的玩家，有著及其不同的特點。對這些玩家按照各自不同的特點和需求進行分類并研究，有針對的進行不同的設計。3. 關注用戶“有限注意力”的設計

58、用戶在屏幕上的注意力是有限的，過多的不相關信息，會很大的影響用戶的閱讀。良好的操作界面必然是要有助于用戶把注意力放在當前任務上的。用戶的正常關注焦點，有相關研究表明是在屏幕中點到向上1/4 的范圍，這是界面布局的核心區(qū)域，游戲主要內容就應該盡量涵蓋這個區(qū)域，而將其他輔助塊，有秩序地圍繞放置。對于網頁游戲，現在的功能復雜度還無法企及大型客戶端游戲的水平，但是其復雜度也是不能忽略的。而且，一個簡潔、順暢的操作界面，對一個良好設計的貢獻度是相當大的。用戶體驗目標實現無疑是一個富有創(chuàng)意的、卻也比較麻煩的設計領域。一方面，不容易有直觀的標準指明設計的好壞，一方面，用戶對具體功能的使用具有偏好性，以及習慣

59、性，另外還有當前瀏覽器技術上和硬件的一些限制。所以決定了這樣的設計注定是一種“迭代”式的開發(fā)工作：基于一個原形，不斷獲得反饋，不斷完善和修正。網頁游戲的架構上的分層思想，無外乎也是在順應這樣一種開發(fā)模式。3.2 以用戶為中心的網頁游戲設計方法網頁游戲用戶界面設計的關鍵特征包括：以用戶為中心，特定的可用性標準和迭代設計。以用戶為中心是網頁游戲界面設計的一個核心原則，雖然在整個的開發(fā)過程中不能保證用戶的每一個環(huán)節(jié)的參與，但這一原則能夠提醒設計人員注重用戶的重要性，始終把用戶的需求放在第一位來考慮。在開發(fā)初始階段就應該確定出特定的可用性目標和用戶體驗目標，在進行具體設計的時候應該通過迭代運用不斷的反

60、饋信息來改進界面設計的不足并完善它，通過不斷的設計，評估到再設計這樣一個反復循環(huán)趨于最優(yōu)化的迭代過程使界面設計不斷的得到改進和優(yōu)化。用戶參與性設計主要強調用戶作為最終的界面使用者參與整個游戲界面設計過程，從對于游戲用戶本身的調查到最終游戲界面的評估；迭代式設計指對于整個游戲界面設計的過程進行不斷的改進設計。每一次迭代以游戲界面設計的評估結果和用戶意見為參考進行，最終目的是設計出最令用戶滿意的游戲界面。1. 以用戶為中心的設計系統(tǒng)設計必須根據用戶的需要來確定，而不能由功能過程需求，或硬件限制等來推動。以用戶為中心這是關于交互設計的一個核心觀點，讓用戶參與整個設計和評估，有助于及時得到反饋。2.