【導(dǎo)讀】悠易游戲開發(fā)論壇（。用戶使用單一人機(jī)交互流程所開銷的時(shí)間成本和操作次數(shù)成本越低，人機(jī)交互設(shè)計(jì)

　　

【正文】 ，用戶關(guān)注焦點(diǎn)可能位于窗口的頂部或底部；第三種 模式，用戶關(guān)注焦點(diǎn)往往位于窗口的底部?；谶@樣的用戶流程差異，游戲中好的窗口設(shè)計(jì)往往會(huì)為玩家設(shè)置頂部和底部兩個(gè)清晰的關(guān)閉按鈕，參看圖 9。 ? 處于焦點(diǎn)狀態(tài)和非焦點(diǎn)狀態(tài)的窗口如果有不同的行為設(shè)置，則應(yīng)該 從視覺上加以區(qū)分 。 圖 11 是 Windows窗口處于焦點(diǎn)狀態(tài)和非焦點(diǎn)狀態(tài)的示意圖： 圖 11： Windows 窗口示意圖 WindowsXP 的默認(rèn)風(fēng)格（ Style）以亮藍(lán)色表示窗口處于焦點(diǎn)狀態(tài)（圖 11 中的“我的文檔”窗口），而以灰藍(lán)色表示窗口處于非焦點(diǎn)狀態(tài)（圖 11 中的“我的電腦”窗口）。在 Windows的默認(rèn)設(shè)置中 ，對(duì)于當(dāng)前的窗口有一系列的快捷鍵。例如 Alt+F4 快捷鍵用于關(guān)閉當(dāng)前焦點(diǎn)窗口。如果無法從視覺上區(qū)分焦點(diǎn)狀態(tài)窗口和非焦點(diǎn)狀態(tài)窗口，則可能會(huì)造成用戶關(guān)閉不想關(guān)閉的窗口。根據(jù) 公理 3，這是設(shè)計(jì)努力避免的情況。 基于這一原則的，我們可以很容易推導(dǎo)出下面一個(gè)原則： ? 當(dāng)某窗口處于模態(tài)化時(shí)，必須從視覺上加以區(qū)分。 很明顯的，由于當(dāng)某窗口處于模態(tài)化時(shí)，只有該窗口響應(yīng)用戶操作，而其它窗口均不響應(yīng)用戶操作，因此必須從視覺上區(qū)分二者。這種區(qū)分事實(shí)上也是用戶識(shí)別窗口是否處于模態(tài)化的重要依據(jù)之一。 頁 19 / 83 圖 12： Windows 中的模態(tài) 化窗口示例 用戶很容易從視覺上理解到當(dāng)前“確認(rèn)文件刪除”窗口處于模態(tài)化，避免無效操作。 ? 模態(tài)化窗口右上的關(guān)閉按鈕最好禁用。 模態(tài)化操作窗口經(jīng)常出現(xiàn)于某些取消行為，如圖 13 所示： 圖 13： 安裝程序界面 我們可以比較容易的通過文字描述理解到此時(shí)選擇“是”或者“否”，程序?qū)?huì)執(zhí)行什么樣的操作。但是我們很難理解的一個(gè)問題是，如果用戶此時(shí)點(diǎn)擊該模態(tài)化窗口的關(guān)閉按鈕，應(yīng)該執(zhí)行什么樣的操作呢？窗口肯定會(huì)關(guān)閉，要執(zhí)行的是取消安裝還是繼續(xù)安裝呢？沒有任何方法可以給出明確的指引。因此，在此時(shí)禁用模態(tài)化窗口的關(guān)閉按鈕將是一 個(gè)很好的避免用戶犯錯(cuò)的方法。 ? 除非有明確的理由要采用模態(tài)化，否則盡量使用非模態(tài)化窗口 。 模態(tài)化窗口的主要作用是禁止其他窗口的操作行為，而其缺陷也正在于這里。窗口這一 頁 20 / 83 控件的設(shè)計(jì)初衷就是適應(yīng)多窗口多任務(wù)模式，用戶沒有理由去接受當(dāng)一個(gè)窗口打開時(shí)，他無法使用其他窗口和功能，除非這種行為會(huì)對(duì)程序的運(yùn)行產(chǎn)生不可控的嚴(yán)重影響。 舉個(gè)例子，用戶在打怪過程中可能會(huì)去查看自己的裝備，技能，屬性等信息，但讓用戶這個(gè)時(shí)候仍然可以控制自己的角色的打怪操作明顯是更好的設(shè)計(jì)。 ? 如果沒有必要， 子 窗口越少越好。 根據(jù) 公理 11：奧卡姆剃刀法則 ，能夠在一個(gè)窗口內(nèi)完成的功能，如果沒有必要，不應(yīng)該分布到子窗口。正如上一條規(guī)則所指出的，模態(tài)化窗口對(duì)于用戶并不是好的體驗(yàn)，而一個(gè)窗口的子窗口由于功能流程的使用和數(shù)據(jù)的同步性，往往更多的采用模態(tài)化設(shè)計(jì)，因此少用子窗口對(duì)于提升用戶的體驗(yàn)是有意義的。 ? 窗口的數(shù)據(jù)必須同步。 在任何時(shí)刻，用戶可以查看 某一窗口內(nèi)的數(shù)據(jù)時(shí)，該數(shù)據(jù)都應(yīng)該是有效的而不是過時(shí)的。由于多窗口與多任務(wù)的特性，用戶查看窗口時(shí)，窗口內(nèi)的數(shù)據(jù)項(xiàng)的當(dāng)前值與打開窗口時(shí)的值可能會(huì)發(fā)生變化，因此窗口的數(shù)據(jù)必須在用戶可以查看的狀態(tài)下與該數(shù)據(jù)的當(dāng)前值保持一致，以避 免用戶的誤解。 菜單欄與菜單 正如 ，菜單欄與菜單在當(dāng)前的客戶端網(wǎng)絡(luò)游戲中應(yīng)用的相對(duì)較少。但由于它在 WebGame，以及虛擬社區(qū)類產(chǎn)品中的應(yīng)用要廣泛的多（后二者大量的使用了 HTML或 Windows中的標(biāo)準(zhǔn)控件），因而我們?nèi)匀粚?duì)于一些標(biāo)準(zhǔn)的設(shè)計(jì)法則進(jìn)行說明。 ? 菜單 選 項(xiàng)在菜單欄各 下拉菜單 內(nèi)平均分配，用戶平均訪問時(shí)間最短。 對(duì)于這樣的一個(gè)問題： “有 N個(gè)選項(xiàng)要分布于兩個(gè)菜單項(xiàng)的下拉菜單中，如何分布用戶平均訪問時(shí)間最短？” 我們?cè)O(shè)計(jì)兩個(gè)菜單項(xiàng)的下拉菜單中分別有 N1和 N2個(gè)選項(xiàng)， N1+N2=N。 根據(jù) 公 理 13：錫克定律 ，在兩個(gè)下拉菜單中訪問選項(xiàng)的平均時(shí)間分別為： RT1=T0+K*log(N1) RT2=T0+K* log (N2) 則有： RT=(RT1*N1+RT2*N2)/N=T0+K*(N1* log (N1)+N2* log (N2))/N 用數(shù)學(xué)上的極值算法，我們可以計(jì)算出，當(dāng) N1=N2=N/2時(shí)， RT 有最小值。 將這一結(jié)論推而廣之，我們可以得出，選項(xiàng)在各個(gè)下拉菜單中平均分布，用戶的平均訪問時(shí)間是最短的。 ? 如果一個(gè)菜單選項(xiàng)有快捷鍵，則應(yīng)該明確標(biāo)識(shí)于菜單項(xiàng)文字內(nèi)。 在常用 Windows軟件中，菜單 選項(xiàng)并沒有右鍵職能以及 ToolTip等輔助信息提示。因此，并沒有良好的其他渠道幫助用戶來了解一個(gè)菜單選項(xiàng)的快捷鍵設(shè)置。從而的，幫助用戶學(xué)習(xí)和記憶菜單選項(xiàng)的快捷鍵的唯一方式，就是將其明確標(biāo)明于該選項(xiàng)文字處，如圖 14： 頁 21 / 83 圖 14： Word中的下拉菜單 我們可以清晰的看到，所有可以使用快捷鍵的選項(xiàng)，其快捷鍵的使用方法。 ? 菜單項(xiàng)描述的清晰程度決定用戶的使用難度。 如上一條中所分析的，用戶了解一個(gè)菜單選項(xiàng)功能的方法，在點(diǎn)擊嘗試之前，只有該條目的文字描述一途。因此的，必須要盡可能讓用戶在短短的幾個(gè)字之內(nèi)明白這個(gè)選項(xiàng) 的用途。 ? 如果沒有 極其 特殊的需要，不要改變菜單及菜單項(xiàng)的位置。 用戶在一個(gè)軟件內(nèi)記憶一個(gè)控件時(shí)，很重要的一個(gè)方法就是記憶它的位置。改變菜單及菜單項(xiàng)的位置將會(huì)帶來用戶的記憶失效，也就會(huì)帶來用戶的新的學(xué)習(xí)成本。 ? 當(dāng)前不能使用的選項(xiàng)應(yīng)該明確標(biāo)識(shí)其不可用性。 用戶每一次無效點(diǎn)擊都會(huì)帶來使用上的額外成本和心理上的反感。而如圖 14中剪切，復(fù)制選項(xiàng)的設(shè)置則可以有效的避免用戶的無效點(diǎn)擊。 工具欄 標(biāo)準(zhǔn)的 Windows工具欄見圖 15： 圖 15： Inter Explorer 工具欄 工具欄的實(shí)質(zhì)是一組功能按鈕并排（一 般用橫排較多）于一組，呈現(xiàn)于界面上供用戶快速點(diǎn)擊使用。一般網(wǎng)絡(luò)游戲界面中的主菜單欄就是工具欄的典型形式。 ? 如果沒有 極其 特殊的需要，不要改變 工具欄內(nèi)工具 的位置。 與上一小節(jié)中對(duì)于菜單及菜單項(xiàng)的分析類似的，用戶同樣經(jīng)常通過記憶位置來記憶工具欄中的按鈕，尤其是對(duì)于圖案并不能直觀的表現(xiàn)其功能的按鈕，如果其位置發(fā)生變化，將會(huì)帶給用戶很大的困擾。在這一點(diǎn)上，我認(rèn)為《魔獸世界》的設(shè)計(jì)并不夠好。如圖 15和圖 16所示： 圖 15：玩家到達(dá) 10 級(jí)前的主菜單工具欄 頁 22 / 83 圖 16：玩家到達(dá) 10 級(jí)后的主菜單工具欄 在《魔獸世界》中 ，玩家在 10 級(jí)之后被給予天賦點(diǎn)數(shù)并可以去設(shè)置自己的天賦，而天賦系統(tǒng)也在這一時(shí)刻被引入了玩家的界面。但是問題在于，這個(gè)按鈕的出現(xiàn)改變了玩家對(duì)于主菜單的很多記憶。游戲中的任務(wù)系統(tǒng)按鈕以一個(gè)金杯的形式展現(xiàn)，玩家是無法很直接的理解其含義的。而當(dāng) 10 級(jí)之后突然出現(xiàn)的天賦按鈕改變了任務(wù)按鈕的位置時(shí)，使得一部分玩家無所適從。所幸的，《魔獸世界》中的這種變化僅有一次而不是經(jīng)常的，因此對(duì)玩家造成的負(fù)面影響并不大。 標(biāo)簽頁 標(biāo)簽頁是現(xiàn)代用戶界面經(jīng)常使用到的一個(gè)組件，可以用于在一個(gè)窗口內(nèi)展示多組不同的內(nèi)容。對(duì)于標(biāo)簽頁的價(jià)值的一個(gè) 理解是用于減少用戶需要使用和記憶的窗口的數(shù)量，從這個(gè)角度是和 公理 11：奧卡姆剃刀法則 相吻合的。 ? 標(biāo)簽必須明確的表現(xiàn)出它是標(biāo)簽。 首先我們來看一個(gè) Windows下的使用標(biāo)準(zhǔn)標(biāo)簽頁的窗口，分析一下標(biāo)簽頁的視覺特征： 圖 17： Windows 系統(tǒng)屬性窗口 我們可以直觀的看到標(biāo)簽頁的如下視覺特征： 頁 23 / 83 ? 標(biāo)簽頁主體有明確的矩形框來表明和限制其覆蓋區(qū)域。 ? 處于激活狀態(tài)的標(biāo)簽在視覺形式上與其他標(biāo)簽有一定差異。 ? 處于激活狀態(tài)的標(biāo)簽與標(biāo)簽頁主體之間沒有分隔線，且通過頂端略高于其他標(biāo)簽來暗示該標(biāo)簽所在頁位于所有頁的最前方。 也可 以說，我們常常是通過這三項(xiàng)來判斷一個(gè)控件是不是標(biāo)簽頁的。當(dāng)我們看到圖 18的窗口時(shí)，很容易理解到它就是一個(gè)標(biāo)簽頁控件。 圖 18：《魔獸世界》中的標(biāo)簽頁 ? 標(biāo)簽頁不要與 其它控件 混淆。 由于標(biāo)簽頁和 其他很多控件的行為習(xí)慣是不同的，因此如果用戶無法準(zhǔn)確的區(qū)分標(biāo)簽頁與其他控件，就可能造成用戶操作使用上的障礙?！赌ЙF世界》在圖 19的例子中犯了錯(cuò)誤： 圖 19：《魔獸世界》中的用戶查詢窗口 從用戶的視覺理解上，非常容易認(rèn)為這個(gè)界面上使用了標(biāo)簽頁控件，而標(biāo)簽頁控件的重要行為特性就是當(dāng)用戶點(diǎn)擊標(biāo)簽時(shí)標(biāo)簽有視覺上的響應(yīng)， 同時(shí)標(biāo)簽頁主體區(qū)域的內(nèi)容會(huì)發(fā)生 頁 24 / 83 變化。但是事實(shí)上在這個(gè)界面上用戶點(diǎn)擊“標(biāo)簽”時(shí)不會(huì)有任何響應(yīng)。這里的“標(biāo)簽”實(shí)質(zhì)上只是列表的表頭。既然如此，將其與標(biāo)簽在視覺上明確的區(qū)分開是一種必須。 ? 明確標(biāo)簽頁的包含范圍，區(qū)分內(nèi)部按鈕和外部按鈕的職能。 在如圖 17的窗口中，我們可以很明確的注意到，下方的三個(gè)操作按鈕：確定，取消和應(yīng)用是位于標(biāo)簽頁之外的區(qū)域的。因此，我們也就可以很容易理解，按下它們時(shí)所執(zhí)行的功能是對(duì)應(yīng)于整個(gè)窗口，而不是一個(gè)標(biāo)簽頁的。當(dāng)我們按下確定時(shí)，所有標(biāo)簽頁的設(shè)置生效，窗口關(guān)閉；按下取消時(shí)，所有標(biāo)簽頁的設(shè)置無 效，窗口關(guān)閉。而如果一個(gè)按鈕位于的是標(biāo)簽頁內(nèi)時(shí)，我們則會(huì)認(rèn)為它所執(zhí)行的行為是針對(duì)這個(gè)標(biāo)簽頁內(nèi)，而不是整個(gè)窗口的。 按鈕 ? 按鈕必須具有視覺受范性。 兩種 Windows操作系統(tǒng)方案的按鈕形式： 圖 20： Windows 經(jīng)典方案和 WindowsXP 方案中的按鈕形式 按鈕的視覺受范性主要用于表現(xiàn)其可點(diǎn)擊特性，因此在視覺表現(xiàn)上一般采用凸起的方式。通過在一定角度上補(bǔ)光和投影的方式，制造該控件凸起于界面屏幕的視覺體驗(yàn)，使得用戶可以理解到它的可點(diǎn)擊性。 一個(gè)值得關(guān)注的情況是， WindowsXP 方案中的按鈕形式的視 覺受范性要差于網(wǎng)頁上與Windows 經(jīng)典方案中的按鈕形式。對(duì)此的一種解釋是，經(jīng)過長時(shí)間的用戶積累和培養(yǎng)，WindowsXP 不需要再特意的去培養(yǎng)用戶非常常規(guī)的使用習(xí)慣。姑且不論這個(gè)解釋是否可信，我們?nèi)匀豢梢缘玫揭粋€(gè)結(jié)論：如果我們所采用的按鈕是并不十分標(biāo)準(zhǔn)的按鈕，則必須注意其視覺受范性以保證用戶可以第一時(shí)間理解到它們是按鈕。 圖 21：《魔獸世界》中的小地圖模塊 如圖 21，《魔獸世界》中小地圖周圍的所有按鈕都能夠讓玩家感覺到它們凸出于界面，也就能夠理解到它們是可點(diǎn)擊的按鈕。需要特殊說明的一點(diǎn)是，小地圖右上角 的太陽圖標(biāo)并不是一個(gè)可點(diǎn)擊按鈕，但它在視覺上的受范性為用戶的誤操作提供了平臺(tái)，這是《魔獸世界》小地圖模塊的一點(diǎn)不足。 ? 按鈕的默認(rèn)行為是左鍵點(diǎn)擊執(zhí)行。 我們見到的按鈕中， 99%以上的按鈕的行為均是左鍵點(diǎn)擊的。在沒有特殊需求的情況下，不要隨便修改這一點(diǎn)，這種修改會(huì)造成玩家 大量的操作失誤 。 頁 25 / 83 圖 22：《天下 2》游戲界面 《天下 2》里面有一個(gè)很好的設(shè)置，即當(dāng)玩家用鼠標(biāo)左鍵選定一個(gè)對(duì)象時(shí)，如果該對(duì)象有特殊行為，則會(huì)在游戲界面很明顯的地方將該種行為以按鈕的方式顯示出來，玩家可以通過點(diǎn)擊該按鈕的方式來直接執(zhí)行這一行為 。 然而，在這個(gè)按鈕上，《天下 2》做出了與一般設(shè)計(jì)所背離的行為，那就是右鍵點(diǎn)擊按鈕。雖然游戲努力的給出了明確的操作提示，但是玩家仍然會(huì)頻頻的在這個(gè)按鈕上犯錯(cuò)。這是因?yàn)檫@個(gè)設(shè)計(jì)與他們長時(shí)間以來在 Windows操作系統(tǒng)，在網(wǎng)頁上所養(yǎng)成的操作習(xí)慣相背。 當(dāng)然的，左鍵點(diǎn)擊執(zhí)行并不是說 100%必須遵從的，下面我會(huì)舉出違背這一原則的設(shè)計(jì)特例。 ? 可以拖拽移動(dòng)的按鈕應(yīng)該提供右鍵 點(diǎn)擊 執(zhí)行。 在網(wǎng)絡(luò)游戲中，玩家已經(jīng)很習(xí)慣一種操作，就是從技能，物品等界面上拖拽一個(gè)可以使用的對(duì)象到快捷欄，然后就可以通過快捷鍵或者直接界面點(diǎn)擊來 快速調(diào)用這些對(duì)象。在這個(gè)時(shí)候，設(shè)計(jì)理念將發(fā)生一個(gè)改變，應(yīng)該首先提供右鍵點(diǎn)擊執(zhí)行。 之所以發(fā)生這個(gè)改變，其核心就在于拖拽移動(dòng)這個(gè)動(dòng)作。拖拽移動(dòng)的默認(rèn)行為流程為： ? 用戶將鼠標(biāo)移動(dòng)到某個(gè)對(duì)象上并按下鼠標(biāo)左鍵； ? 用戶在不放開鼠標(biāo)左鍵的前提下移動(dòng)鼠標(biāo)到其他位置，此時(shí)該對(duì)象隨鼠標(biāo)指針一同移動(dòng)到該位置； ? 用戶放開鼠標(biāo)左鍵，該對(duì)象停留在該位置，并交由程序處理相關(guān)邏輯。 （可參見 。） 這個(gè)時(shí)候我們就會(huì)注意到一個(gè)問題，當(dāng)用戶在一個(gè)可移動(dòng)的按鈕上按下鼠標(biāo)左鍵時(shí)，究竟是進(jìn)入拖拽移動(dòng)流程還是單擊流程呢 ？對(duì)于程序而言，事實(shí)上是可以不在這個(gè)時(shí)候進(jìn)行判定，而在用戶放開鼠標(biāo)左鍵時(shí)進(jìn)行行為判定的。但是問題在于，用戶在按下鼠標(biāo)左鍵到放開鼠標(biāo)左鍵的過程中，是經(jīng)常會(huì)在經(jīng)意或不經(jīng)意間移動(dòng)鼠標(biāo)一小段距離的。這種情況的一個(gè)結(jié)果就是經(jīng)常用戶的點(diǎn)擊操作會(huì)被錯(cuò)誤的解釋為拖拽移動(dòng)操作。相反的，用戶的拖拽移動(dòng)操作經(jīng)常需要移動(dòng)鼠標(biāo)達(dá)到一個(gè)比較長的距離，因而很少會(huì)被誤解釋為點(diǎn)擊操作。 對(duì)于上述的問題，《魔獸世界》采用了非常人性化而全面的解決方案。在仍然允許用戶使用左鍵點(diǎn)擊可拖拽移動(dòng)的按鈕的同時(shí)，對(duì)于這些按鈕提供了右鍵點(diǎn)擊執(zhí)行功能。這樣子，用戶會(huì)逐漸養(yǎng)成左鍵拖拽右鍵執(zhí)行的操作習(xí)慣，而這種操作習(xí)慣的用戶出錯(cuò)率是非常低的。 ? 按鈕功能執(zhí)行的默認(rèn)時(shí)機(jī)應(yīng)該是鼠標(biāo)左鍵放開而不是鼠標(biāo)左鍵點(diǎn)下時(shí)。 在上一節(jié)的分析中，我們提到了程序處理用戶鼠標(biāo)行為的一個(gè)常用方式：在用戶放開鼠標(biāo)左鍵時(shí)執(zhí)行功