移動(dòng)端游戲界面設(shè)計(jì)探索與實(shí)踐

萬發(fā)林　趙競(jìng)

摘要：隨著科技的發(fā)展，移動(dòng)技術(shù)不僅改變了我們的生活方式，也改變了我們玩游戲的方式。本文針對(duì)移動(dòng)端游戲的用戶體驗(yàn)難題，提出能夠顯著提升用戶體驗(yàn)的移動(dòng)端游戲界面交互設(shè)計(jì)的要點(diǎn)與策略，以實(shí)現(xiàn)移動(dòng)平臺(tái)游戲界面的信息交互，提升游戲的易玩性和可玩性。

關(guān)鍵詞：移動(dòng)端游戲 界面設(shè)計(jì) 用戶體驗(yàn)

中圖分類號(hào)：TB47 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069（2018）04-0118-02

引言

隨著時(shí)代的發(fā)展，以打電話為主要功能的普通手機(jī)已經(jīng)跟不上時(shí)代了，以智能手機(jī)為載體的移動(dòng)游戲逐漸成為玩家追捧的主流娛樂方式之一。交互性是游戲區(qū)別于其他數(shù)字藝術(shù)產(chǎn)品的根本特征，而游戲界面則是人機(jī)交互的重要媒介。好的游戲界面會(huì)讓玩家產(chǎn)生強(qiáng)烈的代入感，以及擁有豐富的趣味性。如何從用戶體驗(yàn)的角度出發(fā)，結(jié)合平臺(tái)特點(diǎn)和用戶操作習(xí)慣，設(shè)計(jì)出合理的交互方式使玩家獲得滿足，是我們面臨的新問題。

一、移動(dòng)端游殘界面設(shè)計(jì)的要點(diǎn)

移動(dòng)設(shè)備的屏幕尺寸越大，用戶吸收的視覺內(nèi)容就越多，游戲玩家獲得的游戲體驗(yàn)也越好，但同時(shí)對(duì)手機(jī)操作方式優(yōu)化的需求也就更為強(qiáng)烈。游戲從PC端和游戲主機(jī)平臺(tái)移植到移動(dòng)智能終端，在硬件方面會(huì)受到顯示屏幕、內(nèi)存、計(jì)算能力等諸多方面的限制，從游戲平臺(tái)之間的顯著區(qū)別入手，移動(dòng)端游戲界面設(shè)計(jì)的重要因素有以下三點(diǎn)：

（一）屏幕大小。智能手機(jī)一般具有便攜性，與電腦游戲和主機(jī)游戲相比較，智能手機(jī)體積更小、質(zhì)量更輕，其屏幕顯示范圍更有限，并且市面上的手機(jī)、平板終端尺寸存在多樣性，比如IPhoneX的屏幕對(duì)角線為5.8英寸，三星Galaxy Note 8的尺寸為6.3英寸，而平板手機(jī)的屏幕尺寸通?？蛇_(dá)5到6.9英寸（127到180毫米）。關(guān)注智能手機(jī)顯示屏幕的大小，是設(shè)計(jì)手機(jī)游戲時(shí)的重要因素。

（二）人機(jī)工程學(xué)。移動(dòng)端游戲用戶在玩游戲時(shí)，既要實(shí)實(shí)在在地用手握著游戲設(shè)備，還要按照游戲操控規(guī)則點(diǎn)擊游戲控制器，可能是雙手操作也可能是單手點(diǎn)擊。這使得設(shè)計(jì)出符合人機(jī)工程學(xué)的用戶界面變得難上加難。

（三）觸摸屏控制。智能手機(jī)的人機(jī)交互方式以觸屏操作為主，相比PC游戲鍵盤輸入方式和主機(jī)游戲手柄操控方式，觸摸屏沒有鍵盤顯示、鼠標(biāo)、各種模式識(shí)別設(shè)備等的支持，也就無法依靠可輸入、輸出的外部設(shè)備來完成交互及反饋，只能依靠手指觸摸屏幕進(jìn)行交互。與PC游戲鍵盤、鼠標(biāo)的操作相比，觸控區(qū)域由點(diǎn)變成了面，而且在于玩家手指頭面積的大小，考慮到玩家手指大小和操作習(xí)慣存在個(gè)體差異，對(duì)于按鈕等響應(yīng)觸控區(qū)域的設(shè)計(jì)就有一定的要求。

二、移動(dòng)游殘產(chǎn)品界面設(shè)計(jì)策略

針對(duì)移動(dòng)游戲這樣的交互特性趨勢(shì)，移動(dòng)游戲產(chǎn)品的界面設(shè)計(jì)策略有如下幾點(diǎn)。

（一）優(yōu)化游戲性能。為了帶給玩家流暢的游戲體驗(yàn)，受限于智能手機(jī)在顯示屏幕、內(nèi)存、計(jì)算能力等硬件方面的限制，在設(shè)計(jì)移動(dòng)端游戲時(shí)必須將游戲性能擺在第一位，并以性能優(yōu)先的思維方式去考慮所有設(shè)計(jì)中的細(xì)節(jié)問題，包括游戲模型、貼圖、特效、動(dòng)畫、程序等。要求設(shè)計(jì)師在滿足游戲流暢運(yùn)行的前提下，再去提高游戲的美術(shù)設(shè)計(jì)精美程度。在技術(shù)方面，對(duì)于畫面中的重復(fù)元素，也要充分考慮資源共用的制作策略，使游戲運(yùn)行流暢。

（二）簡(jiǎn)化界面，突出重點(diǎn)。移動(dòng)終端體積小、屏幕小，在設(shè)計(jì)時(shí)可以通過規(guī)劃版面布局，擴(kuò)大游戲操作范圍與表現(xiàn)空間，如隱藏設(shè)計(jì)，可對(duì)不常用到的功能進(jìn)行盡可能多的隱藏設(shè)計(jì)，有需求的時(shí)候出現(xiàn)圖標(biāo)，無需求時(shí)隱藏。以此來突出重點(diǎn)，也便于玩家操作。

同時(shí)，為了讓游戲在不同終端上都能夠以正確的比例顯示，需要為不同的終端發(fā)布不同的游戲版本。

（三）根據(jù)手持操作習(xí)慣設(shè)計(jì)界面布局。在移動(dòng)端游戲與PC游戲和主機(jī)游戲不同。在游戲體驗(yàn)設(shè)計(jì)時(shí)，需要考慮這三大游戲平臺(tái)之間所存在的巨大區(qū)別。那么在設(shè)計(jì)的時(shí)候就要充分考慮用戶操作的習(xí)慣，將操作區(qū)域放在人們能夠觸及到的屏幕區(qū)域，并且一定要把最重要的按鈕放到屏幕中心。這樣玩家可以方便、輕松地單手操作，也可以舒服地以一只手握住游戲設(shè)備，另一只手指在屏幕上點(diǎn)擊進(jìn)行操作。

三、移動(dòng)端休閑游戲《百變推幣機(jī)》設(shè)計(jì)與開發(fā)實(shí)踐

（一）游戲策劃?！栋僮兺茙艡C(jī)》是筆者參與設(shè)計(jì)開發(fā)的一款休閑小游戲，這款移動(dòng)游戲從“街機(jī)”造型中獲得靈感，玩家可以通過簡(jiǎn)單的推幣游戲，實(shí)現(xiàn)等級(jí)提升和豐富多樣的功能道具解鎖，獲得的道具還可以通過提交訂單而獲得回報(bào)。

（二）界面尺寸與色彩設(shè)計(jì)?！栋僮兺茙艡C(jī)》可以在IOS或安卓系統(tǒng)終端上運(yùn)行，并根據(jù)常見手機(jī)、平板等移動(dòng)終端設(shè)備的尺寸為游戲設(shè)計(jì)多個(gè)版本供不同設(shè)備的玩家下載，以解決游戲界面與屏幕尺寸適應(yīng)的問題。該游戲的街機(jī)風(fēng)格還體現(xiàn)在界面的美術(shù)風(fēng)格和配色上，游戲的模型和貼圖統(tǒng)一體現(xiàn)一種厚重、斑駁的金屬質(zhì)感，結(jié)合強(qiáng)大的機(jī)械臂、風(fēng)扇等功能，既經(jīng)典又時(shí)尚（如圖1、2）。

（三）界面交互設(shè)計(jì)?？紤]到觸摸屏控制的局限性，《百變推幣機(jī)》的玩法趨向單機(jī)體驗(yàn)，跟傳統(tǒng)的街機(jī)推幣游戲相比，《百變推幣機(jī)》將游戲玩法簡(jiǎn)化，玩家只需要點(diǎn)觸屏幕中金幣工廠的區(qū)域，金幣就能源源不斷地生產(chǎn)出來。在操作中做減法是為了減輕玩家負(fù)擔(dān)，但要在簡(jiǎn)單的操作中給玩家?guī)砜旄?，就需要增加玩法帶來的多變性。比如可以通過選擇風(fēng)扇把金幣吹下操作臺(tái)，最好能剛好落入左右勻速滑動(dòng)的目標(biāo)框從而獲得雙倍積分；也可以選擇機(jī)械手，直接拾取臺(tái)面上的鉆石道具等（如圖3）。

（四）界面布局設(shè)計(jì)。游戲界面的設(shè)計(jì)必須考慮到移動(dòng)設(shè)備的物理尺寸，以及應(yīng)思考用戶手握設(shè)備的方式。Steven Hoober通過觀察分析1333例智能手機(jī)使用情況，得出49%的用戶使用單手拿手機(jī)并使用拇指執(zhí)行各項(xiàng)操作的結(jié)論，并進(jìn)一步指出：36%的用戶使用“握”的姿勢(shì)拿手機(jī)，同時(shí)拇指或另外一根手指放在屏幕上，15%的用戶使用雙手拿手機(jī)，其中的90%會(huì)豎著拿，只有10%橫握，并提出了“拇指區(qū)”的概念，即單手使用時(shí)最舒服的可觸摸區(qū)域。以Iphone5 to 5S為例，（如圖4、5、6）是拇指區(qū)熱度圖，這幅圖大體概括出了使用者拿智能手機(jī)以及查看手夠不到的區(qū)域時(shí)的方式。

根據(jù)大部分人的操作習(xí)慣，《百變推幣機(jī)》的界面設(shè)計(jì)首先結(jié)合左、右手拇指能觸及的區(qū)域，將游戲主界面設(shè)定為左右對(duì)稱的視圖，然后把最重要的操控按鈕放到屏幕中心，并將大部分的功能鍵、交互按鈕放在拇指可以觸及的范圍內(nèi)，以確保玩家適度伸展就可以夠到，所有交互按鈕都遠(yuǎn)離拇指無法觸及的區(qū)域（如圖7）。

（五）手指觸控設(shè)計(jì)。移動(dòng)端設(shè)備以觸屏操作為主，因此游戲界面中按鈕的點(diǎn)擊反饋互動(dòng)就需要適合手指觸控體驗(yàn)，制作時(shí)結(jié)合屏幕的物理尺寸來設(shè)計(jì)圖標(biāo)的像素大小以提升用戶觸控體驗(yàn)。通常PC游戲（端游、頁游）按鈕與icon通常在30像素左右，但考慮到觸摸屏游戲手指觸控與PC游戲鼠標(biāo)觸控的區(qū)別，手機(jī)游戲的按鈕與icon通常要比較大。以蘋果iphone5S為例，其屏幕分辨率為1136×640，游戲界面中的按鈕與icon通常要設(shè)定在80像素以上（如圖8）。

（六）界面隱藏菜單設(shè)計(jì)。完善功能UI、菜單與簡(jiǎn)潔的操作界面總是一種矛盾。一個(gè)游戲里面，玩家?guī)缀跻獏⑴c所有功能和模塊，而移動(dòng)設(shè)備的屏幕空間又是極為有限的，必須盡可能地針對(duì)小屏幕進(jìn)行多層收納設(shè)計(jì)，以達(dá)到巧妙使用的目的，從而給予用戶更多、更友好的體驗(yàn)?！栋僮兺茙艡C(jī)》就設(shè)置了可隱藏的主菜單：游戲功能界面以居于界面中心的“點(diǎn)擊生產(chǎn)”的功能為主，龐大的生產(chǎn)車間、訂單管理及游戲等級(jí)都隱藏在簡(jiǎn)單的主界面中，機(jī)械手臂、風(fēng)扇、擋板，一切都是可折疊隱藏的，點(diǎn)擊相關(guān)按鈕，才會(huì)展開（如圖9）；對(duì)于一些其他功能，還可就其無效隱藏方式進(jìn)行簡(jiǎn)化，即有需求的時(shí)候出現(xiàn)圖標(biāo)，無需求時(shí)隱藏。主要操作區(qū)域的左邊隱藏了游戲的分享設(shè)置，玩家可以通過微博，微信等社交工具向好友分享他的生產(chǎn)成就！對(duì)稱的右邊隱藏了游戲的功能設(shè)置。這種盡可能隱藏的設(shè)計(jì)，不僅有效簡(jiǎn)化了屏幕元素，又給玩家?guī)砹酥刂伢@喜。

結(jié)語

移動(dòng)設(shè)備的產(chǎn)品特性決定了運(yùn)行于移動(dòng)終端平臺(tái)上的游戲產(chǎn)品必然受到的一些約束和限制。這些約束和限制決定了設(shè)計(jì)者需要采用一些特定的設(shè)計(jì)方法和設(shè)計(jì)策略，以滿足移動(dòng)游戲界面的設(shè)計(jì)需求，提升游戲產(chǎn)品的可玩性和交互性，滿足用戶的游戲體驗(yàn)需求。