第一篇：網頁UI界面設計展望論文（共）

旗幟欄是宣傳式的欄目，作為網頁中傳遞整站信息的重要途徑，最易于瀏覽者查看。旗幟欄文字具有統一性、標識性等性質，設計趨于圖形化。導航欄是地圖式的欄目，在導航條的布局中，文字是最好的用戶向導，導航欄文字的設計效果決定了瀏覽者能否迅速找到目標頁面。網站種類復雜屬性各異，在做網頁文字設計時，要充分考慮到使用者的年齡、性別、職業、文化背景、經濟水平等因素。網頁“布局”是對頁面的內容尺寸、間距及位置的設計，好的布局可以有效地幫助用戶快速找到目標內容，并在視覺效果上給用戶享受。合理的布局必須要有清晰的視覺層次，必須直觀體現網頁UI界面各元素之間的重要梯度，用戶首先關注的區域是標志、LOGO和導航欄等重要元素。體現視覺層次，還需要在設計視覺流時還應考慮交互人物的邏輯性和瀏覽習慣。

多媒體設計

多媒體技術是指將多種單媒體復合而成的技術。多媒體技術融合了各種視覺和聽覺媒體，包括動畫、文字、圖形、圖像、語言、音樂和立體聲響等，多媒體網頁UI界面可以讓用戶同時接受多樣的媒體信息來源。網頁UI界面設計中使用多媒體技術可以體現以下幾個特點：1）集成性，對遠程多媒體的影音信息統一取得與發布。2）交互性，人性化的實現信息傳播，能夠主動選擇和控制信息流方向。3）非線性，創建了超文本鏈接方法，把靈活展示瀏覽內容。4）實時性，實時控制多媒體信息，及時配合用戶指令。5）動態性，用戶可以按照自己的需求選擇信息使用方式，甚至重組信息的各種表現形式。

網頁交互設計

交互設計需要解決的是人與機器之間互動的問題，是表現層的東西，好的交互設計方案能夠讓用戶感覺網頁非常好用。怎樣的網頁交互設計才算是好的方案呢？1.讓人有耐心等待。根據網絡調查，大多數用戶對網頁打開的等待時間最多堅持5秒鐘，如果5秒內頁面都不能打開，那這個頁面上的內容將沒有任何意義都就將。所以在交互設計時，需要考慮網頁等待時給用戶提供的信息。最好的方式是反饋，當用戶等待時，告訴用戶他的操作是否成功并且將剩余的等待時間實時呈現，這樣就能有效解決用戶不能耐心等待的問題。2.讓人不用動腦筋想。好的網站能夠幫助用戶快速完成任務，要達到快速完成任務的目的，交互設計必須使頁面簡單，盡量讓用戶瀏覽時不收不必要的干擾，最好能夠符合用戶心智模型。因為，大部分的用戶在瀏覽網站時希望的是能快速找到勉強應付的方案，而不愿意主動尋找方案，百分之八十的用戶只會用百分之二十的功能。

網頁UI界面設計展望

目前，網頁UI界面設計主要是三維的視覺界面和二維的圖形界面，同時輔以動畫、聲音等多媒體插件布局設計。隨著計算機技術的不斷發展，三維立體的操作界面系統會在網頁設計中逐步普及，三維立體界面的直接操作是虛擬現實（VirtualReality）交互性的一個重要表現方式。三維虛擬空間中的直接操作包括平移、拾取和旋轉等操作，例如如今比較前沿的3D影裝和多點觸控技術。三維直接操作使得網頁UI界面設計不再僅僅局限于視覺效果的三維變換，可以實現類似于四維空間的人機直接交互，從而更好的完成用戶操作。

結論

幾十年來，網頁UI界面設計經歷了不同的發展階段，流行了各種不同的風格，當前網頁UI界面處于圖形用戶界面時代，作為網頁設計師并不能僅僅滿足這種現狀，需要和計算機科學家們一起合作，積極探索新型界面風格的人機交互技術?，F代網頁UI界面設計的主要任務就是要把用戶實際工作過程、任務模型、行為方式、心理模型有效化的結合，并合理的轉換成界面產品內容的實現模型，從而向用戶呈現一個盡可能接近其真實角色，符合高度審美標準的界面產品系統模型。

第二篇：UI界面設計服務委托合同范本

手機UI界面設計服務委托

合同

書

手機UI界面設計服務委托合同范本

本合同由以下當事人訂立，并于

______年____月

____日簽訂：

甲方：_______________

乙方：_______________

依據《中華人民共和國合同法》的規定，合同雙方就甲方系統客戶端的部分UI設計，經協商一致，簽訂本合同。，以資雙方遵照執行：

第一條：定義

1、UI設計服務是指_______________公司因受客戶委托向該客戶提供的系統UI設計一種收費服務（以下稱“服務”），服務說明參見合同及其附件。

2、服務合同：甲乙雙方本著“合作、平等、誠信”的原則，就服務內容和服務過程中雙方的權利義務在本合同中進行的有關約定。

第二條

UI界面設計步驟

1、甲方應將UI設計涉及的相關資料（包括文字、圖片等）收集完整，并列出自己對網站總體要求與建設效果等書面要求交予乙方，乙方簽收后按此執行。

2、乙方根據甲方UI界面設計設想核算UI界面設計具體涉及的服務項目及金額，并書面告知甲方，由甲方對此審核，如甲方對此無疑義則予以書面確認，否則由雙方再行協商。

3、自收到甲方交納70%網站制作首款費用之日起，乙方開始制作網站，并于日內制作完畢。（其中不包含甲方修改意見以及確認所需日期和國家工信部備案所需日期。）

4、在UI界面設計過程中乙方應及時與甲方進行UI界面設計進程的溝通。

5、UI界面設計基本完成后，乙方應上傳到乙方公司的服務器上請甲方確認，并根據甲方意見進行修改。

6、甲方根據驗收標準在書面確認制作的網站已經達到甲方的要求后，驗收完畢后在五個工

作日內將剩余30%

款項匯至乙方銀行帳戶，并將匯款憑證傳真至乙方公司，但甲方將剩余款項匯入乙方銀行帳戶的，自該匯入之日起視為甲方向乙方支付全部服務費之義務履行完畢。

7、技術情報和資料的保密：研究開發人員在此期間之內嚴格保守該研發項目的技術情況和資料，未經委托人許可不可擅自傳遞、轉載所有相關資料給第三方；一經發現委托人有權向司法機關提起訴訟，研發人員將承擔相應的法律責任；

8、在本合同有效期結束，項目資料全部提交，委托人簽收后，研發人員必須銷毀留存的所有與該項目有關的資料與文件；在本合同有效期結束，研發人員必須嚴格遵守保密條款，對于該研發項目內容未經委托人許可，不可透漏給第三方；一經發現委托人有權向司法機關提起訴訟，研發人員將承擔相應的。

第三條：服務內容及費用

第四條：甲方權利與義務

4.1、合同如果甲方提交的信息中包含任何違反法律法規、違反公共道德準則或侵犯第三方合法權益的內容，乙方有權拒絕收錄，但乙方應將拒絕收錄的內容書面通知甲方。

驗收標準為：

1、頁面是否按甲方需求進行設計。

2、各鏈接是否準確有效。

3、文字內容是否正確（以客戶提供的電子文檔為準）。

4、是否完成功能模塊設計，各功能模塊運行是否正常。

4.2、如有其他未能解決的問題，可與乙方服務投訴部聯系協調解決。

4.3、甲方須在合同簽訂后2

日按照本合同中約定的比例向乙方支付服務費用。如甲方未能按時支付前述費用，乙方有權利拒絕向甲方提供合同中規定服務。

4.4、為確保甲方利益，甲方有權要求乙方提供UI界面設計服務確認函（需要明確確認函的目的）

4.5、甲方在服務期間若需要變動網站網頁設計風格或者針對數據庫表結構進行增加或變動等新的UI界面設計服務內容，需簽訂新的合約，并對有關事項另行約定。

第五條：乙方權利與義務

5.1、乙方應照UI界面設計服務合同及服務條款向甲方提供有關服務，出現問題，應及時向甲方進行解釋說明并及時解決。

5.2、乙方應按照經甲方書面確認的UI界面設計服務報價向甲方收取服務費用。

5.3、若甲方要求乙方提供UI界面設計服務確認函，乙方應按照甲方要求向甲方提供UI界面設計服務確認函。

5.4、乙方不得將甲方為UI界面設計需要所提供給乙方的任何文字、圖片等資料及有關信息作為其他用途使用，或因任何目的提供給任何第三方使用，但該等使用或提供使用經由甲方書面授權同意的除外。若有違反，乙方須承擔一切相應的法律責任并賠償甲方因此遭受的損失。

5.5、在網站使用過程中，甲方可就任何非因甲方原因或者不可抗力所產生的網絡技術問題向乙方提出投訴或咨詢，乙方必須及時給予反饋并于接到投訴電話之時起24小時內解決問題。

第六條：保密義務

任何乙方必須對另一方所獲取的任何商業秘密嚴格保密，在未事先取得另一方書面同意的情況下，不得以任何形式向第三方進行披露，否則承擔相應違約責任并賠償由此造成的所有損失。

第七條：修改條款

本合同所訂一切條款，甲、乙任何一方不得擅自變更或修改。如一方單獨變更、修改本合同，對方有權拒絕履行，并要求單獨變更、修改合同的另一方賠償一切損失。

第八條：不可抗力條款

甲乙任何一方如確因不可抗力的原因，不能履行本合同時，應及時向對方通知不能履行、延期履行或部分履行的理由。在取得有關機構證明后，本合同可以不履行或者延期履行或部分履行，并全部或者部分免予承擔違約責任。

第九條：適用法律與爭議之解決

本合同之簽署、效力、解釋和執行均應適用中華人民共和國法律。對于因本合同的解釋及執行而產生之爭議，雙方通過友好協商解決；協商不成時，任何一方均可將有關爭議提交合同簽訂地的人民法院起訴，提起訴訟。

第十條：其他

1、本合同構成雙方之間完整意思表示，取代先前所有討論、協商及合同

2、本合同一式兩份，甲乙雙方各執一份

3、本合同附件為本合同的有效組成部分，與本合同具有同等法律效力。本合同自甲乙雙方簽約代表簽署并加蓋公章后生效

4、其他未盡事宜，依據有關法律規定辦理

5、因履行本合同或者與本合同相關的爭議，雙方應協商解決；協商解決不成的，任何一方均有權將爭議提交相關仲裁機構。

6、本合同由雙方之正式授權代表于__________月__________日__________在_________簽訂。

甲方：_______________

乙方：_______________

授權代表：_______________

授權代表：_______________

地址：

地址：

電話：

電話：

蓋章：

蓋章：

開戶行：

帳號：

開戶行：

帳號：

第三篇：UI用戶界面設計課程設計報告

UI用戶界面設計 大作業課程設計報告

題 目：依依旅行系統前臺應用及后臺管理院 別：專 業：學生姓名：指導教師：成 績：

信息與控制學院

計算機科學與技術 120210137宋依依

孫麗云

2015年 6 月 12 日

一、系統概述 1.1課程設計題目：

依依旅行系統前臺及后臺管理

1.2 課程設計運行環境：

1.2.1前臺開發工具：

Java，MyEclipse6.5，Tomcat5.x 1.2.2后臺開發工具：

Microsoft SQL Server 2008 1.2.2系統運行結果工具：

360安全瀏覽器7.1 1.3 課程設計實現技術：

基于HTML，CSS，JSP等技術的應用

二、依依旅行系統需求分析

2.1 系統功能需求：

系統的功能需求包括一下幾個方面

（1）游客在不登錄的情況下只可以進行相關旅行，車票，酒店信息的查詢。（2）游客通過注冊登錄或者登錄后，可以通過網絡查詢景點的信息概況和預定景點票，酒店，車票（飛機票，火車票，或者租車）。

（3）游客登錄后還可以進行各種訂單的退訂，個人信息的修改。（4）系統管理員可以查看游客的預定請求和取消預定的請求。（5）系統管理員可以對系統的數據庫進行維護，例如增加、刪除和修改景點信息，增加、刪除工作人員帳戶，增加和刪除旅行用戶。

三、依依旅行系統概要分析

3.1旅游系統模塊介紹

滿足以上需求的管理系統主要包括以下幾個模塊。（1）旅游數據維護模塊

基本數據維護模塊提供了使用者錄入、修改并維護基本數據的途徑。例如對游客及導游及工作人員各項信息的更新和修改。（2）旅游業務模塊

基本業務模塊主要用于實現游客查詢景點信息和預定的管理，可以登陸系統預定景點游票和導游預定，工作人員可以處理預定信息和取消預定信息等操作。

（3）數據庫管理模塊

在系統中，所有景點信息以及工作人員和導游的帳戶信息都要進行統一管理，景點的使用情況和預定情況也要進行詳細的記錄，要用統一的數據庫平臺進行管理。（4）旅游信息查詢模塊

信息查詢模塊主要用于查詢景點的信息和游客的預定信息。下圖所示表示了旅游開發管理系統的功能需求：

3.2旅游數據維護模塊

數據維護模塊包括如下圖所示的幾個方面：

（1）修改更新景點信息：系統管理員可以更新和修改景點信息。（2）更新和修改信息：系統管理員可以更新和修改旅游景點和酒店出行，刪除游客的信息。

（3）添加景點信息：系統管理員可以添加景點及景點信息。（4）刪除景點信息：系統管理員可以刪除景點及景點信息。

3.3旅游業務模塊

旅游業務模塊包括一下幾個方面：

（1）注冊登陸后，更改個人信息

（2）查詢信息：游客查詢景點使用信息及景點概括信息。（3）預定取消景點：游客預定景點票。

（4）酒店預訂：游客可一根據情況預定酒店。

（5）出行方式：游客可以根據自己的情況選擇出行方式。

3.4數據庫管理模塊

數據庫模塊包括一下一個方面：

（1）游客信息管理：信息包括游客的姓名，電話號碼，及聯系方式等。（2）景點信息管理：景點信息包括景點的名稱，代號，概況等。（3）酒店信息管理：包括酒店名稱，地址，規格等。

（4）出行信息管理：出行方式，火車票，租車信息等。（5）預定信息管理：景點票，酒店，車票信息。

四、依依旅行系統數據分析

4.1管理員信息表

4.2用戶信息表

4.3景點信息表

4.4酒店信息表

4.5火車票信息表

4.6飛機票信息表

4.7租車信息表

4.8用戶支付信息表

4.9常用游客信息表

4.10游客常用地址信息表

4.11景點訂單信息表

4.12火車票訂單信息表

4.13飛機票訂單信息表

4.14租車訂單信息表

4.15酒店訂單信息表

4.16用戶評論信息表

五、依依旅行系統的前臺實現過程

5.1依依旅行系統首頁

注：此時因系統未登錄，所以只可以查看詳情，若進入景點點擊預定和留言或者點擊出行方式和酒店預訂則跳轉到5.2登錄界面

5.2依依旅行系統登錄界面

當輸入用戶不存在時跳轉到

當輸入用戶存在，密碼輸入有誤時跳轉到

當輸入用戶存在，密碼正確時跳轉到5.3

5.3依依旅行系統登錄界面

若及點擊退出則回到5.1首頁界面。

5.4依依旅行系統注冊界面 第一步：輸入用戶名，當用戶名已存在時

當用戶名不存在時

當密碼兩遍輸入不相同時

當密碼兩遍輸入相同時

5.5依依旅行系統修改個人信息界面

點擊修改

修改后點擊保存

5.6依依旅行系統修改個人密碼界面

當前密碼輸入有誤時：

新密碼兩遍輸入不同時：

新密碼兩遍輸入都正確時時：

5.7依依旅行系統常用游客信息界面

添加游客

5.8依依旅行系統支付信息界面

5.9依依旅行系統訂單信息界面 景點訂單信息

火車票訂單信息

飛機票訂單信息

租車訂單信息

酒店訂單信息

分別可以進行取消訂單操作

5.10依依旅行系統預訂信息界面 可以選擇出行日期，出行人數

點擊預訂后對信息進行確認，并計算總價格

若積分大于總價格：預訂成功

若積分小于于總價格：

5.11依依旅行系統出行方式界面 火車票

飛機票

租車

分別可進行預訂

積分充足，與積分不足的情況同景點預訂 剩余票數不足時：

5.12依依旅行系統酒店預訂界面

5.13依依旅行系統退出界面

若及點擊退出則回到5.1首頁界面。

六、依依旅行系統的后臺實現過程

6.1依依旅行系統管理員登錄界面

注：管理員沒有注冊功能

管理員名稱不存在或密碼輸入有誤時情況與用戶登錄相同 6.2依依旅行系統管理員所有管理員界面

6.2依依旅行系統所有用戶界面

可進行刪除操作，提示操作人為當前用戶指明操作人的操作成功

6.3依依旅行系統管理員所有景點信息界面

可對其進行添加，修改和刪除操作

6.4依依旅行系統出行界面 飛機票信息

火車票信息

租車信息

6.5依依旅行系統用戶訂單信息界面 景點訂單信息

飛機票訂單信息

火車票訂單信息

租車訂單信息

酒店訂單信息

6.6依依旅行系統管理員信息修改界面

七、依依旅行系統的總結

通過本次課程設計，對JAVA編程，WEB網頁制作以及數據庫設計有了更深刻的認識和學習到了更多細小的知識點，遇到難題，通過小組討論以及在網上對相關資料的查詢得到了有效的解決辦法、本來這門課的知識學的就不夠扎實，本次課程設計，在設計過程中碰到了很多問題，剛開始要設計的時候，還真不知道從哪里下手但最終在圖書、同學和老師的幫助下都得到了解決，讓我學會了好多書本上沒有的東西，最重要的是知道了自己動手的不易，也知道了只要動手做就一定會得到收獲！

一分耕耘一分收獲！

第四篇：網頁游戲中界面設計的研究和應用(論文)

上海交通大學 碩士學位論文

網頁游戲中界面設計的研究和應用

姓名：李曉蕙 申請學位級別：碩士 專業：數字媒體藝術與技術

指導教師：楊旭波

20080901

網頁游戲中界面設計的研究和應用

摘 要

論文介紹了主流的網頁游戲界面設計的特點，根據人機界面設計 的原理，綜合網頁界面設計和游戲界面設計的各自特點給出網頁游戲 界面設計的原則、方法，流程，并應用于實際開發中來指導網頁游戲 的界面設計。

論文主要闡述了人機界面設計的基本原理，包括界面設計原理，認知心理學和視覺習慣基礎理論，具體分析以上要素在網頁游戲界面 設計中的作用。根據網頁游戲的目標用戶的心理特征模型和網頁游戲 的網絡特征模型對游戲界面設計原則進行了深入研究。根據人機界面 設計基本原理，即符合用戶需要的“簡單、自然、友好、一致” 界 面設計基本原則的基礎上，結合網頁界面設計的原則和游戲界面設計 原則三方面綜合分析得出網頁游戲界面設計的原則。分析了每一種游 戲的特殊性，闡述了現在主要的6種游戲類型的特點,提出了基于游 戲不同類型的界面設計原則。

根據所要達到的可用性目標和用戶體驗目標，得出了用戶參與的

迭代式的界面設計方法。該方法的主要特征為：用戶參與性設計與迭 代設計。即在整個界面設計過程中，用戶要全程參與設計過程；通過 迭代，進行重復的“設計——評估——再設計——再評估”的過程，就能利用反饋來改進設計。迭代是不可避免的，因為設計人員不可能

V

一次就找出正確地解決方案。在用戶數據的收集、分析、最初的概念 設計、正式模型設計、評估等各個階段都需要不停和用戶進行交流反 饋。迭代設計是一個有目的的設計過程，通過幾次設計迭代克服完全 需求所規范的固有問題，每一次迭代都可以改進最終的游戲界面。

該方法的流程為：確定軟硬件環境、設計調研、游戲任務分析設

計，以設計原則為基礎的建立模型、游戲界面的圖形設計、用戶參與 的迭代式設計測試和評估，詳細分析了在每個環節的具體實施方法以 及該環節中應該注意的問題。

根據先前得出的設計原則來作為對網頁游戲具體評價的依據來

進行設計功能和設計效果評價。評價一款網頁游戲的方法主要有實驗 方法、檢測方法、調查方法。選取一定的樣本用戶，讓用戶使用游戲，觀察其反應，在所有用戶完成游戲界面測試過后，分別考察使用新版 和舊版本的用戶，對用戶進行滿意度調查。用論文所得出的原則和方 法來對網頁游戲界面進行指導和規范設計后，較原版本游戲用戶更加 認可，有更好的滿意度。認為基本上符合用戶之前在需求調查中所提 出的要求，取得用戶較好的評價。驗證了論文提出的設計原則以及設 計方法的科學性。是的確符合以用戶為中心的界面設計理論，是可以 用來指導未來的網頁游戲的界面設計。

關鍵詞

網頁游戲，人機交互設計，游戲界面設計，可用性，用戶體 驗，迭代設計

VI

RESEARCH AND APPLICATION ON UI DESIGN

OF WEBGAME

ABSTRACT

User 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, 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 PC.Contrast to WebGame, the traditional online games need to download more than 300 M(some even more than 1 G)of the client software.All people who can connect to Internet can play game no cost, no waiting with input URL in web browser and need download nothing.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

VIII

system, which makes the prospect of web game even better.Although the domestic game is in full swing page and carried out，but the lack of systems theory as a guide, leading to many cases of failure of the game.At present, it is only a short introduction on Webgame UI design abroad, and lack of systematic, comprehensive, specific description and analysis of the domain of Webgame interface design.Interface is the external performance of the game;it has a direct impact each other between Game and user and has a very important position in the entire game design.In the interface design, from determining cultural background to realizing design idea, from feasibility analysis to project presenting, filter, amendment and evaluation, it must be a rational, orderly, systematic process and should be a corresponding system theory to guide.This article focused on the WebGame graphic interface design.We

analyze the current UI design in WebGame and deep research availability and user experience, and then bring forward principles, methods and Process to guide the future of the WebGame UI design.According to availability object and user experience goals, we draw

an iterative method with user participating in interface design.Our main contents are as follows:

First of all, respectively elaborate on the basic theory of

human-computer interface design and the concept of WebGame.Then we

IX

analyze characteristics of existing games and web browser platform then conclude the principles, methods and processes in WebGame UI design.Based on objectives of user experience and availability, we have come to the UI design method which is user participant and iterative.Users should be involved in the whole design process, and improve last UI by repeating the process “designre-evaluation”

again and again.Finally, we apply this principles and methods to designing a game

and evaluate it using observation and user survey.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 scientific using User monitoring and user survey method.Keywords: WebGame, Interaction Design, Game Interface Design, Usability, User Experience, Iterative Design

X

上海交通大學

學位論文原創性聲明

本人鄭重聲明：所呈交的學位論文，是本人在導師的指導下，獨

立進行研究工作所取得的成果。除文中已經注明引用的內容外，本論 文不包含任何其他個人或集體已經發表或撰寫過的作品成果。對本文 的研究做出重要貢獻的個人和集體，均已在文中以明確方式標明。本 人完全意識到本聲明的法律結果由本人承擔。

學位論文作者簽名：李曉蕙

日期：

****年**月**日

III

上海交通大學

學位論文版權使用授權書

本學位論文作者完全了解學校有關保留、使用學位論文的規定，同意學校保留并向國家有關部門或機構送交論文的復印件和電子版，允許論文被查閱和借閱。本人授權上海交通大學可以將本學位論文的 全部或部分內容編入有關數據庫進行檢索，可以采用影印、縮印或掃 描等復制手段保存和匯編本學位論文。

保密□，在 年解密后適用本授權書。

本學位論文屬于

不保密□。

（請在以上方框內打“√”）

學位論文作者簽名：李曉蕙

指導教師簽名：楊旭波

日期：

****年**月**日

日期：

年

月

IV 緒 論

1.1 論文的選題背景及意義

1.1.1 背景知識

1.無端網游

休閑娛樂已經成為我們這個時代生活很重要的一部分，游戲(Game)是一種參與、交互式的娛樂形式。這一概念是相對于被動式的娛樂形式而言的，看電視、讀書、看電影都是被動式的娛樂方式，在這些方式中，娛樂是展現式的，受眾只 能被動參與。游戲則要復雜很多，當人們玩游戲時，因積極參與而獲得快樂。

隨著計算機以及圖形圖像技術的發展，出現了電子游戲。電子游戲指以電子 元器件組裝成的設備為運行平臺的游戲。這與傳統的游戲方式是不同的，傳統的 游戲需要現實中的游戲道具，如：象棋、撲克牌等。而電子游戲則是通過控制電 子游戲設備與電子游戲進行交互的游戲方式。

在互聯網時代，電子游戲已經發展成為網絡游戲。玩網絡游戲也已經成為當 今人們休閑娛樂最為流行的一種方式。網絡游戲擁有強大的人與人之間的交流平臺，用戶在游戲中得到充足的虛擬現實體驗，這是過去傳統游戲不能比擬的。同 時，人的思想和行為等方面在玩游戲的過程中已經受到了游戲的影響[1]。

網絡游戲是利用TCP/IP協議，以Internet為依托，可以多人同時參與的游 戲項目。網絡游戲按照聯網方式分為：脫網單機游戲和網絡游戲；而網絡游戲按 照客戶端模式則分為：需要安裝相關內容客戶端軟件的傳統網游和不需要客戶端 的無端網游。無端網游的主要形式為WebGame，即網頁游戲。

社會在進步，技術在發展，而互聯網和Flash技術的深層次發展讓“傳統客 戶端網游”運行在瀏覽器中的美好愿望已經成為現實。無論從游戲的功能性、系 統的完善性和畫面的視覺沖擊力等方面，全新的無端網游都已達傳統2D網游精 品的水準，甚至在某些方面有所超越，比如在游戲的便捷性和優秀的環境適應能 力等方面。

未來的計算機軟硬件技術的發展，不僅個人電腦，使得手機，電視，PDA等 都可以作為客戶終端，由于互聯網無處不在，擁有海量信息存儲空間的服務器端 超級強大，本地客戶端甚至不需要硬盤來存儲信息。微軟認為未來的時代，連軟

件使用都希望完全通過網絡來實現，而不需要在去買什么光盤回家安裝什么軟 件。無端網游終將取代傳統游戲，成為未來游戲的主流和發展方向。

2.游戲界面設計

在人和機器的互動過程(Human-Machine Interaction)中有一個層面，即我 們所說的用戶界面(User Interface)。它是計算機科學與認知心理學、設計藝術、人機工程學、人因學(Human Factors)、社會學、語言學等交叉研究領域。人機 界面是人與機器之間傳遞和交換信息的媒介。從心理學意義來分，界面可分為感 覺(視覺、觸覺、聽覺等)和情感兩個層次。界面的功能可分為實用功能和審美功 能。實用功能完成界面溝通人和機器的使命；審美功能在滿足用戶審美要求的同 時并輔助實用功能。

用戶界面設計(User Interface Design)是屏幕產品的重要組成部分。界面 設計是一個復雜的有不同學科參與的工程，認知心理學、設計學、符號學等都扮 演著重要的角色[2]。

游戲界面指游戲軟件的用戶界面，包括游戲畫面中的按鈕、動畫、文字、聲 音、窗口等與游戲用戶直接或間接接觸的游戲設計元素。游戲界面設計(Game Interface Design簡稱GID)，是指對電子游戲中與游戲用戶具有交互功能的視 覺元素進行規劃、設計的活動。

1.1.2 論題研究目的與現實意義

歷史總在不斷重演并且驚人的相似，正如網絡游戲取代傳統單機游戲一樣，眼下，動態無端網游取代客戶端網游的趨勢開始愈發明顯。

網頁游戲正是屬于網絡游戲范疇，它是指無需下載和安裝客戶端程序、基于 ASP、PHP、Java和ActiveX等WEB編程技術和Flash技術，運行于WEB瀏覽器 的網絡在線游戲。是伴隨著互聯網技術的成熟高速發展起來的新種類游戲。

1.目的

今年網頁游戲突然之間變得很熱門，盛大、騰訊、17173、新浪等大公司都 很積極的關注，甚至連百度也摻和了進來。

WebGame究竟針對什么用戶？它究竟要發展向何方？有對這個問題的研討。大家的意見主要還是說WebGame主要針對上班一族，也就是當作小菜來吃。很多人都認為WebGame是不可能成為主流。

但是我認為，WebGame最終將取代現存的網絡游戲，而不是一種配菜。

從受眾群體容量來說，網頁游戲有天然優勢。能通過瀏覽器上網的人都是網 頁游戲的潛在受眾。根據最新的調查顯示：預計到今年年底全球互聯網用戶數量 將會超過10億，而中國網民數量已經達到2。2億，超過美國成為世界第一，網

民上網最主要目的是為了娛樂。網頁游戲，使用瀏覽器把游戲體驗的途徑簡化到 了極致：能上網的人，都可以“無需下載任何東西，無成本、無等待”地玩網頁 游戲，只要輸入URL就可。這種簡化是革命性的，與PC網游成鮮明對比。PC網 游需要下載300M以上（有的甚至超過1G）的客戶端，無法與網頁游戲的便利性 相比。

從科技發展角度來說，未來的計算機軟硬件技術的發展，不僅個人電腦，使 得手機，電視，PDA等都可以作為客戶終端，由于互聯網無處不在，擁有海量信 息存儲空間的服務器端超級強大，本地客戶端甚至不需要硬盤來存儲信息。連微 軟都認為未來的時代，連軟件使用都希望完全通過網絡來實現，而不需要在去買 什么光盤回家安裝什么軟件。WebGame最終取代現存的網絡游戲，也是大勢所趨。而且現在已經有一些開發者在從事這個方面的研究。我們也看到大型網絡游 戲的網頁化，網頁游戲隨著科學技術的提升，IE7等瀏覽器技術的成熟和普及，WebGame2.0的時代即將到來，也將會為網絡游戲產業帶入了一個新的時代。剛 剛推出的《Sherwood Dungeon》（舍伍德地牢）3D高品質網頁游戲代表目前世界 最頂級水平。從圖1-1可以看出，它的畫面已經完全可以媲美當今的網絡游戲。

圖1-1 舍伍德地牢的界面截圖

Fig.1-1 Interface screenshot of Sherwood Dungeon

國內最新的“閃游”《樂土》，還在測試階段，但是從圖1-2中可以看出它 的界面已經完全可以媲美傳統網絡游戲。而在游戲系統方面也做到了玩家之所 需，戰斗，寵物，聊天，裝備打造，非常全面系統。

圖1-2《樂土》的界面截圖

Fig.1-2 Interface screenshot of Paradise

看到了以上這些游戲，大多數人都會認為客戶端游戲最終可能被網頁游戲淘 汰。

2.研究的意義

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

從用戶角度來說，用戶愈為迫切地需要符合“簡單、自然、友好、一致”原 則的人機界面。游戲的使用者也從計算機專家迅速擴大到了廣大未受過專門訓練 的普通用戶。計算機用戶發生了改變，非計算機專業的普通用戶成了用戶的主體，這一重大轉變使游戲的可用性問題變得日益突出起來。游戲人機界面的重要性在 于它極大的影響了最終用戶的使用，影響了游戲的推廣應用。

著名的游戲開發者Bill Volk曾經對游戲設計寫下了一個等式“界面+產品 要素=游戲。很明顯，Bill Volk的意圖并不是說設計一款游戲就是簡單的加法，而是強調在游戲設計中界面的重要性。他認為“你的游戲就是你的界面”。游戲 界面是人和游戲機之間溝通的橋梁，它起到連接玩家和游戲內核的作用。玩家在 玩游戲時，所見、所感、所接觸的是游戲界面，而不是游戲內核，只有通過游戲

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

雖然目前有少數國外的資深游戲設計師在其著作中談到網頁游戲界面設計，但也只是簡單的概略性的介紹，對整個網頁游戲界面設計方法缺乏系統、全面、具體的介紹和分析。游戲界面是游戲的外在表現，是游戲中與游戲用戶直接相互 影響的部分，在整個游戲設計中占據很重要的地位。游戲界面設計從游戲文化背 景確定到界面構想產生、可行性分析到提出方案、方案分析、篩選、修正和評估 必須是有理、有序、系統化的一個完整過程系統，應該有相應的系統理論來指導。1.2 本文的主要工作

本論文是在致力于以用戶為中心的人機交互界面的設計與評估技術的研究 工作的基礎上撰寫而成，論文主要根據網頁游戲的特點，提出一些用以規范游戲 界面設計的原則，并遵循該原則提出了游戲用戶參與的迭代式界面設計方法和流 程，并對該方法和流程進行了應用驗證。論文的主要工作如下：

分別對人機界面設計的原理和用戶的認知心理和視覺習慣三個方面來研究 網頁游戲界面設計；

分析當前網頁游戲的概念、特點、分類、目標用戶從而來分析網頁游戲界面 并進行相關研究；

得出網頁游戲界面設計的原則、實現方法、流程和評價4個方面的基本理論 并進行相關應用驗證。

本文旨在通過根據得出的理論來優化和改善網頁游戲中的界面設計，使網頁 游戲能夠更加受到用戶的喜愛，為未來的網頁游戲界面設計提供有理、有序、系 統化的理論指導，促進網頁游戲的進一步發展。

1.3 研究方法

本文采用的是從抽象到具體再到抽象的敘述方法，首先是對人機交互的界面 設計進行普遍的理論綜述，然后對比網頁游戲與網頁和游戲得主要界面因素，結 合具體的現有游戲界面設計實例，總結網頁游戲中主要界面因素，最后歸納總結

出網頁游戲的界面設計的原則、方法、流程和評價體系。

本論文采用的研究方法主要有文獻研究法、問卷調查法、比較研究法。

1.文獻研究法

這是本文采用的最主要的研究方法，即通過對大量國內外對網頁游戲、網頁 和游戲的界面設計相關的文獻進行分析和研究，總結歸納出網頁游戲中的界面因 素，并對這些界面因素進行分析，在此基礎上總結出網頁游戲的界面設計所要遵 循的原則、設計方法和設計流程。

2.問卷調查法

本文采用問卷調查方法，選取各個層次玩家為調查對象，用以了解他們對網 絡游戲和網頁游戲中各種界面設計的直觀感覺和喜好，為網頁游戲界面的優化和 改進提供了依據，使之更受玩家的喜愛。

3.比較研究法

對網頁游戲中界面因素和設計與網頁和游戲的界面因素和設計進行分析比 較，網頁游戲和他們二者之間有許多共性，但文中突出論述了網頁游戲中的主要 界面因素及其設計的特殊性。

本文采用的是從抽象到具體再到抽象的敘述方法，首先是對人機交互的界面 設計進行普遍的理論綜述，然后對比網頁游戲與網頁和游戲得主要界面因素，結 合具體的現有游戲界面設計實例，總結網頁游戲中主要界面因素，最后歸納總結 出網頁游戲的界面設計的原則、方法、流程和評價體系。

1.4 論文結構

本論文是在致力于以用戶為中心的人機交互界面的設計與評估技術的研究 工作的基礎上撰寫而成，論文主要根據網頁游戲的特點，提出一些用以規范游戲 界面設計的原則，并遵循該原則提出了游戲用戶參與的迭代式界面設計方法和流 程，并對該方法和流程進行了應用驗證。論文的主要工作如下：

分別對人機界面設計的原理和用戶的認知心理和視覺習慣三個方面來研究 網頁游戲界面設計；

分析當前網頁游戲的概念、特點、現狀。從而對網頁游戲界面并進行相關分 析研究，得出網頁游戲界面設計的原則、實現方法和流程以及評價4個方面的基 本理論。并對這些理論應用到一款網頁游戲界面設計上。通過用戶調查驗證理論 的正確性。

本文旨在通過根據得出的理論來優化和改善網頁游戲中的界面設計，使網頁 游戲能夠更加受到用戶的喜愛，為未來的網頁游戲界面設計提供有理、有序、系

統化的理論指導，促進網頁游戲的進一步發展。

1.5 本章小結

本章主要介紹了網頁游戲和用戶界面設計的基本概念和發展，闡述了論文研 究的背景、意義，論文的目的和研究方法及論文結構。界面設計理論基礎

2.1 人機界面設計理論

在人和機器的互動過程（Human-Machine Interaction）中，有一個層面，即我們所說的界面（interface）。從心理學意義來分，界面可分為感覺（視覺、觸覺、聽覺等）和情感兩個層次。用戶界面設計是屏幕產品的重要組成部分。界 面設計是一個復雜的有不同學科參與的工程，認知心理學、設計學、語言學等在 此都扮演著重要的角色。用戶界面設計的三大原則是：置界面于用戶的控制之下；減少用戶的記憶負擔；保持界面的一致性[4]。

界面的說法以往常見的是在人機工程學中?！叭藱C界面”是指人機間相互施 加影響的區域，凡參與人機信息交流的一切領域都屬于人機界面。而設計藝術是 研究人一物關系的學科，對象物所代表的不是簡單的機器與設備，而是有廣度與 深度的物；這里的人也不是“生物人”，不能單純地以人的生理特征進行分析。人的尺度，既應有作為自然人的尺度，還應有作為社會人的尺度；既研究生理、心理、環境等對人的影響和效能，也研究人的文化、審美、價值觀念等方面的要 求和變化。

設計的界面存在于人一物信息交流，甚至可以說，存在人物信息交流的一切 領域都屬于設計界面，它的內涵要素是極為廣泛的?？蓪⒃O計界面定義為設計中 所面對、所分析的一切信息交互的總和，它反映著人一物之間的關系。

交互設計目前已經成為一個重要的商業領域，網站咨詢、新生公司和游戲公 司都已經意識到交互設計在成功的交互式產品中起著關鍵作用。WEB產品要吸引 人們的注意，就必須能夠從眾多的競爭對手中脫穎而出，其核心問題也就是：產 品應易用且非常有效。

2.1.1 人機界面的概念

介于人與計算機之間，人與機器的通信，人機界面(HCI)：軟件+硬件

所謂界面，即人機界面(Human-Machine Interface)，是人與機器進行交互 的操作方式，即用戶與機器互相傳遞信息的媒介，其中包括信息的輸入和輸出。好的人機界面美觀易懂、操作簡單且具有引導功能，使用戶感覺愉快、興趣增強，從而提高使用效率。界面可以分為硬界面和軟界面，也可以分為廣義的和狹義的 人機界面。[5]

廣義界面廣義的人機界面，指人與機之間存在一個相互作用的媒介，人通過 視覺和聽覺等感官接受來自機器的信息，經過腦的加工、決策，然后做出反應，8實現人機的信息傳遞。我們可以把人機界面看作一個有著交互的系統，在分析人 機界面系統模型時，建立并分析人的行為模型，從而建立并設計人機界面系統。可見研究人機界面就是研究機器怎樣適應人的有效工作的問題。在人機界面系統 中，機器適應人就必須是機器怎樣把信息傳達給人和人怎樣有效操作的交流過程 的問題。

狹義界面狹義的人機界面指計算機系統中的人機界面，即所謂的軟界面。人 機界面(Human-Computer Interface)，又稱人機接口、用戶界面(User Interface)、人機交互(Human-Computer Interaction)，軟界面是人和計算機之 間的信息交流界面，人機界面的設計直接關系到人機關系的和諧和人在工作中的 主體地位，以及整個計算機系統的可使用性和效率[6]。它是計算機科學中最年輕 的分支科學之一。它是計算機科學和認知心理學兩大科學相結合的產物，涉及當 前許多熱門的計算機技術，如人工智能、自然語言處理、多媒體系統等，同時也 是吸收了語言學、工業設計、人機工程學和社會學的研究成果，是一門交叉性、邊緣性、綜合性的學科。本文主要研究的是人機軟件界面。

2.1.2 交互設計的目標

交互設計應能滿足用戶的需要，在理解用戶需要的過程中，我們也應明確我 們的主要目標：可用性目標和用戶體驗目標。二者在實現上有所不同，可用性目 標是關于滿足特定的可用性標準(如有效性)，而用戶體驗目標是對用戶體驗質量 所作的明確說明(如富有美感、令人舒暢等)。

1.可用性目標

可用性通常是要保證交互式產品易學、使用有效果，可細分為以下目標：

使用有效果(能行性)對熟練用戶來說能夠穩定運行。

工作效率高(有效性)處理同一項任務使用時間最少。

能安全使用(安全性)出錯率低，即完成任務中出錯次數少，包括小錯誤

及災難性錯誤。

具備良好的通用性(通用性)對具有不同文化背景的用戶通用，系統具備

國際化風格。

易于學習(易學性)對新用戶來說易于學習。

使用方法易記(易記性)易于隨機使用系統完成任務。

把可用性目標表達成特定問題的形式，他們就轉變成了可用性標準。我們可

2.用戶體驗目標 以通過檢查系統能否改進用戶的工作效率及其程度如何，來評估產品的可用性。

新技術己經從各個方面滲透到人們的日常生活中，人們對產品有了更多的要 求，交互設計已不僅僅是提高工作效率和生產力，人們越來越關心系統是否具備 其它的一些品質，這就使的研究人員和業界人士開始思考進一步的目標。如：

令人滿意

令人愉快

有趣

引人入勝

有用

富有啟發性

富有美感

可激發創造性

讓人有成就感

讓人得到情感上的滿足

在設計交互產品時；之所以要讓產品具有以上特點，其目的主要與用戶體驗 相關。所謂的“用戶體驗”指得是用戶與系統交互時的感覺如何，這里需要使用 主觀性的術語來描述用戶體驗的本質。

可用性目標和用戶體驗目標相比，可用性目標是交互設計的核心，它采用的 是明確地衡量標準，而用戶體驗目標其定義不是那么的明確。在評估時，可用性 是至關重要的。

2.1.3 界面設計的分類

美國學者赫伯特.A.西蒙提出：設計是人工物的內部環境(人工物自身的物 質和組織)和外部環境(人工物的工作或使用環境)的接合，所以設計是把握人工 物內部環境與外部環境接合的學科，這種接合是圍繞人來進行的[7]。

“人”是設計界面的一個方面，是認識的主體和設計服務的對象，而作為對 象的“物”則是設計界面的另一個方面。它是包含著對象實體、環境及信息的綜 合體，就如我們看見一件產品、一棟建筑，它帶給人的不僅有使用的功能、材料 的質地，也包含著對傳統思考、文化理喻、科學觀念等的認知?！叭魏我患髌?的內容，都必須超出作品，超出所包含的那些個別物體的表象?！狈治觥拔铩币?就分析了設計界面存在的多樣性。為了便于認識和分析設計界面，可將設計界面 分類為：功能性設計界面、情感性設計界面和環境性設計界面。

1.功能性設計界面

即接受物的功能信息、操縱與控制物。這一界面反映著設計“人”造物的協

調作用。

2.情感性設計界面

即物要傳遞感受給人，取得與人的感情共鳴。這種感受的信息傳達存在著確 定性與不確定性的統一。情感把握在于深入目標對象的使用者的感情，而不是個 人的情感抒發。設計師“投入熱情，不投入感情”，避免個人的任何主觀臆斷與 個性的自由發揮。這一界面反映著設計與人的關系。

3.環境性設計界面

界面設計要考慮外部環境因素對人的信息傳遞[0],任何一件或一個產品或平面視覺傳達作品或室內外環境作品都不能脫離環境而存在，環境的物理條件與 精神氛圍是不可忽缺的界面因素。尼葛洛龐帝指出：“一般個人電腦的界面，也 被當成是物理設計的問題。但是界面不僅和電腦的外表或給人的感覺有關，它還 關系到個性的創造、智能化的設計，以及如何使機器能夠識別人類的表達方式”

[8]。挑戰將遠遠不止是為人們提供更大的屏幕，更好的音質和更易使用的圖形輸

入裝置；這一挑戰將是，讓電腦認識你、你的需求、了解你的言詞、表情和肢體 語言。但這并不是因為它能找出聲音信號上的微小差別，而是因為它懂得你的意 思。這才是好的界面設計。

圖2-1 ：人機界面關系模型

Fig.2-1 Model of HMI

應該說，設計界面是以功能性界面為基礎，以環境性界面為前提，以情感性 界面為重心而構成的，它們之間形成有機和系統的聯系，如圖2-1所示。

2.1.4 界面設計的發展

這里所指的人機界面設計，是指計算機系統的用戶界面上控制輸入的設計方 法，大致經過了五代的演變：

1.命令語言

在圖形顯示、鼠標、高速工作站等技術出現之前，現實可行的界面方式只能 是命令和詢問方式，通信完全以正文形式并通過用戶命令和用戶對系統詢問的響 應來完成。這種方式使用靈活，便于用戶發揮其創造性，對熟練的用戶有很高的 工作效率，但對一般用戶來說要求高，易出錯，不友善并難于學習，它的錯誤處 理能力也較弱。

根據其語言的特點，及人機交互的形式的分為：

形式語言

自然語言。

類自然語言。

2.菜單和圖形用戶界面的廣泛應用

圖形用戶界面和人機交互過程極大地依賴視覺和手動控制的參與，因此具有 強烈的直接操作特點。這種方式與命令行方式相比不易出錯，可以大大縮短用戶 的培訓時間，減少用戶的擊鍵次數，可以使用對話管理工具，錯誤處理能力有了 顯著提高。但使用起來仍然乏味，可能出現菜單層次過多及菜單選項復雜的情形，必須逐級進行選擇，不能一步到位，導致交互速度緩慢。

3.面向窗口的點選界面

此類界面亦稱WIMP界面，即窗口(Windows)、圖標(Icons)、菜單(Menus)、指示器(Pointing Device)四位一體，形成桌面(Desktop)。這種方式能同時顯示 不同種類的信息，使用戶可在幾個工作環境中切換而不丟失幾個工作之間的聯 系，用戶可通過下拉式菜單方便執行控制型和對話型任務，引入圖標、按鈕和滾 動桿技術，大大減少鍵盤輸入，對不精于打字的用戶無疑提高了交互效率。

4.多媒體用戶界面及多通道用戶界面的發展，大大豐富了計算機信息的表

現形式。

自然語言與應用軟件進行通信，把第三代界面技術與超文本、多任務概念結 合起來，使用戶可同時執行多個任務(以用戶的觀點)。隨著文字、圖形、語音的 識別與輸術技術的進一步發展，多媒體技術在人機界面開發領域內的進一步發 展，自然語言風格的人機界面將得以迅速的發展，最終走向實用化。

5.虛擬現實技術的應用

虛擬現實系統向用戶提供身臨其境(immerse)和多感覺通道(multi-sensory)體驗，作為一種新型人機交互形式，虛擬現實技術比以前任何人機交互形式都有 希望徹底實現和諧的、以人為中心的人機界面。

2.2 用戶的認知心理研究

認知心理學，從廣義上來說，就是關于認識的心理學。人類認識客觀事物，主要就是通過感覺、知覺、注意、記憶、思維想象等來進行，因此，凡是研究人 的認識心理過程規律的，都屬于認知心理學的研究范疇[9]。實際上，我們這里所 指的認知心理學是指純粹采用信息加工觀點來研究認知心理學過程的心理學，也 就是運用信息論以及計算機的類比、模擬、驗證等方法來研究知識是如何獲得、如何存貯、如何交換、如何使用的。所以，我們這里所指的現代認知心理學實質 是信息加工心理學。

了解用戶的認知如何影響游戲界面設計，主要是消除游戲界面和用戶模型之 間的鴻溝，盡量消除用戶的挫敗感和失落感，對游戲界面產生的混淆、迷茫或抗 拒的感覺。這是認知心理學在游戲界面設計中發揮的主要作用[10]。

2.2.1 信息加工

認知心理學家關心的是作為人類行為基礎的心理機制，其核心是輸入和輸出 之間發生的內部心理過程。但是人們不能直接觀察內部心理過程，只能通過觀察 輸入和輸出的東西來加以推測，如圖2-2所示。所以，認知心理學家所用的方法 就是從可觀察到的現象來推測觀察不到的心理過程。有人把這種方法稱為會聚性 證明法，即把不同性質的數據會聚到一起，而得出結論。

圖2-2 信息加工系統結構圖

Fig.2-2 Chart of Information Processing System

這種觀點把人看作是一個信息加工的系統，認為認知就是信息加工，它包括 感覺輸入的變換、加工、存儲和使用的全過程。按照這一觀點，認知可以分解為 一系列階段，每個階段是一個對輸入的信息進行某些特定操作的單元，而反應則 是這一系列階段和操作的產物。信息加工系統的各個組成部分之間都以某種方式 相互聯系著。

認知心理學企圖把全部認知過程統一起來。它認為注意、知覺、記憶、思維 等認知現象是交織在一起的。對于一組現象的了解有助于說明另一組現象。由于

它們之間的相互依賴關系，很可能會發現人類認知過程的統一加工模式。認知心 理學不僅要把認識過程統一起來，而且要把普通心理學各個領域統一起來，也就 是要用認知觀點研究和說明情緒、動機、個性等方面。認知心理學的觀點還進一 步擴展到了社會心理學、發展心理學、生理心理學、工程心理學等領域。認識過 程的核心：思維及其特征認識過程是人接受、儲存、加工和理解各種信息的過程，即人腦對客觀事物的現象和本質的反映過程。它包括感覺、記憶、想象、思維等。其中思維是認識過程的核心。在日常生活中，當我們遇到問題時，總會說讓我想 一想、考慮一下，這里的想一想、考慮一下，就是心理學中的思維活動。思維是 人的心理過程中最復雜的心理現象之一，是人腦對客觀事物的本質屬性及其內在 規律的反映。事物的本質屬性，指的是能決定事物的主要特征的、某一類事物共 同的不可缺少的根本特性。事物的內在規律，主要是指事物之間的因果關系和必 然聯系。

認知心理學家往往把信息加工過程分解為一些階段，這就使他們注意到信息 在人腦內流動有個過程，如圖2-3所示。他們常用計時研究法。首先要測量出一 個過程所需要的時間，并以此來確定這個過程的性質。假定一個人看屏幕上投射 的字母E，如果投射時間很短，比如一毫秒，那么這個人就不會看到什么，這說 明知覺不是瞬時的；投射時間長一點，比如五毫秒，那么這個人就會看到某種東 西，但不知是什么，這說明知覺產生了，但辨別尚未產生；如果投射時間長度足 以使人看出這個字母不是?；騋，但看不出是E還是F或K，那么這個人就產生 了部分的辨別。由此人們就可以確定完全辨別、部分辨別或剛剛看出有東西所需 的時間。這一切表明，知覺是累積的。外部認知計算機與認知心理學。

輸入或刺激 編

碼 比

較

響應執行輸出或執行響應選擇

圖2-3 大腦信息處理模型

Fig.2-3 Model plan of the brain information processing

2.2.2 外部認知

人們需要同各種外部表示相交互，并且使用它們來創建信息。這些外部表示

包括書本、報紙、網頁、地圖、圖表、便條、繪圖等，同時人們也開發眾多的工 具來幫助認知，例如筆、計算器、計算機技術等。外部表示與物理工具相結合大 大增強了人們的認知能力，事實上，它們己經是不可或缺的組成部分，沒有了它 們，很難想象我們如何進行日常生活。

外部認知是要解釋我們在與不同外部表示相交互時涉及的認知過程，其主要 目的是要詳細說明在不同的認知活動、認知過程中使用不同表示的好處，主要有：

1．外表化以減輕記憶負擔

為了減輕記憶負擔，人們把各種知識轉變為外部表示的策略，把難以記住的 東西具體化，例如日記，筆記本、便條等來提醒人們。因此，“外表化”之所以 能夠減輕人們的記憶負擔，是因為：能夠提醒某件事情；提醒人們需要做些什么；提醒人們什么時候需要做某事。

“外表化”認知的另一個方法是修改表示已反映已發生的事。例如人們經常 在處理事物清單上劃去一些項，以表明它們己經完成，或是工作性質改變時，創 建不同的文件堆。

2．減輕計算負擔

在進行計算時，使用工具或設備并結合外部表示，即可減輕計算負擔，例如 筆、紙、計算器等。

3．標注和認知追蹤

“標注”就是修改的外部表示，如劃去某項或在某項加下劃線，而“認知追 蹤”則是重新安排某些事物的次序或結構。

使用基于外部認知的方法進行交互設計時，總體原則是在界面提供可視化信 息，減輕用戶的記憶和計算負擔。這樣就能夠擴充和增強用戶的認知能力，設計 良好的圖形用戶界面能夠大大減輕用戶的記憶負擔，用戶能夠依賴外部表示所提 供的線索，對界面進行操作。

2.2.3 計算機與認知心理學

控制論、信息論、計算機科學對認知心理學的發展具有深遠的影響。計算機 科學與心理學相結合，產生了一門邊緣學科人工智能。人工智能與認知心理學關 系極為密切，計算機的出現使人們找到了分析人的內部心理過程和狀態的新途 徑。早期實驗心理學的心理主義方向被行為主義切斷了將近半個世紀之久，今天，認知心理學延續了這一方向，同時又保持了新行為主義的嚴格的假設演繹法，增 加了機器模擬法。這就在認識過程的分析方面擴大了研究課題。

計算機模擬和類比是認知心理學家采用的一種特殊方法。要使計算機像人那 樣進行思維，計算機的程序就應當符合人類認知活動的機制，即符合某種認知理

論或模型。把某種認知理論表現為計算機程序就叫計算機模擬。因此，計算機模 擬首先可以用來檢驗某種理論，發現其缺陷，從而加以改進。

有些認知心理學家常用信息系列的流程圖來描述計算機程序的主要特點。但 這種流程圖并不具備計算機實際運算的細節，只為編制計算機程序提供了輪廓，它可以進一步化為計算機程序，而這部分工作往往是由計算機軟件專家實現的。認知心理學的一個基本觀點是可以用計算機來類比人的內部心理過程。計算機接 受符號輸入，進行編碼，對編碼輸入加以決策、存儲、并給出符號輸出。這可以 類比于人如何接受信息，如何編碼和記憶，如何決策，如何變換內部認知狀態，如何把這種狀態編譯成行為輸出。計算機與認知過程的這種類比，只是一種水平上的類比，即在計算機程序水平上描述內部心理過程，它主要涉及的是人和計算 機的邏輯能力，而不是計算機硬件和人腦的類比。

2.2.4 用戶心理認知與界面設計的相互影響

用戶心理認知對界面設計的影響

在設計中，人們提到最多的是用戶心理對設計的影響。這種影響的直接表現 形式就是用戶心理對設計的影響。用戶心理就是人們在特定社會歷史條件下，以 長期的用戶實踐中形成的具有理性化特征的美感判斷標準，在具體的用戶活動 中，它經常表現為用戶獨特的審美趣味和審美理想[11]。用戶心理是人類精神活動 特有的產物，正如馬克思在《資本論》中所說的：“最整腳的建筑師從一開始就 比最靈巧的蜜蜂高明的地方是他在用蜂蠟建筑蜂房以前，己經在自己頭腦中把它 建成了。勞動過程結束時得到的結果，在這個過程開始時就己經在勞動者的表象 中存在著，即己經觀念地存在著?！币虼?，無論是藝術家的作品，還是設計師的 作品，它們都是在一定心理的指導下完成的，只是這種心理，有的是以無意識的 形式表現出來的。

用戶心理對設計的影響，不僅是由于用戶心理是歷史積淀物，自發作用于任 何精神活動，還由于設計需要心理的指導。因為設計師從事設計活動的最終目的 是為人服務。因此他必須考慮到人的全面需求，所以，設計不可避免地要滿足人 的精神需求，迎合用戶的審美需求，這也就是決定了設計師需要從藝術中汲取審 美要素，將審美要素應用于界面設計。

設計這種與人密切相關的特性使其對美產生重要的影響。其中最重要的一點 就是對傳統“美”的意識的擴展和再認識。設計對“美”意識的擴展，體現在人 類對于更加完善的生存境界的永恒追求[12]。人類不僅要在純精神領域如純藝術、宗教、哲學等領域獲得享受，而且要在生活領域的其他方面也獲得使精神愉悅的 美感，這一事實體現著人類對生活全部藝術化的趨向。設計融合了人類物質文明 和精神文明，它要求設計師有較高的審美敏感度和扎實的形象表達技能，還要求

設計師能將技術和藝術緊密結合，通曉與設計有關的自然科學和社會科學的知 識，不斷地激發創造力，提高設計的文化品格。設計師在長期的設計實踐中逐漸 認識了設計與對象及客觀環境之間的各種關系，對當代的審美和技術的發展具有 一定的促進作用。

界面對用戶心理的影響

富有表現力的界面就是使用富有表情的圖標或其它圖形元素來表達情感狀 態。例如，很多軟件在表示它的運行狀態時都會有一個很明顯的情感圖形特征，即如果是正常運行的話會出現一個笑臉，如果是運行錯誤的話則會出現一個哭 臉。笑臉傳遞了友好善意的信息，在與用戶的第一次見面的時候就把這種友好的 情感傳遞給了用戶，能夠讓用戶感覺自在并回報以微笑，另外，笑臉形式的圖標 也能讓用戶感到放心，傳達了一個一切正常的良好的信息。而哭臉則表達了相反 的信息，表示失敗、消極的含義。

2.3 視覺習慣

視覺是人類獲取信息的主要通道，視覺傳達的信息占所處理信息總量的80% 以上，但對信息的加工人類視覺有其自然的習慣，先看什么，后看什么，體現了 視覺流動的規律，形成了畫面閱讀的視覺流程。一般人們的視覺流程為：從上到 下、從左到右、從動態到靜態、由明到暗、由粗線條到細線條，突然運動或者改 變運動狀態的物體比靜止的物體更能引起人們的關注，箭頭、下劃線等也能引導 觀察者的視線，這些習慣的形成與人類的視覺生理特性、思維發展的邏輯順序和 思維習慣有關。

心理學研究表明，人類對視覺范圍內的物體井不是予以同等重視的，而是從 中篩選一些對象。影響選擇的因素有色彩、位置、經驗等，不同的波長的色彩對 人的視覺刺激強度不同，波長越長刺激越大，暖色大于冷色，原色大于補色，紅 色最強。通常，上半部讓人感到輕松和自在，下半部則讓人感到穩定和壓抑，左 半部給人的感覺是輕松和自在，右半部則會給人穩定和壓抑的感覺。視覺影響力 上方強于下方，左側強于右側，所以上部和中上部被稱為“最佳視域”，也就是 最優選的區域。[13]

人們觀察事物遵循近大遠小、近清楚遠模糊的規律，在觀察者看來離觀察者 而去的平行線條當向遠方伸展時常常越來越靠近，如鐵路軌道，這就是我們所說 的線條透視，另外，光線穿過大氣層時將被分散(特別是當空氣中充滿塵埃時)，所以遠處物體顯得模糊，日標對比度減小會顯得更遠一些

2.4 網頁游戲概述

2.4.1 網頁游戲的概念

所謂WebGame翻譯成中文就是“網頁游戲”，是指無需下載和安裝客戶端程 序、基于ASP、PHP、Java和ActiveX等WEB編程技術和Flash技術，運行于WEB 瀏覽器的網絡在線游戲。是伴隨著互聯網技術的成熟高速發展起來的新種類游 戲。隨著internet的深入發展和WEB編程技術的跟新換代發展，網頁游戲獲得 了長足的發展。WEBGAME異軍突起，大有取代傳統游之勢。

網頁游戲作為一種特殊的游戲類型，WEBGAME由來已久，對廣大早期的網游 玩家而言并不陌生。早在網絡游戲盛行之前的Mud時代就已經存在，并憑借其方 便性和簡易性吸引了一大批早期的網頁用戶。以《第九城市》《笑傲江湖》等為 代表的早期作品多是基于BBS社區和聊天室為基礎擴展而來，其可玩性雖然不 高，內容也不夠豐富，但是交流性和交互性極強，已經初步具備了網游的基本特 征。而隨后的《king wars》和《戰神》等策略型WEBGAME則已經完全脫離了交 流社區的范疇，而正式發展成為獨立的游戲類型，并開始逐步提高其游戲性和可 玩性，在內容設計和系統數值上也有了進一步地深入和完善。

2.4.2 網頁游戲的特性

網頁游戲顧名思義，即有網頁的特性又屬于游戲的范疇。他的目的是為了娛 樂，所用的手段和運行平臺確是網頁瀏覽器。網頁游戲的發展離不開互聯網技術 和瀏覽器技術的發展。技術的發展為網頁游戲提供了豐富的表現手段。

1．網頁游戲的技術特性

網頁游戲依賴于網絡技術的發展，最早的網頁游戲其實就是一些用HTML寫 的簡單網頁，界面簡陋，交互手段貧乏，玩家與游戲的每次交互都會引起瀏覽器 刷屏一次。用戶體驗與PC單機游戲相比，判若云泥，天差地遠。界面與交互手 段的限制，使網頁游戲在游戲玩法設計上也無法施展，因此網頁游戲一直難以登 堂入室，不被玩家認可。

近兩年來，技術的發展為網頁游戲提供了豐富的表現手段。最近幾年興起的 豐富互聯網應用(Rich Internet Application，簡稱RIA)技術，能在瀏覽器這 個應用最廣的平臺上做出美不勝收的顯示和交互效果來。尤其值得一提的是 AJAX技術，在瀏覽器上不刷屏就能與服務器通信，更新網頁的局部信息，極大 地提高了用戶體驗。使用這種技術，做出的應用與傳統桌面程序即使暫時無法平分秋色，但分庭抗禮的發展趨勢已然初現。拿目前最流行的網頁游戲《貓游記》 作為例子：它的界面和動態交互過程，已經讓人難以區分這是一個獨立的游戲程

序，還是瀏覽器上的網頁應用。

網頁游戲天然就是網絡游戲。在這里，網絡通信細節被瀏覽器實現了，使得 游戲開發者和游戲玩家都無需購買昂貴的網游引擎和計算機設備，就可廉價地實 現網絡游戲。網頁游戲，使用瀏覽器把游戲體驗的途徑簡化到了極致：能上網的 人，都可以“無需下載任何東西，無成本、無等待”地玩網頁游戲，只要輸入

URL就可。這種簡化是革命性的，與傳統網游成鮮明對比。傳統網游需要下載300M 以上（有的甚至超過1G）的客戶端，無法與網頁游戲的便利性相比。因此，網 頁游戲有巨大的潛在受眾，又把體驗游戲的過程簡化到了極致，其發展潛力不容 忽視。

對網絡帶寬的要求相對較低，玩家幾乎可以在任何時間任何地點任何一臺能 上網的電腦上快樂地游戲，不會受到其他客觀條件的制約。等種種特點，也非常 適合長時間呆在辦公室和校園的OFFICE一族和大學生一族，他們可以輕松地 “在老板眼皮底下”享受游戲的樂趣，這些都是傳統網游所不能比擬的。而這部 分用戶大多具備消費游戲的經濟能力和消費需求，因此市場潛力相當巨大。

網頁游戲的未來潛力還體現在其跨平臺的拓展能力上。隨著瀏覽器技術的不 斷發展，網頁游戲已不再局限于網頁表現形式。而是實現了WEB+WAP的兼容。目 前在手機上已經能夠玩到多款網頁游戲。未來網頁游戲還將向手機客戶端圖形網 游(J2ME)的方向發展。多平臺無疑將為網頁游戲帶來更高的受眾覆蓋率與贏利空 間。這正是相較于包括傳統網游在內的任何游戲均不具備的巨大優勢。

2．網頁游戲的游戲特性

不同于以前的單機休閑小游戲，網頁游戲雖然“輕巧”卻絕不簡單。網頁游 戲種類繁多，其游戲形態包含了角色扮演、戰爭策略、模擬經營、社區養成、休 閑競技等多種類型，題材則覆蓋了科幻、歷史、武俠、魔幻、體育等眾多熱門領 域。在游戲深度與耐玩性上，與傳統網游相比并不遜色。

不同于傳統網游中存在大量NPC(電腦人物)供玩家練功、升級，網頁游戲的 世界中一般只有人類玩家，“與人斗爭”成為貫穿網頁游戲的“主旋律”、PK、復 仇、互助、交易、聯盟等發生在人與人之間的交往與斗爭在網頁游戲中被表現得 淋漓盡致，“互動性”這一網游最成功也是最吸引人的要素在中體現的更為突出。

游戲模式新穎，不花時間、無需在線是很多用戶的夢想。網頁游戲一個很大 的特色就是不需要用戶實時在線，安排好工作之后，隨著自然時間的增加游戲自 然在發展，這個特性是客戶端網游無可比擬的。

網頁游戲進入門檻低，打開IE就可以玩。這種方式可以使很多不適合玩游 戲的場所也可以進行游戲。比如說：上班時、看電影時。通過手機甚至可以在汽 車上。

網頁游戲的另一大特點是“輕松”。相對于緊張刺激，追求畫面音效享受的 傳統網游，網頁游戲以文字及簡單圖形作為主要表現形式，游戲節奏也要慢很多。不需要隨時在游戲中控制，所以網頁游戲玩起來輕松愜意，這讓玩家不必花費太 多時間就能照看好自己的“生意”。而正因為游戲過程無需投入太多精力，網頁 游戲不會如傳統網游那樣成為令玩家欲罷不能的“雞肋”?！俺撩浴边@一在傳統網 游蹤無法回避的問題在網頁游戲中基本不可能出現。

網頁游戲輕便、有趣、輕松的特色使其在短時間內迅速興起并風靡一時，并 被人們形象的稱為“綠色網游”。目前網頁游戲已經在國內擁有一批龐大的玩家 群體。與傳統網游的玩家呈現相對低齡化不同，網頁游戲的玩家群體主要以年輕 的上班族為主，特別是所謂的“白領”一族。究其原因，這與很好的迎合了“白 領”們渴望休閑但不愿過多花費精力，期望打發時間但以不影響工作為前提的生 活理念有著直接關系。

3．網頁游戲的用戶和市場特征

網頁游戲的受眾群體極其廣泛?？蛻舳司W頁因為其需要用戶長時間在線的特 性，以及題材方式的限制，導致很多用戶無法進入。而網頁游戲因為覆蓋面廣，不需在線等特性，只要能夠打開網頁就可以運行游戲，其潛在受眾群體是一個讓 大家驚訝的數字。據市場統計，中國2006一年的網絡游戲收入是59億，人群達 到率70%，其中，QQ游戲到達率37%（5000萬人），聯眾：20%（2700萬），盛大： 19%[14]。就受眾人群的知識層次與消費能力而言，以“白領”玩家為主的網頁游 戲無疑已成為網絡游戲中的“高端產品”。考慮到“白領”群體巨大的消費欲望 與經濟實力，這一新興市場迅速為多方所看好，并被普遍認為具有巨大的挖掘潛 力。

網頁游戲的獨特魅力與巨大潛力使之迅速成為互聯網行業中的“新貴”，僅 國內就有眾多企業投入這一領域并開發制作出了大量網頁游戲。

4．網頁游戲的不足

網頁游戲相對于客戶端網游優點有很多，但是和傳統網游相比，網頁游戲還 是有很多不成熟完善的地方。而劣勢其實集中在畫面表現力上（傳統RPG也可做 到網頁上，節奏感上將不是劣勢，而畫面上去難以比擬）。而隨著互聯網技術的 發展，網頁上的畫面表現力也得到了長足的發展。相對傳統網頁游戲的純文字表 現，現在的網頁游戲已經逐步向多媒體方向發展。

1)部分游戲模式互動性不強

因為網頁游戲中，除了角色扮演題材，其他題材都需要用戶時刻在線，所以 很難直接讓游戲用戶以一種直觀的方式和別的用戶溝通。

2)游戲節奏緩慢

因為網頁游戲不需要實時在線的特性，使其大部分題材的游戲節奏是緩慢 的。

3)游戲畫面表現力不夠

瀏覽器的局限導致網頁游戲的畫面很難達到客戶端網游的程度。

4)網頁游戲剛剛誕生、游戲內容不夠豐富

作為一個新興的娛樂模式，大家給予的重視還不夠，發展時間也比較短，短 時間內，游戲內容還大大的不夠豐富。

雖然目前網頁游戲尚無法與傳統網游在市場規模上相提并論，但可以肯定的 是，隨著WEB技術的不斷發展和網頁游戲認知度與影響力的不斷提升，網頁游戲 市場將迎來一波快速發展的高潮。

2.4.3 網頁游戲的發展

近兩年來，尤其是近一年來，國內外網頁游戲生猛出現，日新月異，目不暇 接。那么，網頁游戲的興起原因是什么？網頁游戲作為一個新生事物，它的過去、現在和將來會是怎樣的？而網頁游戲的悄然崛起，在某種程度上表明游戲已經進 入了一個全新的分眾時代。

網頁游戲出現得很早，最早的網頁游戲其實就是一些用HTML寫的簡單網頁，界面簡陋，交互手段貧乏，玩家與游戲的每次交互都會引起瀏覽器刷屏一次。這 時的網頁游戲，用戶體驗與PC單機游戲相比，判若云泥，天差地遠。界面與交 互手段的限制，使網頁游戲在游戲玩法設計上也無法施展，因此網頁游戲一直難 以登堂入室，不被玩家認可。

當年在網絡泡沫經濟的推動下，國內涌現了不少規模較大的WebGame。例如 《第九城市》、《逸飛嶺》等，以及活躍在各信息港的不同版本的《笑傲江湖》。它們是國內第一批基于WEB瀏覽器而產生的WebGame。當時它們所冠的頭銜不是Game，而是虛擬社區。

除了基本的BBS功能之外，網民還可以在虛擬社區里練級、打工、賽馬、喂 養寵物、建立家庭等等?；旧衔覀兡茉诰W絡游戲中所做的事，在當時的虛擬社 區一樣可以做。不同的是，網絡游戲更直觀一些，而虛擬社區則是以大量文字和 少許圖片的形式來表現。

虛擬社區最紅火的時候，成千上萬的網民為了那些虛擬數據，通宵達旦地守 候在電腦面前不斷刷新頁面。網站訪問量自然瘋了似地往上飆升！在網絡泡沫經 濟最紅火的時期，能增加網站訪問量就等于大把地撈進鈔票。自然大大小小的網 站都不遺余力地抽出人力物力去開發和維護虛擬社區。

不可思議的巨額網站訪問量蓋過了虛擬社區先天和后天的不足。但比網站訪

21問量增加得更快的是服務器不堪重負的壓力。隨著網絡泡沫經濟的破滅，網站訪 問量逐漸化為“浮云”，虛擬社區受到災難性的重創。不少虛擬社區由免費變為 收費，習慣吃免費大餐的網民自然難以接受，更何況大部分虛擬社區的質量和管 理都讓人不敢恭維。時至今日，存活下來的虛擬社區已經寥寥無幾，而且鮮為人 知。

但是誰也不曾料想到，一款國外引進過來的星戰題材《OGAME》和貓撲網以 圖形化社區演變而來的《貓游記》能使早已在國內衰敗的WEBGAME死灰復燃，并 掀起了其在國內火熱的第二股高潮。近兩年來，網頁游戲的興旺發展、逐漸為人 所知乃至被一些受眾接受和喜愛，是瀏覽器技術發展的必然產物。技術的發展為 網頁游戲提供了豐富的表現手段。

雖然網頁游戲在目前還不是主流游戲，但是他的發展前景是誘人的。

從科技發展角度來說，未來的計算機軟硬件技術的發展，不僅個人電腦，使 得手機，電視，PDA等都可以作為客戶終端，由于互聯網無處不在，擁有海量信 息存儲空間的服務器端超級強大，本地客戶端甚至不需要硬盤來存儲信息。連微 軟都認為未來的時代，連軟件使用都希望完全通過網絡來實現，而不需要在去買 什么光盤回家安裝什么軟件。RIA的各種技術目前還在發展，網頁游戲乘其勢，總的發展勢頭是樂觀的。目前，網頁游戲這個市場正在迅猛發育中。

網頁游戲將會向手機WAP和手機客戶端圖形網游（J2ME）方式聯合發展，是 跨平臺的，而不會單單停留在網頁表現形式上。多平臺的受眾覆蓋率和贏利空間 更大。現在已經有些公司在這方面已經邁出了第一步，同時在WEB上和手機上推 出產品，既是網頁游戲，又是J2ME圖形手機網游，兩個平臺訪問的是同一服務 器。

網頁游戲進入門檻低，競爭非常激烈。產品多，淘汰率高，精品少。國內的 網頁游戲在設計理念、玩法設計、細節處理等方面都無法與國外相比，因此會出 現一到兩年的模仿抄襲階段。但是國內的網頁游戲競爭，最終比的是如何深入挖 掘玩家需求，如何根據本土玩家的趣味和網頁游戲本身的特征，設計出最佳游戲 來。

2.5 本章小結

本章主要闡述了界面設計原理，認知心理學，視覺習慣的基礎理論，分析以 上要素在游戲界面設計中的地位。另外對網頁游戲的概念，分類、特點以及發展 進行相關介紹。網頁游戲中界面設計的原則研究

3.1 網頁游戲的界面

3.1.1 網頁游戲的界面現狀

WebGame雖然現在發展情境很好，但是WebGame的劣勢也很明顯，通常游戲 方式簡單，游戲流程較短，文字與圖片搭配的畫面與大型網游也無法相提并論。在界面設計方面出現一些如下問題：

1．過度追求畫面效果，競爭力完全是靠拼畫面

現在的游戲開發者努力設計界面去和客戶端的游戲相比較界面的美觀和豪 華程度。過多的使用Flash，使得頁面下載變慢，連接服務器超時，最終流失用 戶群。

也許正是因為目前獲得巨大成功的OGAME類型游戲的固有模式不可變更，要 想在同質化嚴重的諸多同類游戲中突出重圍，大家不約而同地就想到了用提升畫 面效果來提高自身的競爭力。于是乎一時間FLASH技術成了諸多網頁游戲制作團 隊最為關注的焦點，所有頁面都要求圖形化，畫面做到盡可能多的炫目，能用 3D的絕不用2D。從《圖騰三國》到《夢境家園》到《縱橫天下》，大家走得都 是這條路子，似乎只要畫面好看了，自己就感覺有擊敗其他對手的競爭力，好像 只有全部頁面FLASH化才算得上是商業作品。

可是事實上呢？我們除了看到強制要求安裝最新FLASH播放插件的提示窗 口，每次打開個頁面需要載入幾十秒鐘的動畫，動不動就因為和服務器失去聯系 而中途打不開頁面，同場景內顯示超過20個玩家就卡得要命之外，我們實在看 不到那絢麗的FLASH畫面給我們帶來了多少可玩性的驚喜。如果真的單純是為了 追求畫面效果的話，我相信絕大多數玩家 會毫不猶豫地選擇大型網游而不是用 FALSH包裝過的WebGame。

2．在人機界面設計上不如其他類型客戶端游戲

大多數的設計者都沒有意識到網頁游戲的重要意義，它既屬于游戲類型但是 又受限于瀏覽器平臺中。當前很多開發者不是把網頁游戲當作客戶端大型網游的 迷你版替換版，在畫面特效方面不遺余力，要不就是完全照搬普通網站風格，結 構層次凌亂，內容不清。導致結果是，既丟失了傳統游戲所擁有的先進的HCI 技術又缺少了瀏覽器平臺所擁有的不需要用戶下載程序和不限平臺的特點。

傳統游戲中的簡潔高效的餅圖菜單，深入地用戶自定義化，流暢的人機交互 性以及快捷和即看即會的入門模式都沒有很好的被網頁游戲所借鑒。網頁游戲僅

僅是借用了游戲絢麗的外皮和曲折的劇情。這些都使網頁游戲走入歧途。

3．過度追求新技術，用提高技術門檻來限制競爭者

如果在畫面上不能超越競爭者，為了達到防止被競爭者抄襲仿制的目的，很 多WebGame制作團隊就選擇了采用新技術提高技術門檻的方式。他們投入了大量 人力物力去研究最新的WEB技術，再用更漫長的開發周期去不斷嘗試和檢測這些 新技術，結果做到的卻只是用別人沒有的技術來實現人人都有的功能。

這些技術并不能使用戶獲得任何好處，一些最新的技術并不一定適合，如果 用簡單的成熟的技術就能夠實現的功能，只能說是背離HCI精神。

4．玩家操作受到限制

分級逐層設計是游戲界面設計的思想，即按照主界面、一級界面、二級價額 面逐層劃分，分別設計，并提供良好的導航幫助菜單和按鈕，使得用戶可以隨時 跳轉。當前的網頁游戲設計為用戶提供良好的導航功能不足。

如果入門玩家不能在前十五分鐘順利地弄明白基本操作規則和策略，或者鐵 桿玩家不能在前十五分鐘感受到興趣和挑戰的話，他們將永遠離開這個游戲，不 再做進一步嘗試。因為人們玩游戲的目的是娛樂，在工作之后能夠放松、娛樂一 下，所以我們不能要求用戶像學習其它應用軟件那樣花一天甚至一個星期時間去 弄清到底怎么玩這個游戲。

雖然目前有少數國外的資深游戲設計師在其著作中談到網頁游戲界面設計，但也只是簡單的概略性的介紹，對整個網頁游戲界面設計方法缺乏系統、全面、具體的介紹和分析。游戲界面是游戲的外在表現，是游戲中與游戲用戶直接相互 影響的部分，在整個游戲設計中占據很重要的地位。游戲界面設計從游戲文化背 景確定到界面構想產生、可行性分析到提出方案、方案分析、篩選、修正和評估 必須是有理、有序、系統化的一個完整過程系統，應該有相應的系統理論來指導。3.1.2 網頁游戲的網頁界面特征

現有網頁游戲界面的設計大都類似于人機界面設計中的WEB應用界面風格。在你開始設計一個網頁游戲之前首先要考慮的是游戲是以網頁的技術形式表現 出來。網頁游戲要受到瀏覽器平臺和網頁技術語言的限制，這與傳統游戲制作方 式不同，相應的界面設計當然也就會有所差別。

網頁游戲不同于傳統的C／S程序那樣。傳統的程序一般運行在局域網上，并且程序安裝在客戶機器上，對帶寬沒有特別的考慮，一個應用程序文件幾乎包 含所有的界面。一個典型的C／S應用包括菜單、快捷圖標、用戶信息顯示窗口、狀態條等[15]。

而網頁游戲屬于WEB應用，一般是運行在廣域網中，用戶量相對大一些。由

于網絡帶寬的限制，界面應更簡潔，網頁游戲通常由大量的頁面文件組成，每個 頁面文件只顯示用戶當前選擇的信息，其它信息需按相應按鈕或鏈接進入新的界 面獲取。

網頁游戲界面設計存在以下幾個問題：WEB應用的中界面實現的工作量比傳 統應用所占比重加大；界面語言為瀏覽器解釋執行的HTML語言，界面的實現受 到HTML語法的限制；由于帶寬的限制，要盡量少從服務器下載大量的元素；為 了使用戶感到較好的操作相應性能，客戶端界面元素的相應盡可能在客戶端實 現。

網頁游戲的界面一般來說就是能夠看到的該游戲的畫面。網頁界面基本由瀏 覽軟件，即網頁瀏覽器窗口（工具欄、地址欄、菜單欄）和導航要素（主菜單、子菜單、搜索欄、歷史記錄等）及各種視覺內容（標志、圖像、文本、著作權標 志等）構成。

瀏覽器中的網站標志能使這個網站與其他網站區分開，起到直接表明網站身 份的面目作用。網站的索引要素有主菜單和子菜單、搜索、跳躍菜單等許多項內 容，其中網站的主菜單最為重要，所以應從視覺的角度設計得既美觀大方又方便 使用。窗口內視覺內容主要由版面布局、導航要素、字體、色彩、圖標和多媒體 等是重要成份組成。

1．瀏覽器窗口

窗口式屏幕中的一些區域?？雌饋砭拖癃毩⒔K端。瀏覽器窗口顧名思義就是 瀏覽器軟件的窗口。它一般的窗口相同，通?？梢园淖趾蛨D形，并且可以移 動或改變大小。在屏幕上可以同時顯示即可窗口，可以看見不同的任務，在工作 線程之間切換的時候，用戶可以查看不同的窗口內容。

網頁游戲都是運行在瀏覽器窗口中的。常見的瀏覽器類型有：Internet Explorer、Firefox、Maxthon、Faster browser、Greenbrowser、Opera等。不 同的瀏覽器在代碼語言解釋上會有所不同。一款好的網頁游戲要能夠在不同的瀏 覽器尚都能很好的顯示，要有更好兼容性。瀏覽器窗口包括工具欄、菜單欄、地 址欄，以及滾動條和內容頁面區域，會根據用戶的屏幕尺寸自適應顯示。

地址欄

工具欄

標簽欄

內容區域

狀態欄

圖3-1 一個標準的網頁游戲的瀏覽器窗口

Fig.3-1 A standard window of Web browser

內容頁面尺寸

頁面尺寸是指WEB頁面在屏幕的可視大小，表3-1是屏幕分辨率和頁面顯示 尺寸的對應關系表。

表3-1 屏幕分辨率和顯示尺寸的對應關系表

Table3-1 Relationship between Screen resolution and the Display area

分辨率 頁面尺寸

600*480 620*311 800*600 780*428 1024*768 1007*600

寬度一般不超過1屏，不推薦使用橫向滾動條，當前屏幕顯示不下所有內容 時可以向下拖動網頁，但盡量不要超過3屏。如果確實需要超過3屏，最好在上 面做頁面內部鏈接。

2．版面布局

我們常說，第一印象是非常重要的。因此，你的網頁游戲的主頁必須包含你 的公司或站點所提供的所有服務內容。可以使用一個短的描述性的標題指明站點 的主題是什么。你也可以加入你的公司的徽標，但是千萬不要讓信息和圖片填滿

了你的主頁(站點的其它網頁也必須如此)；主頁看起來必須是干凈而有組織條理 的。使用很容易閱讀的字體。當然，根據你的站點的大小，你可能還必須解釋如 何瀏覽。在主頁的下面，提供你的公司的聯系信息，例如，你的email地址或電 話號碼，這樣就使瀏覽者能很容易地跟你聯系。主頁通常是放置更換信息或新聞 的絕好的場所。

在你開始設計之前，你必須仔細地為站點挑選色彩組合。千萬不要出現紫色 的背景加上黑藍色的文字的組合。要使整個站點保持同一種色彩組合，因為不同 顏色組合的背景或字體可能會是非常令人討厭的。你也可以選用一個背景圖，而 不是僅用一種顏色。背景圖案可以自己繪制，也可以從因特網上下載。通過模糊 背景圖案，就可以使文字更容易被閱讀。要記住的是，圖片不會被瀏覽器重畫的，而背景色彩則是要被重新畫的，因此，在上傳你的圖片之前，必須檢查不同的瀏 覽器是如何顯示這些網頁的。

當增加文字時，盡量設置容易被閱讀的字體和大小。如果你使用背景圖片，那么，當網頁被瀏覽時，背景色和字體將會先于背景圖片被下載，因此，如果背 景色和文本的顏色沒有鮮明的對照的話，那么瀏覽者會有幾秒鐘的時間看到一個 充滿了不可閱讀的文本的網頁。解決這個問題的簡單的方法就是，使背景色與背 景圖的顏色相類似。

使你的網頁短一些，努力使信息/動畫通過幾個網頁來表現。如果把很多東 西堆放一個網頁上，就會使你的網頁看起來非常凌亂，這樣也就會使瀏覽者不太 愿意閱讀所有的內容。所以，要設計幾個網頁，每個網頁上放一段或兩段文字。在段落的下面放置一個按鈕，鏈接到下一頁，在最后一頁則放置一個按鈕，鏈接 到上一頁、主頁，或者瀏覽者剛剛所到來的地方。盡可能使用模板，降低設計的 工作量和復雜性。

如果你準備為你的網站主頁插入一個Flash網頁游戲movie，那么最好把它 與主頁分離開。一定要加一個“跳過介紹”按鈕，這樣就使那些不愿意等待下載，或已經看過該介紹的人，能很容易地直接進入你的主頁。運用cookies，你可以 使曾經瀏覽過你們網站的人自動跳轉到主頁。

文本、圖片和多媒體：文本和圖片是構成網頁的兩大元素，目前的技術已可 讓文本和圖片擺放在頁面的任何位置。多媒體如聲音、動畫、視頻等可使頁面增 輝不少，WEB應用較容易處理多媒體信息，這也是WEB應用的優勢之一。努力使每一個頁面小于50-75Kbytes。盡量把你的GIF網頁游戲和JPEG圖片壓縮后再 加入到你的網頁中。如果你準備在你的站點中放置高質量的圖片、音樂或動畫，那么你最好設計兩個版本，一個為高質量，另一個為低質量，這樣就能使不同的 瀏覽者有一個最佳選擇。

對于網頁設計來講，其信息內容的有效傳達是通過將各種構成要素的設計編 排來實現的。網頁的構成要素包括文字、圖形、圖像、標志、色彩等造型要素及 標題、信息菜單、信息正文、標語等內容要素。網頁設計的視覺流程是一種“空 間的運動”，是視線隨網頁中的各構成元素在空間沿一定軌跡運動的過程。通過 視覺流程，運用視覺移動規律，將各種視覺信息進行有序組織，可以誘導瀏覽者 的視線依設計的意圖進行流動，從而使瀏覽者清晰、流暢、快捷地接受最佳信息。

3．導航要素

菜單

網頁界面程序的菜單一般處于最頂端，為橫向，用于提供該應用所有的功能 選擇入口。應用菜單可有多個，一般處于界面的上部和左部，處于上部的為橫向 菜單，左部的豎向菜單，用于該系統大的功能模塊的導航，可以一般用腳本實現。

功能列表

功能和風格類似于豎向菜單，界面風格類似于Windows資源管理器的左邊目 錄列表TreeView，用于提供系統中某個功能模塊內部子功能選擇入口。功能列 表位置要根據用戶視覺習慣來定，一般處于界面的左部。

瀏覽導航

站點的瀏覽導航必須被設計成非常容易。如果需要，把站點分割為幾個部分。最容易的方法，就是在整個網站的所有的網頁的左邊放置一個菜單條。當然，除 此以外，還有許多可選的方法。對于具有大量信息的站點，使用一個可擴展的菜 單條會是一個不錯的選擇。

無論你使用何種導航模式，在每一頁都放置一個主頁鏈接，那會是一種不錯 的設計思想；瀏覽者必須知道，無論何時，當他們迷失在你的站點瀏覽中時，都 可以通過簡單的一次點擊就能準確地知道目前所處的位置。

導航要素的構成和形態是否成體系、位置是否合適將是決定該網站能否成功 的重要因素[16]。一般來說，在網頁上端或左側設置主要導航要素的情況是比較普 遍的方式。同時利用菜單按鈕或移動的圖像區別于一般的內容和其他的文本，很 容易讓人們知道這些就是導航用的要素。也就是說，從構成和視覺的角度來把其 他的內容和導航要素區別開來。也有不少創意性的導航方式，總之，我們應把導 航要素的構成設計得符合整個網站的總體要求和目的，并使之更趨于合理化。

移動類別標志的導航設計加上每個類別層次都設計成不同的顏色，這樣不僅 能刺激用戶的好奇心，使之感興趣，也能更大的發揮導航欄的幫助作用。在網頁 中的導航要素不應設計得太過復雜，我們應該把其設計得更直觀一些，讓用戶一 下子就能看明白，這樣才能收到好的效果。但這并不是說要給人以生硬、死板的

感覺，為了能讓用戶感興趣，我們應在導航欄的設計方面多動動腦精。

4．內容基本元素

字體

網頁中顯示的字體要使用標準字體，因為一切都要根據用戶端瀏覽器的設置 來顯示你的頁面，使用費標注的字體會導致用戶無法看到你想要的效果。除標題 外，字體一般采用規則宋體。Windows自帶宋、仿、楷、黑4種字體，標題字體 最好用這4種之一網頁游戲如使用其它的字體，少量文字可用圖片，但用圖片代 替文字是極不推薦的做法，大量文字可用字體下載的方法。目前用CSS可實現很 漂亮和很好效果的文字。

字大小

字大小可用相對大小和絕對大小方式定義，相對大小為字號定義方式，如2 號字，絕對大小為尺寸和點陣定義方式，如9pt、12px等，其中px代表點陣，用到CSS定義絕對大小。相對大小會因瀏覽器的不同和同一瀏覽器的字體設置不 同而不同，絕對大小則不會因此而改變，最好采用點陣px定義字的大小。目前 網站流行頁面文字的大小為9 pt或12px(9pt和l2px大小基本上相同)，略微顯 得稍小一些，主要是為了□頁中能顯示更多的內容給用戶。實際WEB應用中可采 用l6px、l4px和12px，并根據頁面內容實際情況選擇。功能列表可用l2px，輸 入表格用l6px，顯示表格用l4px，標題可用24~36px

顏色

色彩的搭配對于網頁的美觀非常重要，一般用同一色系的色彩，色彩層次分 明但不會導致反差強烈。色彩會使用戶產生心理感覺，不同的顏色會給瀏覽者不 同的心理感受。每種色彩在飽和度，透明度上略微變化就會產生不同的感覺。以 綠色為例，黃綠色有青春，旺盛的視覺意境，而藍綠色則顯得幽寧，陰深。表 3-2列出了用戶對于不同的色彩系列所產生的不同的心理感覺。

表3-2：不同的色彩系列帶給用戶的心理感覺

Table3-2 Users have different psychological feeling for the different color

色彩系列 效果

紅色 是一種激奮的色彩。刺激效果，能使人產生沖動，憤怒，熱情，活力的感覺

綠色 介于冷暖兩中色彩的中間，顯得和睦，寧靜，健康，安全的感

覺。它和金黃，淡白搭配，可以產生優雅，舒適的氣氛

橙色 也是一種激奮的色彩，具有輕快，歡欣，熱烈，溫馨，時尚的

效果

表3-2：不同的色彩系列帶給用戶的心理感覺(續表)

Table3-2 Users have different psychological feeling for the different color(continued)

黃色 具有快樂，希望，智慧和輕快的個性，它的明度最高

藍色 是最具涼爽，清新，專業的色彩。它和白色混合，能體現柔順，淡雅，浪漫的氣氛，令人想到天空的色彩

白色 具有潔白，明快，純真，清潔的感受

黑色 具有深沉，神秘，寂靜，悲哀，壓抑的感受

灰色 具有中庸，平凡，溫和，謙讓，中立和高雅的感覺

圖像

圖像用在頁面使用可增強美觀效果，或用來平衡頁面，當時由于網絡帶寬的限制，應該盡可能少用圖像，盡量避免使用更大的多媒體文件。目前有兩種圖像 格式比較適合WEB應用，GIF和JPG格式，GIF又分為靜態圖像和動畫兩種，GIF 還可提供透明圖形效果。GIF最多為256色，而JPG為24位真彩色，并且JPG 的壓縮效率要優于GIF，故除非需要動畫和透明圖，最好用JPG格式的圖像。由 于GIF最多為256色。

圖標

圖標是具有明確的指代含義的計算機圖形。其中桌面圖標是軟件標識，界面中的圖標是功能標識。

網頁游戲中圖標是用來表示游戲中的項目，例如超鏈接、游戲中道具、角色的狀態、按鈕等。圖標有多種形式，可以是圖標所代表的對象逼真顯示，也可以 是高度程式化的，不過在設計圖標是應該考慮用戶對于圖標本身所代表意思的認 知。

圖標有一套標準的大小和屬性格式，且通常是小尺寸的。每個圖標都含有多張相同顯示內容的圖片，每一張圖片具有不同的尺寸和發色數。一個圖標就是一 套相似的圖片，每一張圖片有不同的格式。從這一點上說圖標是三維的。圖標還 有另一個特性：它含有透明區域，在透明區域內可以透出圖標下的桌面背景。在 結構上圖標其實和麥當勞的巨無霸漢堡差不多[17]。

背景

背景可用幾種單色或背景圖實現，為不影響文字的觀看效果，背景圖不可太花，且顏色要與字色搭配協調。為使背景圖不大幅度增加網頁尺寸一般用純色和 圖像平鋪的方法實現，目前流行采用色彩漸變的通道背景圖能增加視覺效果和色 彩，同時又不至于對文本喧賓奪主。為了保證各種顯示模式的一致性，橫向平鋪 背景圖最小寬度為1024px，縱向平鋪背景圖最小高度為頁面尺寸高度。

對于網頁設計來講，其信息內容的有效傳達是通過將各種構成要素的設計編 排來實現的。網頁的構成要素包括文字、圖形、圖像、標志、色彩等造型要素及 標題、信息菜單、信息正文、標語、單位名稱等內容要素。網頁設計的視覺流程 是一種“空間的運動”，是視線隨網頁中的各構成元素在空間沿一定軌跡運動的 過程[18]。通過視覺流程，運用視覺移動規律，將各種視覺信息進行有序組織，可 以誘導瀏覽者的視線依照設計的意圖進行流動，從而使瀏覽者清晰、流暢、快捷 地接受最佳信息。

指針

網頁游戲所要求的交互形式有賴于指點和選擇內容這類活動。鼠標是能夠進 行這種任務的輸入設備。在屏幕上顯示給用戶的是由輸入設備控制的光標。

在網頁游戲中，光標的不同顯示模式能夠很好的給用戶提供游戲信息。當指 向某個資源圖片時，鼠標指針會及時顯示幫助內容，提示玩家。鼠標移開后會立 刻消失，不會干擾游戲進程。

圖3-2 《北歐神化》中鼠標懸停效果

Fig.3-2 Effect of mouse over in game Norron

多媒體

圖片，電影和聲音效果永遠都是很好的，但是不能過分。要記住，大多數人 現在還是通過最高連結速度為56Kbps的“貓”上網的。好多次，為了瀏覽一個

頁面，我耐心地等待了很可觀的幾分鐘，而這種耐心不是每個人每時每刻都有的。Flash是一個目前非常流行的程序，許多WEB設計者都樂意往自己的網站中 加入。Flash的好處就是可以使你的動畫和音樂文件非常小。

在游戲“縱橫天下”中，新手入門使用FLASH技術，使用交互的動畫來幫助

新玩家來了解游戲。圖文并茂，玩家可以很容易地開始游戲。

圖3-3 《縱橫天下》中FLASH新手向導功能

Fig.3-3 Flash guide of Zong Heng Tian Xia

5．其他元素

使公司的徽標在整個站點保持一致，避免在你的站點或瀏覽窗口中使用滾動文本，因為滾動文本會降低你的網頁的可訪問性。

圖3-4 百度的網站logo圖標

Fig.3-4 the logo of Website Baidu

經常檢查網頁中的鏈接，確信它們沒有被打斷，尤其是在你對網站內容作了更新后。網頁游戲檢查你的網站是否和所有流行的瀏覽器兼容。

把你的站點信息提交給搜索引擎，檢查你的站點在分類中的排名，如果很后，那么最好考慮更換你的META標記。

許多人還在使用14英寸或15英寸的顯示器，因此盡量使你的網頁也是可以 “自由滾動”的(最起碼可以水平滾動)。

不要在顯著的位置堆積很多廣告條，兩個廣告條基本上應該是上限了。

3.2 基于網頁游戲的用戶特征模型的界面設計原則

3.2.1 目標用戶特征

互聯網技術的快速發和應用。使得網頁游戲的受眾群體極其廣泛?？蛻舳司W頁因為其需要用戶長時間在線的特性，以及題材方式的限制，導致很多用戶無法 進入。而網頁游戲因為覆蓋面廣，不需在線等特性，只要能夠打開網頁就可以運 行游戲，其潛在受眾群體是一個讓大家驚訝的數字。根據最新的調查顯示：預計 到今年年底全球互聯網用戶數量將會超過10億，而中國網民數量已經達到2。2 億，超過美國成為世界第一，網民上網最主要目的是為了娛樂。網頁游戲，使用 瀏覽器把游戲體驗的途徑簡化到了極致：能上網的人，都可以“無需下載任何東 西，無成本、無等待”地玩網頁游戲，只要輸入URL就可。這種簡化是革命性的。網頁游戲輕便、有趣、輕松的特色使其在短時間內迅速興起并風靡一時，并被人們形象的稱為“綠色網游”。目前網頁游戲已經在國內擁有一批龐大的玩家 群體。與傳統網游玩家呈現相對低齡化不同，網頁游戲的玩家群體主要以年輕的 上班族為主，特別是所謂的“白領”一族。究其原因，這與很好的迎合了“白領” 們渴望休閑但不愿過多花費精力，期望打發時間但以不影響工作為前提的生活理 念有著直接關系。

網頁游戲的主要的用戶是家庭用戶、辦公室上班族、大學生等。這部分用戶要么由于計算機硬件的限制，要么從未或者很少接觸其他類型網游，要么由于工 作或學習時間不方便玩其他類型游戲。他們玩游戲的目的不是瘋狂的打怪升級，沒日沒夜的沉迷于游戲中。他們更喜歡在忙碌的工作間歇放松心情，清閑自在地 玩一下游戲，在瞬間得到了放松和樂趣。不需要在資源緊張的電腦上安裝龐大的 客戶端軟件，不需要高深的技術知識，不用瘋狂點擊鼠標鍵盤，只需要簡單的按 鈕操作就能完成指令；不需要長時間泡在游戲中也能取得較大的成長。只要能夠 連上互聯網，不用下載客戶端，直接瀏覽網頁就能游戲。這個用戶群都是具備消 費能力和長期上網條件的。

3.2.2 游戲用戶心理特征模型

人的心理活動一般可以分為三大類型：一是人的認知活動，如感覺、知覺、3

3注意、記憶、聯想、思維等心理活動；二是人的情緒活動，如喜、怒、哀、樂、美感、道德感等心理活動；三是人的意志活動，這是在認識活動和情緒活動基礎 上進行的行為、動作、反映的活動。而影響人的行為的首要心理因素是認知心理。

游戲界面設計中和人類心理因素相關最密切的是記憶、學習、思維幾個方面，另外用戶對于在游戲所創造的虛擬世界中的勝利的渴求，對游戲劇情的期待等的 心理活動在界面設計中也是需要考慮在內的。

游戲用戶心理特征模型的建立主要考慮用戶本身的記憶、思維、學習以及在 游戲過程中其它的心理活動等方面與游戲界面的交互過程。游戲用戶的記憶能力 直接決定了在設計游戲界面時在界面中顯示的信息量，對于一些短時記憶可以記 住的信息可以在游戲界面上不直接顯示，而需要長時間才能記住的信息則要在另 外的子界面顯示，可以用形象的按鈕作為子界面入口。游戲用戶的思維是用戶本 身對游戲界面中的交互元素的感覺認識的基礎，這取決于用戶本身的知識積累和 經驗。因此，在考慮用戶思維的情況下，游戲界面設計中的元素盡可能地要讓最 大用戶群體認知其代表得意義。當用戶第一次進入游戲時，界面的易學習性是用 戶是否繼續進行游戲的決定性因素，沒有任何人愿意花很多時間去學習如何玩一 款游戲。另外，游戲用戶在游戲過程中對于游戲劇情的期待、對于獲得勝利的渴 望以及對于游戲中自己所扮演角色的感情等因素也在一定程度上影響著游戲界 面的設計，如圖3-5所示。

圖3-5 游戲用戶心理特征模型圖

Fig.3-5 Chart of Game users’ psychological characteristics

游戲用戶作為一個獨立完整的個體，其心理活動的各個方面是相互關聯并相 互影響的。用戶的記憶力直接影響著其對所見事物的思維認知，也影響了用戶本

身的學習能力，記憶力好的用戶學習起來要快一些，而記憶力較差的用戶則學習能力相對也差，對于游戲本身的提示就更加依賴。游戲用戶真正沉浸在游戲中的 時候，其本身的感情及心理變化和游戲中的劇情變化是同步的。因此，用戶沉浸 在游戲中的感情變化也是影響游戲界面設計的心理因素之一。

3.2.3 基于游戲用戶特征模型的界面設計原則

好的游戲界面能讓游戲用戶很容易地認知、學會如何玩這個游戲，同樣。由 于游戲本身情節的推進，界面的變化應該符合游戲用戶需求?；谟螒蛴脩舻奶?征模型，本節得出了網頁游戲界面設計的一般原則。

1.風格保持一致性原則

即從任務、信息的表達、界面控制作等方面與用戶理解熟悉的模式盡量保持 一致。同一款游戲中，所有的菜單選項、對話框、用戶輸入框、數據顯示和其他 功能界面均應保持風格的一致性。一致的風格設計能加快用戶根據以往的經驗積 累進行對界面本身的認知，進而影響著游戲界面的易學習性和易用性。一致性主 要包括以下幾個方面的內容：

用語與用詞的一致性：界面中的項目名稱、標簽名、功能名、提示語句、錯 誤信息等要統一，控制與命令的名稱要與流行軟件和游戲運行平臺軟件盡量保持 一致，與游戲行業中的業務術語盡量一致。

操作方法的一致性：界面中的響應游戲外接控制設備的設計，如對鍵盤中回 車鍵、ESC鍵、鼠標等的操作方法的定義應盡量與操作系統上的定義一致，或與 常用的流行軟件的做法盡量一致，如回車鍵對應“確認”操作選項，ESC鍵對應 “取消”操作。

界面的格局的一致性：游戲中從進入游戲的主畫面到詳細對話框設計的設計 風格，控件的排列、背景、色彩、文字的字形、字體等等，在真個游戲中盡量保 持一致。

2.便于記憶的設計原則

根據心理學家George A.Miller的研究表明，人一次性接受的信息量在7

個比特左右為宜?？偨Y一個公式為：一個人一次所接受的信息量為 7±2 比特[19]。這一原理被廣泛應用于網站建設中，一般網頁上面的欄目選擇最佳在5～9個之 間，如果網站所提供給瀏覽者選擇的內容鏈接超過這個區間，人在心理上就會煩 躁，壓抑，會讓人感覺到信息太密集，看不過來，很累。界面的易學性原則

由于游戲用戶憑借短時記憶進行信息處理存在的局限性，所以在游戲界面設 計中用同一窗口、多頁面來顯示大量信息。對于控制較復雜的游戲來說，有一個 頁面來顯示詳細的控制選項，對于這種情況，應在游戲主畫面提供鏈接按鈕，用

來調出游戲中大量的情節信息和游戲控制設置信息。

世界上最優秀的電腦游戲開發商——暴雪(Blizzard Entertainment)網頁 游戲的副總裁比爾·鮑珀（Bill Popper）曾說過游戲的基本原則：“易于上手，難于精通”。易上手，即是在考慮游戲的科學習性。當用戶拿到一個新的游戲時，由于是第一次接觸這個游戲，必須有一個學的過程。這就是游戲的可學習性的概 念[20]。這是一個非常枯燥的過程，我們都深有體會。由于網絡游戲的用戶特使得 用戶不可能花很多精力在學習游戲操作上，因此游戲的界面就既要做到入手容 易，在操作和瀏覽上要符合用戶一般習慣。

游戲界面的易學性的主要內容是使界面具有直觀性，功能直觀，操作簡單，狀態明了的界面才能讓游戲用戶更加容易學習。易學性原則通常包括以下幾個方 面。界面中盡量采用形象化的圖標和圖像，如彈出游戲中人物屬性對話框的按鈕 采用一個卡通的人物主角的形象；建造建筑的按鈕采用形象的榔頭和扳手的圖標 等。

盡量與同類型的游戲保持一致或相近的操作設計，如對于RPG游戲，左鍵點 擊行進，右鍵點擊目標攻擊的模式已經深入游戲用戶心中。要設計一款RPG游戲，同樣的控制設計是非常有必要的。

盡量提供充分的提示信息和幫助信息。顯示錯誤信息的同時要顯示其錯誤的 解決方法，必要時要用圖標和聲音共同提示正確的操作方法。

3.容錯性的設計原則

容錯性指游戲界面防止用戶在玩游戲時錯誤操作的能力和承受用戶操作失 誤的能力。防止出現諸如退出游戲沒有存檔、創建游戲失敗之類的錯誤。在游戲 界面設計中提高其容錯性的方法有以下幾種。

重要的操作提醒，用戶在啟動不易恢復或有重大影響的操作時，提醒用戶可 能引起的后果。比如在刪除和掩蓋游戲存檔時應該有一個彈出對話框請求用戶確 認是否刪除或覆蓋當前存檔。

操作完整性檢查，檢查用戶操作的完整性，防止用戶疏忽，遺漏必要的操作 步驟。如在游戲開始的時候如果沒有選擇存檔就開始游戲，界面就應該提醒用戶 將開始一個新的存檔，并鎖定操作狀態。

自動糾正用戶錯誤，對于游戲用戶的錯誤操作進行系統自動的更正。比如在 策略類游戲中，一方玩家給予友方玩家資源的輸入數量大于目前自己本身有的數 量時，系統則自動調整到最大可給予對方的資源數量。

命令執行的默認選項，此選項是系統推薦的設置，用來給操作錯誤的用戶恢 復錯誤。如在調整游戲本身的控制選項或畫面以及聲音選項的時候應該有一個默

認選項，如果用戶對其中參數調整錯誤而又不知道正確值的時候就可以采用默認 選項按鈕。

拒絕執行操作，當用戶的操作錯誤會造成不能挽回的錯誤時，系統應該拒絕 執行操作，并顯示原因。

4.有效性原則

游戲界面的有效性是指游戲用戶能用簡單快捷的操作實現對游戲本身中角 色的控制或實現相應的功能，游戲用戶界面的有效性原則主要是指針對有經驗的 玩家(Hardcore)，他們已經是游戲的忠實玩家，玩游戲的頻率很高。另外，隨著 電子競技行業的興起，游戲界面的有效性原則對于競技類游戲的設計更加重要。電子競技中的游戲用戶都是參加各種相關游戲比賽的專業選手，他們對于游 戲的界面設計都要求有快捷方式完成操作。此時，相應命令的快捷鍵操作是比較 實用的方式，在競技類游戲魔獸爭霸中，每一項操作都有其快捷鍵對應，鼠標在 專業級游戲用戶的控制下只起到定位作用而已。這樣做會使游戲用戶的操作更具 效率。

5.信息反饋原則

信息反饋指游戲用戶對游戲界面進行操作后從游戲本身得到的信息，表示游 戲系統本身對用戶操作的反應。如果游戲本身沒有反饋，用戶就無法判斷他的操 作是不是為游戲本身所接受，操作是否正確，是否應該進行下一步操作。在設計 游戲界面時應該對用戶的操作做出反應，給出反饋信息。反饋信息分為三個等級，他們與語言的三級(詞法級、語法級、語義級)相對應[21]。游戲界面設計可以在這 三個層次上放置必要的反饋信息。例如，用戶按到相應的操作鍵的時候出現相應 的變化，這是詞法級的反饋。用戶輸入不正確的命令或參數時，游戲系統發出錯 誤警告的聲音，這是語法級的反饋。語義級的反饋是最有用的反饋信息，它告訴 用戶所請求的操作已經被處理，并把結果顯示出來(屏幕顯示)。如果在執行某個 操作需要較長的時間(超過3秒)，就要告訴用戶請求正在被處理，旋轉沙漏的鼠 標形狀和進度條是比較好的方式。

6.增強游戲用戶沉浸感的設計原則

我們大多數人有過完全被電影吸引的愉快經驗。技術高超的電影攝制者會結 合燈光和聲音因素創建并維持逼真的虛幻世界，使我們流戀忘返其中。好的游戲 也能如此具有吸引力。游戲用戶界面的各個元素有助于維持玩家直接參與游戲世 界的幻想。圖形元素可以讓玩家在視覺上體驗游戲世界的環境、活動和地方特色。音樂和聲音效果創建了一種特殊情調，并使游戲的事件顯得更栩栩如生。第 一人稱射擊游戲“雷神M”就是此類極其逼真的游戲。如果沒有令人毛骨悚然的 聲音效果和刺激的畫面，它還會如此吸引人嗎?

增強游戲用戶沉浸感的一種方法是將界面的元素偽裝成游戲世界的一部分。

7.方便的自定義

游戲既要給新手提供直觀簡單的操作，又要滿足專家們對效率和性能更高的 要求。雖然這兩點顯得非常對立，但是現在的游戲能夠很好的做到這一點。游戲 廣泛使用自定義配置來為專家級別用戶提供更好的服務。對全部功能進行重新設 置有時可能會導致混亂的局面網頁游戲(例如更改鍵盤上那些眾所周知的按鈕或 字母組合鍵)，但是使用取消和重設命令可以讓系統恢復原樣，這樣就能夠鼓勵 用戶去多嘗試新的設置來比較判斷哪一種會更有益。

8.流暢的工作流

游戲遞送數據時需要盡可能小的干擾到用戶的正常流程，尤其在一些不需要 給予太多注意力的信息方面。這樣有助于用戶全情投入并提高使用效率。游戲通 過使用單方面控制的信息傳送方法向用戶遞送一些非重要的信息，這種信息并不 需要用戶采取任何行動。相反，在其他應用程序中所采用的交流方法則常常會干 擾到正常的工作流程，如：在彈出對話框中公告提醒用戶注意并且需要用戶有明 確答復的操作。通過使用聲響，語音，短小的文本和動畫，為用戶提供一個較為 流暢的，不受打擾的操作流程，從而提高效率。

3.3 基于網絡設備和瀏覽器特征的界面設計原則

網頁游戲依賴于瀏覽器，這使得他不可避免的擁有網頁界面的特點。網站設 計和傳統的軟件用戶界面設計是有區別的。大體上說，設計師必須放棄對界面的 完全控制，讓用戶和他們的客戶端軟/硬件來決定一部分。

從設備上來說，用戶可能通過一臺傳統的計算機訪問網站，也可能在用一個 WEBTV，可用筆點擊的手持式設備，或者是Nokia移動電話，甚至他們的汽車就 是一個Internet設備。在傳統設計里，筆記本電腦和高端工作站屏幕的區別可 能只有六種。在網上，我們必須應付手持的設備和工作站的屏幕區別可能有上百 種，Modem和T-3專線之間的區別可能有上千種。

3.3.1 網頁游戲就平臺特征模型

網頁瀏覽器是指可以顯示網頁服務器或者文件系統的HTML文件內容，并讓 用戶與這些文件交互的一種軟件。網頁瀏覽器主要通過HTTP協議與網頁服務器 交互并獲取網頁，這些網頁由URL指定，文件格式通常為HTML，并由MIME在HTTP 協議中指明。一個網頁中可以包括多個文檔，每個文檔都是分別從服務器獲取的。大部分的瀏覽器本身支持除了HTML之外的廣泛的格式，例如JPEG、PNG、GIF 等圖像格式，并且能夠擴展支持眾多的插件（plug-ins）。另外，許多瀏覽器還

支持其他的URL類型及其相應的協議，如FTP、Gopher、HTTPS（HTTP協議的加 密版本）。HTTP內容類型和URL協議規范允許網頁設計者在網頁中嵌入圖像、動 畫、視頻、聲音、流媒體等。

常見的網頁瀏覽器包括微軟的Internet Explorer、Opera、Mozilla的

Firefox、Maxthon、MagicMaster(M2)等。瀏覽器是最經常使用到的客戶端程序。萬維網是全球最大的連結文件網絡文庫。

全球網（WEB、WWW）是一種把所有Internet的信息（包括你愿意加進去的本地信息）組織成超文本文件形式文件的企圖。盡管這個夢也許有點不太現實，但是全球網確實讓你能訪問Internet的所有資源，只需用瀏覽器“讀”適當的文 件就行。

服務器端 客戶端

服務器

個人電腦

服務器

用 戶

手

機

瀏覽器

網頁

服務器

其他設備

… 服務器

圖3-6 瀏覽器和萬維網關系模型圖

Fig.3-6 relationship model of World Wide Web and Web browser

3.3.2 基于網絡設備和瀏覽器特征的界面設計原則

1.兼容原則網頁游戲——設備的多樣性特點

在傳統GUI設計里，你能夠控制每一個像素：你制作一個對話框的時候，你 可以確定它在用戶屏幕上的真實尺寸。你知道你在為什么系統設計，你知道那里 安裝了什么字體。你知道典型的顯示器尺寸有多大，操作系統的作者告訴你給窗 口做裝飾的規則。

在網站方面，所有的上述設想都土崩瓦解。用戶可能通過一臺傳統的計算機

訪問網站，也可能在用一個WEBTV，可用筆點擊的手持式設備，或者是Nokia移 動電話，甚至他們的汽車就是一個Internet設備。在傳統設計里，筆記本電腦 和高端工作站屏幕的區別可能只有六種。在網上，我們必須應付手持的設備和工 作站的屏幕區別可能有上百種，Modem和T-3專線之間的區別可能有上千種。

任何一個網頁游戲在不同的設備上看起來都大不一樣：顯然，所見即所得已 經不靈了，看上去不同是一個特點，而不是個毛病，因為最佳的用戶經驗是需要 根據設備的不同特征予以適當得調節。很特別的或者很低端的設備，都嚴格的要 求網頁內容適應特定的平臺。達到這一目標的唯一道路就是放棄對界面的完全控 制，讓他們的網頁展現取決于頁面描述、特殊設置和客戶端設備特性的相互影響。為每個不同的平臺設計一個抽象的UI描述比聽起來困難的多?；镜腍TML 法則可以給設計師提供一個實現他們創意的好方法，但是不能提供給他們所有的 方法。一般都提倡把內容和描述分離，使用Style網頁游戲Sheets定義描述，但是這樣做更利于信息內容本身而非交互操作。

2.網頁游戲便利的導航原則

在傳統的GUI設計中，設計師可以控制用戶什么時候可以去哪兒。你不想讓 某個菜單項工作，你可以讓他變灰。你可以扔出一個對話框中止計算機的運行，直到用戶回答了你的問題。

在網上，則是用戶控制導航，用戶從根本上控制了他或她自己的使用網頁的 行為。用戶可以抄小路而不受設計師的任何影響：比如，用戶可以從搜索引擎直 接進入網站內部，而不必經過首頁。用戶還可以控制他們自己的書簽菜單，并利 用它建立起一個網站的個人化接口。

網頁游戲需要配合并支持這種用戶可控制的使用方式。有時你可以強制用戶 使用特定的路徑，阻止他們鏈接某些頁面，可這么做的游戲就顯得過分的專制、獨裁。最好設計的可自由移動一些，比如，在每一頁放一個鏈接到首頁的圖標，給那些直接進入該頁的人提供一個返回首頁的導航。要使得網頁游戲減少瀏覽層 次，能夠讓用戶隨時快速回到起點。

3.布局合理化原則

由于瀏覽器形式的限制，網頁游戲的界面設計要比傳統網游局限的多。在有 限的瀏覽器顯示框中更加要合理布局。

應注意在一個窗口內部所有控件的布局和信息組織的藝術性，使得用戶界面 美觀。在一個窗口中按tab鍵，移動聚焦的順序不能雜亂無章，tab的順序是先 從上至下，再從左至右。一屏中首先應輸入的和重要信息的控件在tab順序中應 當靠前，位置也應放在窗口上較醒目的位置。布局力求簡潔、有序、易于操作。

4.降低網絡的影響

在設計網頁游戲特別是設計界面時，應該盡量讓游戲者忘記網絡影響，盡量 使你的游戲速度不受到用戶網絡帶寬的影響。要考慮到不同用戶的網絡限制因 素，不能為了一個無關緊要的僅僅為了美觀的圖片或多媒體從而使得用戶打開游 戲速度變慢，可以考慮位不同網速的用戶設計不同的界面，如使用貓上網的用戶 默認打開很少圖片的文字格式游戲；對于使用高速上網的用戶默認打開美觀的 3D界面。

5.設計整體原則——整體的一部分網頁游戲

傳統的應用程序是一種封閉式的用戶經驗：盡管Windows系統允許應用程序 相互切換并且可以同時運行多個程序，但是在任一時刻，用戶其實是處于一個單 一的應用程序之中，而且只有針對這個程序的命令和一些動作起作用。在每一個 程序上用戶都花過很長時間，并且在逐漸熟悉他們的特征和設計。

在網上，用戶在不同的網站之間，不同的設計（也就是網站）之間跑來跑去，具有相當的流動性。很少有人見一個網站就花上幾分鐘去看。他們經常通過超鏈 接從這個站跳到那個站。這種情況下，對于用戶的感覺，所有的網站是一個整體，而不是某個特定的網站：也就是說，用戶需要每一個網站的使用習慣都是一樣的，都是他們對整個網絡的使用習慣的一部分，而不是每個網站都有它不同的習慣。在可用性研究中，用戶經常抱怨那些用法離譜的網站不好使。換句話說，網絡已 經變成了一個整體的概念，每一個網站都是這個概念的一部分。

當然，傳統GUI也是某個整體的一部分，遵循（操作系統）廠商的設計規則 是比較明智的。關鍵一點就是在網頁游戲界面設計各方面，個性化設計與整體設 計之間的天平傾向了整體。畢竟你的網站不是別人世界的中心：用戶還要在網站 跳來跳去，我們應該讓他們用任何一個新網站的時候都感到方便。

3.4 基于網頁游戲的類型的界面設計原則

另外要考慮不同的游戲種類對界面的不同要求。近兩年來，尤其是近一年來，國內外網頁游戲生猛出現，日新月異，目不暇接。網頁游戲突然之間變得很熱門，盛大、騰訊、17173、新浪等大公司都很積極的關注，甚至連百度也摻和了進來。新游戲層出不窮，但是回頭來看一下這些種類繁多的網頁游戲，其實大多都是用 同一套游戲換個題材改改畫面和文字內容的馬甲而已，經過去偽存真的一番分 析，總結出目前主流的WEB游戲分類，分別按照游戲技術和游戲內容來劃分，具 體見表3-3。

表3-3 網頁游戲分類

Table3-3 Web Games Category

游戲分類 特 點

策略類游戲

傾向于回合制而不是實時制，玩家一般喜歡深思熟慮，然后再 決定下一步的行動。

該類型游戲更注重玩家之間的交流與互動，更接近于一個社區

寵物養成類

網游。游戲中，玩家可以培養自己的寵物，通過打怪練級來提 高寵物的各項屬性，還可以和其他玩家的寵物進行PK競技。

角色扮演類

玩家任務可以隨著檢驗的增長進行屬性配置，具有濃重的故事 情節

需要玩家對游戲規則進行思考，判斷。系統表現相當多樣化，主要依游戲規則制定，對游戲操作不需要太高要求。益智類

動作類 考驗玩家手、眼的配合能力，可分為射擊類和非射擊類。

音樂類

以下，論文就針對因游戲類型的差異所引起的特殊的界面設計問題進行分 析，并提出針對這些特殊問題的界面設計原則。

3.4.1 策略類游戲界面設計原則

策略類游戲起源于棋盤游戲，他的游戲策略傾向于回合制而不是實時制，玩 家一般喜歡深思熟慮，然后再決定下一步的行動。可以說這是目前最主流的一類 網頁游戲，玩家在游戲中扮演的是一塊領域（星球/國家/城市等）的統治者，可 以招募英雄（將軍），通過發展自己的領域去占領周邊的領域，或者侵占其他玩 家的領域。戰爭以系統自動計算的方式進行，勝負取決于雙方的軍事實力，所以 不在線的玩家只要建設好防御設施擁有足夠的防御兵力就不用擔心被別人侵略。

網頁游戲從沉寂多年到今天的二次繁榮，一般都認為該歸功于一款名為

《OGAME》的游戲，很多玩家都是由于《OGAME》才重新關注網頁游戲的，該作也 是戰爭策略類游戲的代表作，他首次提出了“永久在線””的概念：不需要玩家 長時間泡在線上，玩家每次上線只要設定好一系列操作指令，系統會自動按該操 作的時間長度執行指令。

“借鑒”了《OGAME》的作品可謂舉不勝舉，目前較為流行的就有：《戰神世

界》、《北歐神話》《地球帝國網絡》、《亂舞春秋》、《圖騰三國》、《世界領袖》與 《三國風云》等。

這類游戲的主要賣點在于各種音樂的流行程度。當玩家就算是 不想玩也可以掛住聽聽歌，是時下交流和休閑最受歡迎的主體。

第五篇：網頁UI設計師

網頁UI設計師

崗位職責：

1、負責網站的界面視覺設計工作；

2、構思并設計網站的整體視覺風格、用戶體驗設計和VI；

3、能夠解讀網站產品需求并提出創新想法，能夠完成網頁或應用的交互設計，并完成界面的流程設計、原型設計，不斷優化用戶體驗；

4、平衡網站的易用性和美觀性，實時把握web設計的流行趨勢，結合用戶研究和產品分析的成果，不斷提出新的設計思路及創意策略。

崗位要求：

1、本科（含）以上學歷，美術、設計、電子商務、計算機等相關專業；

2、三年以上相關工作經驗，有電子商務、社交平臺、通信運營商的網站界面設計經驗優先；

3、具備網站設計創意，根據需求分析并給出最優的界面設計解決方案；

4、熟悉用戶體驗與交互設計,熱愛UI行業、對專業有很強的興趣和執行力，具有優秀的學習能力，能夠把業界的新鮮設計理念和手法借鑒到工作中；

5、對互聯網產品有著良好的感覺，有用戶體驗研究經驗，對用戶瀏覽及操作行為有深度的見解及知識；

6、精通Adobe Photoshop、Adobe Illustrator、Flash、Dreamrever等設計軟件，熟悉HTML，DIV及CSS，了解Web標準；

7、具有良好的溝通能力、執行力，具有團隊協作精神，對工作壓力能夠很好地調節；

8、請附上相關作品（rar壓縮包）或相關作品的網址。