智能手機游戲界面設(shè)計

陳希贊+王玨+呂瑞境

摘要：“嘉興紅十”手機游戲是根據(jù)嘉興地區(qū)紅十用戶的審美喜好設(shè)計的一款線上紙牌游戲，具有休閑娛樂和社交性，適合用戶茶余飯后用于消遣。因此在進行界面設(shè)計時，著力于挖掘游戲的樂趣，以吸引用戶的興趣。本次“嘉興紅十”手機游戲UI界面設(shè)計將以敘述紅十手游的界面設(shè)計過程為主，具體介紹這款游戲UI界面設(shè)計的要素和各界面的設(shè)計思路和創(chuàng)意表達。

關(guān)鍵詞：手機游戲 用戶 界面 設(shè)計

引言

手機游戲已像手機一樣成為人們生活中的常用品，從早年流行的“貪吃蛇”到現(xiàn)在具備Augmented Reality（增強現(xiàn)實技術(shù)）的“精靈寶可夢”，游戲的更新?lián)Q代早已發(fā)生了翻天覆地的變化。一方面，游戲的可玩性是游戲產(chǎn)品是否能抓住人心的命脈；另一方面，個性的游戲界面也越來越受到用戶的推崇和重視。例如極具藝術(shù)風(fēng)格的《紀念碑谷》、美輪美奐的《陰陽師》、簡潔生趣的《球球大作戰(zhàn)》，以及具有魔幻風(fēng)格的《魔獸世界》等都是用戶喜歡的游戲界面風(fēng)格。不同的游戲界面可以賦予用戶不同的游玩體驗，而不同的游戲界面由不同的色彩搭配、多樣性的文字、豐富的游戲功能設(shè)置以及多風(fēng)格的背景畫面所組成。本文通過“嘉興紅十”UI設(shè)計實踐，來討論設(shè)計一款手機游戲界面所需涉及的方面和要素。

一、UI設(shè)計的概述

（一）UI設(shè)計的定義

UI的本意是用戶界面，是英文user和interface的縮寫，UI設(shè)計是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。例如一款A(yù)PP，它能夠讓用戶通過界面進行操作，這就實現(xiàn)了人機交互；能夠讓用戶按照指令有序操作就實現(xiàn)了操作邏輯；能夠讓用戶感受到賞心悅目就實現(xiàn)了界面美觀。一款好的APP的設(shè)計往往離不開這三個要素。

UI設(shè)計從圖形圖像上的定義分為廣義和狹義兩種。廣義上講：是由大眾所周知的符號概念所表現(xiàn)出來的圖形或者圖像，其具有快速傳導(dǎo)功能解釋，匹配人類記憶認識的能力。狹義上講：是由計算機、手持移動設(shè)備、網(wǎng)頁標識、數(shù)據(jù)標識、命令標識、信號標識等通用功能解釋所形成的圖形或者圖像，在各自設(shè)備使用中具有普遍的認知度。

手機游戲UI設(shè)計屬于UI設(shè)計的一部分。手機游戲UI是專門為玩手機游戲的用戶而必須設(shè)計的UI，用戶可以通過游戲UI了解開發(fā)商開發(fā)的游戲規(guī)則，并通過UI提示實現(xiàn)交互操作。

（二）游戲界面設(shè)計的特點

第一，追求界面一致性。界面是用戶游戲過程中最先接觸到的內(nèi)容。統(tǒng)一的視覺能夠減輕用戶的游戲成本，快速地理解游戲，提高功能操作的準確性。因此，在做界面設(shè)計時，首先要確定界面的主色調(diào)，隨后的分界面可采用相同的色彩基調(diào)以保持視覺上的一致性，不致于讓用戶產(chǎn)生一種混亂的感覺。

第二，交互行為一致。在設(shè)計游戲之處建立交互模型，不同類型的行為觸發(fā)后其交互行為需要整體一致。比如：所有需要用戶確認操作的對話框都至少包含“確認”和“放棄”兩個按鈕。在功能的設(shè)置上，也要嚴格按照這一特點，比如“嘉興紅十”游戲的進行界面，要設(shè)置“出牌”、“不出”兩個交互按鈕；游戲勝負界面上要設(shè)置“返回”、“繼續(xù)游戲”兩個交互按鈕。

第三，操作追求一致。對應(yīng)的按鈕應(yīng)該觸發(fā)對應(yīng)的事件。如果一款游戲無法讓玩家做到快速掌握，玩家會失去游戲興趣，過多的學(xué)習(xí)成本只會令玩家感到負擔(dān)。

第四，界面需要合理的反饋。玩家在游戲的過程中進行的每一步操作都帶有一定的目的性，所以界面需要告訴玩家他此刻的狀態(tài)，比如在相應(yīng)操作后提示“登錄成功”、“成功獲得金幣”、“您已托管”等。

二、“嘉興紅十”UI設(shè)計創(chuàng)意構(gòu)思

（一）構(gòu)思過程

“嘉興紅十”是一款針對嘉興地區(qū)紅十用戶設(shè)計的同城紙牌手機游戲，具有休閑性和娛樂性，適合用戶在茶余飯后消磨時光。因同城游戲具有很強的地域性，因此在進行UI界面設(shè)計前，必先經(jīng)過充分的市場調(diào)研，以了解目標客戶群的審美喜好及游戲習(xí)慣。紙牌游戲的界面設(shè)計旨在體現(xiàn)游戲的輕松、休閑及易玩性，又需在情感體驗上能夠引起用戶的興趣。因此在游戲界面設(shè)計的定位上，要體現(xiàn)紙牌游戲的休閑性，界面風(fēng)格需活潑、歡樂，激發(fā)用戶想要游戲的欲望。

游戲功能設(shè)置上，可參考騰訊公司《歡樂斗地主》和同城游公司“紅十”等大用戶量游戲，包括游戲排行榜、設(shè)置、商城等功能，以研究紙牌用戶的交互習(xí)慣。但具體的游戲風(fēng)格和玩法等仍需依據(jù)嘉興地區(qū)紅十用戶的審美喜好與游戲規(guī)則來設(shè)計。

在設(shè)計流程上，可以先考慮登錄界面的設(shè)計。因為登錄界面往往是用戶點開游戲軟件后看到的第一屏，因此它決定了后續(xù)其他頁面的主基調(diào)，類似于網(wǎng)站首頁或書籍封面設(shè)計。隨后可以根據(jù)用戶的游覽順序設(shè)計分界面，最后設(shè)計設(shè)置等相關(guān)輔助界面。

（二）游戲界面設(shè)計要素

1.圖標

圖標是軟件的功能標識，是設(shè)計師利用生活中每一樣物品的元素加以提煉精簡形成的圖形符號，能在一定程度上傳達給用戶該軟件的使用功能。

首先，為突出“嘉興紅十”這款紙牌游戲的特點，故用兩張紅十撲克牌來作為圖標的主要元素，一目了然地讓用戶獲取游戲信息。其次，紅十游戲是用戶通過紅十比賽來獲取游戲幣作為收益，故在撲克牌的下方添加了金幣元素。最后，在撲克牌的上方設(shè)計“嘉興紅十”的小標牌，進一步明確游戲主題。圖標的底色選用紅色，紅色更能刺繡用戶心理，也符合撲克游戲的氛圍。選用桃心點綴背景，使整個圖標顯得更為生動、誘人。

2.色彩

在人們的生活中，獲得信息的方式除去聽覺和觸覺外，最快速最廣泛的方式是視覺。某些特定的信息只能經(jīng)過視覺來得到，比如色感。色感即色彩感知，是用戶視覺思維的重要因素之一。合理的色彩運用能夠有效地組織、整理信息，從而使用戶對屏幕上龐大的信息進行歸納。因此，用戶在進行一款游戲的操作時，色彩的引導(dǎo)對用戶來說是極其重要的，比如用戶排行榜就會用明亮的顏色，因為這樣可以刺激用戶心里挑戰(zhàn)的欲望。endprint

界面上的色彩運用，一般分為主色、輔助色和點綴色。它們的配比大約是6：3：1。主色是在界面中顏色面積最大的顏色，它可以被用來渲染畫面氣氛。輔助色是為了畫面平衡，襯托主色調(diào)而生的。點綴色可以起到“點睛”的作用，使界面能夠生動起來。

“嘉興紅十”游戲界面主要用到藍色和黃色這兩種對比色搭配，以冷色調(diào)來反襯明亮的曖色，造成視覺沖擊以吸引用戶。另—方面，游戲配色通過增加明度來降低飽和度的色彩調(diào)和方法，讓視覺沖擊感不至太強烈，以保證用戶視覺上的舒服感。這種鮮亮而不俗氣的色彩，搭配扁平化的圖形風(fēng)格，非常符合小清新用戶的審美情趣。

3.按鈕

“嘉興紅十”游戲界面的按鈕參考蘋果APP圖標，一律采用圓角矩形，圓角可以帶給人視覺上的舒適感受。圖標色彩根據(jù)各頁面的主色調(diào)進行調(diào)整，盡量選擇和頁面主色調(diào)一致的顏色，以保持感官的統(tǒng)一。本次界面設(shè)計按鈕多采用橙色和藍色，需要強調(diào)突出的按鈕則采用對比色或補色。

4.文字

游戲界面設(shè)計中的文字盡量不要用過于夸張和復(fù)雜的的字體，以保證較高的辨識度?！凹闻d紅十”主要運用到的字體有漢儀綜藝體簡、方正粗圓、方正準圓簡體、華康海報體。另外游戲里的文字內(nèi)容也要盡量精煉，不以避免凌亂、低俗。

5.背景

UI設(shè)計中的背景也能起到影響游戲界面整體風(fēng)格走向的作用。在“嘉興紅十”游戲中，背景選用了一張反映城市街道又做了模糊效果的圖片。城市感的背景圖可以突出該款手游作為同城游戲的特點，若要突出本土性，還可在后期中考慮加入反映嘉興特色的元素。把背景圖處理成模糊效果，可突出這款游戲的圖標和操作區(qū)域，主次分明（圖2）。

三、“嘉興紅十”游殘界面設(shè)計說明

（一）游戲登錄界面設(shè)計

游戲登錄界面是用戶最先進入的界面，換言之，用戶最先感受到這個游戲的好壞就是從登錄界面開始。因此，登錄界面的設(shè)計一定要吸引用戶的眼球。登錄界面由兩部分組成，一是登錄起始界面，二是輸入賬號界面。在游戲背景之上，左邊設(shè)置拿著雙紅十撲克的荷官，以點明游戲主題，右邊由游戲LOGO和兩個登錄按鈕組成。游戲LOGO是從游戲圖標改編而來，形狀上由方變圓，上方的歡迎文字可以讓用戶感受到游戲的熱情。下方則是“微信登錄”和“賬號登錄”兩個按鈕。

輸入賬號頁面在沿用登錄起始界面設(shè)計效果的基礎(chǔ)上，更改了界面的右半部分。輸入框選用了和背景顏色較為相近的藍色，并設(shè)置了賬號和密碼欄、注冊和登錄按鈕，以及在上方設(shè)計注冊成功后飄出的小提示。

考慮到整個游戲的后期運作，特在界面底部預(yù)留出系統(tǒng)提示區(qū)或廣告位，以紅色色塊標注顯示（圖3，圖4）。

（二）游戲首頁界面設(shè)計

登錄成功后，用戶進入了游戲首頁。首頁功能設(shè)置可參考大用戶量紙牌手游，如騰訊《歡樂斗地主》。首頁一般由用戶信息區(qū)、設(shè)置區(qū)和工具欄組成，此外還增加了游戲公告欄、贊助商邊角廣告位等。

首先界面頂部，左上角是常駐商家的廣告位，中間部分是各個游戲用戶的動態(tài)消息，向下鍵代表用戶可以彈出查看更多動態(tài)消息。右上角是一個“設(shè)置”按鈕，可以進行音效、聲音大小的切換等。

界面中部，是主要區(qū)域，左半部用于呈現(xiàn)用戶信息。信息區(qū)以明朗活潑的顏色為主，因此選用了黃橙色，與背景有所對比，顯得較為清晰。用戶信息欄顯示了用戶的昵稱、ID（IDentity）號、等級、積分、金幣、勝率。右半部分是“立刻開始”、“游戲大廳”、“活動賽事”三個主要按鈕?？紤]到紙牌游戲中的中老年用戶群占到了較高的比例，因此對這三個功能鍵做了放大處理，字體上也選用了風(fēng)格化的藝術(shù)字體。凸顯文字以照顧這一用戶群體的視覺感受，并在按鈕上設(shè)計沖出按鈕邊框的配套小圖標，顯得夸張又醒目。

界面底部由“公告”、“好友”、“排名”、“背包”、“商城”組成工具欄，小圖標的設(shè)計與選擇一定要考慮到風(fēng)格的一致性，以保證工具欄以一個統(tǒng)一的視覺形象呈現(xiàn)。如有新的公告消息會有紅色小標點進行提示，以確保用戶不會錯過最新的公告信息（圖5，圖6）。

（三）游戲進行界面設(shè)計

點擊游戲首頁“立刻開始”按鈕，隨即進入游戲進行界面。作為游戲主界面，其在整個游戲中起著至關(guān)重要的作用。因此在設(shè)計之初，分別對兩款大用戶量紙牌游戲騰訊公司《歡樂斗地主》和同城游公司《紅十》做了前期橫向比較研究（圖7，圖8）。

經(jīng)過一番參考和借鑒后發(fā)現(xiàn)，游戲進行界面主要由手牌區(qū)、出牌區(qū)、用戶各自陣營區(qū)組成。手牌區(qū)顯示用戶本人抽到的紙牌，出牌區(qū)是用戶進行比賽的主要戰(zhàn)場，用戶各自陣營區(qū)代表不同用戶的身份。進入游戲進行界面后，即進入游戲準備狀態(tài)，用戶點擊“準備”按鈕則游戲開始，點“邀請”按鈕可邀請好友進入本房間參加比賽。游戲開始后，用戶可根據(jù)抽到的手牌情況選擇是否亮出紅十，隨后區(qū)域內(nèi)會提示用戶是否擁有紅十以及剩余牌量，方便用戶組隊合作。

游戲進行時，用戶會收到是否出牌和提示出牌的按鈕以及出牌倒計時提示，用戶選擇好要應(yīng)對的牌后點擊“出牌”按鈕，則所出紙牌就會在出牌區(qū)顯示。進行界面上還設(shè)置了托管機器人，用戶若是臨時無空又怕錯過出牌機會，可以托管機器人出牌，托管時游戲界面中央會顯示“輕觸桌面取消托管”的提示字樣，以達到更好的交互體驗。

用戶各自陣營區(qū)域內(nèi)還設(shè)置了聊天功能，該功能區(qū)域內(nèi)既可以點擊發(fā)送預(yù)設(shè)的語言套餐，也可以自主發(fā)起語音聊天，使得用戶在游戲進程中的交流更為方便、快捷，也可使游戲氛圍更顯火熱（圖9，圖10，圖11，圖12）。

游戲結(jié)束后，會彈出游戲結(jié)算界面，包括“勝利”、“平局”、“失敗”三款勝負結(jié)果對話框，針對不同用戶的比賽結(jié)果進行顯示。游戲結(jié)果用不同顏色的彩帶進行區(qū)別，“勝利”用紅色彩帶，紅色象征喜悅，“平局”為黃色，“失敗”為灰色，周圍有發(fā)光的星星和方塊點綴。結(jié)算版面上細致顯示了己方和對方的分數(shù)及金幣收益，并配合結(jié)算標題直觀顯示比賽結(jié)果（圖13，圖14，圖15）。

（四）游戲大廳界面設(shè)計

點擊游戲首頁“游戲大廳”按鈕，隨即彈出一個房間滾動列表。房間列表分新手房和高手房，下設(shè)多個房間供用戶挑選。用戶也可以通過創(chuàng)建房間來開設(shè)新房，其他用戶可通過輸入房間號直接到達。界面的整體色調(diào)延續(xù)主色調(diào)以藍、橙為主，背景上用淡化的紅桃、紅方、獎杯等裝飾元素突出紅十游戲主題?！瓣P(guān)閉”按鈕以紅、黃二色突出強調(diào)，提醒用戶點擊此處可退回到上一界面。

點擊“創(chuàng)建房間”按鈕后，界面會彈出一個對話框，上面顯示新建房間號。密碼房可供用戶自行選擇，如果用戶選擇密碼房就勾選，后在下方長框內(nèi)輸入房間密碼，點擊確定生成。用戶可將密碼分享給好友，邀請他們共同游戲（圖16，圖17）。

（五）游戲功能界面設(shè)計

點擊游戲首頁界面底部的工具欄按鈕可進入“公告”、“好友”、“排名”、“背包”、“商城”等相應(yīng)功能界面?！昂糜选苯缑姘ā拔业暮糜选?、“添加好友”、“好友申請”、“好友邀請”等相關(guān)界面。點擊右上角齒輪按鈕可進入“設(shè)置”界面（圖18，圖19，圖20，圖21，圖22，圖23，圖24，圖25，圖26）。

結(jié)語

“嘉興紅十”手游UI設(shè)計實戰(zhàn)是對自身專業(yè)水平的—次檢驗，整個界面設(shè)計綜合反映了圖形創(chuàng)意、版式設(shè)計、色彩構(gòu)成等專業(yè)技能水平。在設(shè)計整個界面時，都盡可能地保持風(fēng)格一致，避免造成用戶視覺上的違和感。通過這次項目實踐讓設(shè)計者充分發(fā)揮所學(xué)知識，意識到自己的專業(yè)能力，也讓人看到了自身的不足。在欣慰于項目的完成之時，也意識到作品仍需完善的方向，如進一步實現(xiàn)相關(guān)交互功能，提升用戶體驗感，界面色彩的搭配也可以再大氣一些。這次的項目設(shè)計也磨煉了設(shè)計者對于設(shè)計軟件Photoshop的運用，如讓自己在今后的工作中更有章法。endprint