回合制手游新增UI設計規范研究

范佳偉 王楓紅

摘 要：目的：針對已上線回合制手游的新增UI進行界面設計研究，從而探究出回合制手游新增UI設計規范。方法：借鑒現有UI設計原則和他人指導意見，在實際工作中對已上線回合制手游新增UI的設計制作進行探究，然后分析、歸納、總結出相關設計規范。結果：提出已上線回合制手游新增UI界面的設計規范：一致性、準確性、布局科學、操作合理、響應正常。結論：在理論研究的基礎上完成了一款回合制手游新增UI界面的設計，做出了可用、適用、易用的UI界面。

關鍵詞：手游；新增UI界面；設計規范

現在的手機不僅僅是一個移動通訊工具，它更是一個人們日常生活中非常重要的娛樂消遣工具。手機游戲正是基于此背景下不斷發展起來，并成為大眾十分寵愛的娛樂休閑方式。

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

1 UI設計介紹

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

2 回合制手游UI界面設計規范性探究

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

其次，整個游戲的界面元素也要保持一致，這其中又包括很多方面，比如頁面主色調、整體風格、文字、按鈕等[ 3 ]。外觀元素往往是判斷一個游戲是否符合一致性的最直接的憑借，一個游戲的每個界面是否和諧統一在很大程度上取決于外觀元素的表現，如果一個游戲的每個界面看起來都迥然不同，整個界面的關聯不強，如同一盤散沙，這樣的UI設計明顯就是一個失敗的設計，其游戲質量能有多高，給玩家帶來的吸引力能有多大也就不言而喻了。只有每個界面的外觀元素保持統一，游戲才不會有分割感，從而吸引用戶的焦點，使其沉醉于游戲的絢爛世界里。

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

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

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

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

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

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

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

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

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

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

3 回合制手游UI實例探究

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

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

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

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

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

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

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

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

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

4 結語

通過對現有UI設計原則的解讀我們了解到界面設計所需注意的問題，再經過實踐研究總結并結合回合制手游的特點，我們探討出了一些新增回合制手游UI界面設計的規范。當然也只是設計規范中的一部分，還有很多的小的細節規范由于篇幅的問題無法一一羅列開來，希望能夠通過以上的這些研究能為今后游戲UI的研發發展貢獻一份力量，也希望讀過該篇論文的讀者能夠學到一點經驗，做出更加不錯的手游。

參考文獻：

[1] UI設計.百度百科.

[2] 謝蛟.智能手機游戲UI設計的研究[D].中南民族大學，2012.

[3] 王彥.手機游戲UI設計的一般性原則研究[D].華中師范大學，2014.

[4] 馬建軍，華江林.手機游戲界面設計分析[J].紹興文理學院學報（自然科學），2014，（03）：20-24.

[5] 金小能.基于智能手機的重度游戲交互設計研究[D].浙江大學，2015.

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

[7] 趙明明，王明時.基于用戶體驗的觸屏手機游戲界面設計研究[J].科技創新與應用，2012，（12）：50.

作者簡介：

范佳偉（1992-），男，漢族，河南固始人，碩士，華南理工大學設計學院，主要研究方向為交互設計、游戲頁面設計；

王楓紅（1972-），女，漢族，江蘇沭陽人，教授，博士，華南理工大學設計學院，主要研究方向為主要研究領域為工程圖學、工業產品設計、交互設計等。