范佳偉 王楓紅

摘 要：目的：針對已上線回合制手游的新增UI進(jìn)行界面設(shè)計(jì)研究，從而探究出回合制手游新增UI設(shè)計(jì)規(guī)范。方法：借鑒現(xiàn)有UI設(shè)計(jì)原則和他人指導(dǎo)意見，在實(shí)際工作中對已上線回合制手游新增UI的設(shè)計(jì)制作進(jìn)行探究，然后分析、歸納、總結(jié)出相關(guān)設(shè)計(jì)規(guī)范。結(jié)果：提出已上線回合制手游新增UI界面的設(shè)計(jì)規(guī)范：一致性、準(zhǔn)確性、布局科學(xué)、操作合理、響應(yīng)正常。結(jié)論：在理論研究的基礎(chǔ)上完成了一款回合制手游新增UI界面的設(shè)計(jì)，做出了可用、適用、易用的UI界面。

關(guān)鍵詞：手游；新增UI界面；設(shè)計(jì)規(guī)范

現(xiàn)在的手機(jī)不僅僅是一個移動通訊工具，它更是一個人們?nèi)粘Ｉ钪蟹浅Ｖ匾膴蕵废补ぞ?。手機(jī)游戲正是基于此背景下不斷發(fā)展起來，并成為大眾十分寵愛的娛樂休閑方式。

手游的主要載體是手機(jī)，而手機(jī)又會受到硬件的限制，一般屏幕較小，空間有限，因而手游的設(shè)計(jì)不同于以往的端游、頁游設(shè)計(jì)，需要在有限的屏幕內(nèi)將游戲的功能布局表達(dá)完善，這是一個新的設(shè)計(jì)領(lǐng)域，同時(shí)其相關(guān)的理論研究又是非常的少，設(shè)計(jì)者只能不斷的從實(shí)踐中積累經(jīng)驗(yàn)才能少走彎路從而設(shè)計(jì)出好的UI界面，因而對手游的UI界面特別是一些已經(jīng)上市的回合制手游新增UI界面的設(shè)計(jì)規(guī)范研究便有了意義。

1 UI設(shè)計(jì)介紹

UI設(shè)計(jì)是指對軟件的人機(jī)交互、操作邏輯、界面美觀進(jìn)行整體的設(shè)計(jì)[ 1 ]。優(yōu)秀的UI不僅能夠使得軟件給人以個性感和品位感，還能讓人操作起來簡單、合理，充分表達(dá)出產(chǎn)品的功能和個性。自從上世紀(jì)80年代第一臺電腦被制造出來之后，UI設(shè)計(jì)便緊隨著電腦行業(yè)不斷發(fā)展起來。隨著電腦技術(shù)的不斷進(jìn)步，人們對電腦的依賴越來越高，相應(yīng)的UI設(shè)計(jì)也受到了人們的普遍關(guān)注，許多國內(nèi)外知名學(xué)者紛紛著書立作，不斷深化對UI設(shè)計(jì)的探討，有了一般性的設(shè)計(jì)原則規(guī)范。游戲UI設(shè)計(jì)也是整個UI設(shè)計(jì)的一部分，它同樣遵循UI設(shè)計(jì)的一般性原則規(guī)范，但同時(shí)又有著其獨(dú)特的風(fēng)格特點(diǎn)。

2 回合制手游UI界面設(shè)計(jì)規(guī)范性探究

首先，回合制手游UI要嚴(yán)格遵循一致性原則，也即整個手游的UI界面都要有一定的關(guān)聯(lián)性和相似性。這里所說的一致性包括三個方面：設(shè)計(jì)目標(biāo)一致，外觀元素一致，交互行為一致[ 2 ]。我們先從設(shè)計(jì)目標(biāo)一致性方面說起，設(shè)計(jì)目標(biāo)是游戲UI界面設(shè)計(jì)出來之后所要達(dá)到的效果，也是整個游戲核心理念所在，這其中包括目標(biāo)用戶、目標(biāo)指向、目標(biāo)效果等，例如我們將青壯年男性作為我們的主要目標(biāo)用戶群，以易見、易學(xué)、易用作為界面設(shè)計(jì)目標(biāo)效果，那么我們每個界面的設(shè)計(jì)都要考慮到目標(biāo)用戶的使用習(xí)慣，并且在每個界面中都要體現(xiàn)出易見、易學(xué)、易用的特點(diǎn)。

其次，整個游戲的界面元素也要保持一致，這其中又包括很多方面，比如頁面主色調(diào)、整體風(fēng)格、文字、按鈕等[ 3 ]。外觀元素往往是判斷一個游戲是否符合一致性的最直接的憑借，一個游戲的每個界面是否和諧統(tǒng)一在很大程度上取決于外觀元素的表現(xiàn)，如果一個游戲的每個界面看起來都迥然不同，整個界面的關(guān)聯(lián)不強(qiáng)，如同一盤散沙，這樣的UI設(shè)計(jì)明顯就是一個失敗的設(shè)計(jì)，其游戲質(zhì)量能有多高，給玩家?guī)淼奈δ苡卸啻笠簿筒谎远髁?。只有每個界面的外觀元素保持統(tǒng)一，游戲才不會有分割感，從而吸引用戶的焦點(diǎn)，使其沉醉于游戲的絢爛世界里。

最后，整個游戲的交互行為也要保持一致，在同一款游戲中，點(diǎn)擊、或者長按會觸發(fā)什么樣的行為事件都有著嚴(yán)格的規(guī)范，絕不可以有在不同界面執(zhí)行相同動作，卻產(chǎn)生了不一樣的行為事件的情況發(fā)生。

其次游戲UI也要遵循準(zhǔn)確性原則，要注意統(tǒng)一和規(guī)范，標(biāo)記清晰，各個圖標(biāo)、模塊所傳達(dá)的信息需是準(zhǔn)確無誤的。同時(shí)要讓用戶根本不用思考和判斷某個按鈕或圖標(biāo)是什么用途，保證用戶一眼就知道每個部分是什么樣的功能[ 4 ]。準(zhǔn)確性原則涉及到游戲UI的方方面面，其中包括按鈕、圖標(biāo)、文本等，與此同時(shí)還要考慮到邏輯性和玩家的認(rèn)知水平，盡量從用戶的角度來設(shè)計(jì)，萬不可有與玩家常規(guī)邏輯相悖或有沖突的設(shè)計(jì)出現(xiàn)。

游戲UI的布局也是非常值得重視的一部分，合理化布局是一個要嚴(yán)格執(zhí)行的原則，不可以憑借個人喜好，隨意安放任何一個按鈕或圖標(biāo)的位置。在設(shè)計(jì)頁面布局的時(shí)候要充分考慮玩家從上到下、自左向右的瀏覽習(xí)慣和操作邏輯，同時(shí)也要注意和之前的游戲界面布局保持一致，不能有不合常規(guī)的布局出現(xiàn)[ 5 ]。

在進(jìn)行界面布局規(guī)劃的時(shí)候要結(jié)合游戲需求，考慮好每個部件的位置和尺寸，協(xié)調(diào)好每個部件之間的關(guān)系，要使整個頁面和諧統(tǒng)一，同時(shí)又能夠突出重點(diǎn)，符合認(rèn)識的邏輯。在這里面同時(shí)還要注意所需進(jìn)行操作的部分是否合理地設(shè)置在手指熱區(qū)內(nèi)，玩家在操作游戲時(shí)是否順手且不會出錯。在用到游戲控件的時(shí)候，要盡量與之前的頁面控件的使用方式和位置保持一致，同時(shí)考慮其樣式和尺寸是否適合玩家所持設(shè)備的操作特征。

簡潔的UI界面易于用戶了解和使用，并能夠降低用戶誤選的概率，因而在UI設(shè)計(jì)中盡量避免元素的重度堆砌和信息的繁雜描述[ 6 ]。界面內(nèi)容需是用戶所熟悉的語言和操作形式而不是游戲者自己所設(shè)想的樣式。

界面整體的視覺效果要清晰且易于理解，所設(shè)計(jì)的頁面需使一般用戶憑借常識就能輕松掌握。簡潔的UI界面在排序這方面當(dāng)然要加以重視，所有元素都要有序放置，以便讓用戶易于使用。

游戲也要十分注重操作的合理性，在設(shè)計(jì)UI之前就要考慮。玩家要如何操作才能達(dá)到游戲目的，在進(jìn)行了某一步操作之后會達(dá)到什么樣的效果，是否和玩家的邏輯認(rèn)識相一致，這些都是需要深入考慮的問題。

在拿到游戲UI需求之后，我們要根據(jù)整個UI需求合理規(guī)劃好各個關(guān)聯(lián)頁面的關(guān)系，思考怎樣設(shè)計(jì)操作流程才能讓玩家更快、更方便的達(dá)到游戲目的。在這一過程中，我們要仔細(xì)考慮游戲操作的縱深度，盡量精簡游戲的操作步驟，保證整個游戲的操作流程簡單清晰。

在設(shè)計(jì)操作流程的時(shí)候，要讓玩家時(shí)刻清楚自己在進(jìn)行的是什么操作，同時(shí)為玩家提供明確的深入和返回方式，讓玩家隨時(shí)可以通過打開或者關(guān)閉的方式在多個頁面之間進(jìn)行切換[ 7 ]。玩家在進(jìn)行游戲操作時(shí)最好是逐步進(jìn)行，使用線性的流程，簡單易懂，同時(shí)盡量讓操作在一屏內(nèi)完成。

在系統(tǒng)響應(yīng)方面，我們要注意每個界面信息容量，不要將信息過分布置在某個界面內(nèi)，在資源輸出的時(shí)候要考慮好如何分區(qū)，合理分區(qū)輸出才能使界面更好更快加載。同時(shí)要具體考慮每個部件的響應(yīng)時(shí)間，既不能過慢也不能過快。

3 回合制手游UI實(shí)例探究

接下來讓我們通過一個具體的實(shí)例來逐步探究回合制手游新增UI界面設(shè)計(jì)的規(guī)范性。該例源自于本人所在實(shí)習(xí)公司的一款回合制手游，本人的主要工作是針對該款手游進(jìn)行新增游戲頁面設(shè)計(jì)和迭代設(shè)計(jì)。在這個例子中，策劃想做一個法寶系統(tǒng)的UI界面用以提升、合成游戲法寶。在和策劃溝通之后，我們依據(jù)策劃的想法，根據(jù)以往界面的布局方式，秉著主要功能重點(diǎn)突出的思路開始規(guī)劃各個功能模塊的位置，然后得到一個低保真原型圖。在構(gòu)思好頁面的大致排版后，我們就要開始高保真頁面的設(shè)計(jì)了。

我們首先根據(jù)目標(biāo)設(shè)備尺寸設(shè)定好整個UI界面的高和寬。出于一致性要求，每一款游戲都會有自己的控件庫，每一個控件庫都包含著整個游戲的基本圖標(biāo)，因而當(dāng)我們在進(jìn)行設(shè)計(jì)時(shí)，需要將一些通用的標(biāo)準(zhǔn)控件比如背景底框、側(cè)邊導(dǎo)航等先放置在頁面中，這是執(zhí)行界面一致性準(zhǔn)則的第一步。

在進(jìn)行高保真原型（圖1）設(shè)計(jì)時(shí)，我們一定要注意每個部件的位置。先規(guī)劃好各功能位置區(qū)域，然后將主要的功能部件放在人們最易觀察的位置。依照人們自左向右、自上而下的瀏覽習(xí)慣，這里我們將法寶的基本信息放在左上的關(guān)鍵位置，這樣人們的注意力就會很容易集中到法寶信息的位置，同時(shí)為了更好的吸引玩家的眼球，我們還給法寶放置了一個底框。在設(shè)計(jì)的過程中，我們一定要注意好各元素之間的對齊和搭配，同時(shí)還要讓所有的元素看起來像一個統(tǒng)一的整體。界面中的“更換法寶”按鈕要放置在法寶的底框之上，這樣做的目的一是為了讓玩家注意到這個按鈕，二是為了將其融入的整個頁面中，以免給人以散碎的感覺。右側(cè)的信息文字也是分列排開，同時(shí)與左側(cè)法寶框保持對齊關(guān)系。

為了更好說明法寶框下面的兩個元素的意義，我們在左側(cè)加上了文字描述，同時(shí)在進(jìn)度條中部加入了數(shù)值以方便玩家讀取進(jìn)度信息。底部的“消費(fèi)銀兩”“確認(rèn)祭煉”調(diào)用了控件庫的標(biāo)準(zhǔn)控件，二者被調(diào)整成相同長度大小，放置在左側(cè)部分居中位置，這樣就能很好地闡釋各個元素的功能用途。幫助按鈕“！”也要放置在常規(guī)的位置，且要注意對齊。右側(cè)面板的列表項(xiàng)按照以前的界面樣式進(jìn)行設(shè)計(jì)，并與左側(cè)面板中相應(yīng)元素的位置保持相一致。

在初步完成了高保真原型之后，我們需要對其進(jìn)行局部的細(xì)節(jié)調(diào)整。首先，法寶圖標(biāo)那部分還是有點(diǎn)平淡，沒有很好的表現(xiàn)出法寶的價(jià)值；法寶信息那塊還是有點(diǎn)零散，沒有整體性。針對這兩點(diǎn)，我們又重新畫了一個法寶底框，將法寶信息也放入其中，同時(shí)將法寶稱謂以藝術(shù)字的形式表現(xiàn)出來，放在首行以凸顯出來，修改后的界面如圖2所示。按照游戲操作邏輯，在確定所有信息之后我們方可點(diǎn)擊“確認(rèn)祭練”按鈕進(jìn)行法寶的祭練，為了更好的表達(dá)邏輯先后關(guān)系，我們將“消耗銀兩”這一塊進(jìn)行了修改，使其與“升級進(jìn)度”、“祭煉材料”的樣式保持一致，這樣就能更好的突出 “確認(rèn)祭練”這一按鈕，從而讓玩家明晰整個頁面的操作邏輯。

在完成了“祭練”的主頁面之后，接下來就要考慮在點(diǎn)擊“更換法寶”后其彈出的子級頁面如何處理了。剛開始考慮的是點(diǎn)擊之后直接彈出跟左側(cè)面板同樣大小的選項(xiàng)窗口，使得整個頁面很好的融合在一起，如圖3所示。

然而做出來之后就發(fā)現(xiàn)這樣的界面設(shè)計(jì)會產(chǎn)生一定的邏輯誤區(qū)。從我們前面提到的層級規(guī)范來看，顯然其中的第二級頁面與第一級頁面之間沒有進(jìn)行很好的區(qū)分，玩家在進(jìn)到第二級頁面之后很可能會疑惑自己所在的層級位置，同時(shí)在選擇法寶的時(shí)候也無法知曉之前選擇的法寶是什么，信息出現(xiàn)阻礙且沒有與“祭練”主頁面形成上下層的感覺。

基于這些方面的考慮，我們將法寶選擇界面作為單獨(dú)的一層放置在主頁面之上，如圖4所示，同時(shí)將之前選定法寶用高光顯示出來，以便為玩家提供完整的信息。玩家在選擇了其他法寶之后，法寶彈出界面就會自動消失，從而回到法寶主界面。倘若玩家誤觸“更換法寶”按鈕或者突然不想更換了，按照以往的游戲邏輯直接點(diǎn)擊法寶選擇界面以外的空白區(qū)域就可以輕松返回到主頁面，操作的邏輯性和一致性就得到了保障。

接下來我們要考慮的是當(dāng)玩家點(diǎn)擊“確認(rèn)祭練”按鈕之后會有什么樣的反饋了。在與策劃進(jìn)行商討之后，我們決定在玩家點(diǎn)擊“確認(rèn)祭練”按鈕之后會彈出一個屬性加成的提示界面，如圖5所示。該界面同樣浮于首頁之上，為了更好的區(qū)分層級關(guān)系，我們?yōu)樵擁撁嫣砑恿艘粋€透明暗色背景，同時(shí)將“等級提升”四個字采用藝術(shù)字體的形式凸現(xiàn)出來，以便讓玩家第一時(shí)間知曉整個頁面的信息。整個頁面要居中放置，同時(shí)注意好文字之間的對齊和排列，在該頁面彈出之后，玩家可點(diǎn)擊界面以外任何空白區(qū)域來關(guān)閉頁面。通過以上種種步驟，我們的整個法寶“祭練”界面就完成了，剩下的界面也是按照同樣的設(shè)計(jì)思路去不斷的修葺和完善。

4 結(jié)語

通過對現(xiàn)有UI設(shè)計(jì)原則的解讀我們了解到界面設(shè)計(jì)所需注意的問題，再經(jīng)過實(shí)踐研究總結(jié)并結(jié)合回合制手游的特點(diǎn)，我們探討出了一些新增回合制手游UI界面設(shè)計(jì)的規(guī)范。當(dāng)然也只是設(shè)計(jì)規(guī)范中的一部分，還有很多的小的細(xì)節(jié)規(guī)范由于篇幅的問題無法一一羅列開來，希望能夠通過以上的這些研究能為今后游戲UI的研發(fā)發(fā)展貢獻(xiàn)一份力量，也希望讀過該篇論文的讀者能夠?qū)W到一點(diǎn)經(jīng)驗(yàn)，做出更加不錯的手游。

參考文獻(xiàn)：

[1] UI設(shè)計(jì).百度百科.

[2] 謝蛟.智能手機(jī)游戲UI設(shè)計(jì)的研究[D].中南民族大學(xué)，2012.

[3] 王彥.手機(jī)游戲UI設(shè)計(jì)的一般性原則研究[D].華中師范大學(xué)，2014.

[4] 馬建軍，華江林.手機(jī)游戲界面設(shè)計(jì)分析[J].紹興文理學(xué)院學(xué)報(bào)（自然科學(xué)），2014，（03）：20-24.

[5] 金小能.基于智能手機(jī)的重度游戲交互設(shè)計(jì)研究[D].浙江大學(xué)，2015.

[6] 吳穎.馴服復(fù)雜——去繁為簡的界面設(shè)計(jì)方法[J].中國包裝工業(yè)，2015，（20）：56-57.

[7] 趙明明，王明時(shí).基于用戶體驗(yàn)的觸屏手機(jī)游戲界面設(shè)計(jì)研究[J].科技創(chuàng)新與應(yīng)用，2012，（12）：50.

作者簡介：

范佳偉（1992-），男，漢族，河南固始人，碩士，華南理工大學(xué)設(shè)計(jì)學(xué)院，主要研究方向?yàn)榻换ピO(shè)計(jì)、游戲頁面設(shè)計(jì)；

王楓紅（1972-），女，漢族，江蘇沭陽人，教授，博士，華南理工大學(xué)設(shè)計(jì)學(xué)院，主要研究方向?yàn)橹饕芯款I(lǐng)域?yàn)楣こ虉D學(xué)、工業(yè)產(chǎn)品設(shè)計(jì)、交互設(shè)計(jì)等。