陳希贊+王玨+呂瑞境

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

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

引言

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

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

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

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

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

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

（二）游戲界面設(shè)計(jì)的特點(diǎn)

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

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

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

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

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

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

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

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

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

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

1.圖標(biāo)

圖標(biāo)是軟件的功能標(biāo)識(shí)，是設(shè)計(jì)師利用生活中每一樣物品的元素加以提煉精簡(jiǎn)形成的圖形符號(hào)，能在一定程度上傳達(dá)給用戶該軟件的使用功能。

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

2.色彩

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

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

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

3.按鈕

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

4.文字

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

5.背景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)語(yǔ)

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