第一篇：網(wǎng)頁UI界面設(shè)計展望論文（共）

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

多媒體設(shè)計

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

網(wǎng)頁交互設(shè)計

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

網(wǎng)頁UI界面設(shè)計展望

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

結(jié)論

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

第二篇：UI界面設(shè)計服務(wù)委托合同范本

手機(jī)UI界面設(shè)計服務(wù)委托

合同

書

手機(jī)UI界面設(shè)計服務(wù)委托合同范本

本合同由以下當(dāng)事人訂立，并于

______年____月

____日簽訂：

甲方：_______________

乙方：_______________

依據(jù)《中華人民共和國合同法》的規(guī)定，合同雙方就甲方系統(tǒng)客戶端的部分UI設(shè)計，經(jīng)協(xié)商一致，簽訂本合同。，以資雙方遵照執(zhí)行：

第一條：定義

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

2、服務(wù)合同：甲乙雙方本著“合作、平等、誠信”的原則，就服務(wù)內(nèi)容和服務(wù)過程中雙方的權(quán)利義務(wù)在本合同中進(jìn)行的有關(guān)約定。

第二條

UI界面設(shè)計步驟

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

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

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

4、在UI界面設(shè)計過程中乙方應(yīng)及時與甲方進(jìn)行UI界面設(shè)計進(jìn)程的溝通。

5、UI界面設(shè)計基本完成后，乙方應(yīng)上傳到乙方公司的服務(wù)器上請甲方確認(rèn)，并根據(jù)甲方意見進(jìn)行修改。

6、甲方根據(jù)驗收標(biāo)準(zhǔn)在書面確認(rèn)制作的網(wǎng)站已經(jīng)達(dá)到甲方的要求后，驗收完畢后在五個工

作日內(nèi)將剩余30%

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

7、技術(shù)情報和資料的保密：研究開發(fā)人員在此期間之內(nèi)嚴(yán)格保守該研發(fā)項目的技術(shù)情況和資料，未經(jīng)委托人許可不可擅自傳遞、轉(zhuǎn)載所有相關(guān)資料給第三方；一經(jīng)發(fā)現(xiàn)委托人有權(quán)向司法機(jī)關(guān)提起訴訟，研發(fā)人員將承擔(dān)相應(yīng)的法律責(zé)任；

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

第三條：服務(wù)內(nèi)容及費用

第四條：甲方權(quán)利與義務(wù)

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

驗收標(biāo)準(zhǔn)為：

1、頁面是否按甲方需求進(jìn)行設(shè)計。

2、各鏈接是否準(zhǔn)確有效。

3、文字內(nèi)容是否正確（以客戶提供的電子文檔為準(zhǔn)）。

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

4.2、如有其他未能解決的問題，可與乙方服務(wù)投訴部聯(lián)系協(xié)調(diào)解決。

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

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

4.4、為確保甲方利益，甲方有權(quán)要求乙方提供UI界面設(shè)計服務(wù)確認(rèn)函（需要明確確認(rèn)函的目的）

4.5、甲方在服務(wù)期間若需要變動網(wǎng)站網(wǎng)頁設(shè)計風(fēng)格或者針對數(shù)據(jù)庫表結(jié)構(gòu)進(jìn)行增加或變動等新的UI界面設(shè)計服務(wù)內(nèi)容，需簽訂新的合約，并對有關(guān)事項另行約定。

第五條：乙方權(quán)利與義務(wù)

5.1、乙方應(yīng)照UI界面設(shè)計服務(wù)合同及服務(wù)條款向甲方提供有關(guān)服務(wù)，出現(xiàn)問題，應(yīng)及時向甲方進(jìn)行解釋說明并及時解決。

5.2、乙方應(yīng)按照經(jīng)甲方書面確認(rèn)的UI界面設(shè)計服務(wù)報價向甲方收取服務(wù)費用。

5.3、若甲方要求乙方提供UI界面設(shè)計服務(wù)確認(rèn)函，乙方應(yīng)按照甲方要求向甲方提供UI界面設(shè)計服務(wù)確認(rèn)函。

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

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

第六條：保密義務(wù)

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

第七條：修改條款

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

第八條：不可抗力條款

甲乙任何一方如確因不可抗力的原因，不能履行本合同時，應(yīng)及時向?qū)Ψ酵ㄖ荒苈男?、延期履行或部分履行的理由。在取得有關(guān)機(jī)構(gòu)證明后，本合同可以不履行或者延期履行或部分履行，并全部或者部分免予承擔(dān)違約責(zé)任。

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

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

第十條：其他

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

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

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

4、其他未盡事宜，依據(jù)有關(guān)法律規(guī)定辦理

5、因履行本合同或者與本合同相關(guān)的爭議，雙方應(yīng)協(xié)商解決；協(xié)商解決不成的，任何一方均有權(quán)將爭議提交相關(guān)仲裁機(jī)構(gòu)。

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

甲方：_______________

乙方：_______________

授權(quán)代表：_______________

授權(quán)代表：_______________

地址：

地址：

電話：

電話：

蓋章：

蓋章：

開戶行：

帳號：

開戶行：

帳號：

第三篇：UI用戶界面設(shè)計課程設(shè)計報告

UI用戶界面設(shè)計 大作業(yè)課程設(shè)計報告

題 目：依依旅行系統(tǒng)前臺應(yīng)用及后臺管理院 別：專 業(yè)：學(xué)生姓名：指導(dǎo)教師：成 績：

信息與控制學(xué)院

計算機(jī)科學(xué)與技術(shù) 120210137宋依依

孫麗云

2015年 6 月 12 日

一、系統(tǒng)概述 1.1課程設(shè)計題目：

依依旅行系統(tǒng)前臺及后臺管理

1.2 課程設(shè)計運行環(huán)境：

1.2.1前臺開發(fā)工具：

Java，MyEclipse6.5，Tomcat5.x 1.2.2后臺開發(fā)工具：

Microsoft SQL Server 2008 1.2.2系統(tǒng)運行結(jié)果工具：

360安全瀏覽器7.1 1.3 課程設(shè)計實現(xiàn)技術(shù)：

基于HTML，CSS，JSP等技術(shù)的應(yīng)用

二、依依旅行系統(tǒng)需求分析

2.1 系統(tǒng)功能需求：

系統(tǒng)的功能需求包括一下幾個方面

（1）游客在不登錄的情況下只可以進(jìn)行相關(guān)旅行，車票，酒店信息的查詢。（2）游客通過注冊登錄或者登錄后，可以通過網(wǎng)絡(luò)查詢景點的信息概況和預(yù)定景點票，酒店，車票（飛機(jī)票，火車票，或者租車）。

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

三、依依旅行系統(tǒng)概要分析

3.1旅游系統(tǒng)模塊介紹

滿足以上需求的管理系統(tǒng)主要包括以下幾個模塊。（1）旅游數(shù)據(jù)維護(hù)模塊

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

基本業(yè)務(wù)模塊主要用于實現(xiàn)游客查詢景點信息和預(yù)定的管理，可以登陸系統(tǒng)預(yù)定景點游票和導(dǎo)游預(yù)定，工作人員可以處理預(yù)定信息和取消預(yù)定信息等操作。

（3）數(shù)據(jù)庫管理模塊

在系統(tǒng)中，所有景點信息以及工作人員和導(dǎo)游的帳戶信息都要進(jìn)行統(tǒng)一管理，景點的使用情況和預(yù)定情況也要進(jìn)行詳細(xì)的記錄，要用統(tǒng)一的數(shù)據(jù)庫平臺進(jìn)行管理。（4）旅游信息查詢模塊

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

3.2旅游數(shù)據(jù)維護(hù)模塊

數(shù)據(jù)維護(hù)模塊包括如下圖所示的幾個方面：

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

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

3.3旅游業(yè)務(wù)模塊

旅游業(yè)務(wù)模塊包括一下幾個方面：

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

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

（4）酒店預(yù)訂：游客可一根據(jù)情況預(yù)定酒店。

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

3.4數(shù)據(jù)庫管理模塊

數(shù)據(jù)庫模塊包括一下一個方面：

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

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

四、依依旅行系統(tǒng)數(shù)據(jù)分析

4.1管理員信息表

4.2用戶信息表

4.3景點信息表

4.4酒店信息表

4.5火車票信息表

4.6飛機(jī)票信息表

4.7租車信息表

4.8用戶支付信息表

4.9常用游客信息表

4.10游客常用地址信息表

4.11景點訂單信息表

4.12火車票訂單信息表

4.13飛機(jī)票訂單信息表

4.14租車訂單信息表

4.15酒店訂單信息表

4.16用戶評論信息表

五、依依旅行系統(tǒng)的前臺實現(xiàn)過程

5.1依依旅行系統(tǒng)首頁

注：此時因系統(tǒng)未登錄，所以只可以查看詳情，若進(jìn)入景點點擊預(yù)定和留言或者點擊出行方式和酒店預(yù)訂則跳轉(zhuǎn)到5.2登錄界面

5.2依依旅行系統(tǒng)登錄界面

當(dāng)輸入用戶不存在時跳轉(zhuǎn)到

當(dāng)輸入用戶存在，密碼輸入有誤時跳轉(zhuǎn)到

當(dāng)輸入用戶存在，密碼正確時跳轉(zhuǎn)到5.3

5.3依依旅行系統(tǒng)登錄界面

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

5.4依依旅行系統(tǒng)注冊界面 第一步：輸入用戶名，當(dāng)用戶名已存在時

當(dāng)用戶名不存在時

當(dāng)密碼兩遍輸入不相同時

當(dāng)密碼兩遍輸入相同時

5.5依依旅行系統(tǒng)修改個人信息界面

點擊修改

修改后點擊保存

5.6依依旅行系統(tǒng)修改個人密碼界面

當(dāng)前密碼輸入有誤時：

新密碼兩遍輸入不同時：

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

5.7依依旅行系統(tǒng)常用游客信息界面

添加游客

5.8依依旅行系統(tǒng)支付信息界面

5.9依依旅行系統(tǒng)訂單信息界面 景點訂單信息

火車票訂單信息

飛機(jī)票訂單信息

租車訂單信息

酒店訂單信息

分別可以進(jìn)行取消訂單操作

5.10依依旅行系統(tǒng)預(yù)訂信息界面 可以選擇出行日期，出行人數(shù)

點擊預(yù)訂后對信息進(jìn)行確認(rèn)，并計算總價格

若積分大于總價格：預(yù)訂成功

若積分小于于總價格：

5.11依依旅行系統(tǒng)出行方式界面 火車票

飛機(jī)票

租車

分別可進(jìn)行預(yù)訂

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

5.12依依旅行系統(tǒng)酒店預(yù)訂界面

5.13依依旅行系統(tǒng)退出界面

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

六、依依旅行系統(tǒng)的后臺實現(xiàn)過程

6.1依依旅行系統(tǒng)管理員登錄界面

注：管理員沒有注冊功能

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

6.2依依旅行系統(tǒng)所有用戶界面

可進(jìn)行刪除操作，提示操作人為當(dāng)前用戶指明操作人的操作成功

6.3依依旅行系統(tǒng)管理員所有景點信息界面

可對其進(jìn)行添加，修改和刪除操作

6.4依依旅行系統(tǒng)出行界面 飛機(jī)票信息

火車票信息

租車信息

6.5依依旅行系統(tǒng)用戶訂單信息界面 景點訂單信息

飛機(jī)票訂單信息

火車票訂單信息

租車訂單信息

酒店訂單信息

6.6依依旅行系統(tǒng)管理員信息修改界面

七、依依旅行系統(tǒng)的總結(jié)

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

一分耕耘一分收獲！

第四篇：網(wǎng)頁游戲中界面設(shè)計的研究和應(yīng)用(論文)

上海交通大學(xué) 碩士學(xué)位論文

網(wǎng)頁游戲中界面設(shè)計的研究和應(yīng)用

姓名：李曉蕙 申請學(xué)位級別：碩士 專業(yè)：數(shù)字媒體藝術(shù)與技術(shù)

指導(dǎo)教師：楊旭波

20080901

網(wǎng)頁游戲中界面設(shè)計的研究和應(yīng)用

摘 要

論文介紹了主流的網(wǎng)頁游戲界面設(shè)計的特點，根據(jù)人機(jī)界面設(shè)計 的原理，綜合網(wǎng)頁界面設(shè)計和游戲界面設(shè)計的各自特點給出網(wǎng)頁游戲 界面設(shè)計的原則、方法，流程，并應(yīng)用于實際開發(fā)中來指導(dǎo)網(wǎng)頁游戲 的界面設(shè)計。

論文主要闡述了人機(jī)界面設(shè)計的基本原理，包括界面設(shè)計原理，認(rèn)知心理學(xué)和視覺習(xí)慣基礎(chǔ)理論，具體分析以上要素在網(wǎng)頁游戲界面 設(shè)計中的作用。根據(jù)網(wǎng)頁游戲的目標(biāo)用戶的心理特征模型和網(wǎng)頁游戲 的網(wǎng)絡(luò)特征模型對游戲界面設(shè)計原則進(jìn)行了深入研究。根據(jù)人機(jī)界面 設(shè)計基本原理，即符合用戶需要的“簡單、自然、友好、一致” 界 面設(shè)計基本原則的基礎(chǔ)上，結(jié)合網(wǎng)頁界面設(shè)計的原則和游戲界面設(shè)計 原則三方面綜合分析得出網(wǎng)頁游戲界面設(shè)計的原則。分析了每一種游 戲的特殊性，闡述了現(xiàn)在主要的6種游戲類型的特點,提出了基于游 戲不同類型的界面設(shè)計原則。

根據(jù)所要達(dá)到的可用性目標(biāo)和用戶體驗?zāi)繕?biāo)，得出了用戶參與的

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

V

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

該方法的流程為：確定軟硬件環(huán)境、設(shè)計調(diào)研、游戲任務(wù)分析設(shè)

計，以設(shè)計原則為基礎(chǔ)的建立模型、游戲界面的圖形設(shè)計、用戶參與 的迭代式設(shè)計測試和評估，詳細(xì)分析了在每個環(huán)節(jié)的具體實施方法以 及該環(huán)節(jié)中應(yīng)該注意的問題。

根據(jù)先前得出的設(shè)計原則來作為對網(wǎng)頁游戲具體評價的依據(jù)來

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

關(guān)鍵詞

網(wǎng)頁游戲，人機(jī)交互設(shè)計，游戲界面設(shè)計，可用性，用戶體 驗，迭代設(shè)計

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

上海交通大學(xué)

學(xué)位論文原創(chuàng)性聲明

本人鄭重聲明：所呈交的學(xué)位論文，是本人在導(dǎo)師的指導(dǎo)下，獨

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

學(xué)位論文作者簽名：李曉蕙

日期：

****年**月**日

III

上海交通大學(xué)

學(xué)位論文版權(quán)使用授權(quán)書

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

保密□，在 年解密后適用本授權(quán)書。

本學(xué)位論文屬于

不保密□。

（請在以上方框內(nèi)打“√”）

學(xué)位論文作者簽名：李曉蕙

指導(dǎo)教師簽名：楊旭波

日期：

****年**月**日

日期：

年

月

IV 緒 論

1.1 論文的選題背景及意義

1.1.1 背景知識

1.無端網(wǎng)游

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

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

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

網(wǎng)絡(luò)游戲是利用TCP/IP協(xié)議，以Internet為依托，可以多人同時參與的游 戲項目。網(wǎng)絡(luò)游戲按照聯(lián)網(wǎng)方式分為：脫網(wǎng)單機(jī)游戲和網(wǎng)絡(luò)游戲；而網(wǎng)絡(luò)游戲按 照客戶端模式則分為：需要安裝相關(guān)內(nèi)容客戶端軟件的傳統(tǒng)網(wǎng)游和不需要客戶端 的無端網(wǎng)游。無端網(wǎng)游的主要形式為WebGame，即網(wǎng)頁游戲。

社會在進(jìn)步，技術(shù)在發(fā)展，而互聯(lián)網(wǎng)和Flash技術(shù)的深層次發(fā)展讓“傳統(tǒng)客 戶端網(wǎng)游”運行在瀏覽器中的美好愿望已經(jīng)成為現(xiàn)實。無論從游戲的功能性、系 統(tǒng)的完善性和畫面的視覺沖擊力等方面，全新的無端網(wǎng)游都已達(dá)傳統(tǒng)2D網(wǎng)游精 品的水準(zhǔn)，甚至在某些方面有所超越，比如在游戲的便捷性和優(yōu)秀的環(huán)境適應(yīng)能 力等方面。

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

件使用都希望完全通過網(wǎng)絡(luò)來實現(xiàn)，而不需要在去買什么光盤回家安裝什么軟 件。無端網(wǎng)游終將取代傳統(tǒng)游戲，成為未來游戲的主流和發(fā)展方向。

2.游戲界面設(shè)計

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

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

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

1.1.2 論題研究目的與現(xiàn)實意義

歷史總在不斷重演并且驚人的相似，正如網(wǎng)絡(luò)游戲取代傳統(tǒng)單機(jī)游戲一樣，眼下，動態(tài)無端網(wǎng)游取代客戶端網(wǎng)游的趨勢開始愈發(fā)明顯。

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

1.目的

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

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

但是我認(rèn)為，WebGame最終將取代現(xiàn)存的網(wǎng)絡(luò)游戲，而不是一種配菜。

從受眾群體容量來說，網(wǎng)頁游戲有天然優(yōu)勢。能通過瀏覽器上網(wǎng)的人都是網(wǎng) 頁游戲的潛在受眾。根據(jù)最新的調(diào)查顯示：預(yù)計到今年年底全球互聯(lián)網(wǎng)用戶數(shù)量 將會超過10億，而中國網(wǎng)民數(shù)量已經(jīng)達(dá)到2。2億，超過美國成為世界第一，網(wǎng)

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

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

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

Fig.1-1 Interface screenshot of Sherwood Dungeon

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

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

Fig.1-2 Interface screenshot of Paradise

看到了以上這些游戲，大多數(shù)人都會認(rèn)為客戶端游戲最終可能被網(wǎng)頁游戲淘 汰。

2.研究的意義

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

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

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

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

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

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

分別對人機(jī)界面設(shè)計的原理和用戶的認(rèn)知心理和視覺習(xí)慣三個方面來研究 網(wǎng)頁游戲界面設(shè)計；

分析當(dāng)前網(wǎng)頁游戲的概念、特點、分類、目標(biāo)用戶從而來分析網(wǎng)頁游戲界面 并進(jìn)行相關(guān)研究；

得出網(wǎng)頁游戲界面設(shè)計的原則、實現(xiàn)方法、流程和評價4個方面的基本理論 并進(jìn)行相關(guān)應(yīng)用驗證。

本文旨在通過根據(jù)得出的理論來優(yōu)化和改善網(wǎng)頁游戲中的界面設(shè)計，使網(wǎng)頁 游戲能夠更加受到用戶的喜愛，為未來的網(wǎng)頁游戲界面設(shè)計提供有理、有序、系 統(tǒng)化的理論指導(dǎo)，促進(jìn)網(wǎng)頁游戲的進(jìn)一步發(fā)展。

1.3 研究方法

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

出網(wǎng)頁游戲的界面設(shè)計的原則、方法、流程和評價體系。

本論文采用的研究方法主要有文獻(xiàn)研究法、問卷調(diào)查法、比較研究法。

1.文獻(xiàn)研究法

這是本文采用的最主要的研究方法，即通過對大量國內(nèi)外對網(wǎng)頁游戲、網(wǎng)頁 和游戲的界面設(shè)計相關(guān)的文獻(xiàn)進(jìn)行分析和研究，總結(jié)歸納出網(wǎng)頁游戲中的界面因 素，并對這些界面因素進(jìn)行分析，在此基礎(chǔ)上總結(jié)出網(wǎng)頁游戲的界面設(shè)計所要遵 循的原則、設(shè)計方法和設(shè)計流程。

2.問卷調(diào)查法

本文采用問卷調(diào)查方法，選取各個層次玩家為調(diào)查對象，用以了解他們對網(wǎng) 絡(luò)游戲和網(wǎng)頁游戲中各種界面設(shè)計的直觀感覺和喜好，為網(wǎng)頁游戲界面的優(yōu)化和 改進(jìn)提供了依據(jù)，使之更受玩家的喜愛。

3.比較研究法

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

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

1.4 論文結(jié)構(gòu)

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

分別對人機(jī)界面設(shè)計的原理和用戶的認(rèn)知心理和視覺習(xí)慣三個方面來研究 網(wǎng)頁游戲界面設(shè)計；

分析當(dāng)前網(wǎng)頁游戲的概念、特點、現(xiàn)狀。從而對網(wǎng)頁游戲界面并進(jìn)行相關(guān)分 析研究，得出網(wǎng)頁游戲界面設(shè)計的原則、實現(xiàn)方法和流程以及評價4個方面的基 本理論。并對這些理論應(yīng)用到一款網(wǎng)頁游戲界面設(shè)計上。通過用戶調(diào)查驗證理論 的正確性。

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

統(tǒng)化的理論指導(dǎo)，促進(jìn)網(wǎng)頁游戲的進(jìn)一步發(fā)展。

1.5 本章小結(jié)

本章主要介紹了網(wǎng)頁游戲和用戶界面設(shè)計的基本概念和發(fā)展，闡述了論文研 究的背景、意義，論文的目的和研究方法及論文結(jié)構(gòu)。界面設(shè)計理論基礎(chǔ)

2.1 人機(jī)界面設(shè)計理論

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

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

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

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

2.1.1 人機(jī)界面的概念

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

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

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

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

2.1.2 交互設(shè)計的目標(biāo)

交互設(shè)計應(yīng)能滿足用戶的需要，在理解用戶需要的過程中，我們也應(yīng)明確我 們的主要目標(biāo)：可用性目標(biāo)和用戶體驗?zāi)繕?biāo)。二者在實現(xiàn)上有所不同，可用性目 標(biāo)是關(guān)于滿足特定的可用性標(biāo)準(zhǔn)(如有效性)，而用戶體驗?zāi)繕?biāo)是對用戶體驗質(zhì)量 所作的明確說明(如富有美感、令人舒暢等)。

1.可用性目標(biāo)

可用性通常是要保證交互式產(chǎn)品易學(xué)、使用有效果，可細(xì)分為以下目標(biāo)：

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

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

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

及災(zāi)難性錯誤。

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

國際化風(fēng)格。

易于學(xué)習(xí)(易學(xué)性)對新用戶來說易于學(xué)習(xí)。

使用方法易記(易記性)易于隨機(jī)使用系統(tǒng)完成任務(wù)。

把可用性目標(biāo)表達(dá)成特定問題的形式，他們就轉(zhuǎn)變成了可用性標(biāo)準(zhǔn)。我們可

2.用戶體驗?zāi)繕?biāo) 以通過檢查系統(tǒng)能否改進(jìn)用戶的工作效率及其程度如何，來評估產(chǎn)品的可用性。

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

令人滿意

令人愉快

有趣

引人入勝

有用

富有啟發(fā)性

富有美感

可激發(fā)創(chuàng)造性

讓人有成就感

讓人得到情感上的滿足

在設(shè)計交互產(chǎn)品時；之所以要讓產(chǎn)品具有以上特點，其目的主要與用戶體驗 相關(guān)。所謂的“用戶體驗”指得是用戶與系統(tǒng)交互時的感覺如何，這里需要使用 主觀性的術(shù)語來描述用戶體驗的本質(zhì)。

可用性目標(biāo)和用戶體驗?zāi)繕?biāo)相比，可用性目標(biāo)是交互設(shè)計的核心，它采用的 是明確地衡量標(biāo)準(zhǔn)，而用戶體驗?zāi)繕?biāo)其定義不是那么的明確。在評估時，可用性 是至關(guān)重要的。

2.1.3 界面設(shè)計的分類

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

“人”是設(shè)計界面的一個方面，是認(rèn)識的主體和設(shè)計服務(wù)的對象，而作為對 象的“物”則是設(shè)計界面的另一個方面。它是包含著對象實體、環(huán)境及信息的綜 合體，就如我們看見一件產(chǎn)品、一棟建筑，它帶給人的不僅有使用的功能、材料 的質(zhì)地，也包含著對傳統(tǒng)思考、文化理喻、科學(xué)觀念等的認(rèn)知。“任何一件作品 的內(nèi)容，都必須超出作品，超出所包含的那些個別物體的表象。”分析“物”也 就分析了設(shè)計界面存在的多樣性。為了便于認(rèn)識和分析設(shè)計界面，可將設(shè)計界面 分類為：功能性設(shè)計界面、情感性設(shè)計界面和環(huán)境性設(shè)計界面。

1.功能性設(shè)計界面

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

調(diào)作用。

2.情感性設(shè)計界面

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

3.環(huán)境性設(shè)計界面

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

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

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

圖2-1 ：人機(jī)界面關(guān)系模型

Fig.2-1 Model of HMI

應(yīng)該說，設(shè)計界面是以功能性界面為基礎(chǔ)，以環(huán)境性界面為前提，以情感性 界面為重心而構(gòu)成的，它們之間形成有機(jī)和系統(tǒng)的聯(lián)系，如圖2-1所示。

2.1.4 界面設(shè)計的發(fā)展

這里所指的人機(jī)界面設(shè)計，是指計算機(jī)系統(tǒng)的用戶界面上控制輸入的設(shè)計方 法，大致經(jīng)過了五代的演變：

1.命令語言

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

根據(jù)其語言的特點，及人機(jī)交互的形式的分為：

形式語言

自然語言。

類自然語言。

2.菜單和圖形用戶界面的廣泛應(yīng)用

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

3.面向窗口的點選界面

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

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

現(xiàn)形式。

自然語言與應(yīng)用軟件進(jìn)行通信，把第三代界面技術(shù)與超文本、多任務(wù)概念結(jié) 合起來，使用戶可同時執(zhí)行多個任務(wù)(以用戶的觀點)。隨著文字、圖形、語音的 識別與輸術(shù)技術(shù)的進(jìn)一步發(fā)展，多媒體技術(shù)在人機(jī)界面開發(fā)領(lǐng)域內(nèi)的進(jìn)一步發(fā) 展，自然語言風(fēng)格的人機(jī)界面將得以迅速的發(fā)展，最終走向?qū)嵱没?/p>

5.虛擬現(xiàn)實技術(shù)的應(yīng)用

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

2.2 用戶的認(rèn)知心理研究

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

了解用戶的認(rèn)知如何影響游戲界面設(shè)計，主要是消除游戲界面和用戶模型之 間的鴻溝，盡量消除用戶的挫敗感和失落感，對游戲界面產(chǎn)生的混淆、迷?；蚩?拒的感覺。這是認(rèn)知心理學(xué)在游戲界面設(shè)計中發(fā)揮的主要作用[10]。

2.2.1 信息加工

認(rèn)知心理學(xué)家關(guān)心的是作為人類行為基礎(chǔ)的心理機(jī)制，其核心是輸入和輸出 之間發(fā)生的內(nèi)部心理過程。但是人們不能直接觀察內(nèi)部心理過程，只能通過觀察 輸入和輸出的東西來加以推測，如圖2-2所示。所以，認(rèn)知心理學(xué)家所用的方法 就是從可觀察到的現(xiàn)象來推測觀察不到的心理過程。有人把這種方法稱為會聚性 證明法，即把不同性質(zhì)的數(shù)據(jù)會聚到一起，而得出結(jié)論。

圖2-2 信息加工系統(tǒng)結(jié)構(gòu)圖

Fig.2-2 Chart of Information Processing System

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

認(rèn)知心理學(xué)企圖把全部認(rèn)知過程統(tǒng)一起來。它認(rèn)為注意、知覺、記憶、思維 等認(rèn)知現(xiàn)象是交織在一起的。對于一組現(xiàn)象的了解有助于說明另一組現(xiàn)象。由于

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

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

輸入或刺激 編

碼 比

較

響應(yīng)執(zhí)行輸出或執(zhí)行響應(yīng)選擇

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

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

2.2.2 外部認(rèn)知

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

包括書本、報紙、網(wǎng)頁、地圖、圖表、便條、繪圖等，同時人們也開發(fā)眾多的工 具來幫助認(rèn)知，例如筆、計算器、計算機(jī)技術(shù)等。外部表示與物理工具相結(jié)合大 大增強了人們的認(rèn)知能力，事實上，它們己經(jīng)是不可或缺的組成部分，沒有了它 們，很難想象我們?nèi)绾芜M(jìn)行日常生活。

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

1．外表化以減輕記憶負(fù)擔(dān)

為了減輕記憶負(fù)擔(dān)，人們把各種知識轉(zhuǎn)變?yōu)橥獠勘硎镜牟呗裕央y以記住的 東西具體化，例如日記，筆記本、便條等來提醒人們。因此，“外表化”之所以 能夠減輕人們的記憶負(fù)擔(dān)，是因為：能夠提醒某件事情；提醒人們需要做些什么；提醒人們什么時候需要做某事。

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

2．減輕計算負(fù)擔(dān)

在進(jìn)行計算時，使用工具或設(shè)備并結(jié)合外部表示，即可減輕計算負(fù)擔(dān)，例如 筆、紙、計算器等。

3．標(biāo)注和認(rèn)知追蹤

“標(biāo)注”就是修改的外部表示，如劃去某項或在某項加下劃線，而“認(rèn)知追 蹤”則是重新安排某些事物的次序或結(jié)構(gòu)。

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

2.2.3 計算機(jī)與認(rèn)知心理學(xué)

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

計算機(jī)模擬和類比是認(rèn)知心理學(xué)家采用的一種特殊方法。要使計算機(jī)像人那 樣進(jìn)行思維，計算機(jī)的程序就應(yīng)當(dāng)符合人類認(rèn)知活動的機(jī)制，即符合某種認(rèn)知理

論或模型。把某種認(rèn)知理論表現(xiàn)為計算機(jī)程序就叫計算機(jī)模擬。因此，計算機(jī)模 擬首先可以用來檢驗?zāi)撤N理論，發(fā)現(xiàn)其缺陷，從而加以改進(jìn)。

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

2.2.4 用戶心理認(rèn)知與界面設(shè)計的相互影響

用戶心理認(rèn)知對界面設(shè)計的影響

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

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

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

設(shè)計師能將技術(shù)和藝術(shù)緊密結(jié)合，通曉與設(shè)計有關(guān)的自然科學(xué)和社會科學(xué)的知 識，不斷地激發(fā)創(chuàng)造力，提高設(shè)計的文化品格。設(shè)計師在長期的設(shè)計實踐中逐漸 認(rèn)識了設(shè)計與對象及客觀環(huán)境之間的各種關(guān)系，對當(dāng)代的審美和技術(shù)的發(fā)展具有 一定的促進(jìn)作用。

界面對用戶心理的影響

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

2.3 視覺習(xí)慣

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

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

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

2.4 網(wǎng)頁游戲概述

2.4.1 網(wǎng)頁游戲的概念

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

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

2.4.2 網(wǎng)頁游戲的特性

網(wǎng)頁游戲顧名思義，即有網(wǎng)頁的特性又屬于游戲的范疇。他的目的是為了娛 樂，所用的手段和運行平臺確是網(wǎng)頁瀏覽器。網(wǎng)頁游戲的發(fā)展離不開互聯(lián)網(wǎng)技術(shù) 和瀏覽器技術(shù)的發(fā)展。技術(shù)的發(fā)展為網(wǎng)頁游戲提供了豐富的表現(xiàn)手段。

1．網(wǎng)頁游戲的技術(shù)特性

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

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

序，還是瀏覽器上的網(wǎng)頁應(yīng)用。

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

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

對網(wǎng)絡(luò)帶寬的要求相對較低，玩家?guī)缀蹩梢栽谌魏螘r間任何地點任何一臺能 上網(wǎng)的電腦上快樂地游戲，不會受到其他客觀條件的制約。等種種特點，也非常 適合長時間呆在辦公室和校園的OFFICE一族和大學(xué)生一族，他們可以輕松地 “在老板眼皮底下”享受游戲的樂趣，這些都是傳統(tǒng)網(wǎng)游所不能比擬的。而這部 分用戶大多具備消費游戲的經(jīng)濟(jì)能力和消費需求，因此市場潛力相當(dāng)巨大。

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

2．網(wǎng)頁游戲的游戲特性

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

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

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

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

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

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

3．網(wǎng)頁游戲的用戶和市場特征

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

網(wǎng)頁游戲的獨特魅力與巨大潛力使之迅速成為互聯(lián)網(wǎng)行業(yè)中的“新貴”，僅 國內(nèi)就有眾多企業(yè)投入這一領(lǐng)域并開發(fā)制作出了大量網(wǎng)頁游戲。

4．網(wǎng)頁游戲的不足

網(wǎng)頁游戲相對于客戶端網(wǎng)游優(yōu)點有很多，但是和傳統(tǒng)網(wǎng)游相比，網(wǎng)頁游戲還 是有很多不成熟完善的地方。而劣勢其實集中在畫面表現(xiàn)力上（傳統(tǒng)RPG也可做 到網(wǎng)頁上，節(jié)奏感上將不是劣勢，而畫面上去難以比擬）。而隨著互聯(lián)網(wǎng)技術(shù)的 發(fā)展，網(wǎng)頁上的畫面表現(xiàn)力也得到了長足的發(fā)展。相對傳統(tǒng)網(wǎng)頁游戲的純文字表 現(xiàn)，現(xiàn)在的網(wǎng)頁游戲已經(jīng)逐步向多媒體方向發(fā)展。

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

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

2)游戲節(jié)奏緩慢

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

3)游戲畫面表現(xiàn)力不夠

瀏覽器的局限導(dǎo)致網(wǎng)頁游戲的畫面很難達(dá)到客戶端網(wǎng)游的程度。

4)網(wǎng)頁游戲剛剛誕生、游戲內(nèi)容不夠豐富

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

雖然目前網(wǎng)頁游戲尚無法與傳統(tǒng)網(wǎng)游在市場規(guī)模上相提并論，但可以肯定的 是，隨著WEB技術(shù)的不斷發(fā)展和網(wǎng)頁游戲認(rèn)知度與影響力的不斷提升，網(wǎng)頁游戲 市場將迎來一波快速發(fā)展的高潮。

2.4.3 網(wǎng)頁游戲的發(fā)展

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

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

當(dāng)年在網(wǎng)絡(luò)泡沫經(jīng)濟(jì)的推動下，國內(nèi)涌現(xiàn)了不少規(guī)模較大的WebGame。例如 《第九城市》、《逸飛嶺》等，以及活躍在各信息港的不同版本的《笑傲江湖》。它們是國內(nèi)第一批基于WEB瀏覽器而產(chǎn)生的WebGame。當(dāng)時它們所冠的頭銜不是Game，而是虛擬社區(qū)。

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

虛擬社區(qū)最紅火的時候，成千上萬的網(wǎng)民為了那些虛擬數(shù)據(jù)，通宵達(dá)旦地守 候在電腦面前不斷刷新頁面。網(wǎng)站訪問量自然瘋了似地往上飆升！在網(wǎng)絡(luò)泡沫經(jīng) 濟(jì)最紅火的時期，能增加網(wǎng)站訪問量就等于大把地?fù)七M(jìn)鈔票。自然大大小小的網(wǎng) 站都不遺余力地抽出人力物力去開發(fā)和維護(hù)虛擬社區(qū)。

不可思議的巨額網(wǎng)站訪問量蓋過了虛擬社區(qū)先天和后天的不足。但比網(wǎng)站訪

21問量增加得更快的是服務(wù)器不堪重負(fù)的壓力。隨著網(wǎng)絡(luò)泡沫經(jīng)濟(jì)的破滅，網(wǎng)站訪 問量逐漸化為“浮云”，虛擬社區(qū)受到災(zāi)難性的重創(chuàng)。不少虛擬社區(qū)由免費變?yōu)?收費，習(xí)慣吃免費大餐的網(wǎng)民自然難以接受，更何況大部分虛擬社區(qū)的質(zhì)量和管 理都讓人不敢恭維。時至今日，存活下來的虛擬社區(qū)已經(jīng)寥寥無幾，而且鮮為人 知。

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

雖然網(wǎng)頁游戲在目前還不是主流游戲，但是他的發(fā)展前景是誘人的。

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

網(wǎng)頁游戲?qū)蚴謾C(jī)WAP和手機(jī)客戶端圖形網(wǎng)游（J2ME）方式聯(lián)合發(fā)展，是 跨平臺的，而不會單單停留在網(wǎng)頁表現(xiàn)形式上。多平臺的受眾覆蓋率和贏利空間 更大?，F(xiàn)在已經(jīng)有些公司在這方面已經(jīng)邁出了第一步，同時在WEB上和手機(jī)上推 出產(chǎn)品，既是網(wǎng)頁游戲，又是J2ME圖形手機(jī)網(wǎng)游，兩個平臺訪問的是同一服務(wù) 器。

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

2.5 本章小結(jié)

本章主要闡述了界面設(shè)計原理，認(rèn)知心理學(xué)，視覺習(xí)慣的基礎(chǔ)理論，分析以 上要素在游戲界面設(shè)計中的地位。另外對網(wǎng)頁游戲的概念，分類、特點以及發(fā)展 進(jìn)行相關(guān)介紹。網(wǎng)頁游戲中界面設(shè)計的原則研究

3.1 網(wǎng)頁游戲的界面

3.1.1 網(wǎng)頁游戲的界面現(xiàn)狀

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

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

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

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

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

2．在人機(jī)界面設(shè)計上不如其他類型客戶端游戲

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

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

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

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

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

這些技術(shù)并不能使用戶獲得任何好處，一些最新的技術(shù)并不一定適合，如果 用簡單的成熟的技術(shù)就能夠?qū)崿F(xiàn)的功能，只能說是背離HCI精神。

4．玩家操作受到限制

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

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

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

現(xiàn)有網(wǎng)頁游戲界面的設(shè)計大都類似于人機(jī)界面設(shè)計中的WEB應(yīng)用界面風(fēng)格。在你開始設(shè)計一個網(wǎng)頁游戲之前首先要考慮的是游戲是以網(wǎng)頁的技術(shù)形式表現(xiàn) 出來。網(wǎng)頁游戲要受到瀏覽器平臺和網(wǎng)頁技術(shù)語言的限制，這與傳統(tǒng)游戲制作方 式不同，相應(yīng)的界面設(shè)計當(dāng)然也就會有所差別。

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

而網(wǎng)頁游戲?qū)儆赪EB應(yīng)用，一般是運行在廣域網(wǎng)中，用戶量相對大一些。由

于網(wǎng)絡(luò)帶寬的限制，界面應(yīng)更簡潔，網(wǎng)頁游戲通常由大量的頁面文件組成，每個 頁面文件只顯示用戶當(dāng)前選擇的信息，其它信息需按相應(yīng)按鈕或鏈接進(jìn)入新的界 面獲取。

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

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

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

1．瀏覽器窗口

窗口式屏幕中的一些區(qū)域。看起來就像獨立終端。瀏覽器窗口顧名思義就是 瀏覽器軟件的窗口。它一般的窗口相同，通?？梢园淖趾蛨D形，并且可以移 動或改變大小。在屏幕上可以同時顯示即可窗口，可以看見不同的任務(wù)，在工作 線程之間切換的時候，用戶可以查看不同的窗口內(nèi)容。

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

地址欄

工具欄

標(biāo)簽欄

內(nèi)容區(qū)域

狀態(tài)欄

圖3-1 一個標(biāo)準(zhǔn)的網(wǎng)頁游戲的瀏覽器窗口

Fig.3-1 A standard window of Web browser

內(nèi)容頁面尺寸

頁面尺寸是指WEB頁面在屏幕的可視大小，表3-1是屏幕分辨率和頁面顯示 尺寸的對應(yīng)關(guān)系表。

表3-1 屏幕分辨率和顯示尺寸的對應(yīng)關(guān)系表

Table3-1 Relationship between Screen resolution and the Display area

分辨率 頁面尺寸

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

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

2．版面布局

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

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

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

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

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

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

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

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

3．導(dǎo)航要素

菜單

網(wǎng)頁界面程序的菜單一般處于最頂端，為橫向，用于提供該應(yīng)用所有的功能 選擇入口。應(yīng)用菜單可有多個，一般處于界面的上部和左部，處于上部的為橫向 菜單，左部的豎向菜單，用于該系統(tǒng)大的功能模塊的導(dǎo)航，可以一般用腳本實現(xiàn)。

功能列表

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

瀏覽導(dǎo)航

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

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

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

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

感覺，為了能讓用戶感興趣，我們應(yīng)在導(dǎo)航欄的設(shè)計方面多動動腦精。

4．內(nèi)容基本元素

字體

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

字大小

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

顏色

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

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

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

色彩系列 效果

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

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

覺。它和金黃，淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛

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

效果

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

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

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

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

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

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

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

圖像

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

圖標(biāo)

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

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

圖標(biāo)有一套標(biāo)準(zhǔn)的大小和屬性格式，且通常是小尺寸的。每個圖標(biāo)都含有多張相同顯示內(nèi)容的圖片，每一張圖片具有不同的尺寸和發(fā)色數(shù)。一個圖標(biāo)就是一 套相似的圖片，每一張圖片有不同的格式。從這一點上說圖標(biāo)是三維的。圖標(biāo)還 有另一個特性：它含有透明區(qū)域，在透明區(qū)域內(nèi)可以透出圖標(biāo)下的桌面背景。在 結(jié)構(gòu)上圖標(biāo)其實和麥當(dāng)勞的巨無霸漢堡差不多[17]。

背景

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

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

指針

網(wǎng)頁游戲所要求的交互形式有賴于指點和選擇內(nèi)容這類活動。鼠標(biāo)是能夠進(jìn) 行這種任務(wù)的輸入設(shè)備。在屏幕上顯示給用戶的是由輸入設(shè)備控制的光標(biāo)。

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

圖3-2 《北歐神化》中鼠標(biāo)懸停效果

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

多媒體

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

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

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

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

圖3-3 《縱橫天下》中FLASH新手向?qū)Чδ?/p>

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

5．其他元素

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

圖3-4 百度的網(wǎng)站logo圖標(biāo)

Fig.3-4 the logo of Website Baidu

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

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

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

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

3.2 基于網(wǎng)頁游戲的用戶特征模型的界面設(shè)計原則

3.2.1 目標(biāo)用戶特征

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

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

3.2.2 游戲用戶心理特征模型

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

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

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

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

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

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

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

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

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

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

1.風(fēng)格保持一致性原則

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

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

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

界面的格局的一致性：游戲中從進(jìn)入游戲的主畫面到詳細(xì)對話框設(shè)計的設(shè)計 風(fēng)格，控件的排列、背景、色彩、文字的字形、字體等等，在真?zhèn)€游戲中盡量保 持一致。

2.便于記憶的設(shè)計原則

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

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

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

來調(diào)出游戲中大量的情節(jié)信息和游戲控制設(shè)置信息。

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

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

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

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

3.容錯性的設(shè)計原則

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

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

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

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

命令執(zhí)行的默認(rèn)選項，此選項是系統(tǒng)推薦的設(shè)置，用來給操作錯誤的用戶恢 復(fù)錯誤。如在調(diào)整游戲本身的控制選項或畫面以及聲音選項的時候應(yīng)該有一個默

認(rèn)選項，如果用戶對其中參數(shù)調(diào)整錯誤而又不知道正確值的時候就可以采用默認(rèn) 選項按鈕。

拒絕執(zhí)行操作，當(dāng)用戶的操作錯誤會造成不能挽回的錯誤時，系統(tǒng)應(yīng)該拒絕 執(zhí)行操作，并顯示原因。

4.有效性原則

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

5.信息反饋原則

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

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

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

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

7.方便的自定義

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

8.流暢的工作流

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

3.3 基于網(wǎng)絡(luò)設(shè)備和瀏覽器特征的界面設(shè)計原則

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

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

3.3.1 網(wǎng)頁游戲就平臺特征模型

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

支持其他的URL類型及其相應(yīng)的協(xié)議，如FTP、Gopher、HTTPS（HTTP協(xié)議的加 密版本）。HTTP內(nèi)容類型和URL協(xié)議規(guī)范允許網(wǎng)頁設(shè)計者在網(wǎng)頁中嵌入圖像、動 畫、視頻、聲音、流媒體等。

常見的網(wǎng)頁瀏覽器包括微軟的Internet Explorer、Opera、Mozilla的

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

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

服務(wù)器端 客戶端

服務(wù)器

個人電腦

服務(wù)器

用 戶

手

機(jī)

瀏覽器

網(wǎng)頁

服務(wù)器

其他設(shè)備

… 服務(wù)器

圖3-6 瀏覽器和萬維網(wǎng)關(guān)系模型圖

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

3.3.2 基于網(wǎng)絡(luò)設(shè)備和瀏覽器特征的界面設(shè)計原則

1.兼容原則網(wǎng)頁游戲——設(shè)備的多樣性特點

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

在網(wǎng)站方面，所有的上述設(shè)想都土崩瓦解。用戶可能通過一臺傳統(tǒng)的計算機(jī)

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

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

2.網(wǎng)頁游戲便利的導(dǎo)航原則

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

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

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

3.布局合理化原則

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

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

4.降低網(wǎng)絡(luò)的影響

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

5.設(shè)計整體原則——整體的一部分網(wǎng)頁游戲

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

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

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

3.4 基于網(wǎng)頁游戲的類型的界面設(shè)計原則

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

表3-3 網(wǎng)頁游戲分類

Table3-3 Web Games Category

游戲分類 特 點

策略類游戲

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

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

寵物養(yǎng)成類

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

角色扮演類

玩家任務(wù)可以隨著檢驗的增長進(jìn)行屬性配置，具有濃重的故事 情節(jié)

需要玩家對游戲規(guī)則進(jìn)行思考，判斷。系統(tǒng)表現(xiàn)相當(dāng)多樣化，主要依游戲規(guī)則制定，對游戲操作不需要太高要求。益智類

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

音樂類

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

3.4.1 策略類游戲界面設(shè)計原則

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

網(wǎng)頁游戲從沉寂多年到今天的二次繁榮，一般都認(rèn)為該歸功于一款名為

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

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

界》、《北歐神話》《地球帝國網(wǎng)絡(luò)》、《亂舞春秋》、《圖騰三國》、《世界領(lǐng)袖》與 《三國風(fēng)云》等。

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

第五篇：網(wǎng)頁UI設(shè)計師

網(wǎng)頁UI設(shè)計師

崗位職責(zé)：

1、負(fù)責(zé)網(wǎng)站的界面視覺設(shè)計工作；

2、構(gòu)思并設(shè)計網(wǎng)站的整體視覺風(fēng)格、用戶體驗設(shè)計和VI；

3、能夠解讀網(wǎng)站產(chǎn)品需求并提出創(chuàng)新想法，能夠完成網(wǎng)頁或應(yīng)用的交互設(shè)計，并完成界面的流程設(shè)計、原型設(shè)計，不斷優(yōu)化用戶體驗；

4、平衡網(wǎng)站的易用性和美觀性，實時把握web設(shè)計的流行趨勢，結(jié)合用戶研究和產(chǎn)品分析的成果，不斷提出新的設(shè)計思路及創(chuàng)意策略。

崗位要求：

1、本科（含）以上學(xué)歷，美術(shù)、設(shè)計、電子商務(wù)、計算機(jī)等相關(guān)專業(yè)；

2、三年以上相關(guān)工作經(jīng)驗，有電子商務(wù)、社交平臺、通信運營商的網(wǎng)站界面設(shè)計經(jīng)驗優(yōu)先；

3、具備網(wǎng)站設(shè)計創(chuàng)意，根據(jù)需求分析并給出最優(yōu)的界面設(shè)計解決方案；

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

5、對互聯(lián)網(wǎng)產(chǎn)品有著良好的感覺，有用戶體驗研究經(jīng)驗，對用戶瀏覽及操作行為有深度的見解及知識；

6、精通Adobe Photoshop、Adobe Illustrator、Flash、Dreamrever等設(shè)計軟件，熟悉HTML，DIV及CSS，了解Web標(biāo)準(zhǔn)；

7、具有良好的溝通能力、執(zhí)行力，具有團(tuán)隊協(xié)作精神，對工作壓力能夠很好地調(diào)節(jié)；

8、請附上相關(guān)作品（rar壓縮包）或相關(guān)作品的網(wǎng)址。