UI設(shè)計(jì)在手機(jī)游戲界面中的研究與應(yīng)用

李泗蘭 郭雅 陳天鑄

摘要：隨著互聯(lián)網(wǎng)的飛速發(fā)展，高配置、高智能的移動手機(jī)如雨后春筍般的涌現(xiàn)，用戶對人性化意識的產(chǎn)品使用需求日益增強(qiáng)。滿足用戶對智能手機(jī)游戲UI界面的舒適體驗(yàn)是游戲開發(fā)人員重點(diǎn)關(guān)注的內(nèi)容之一。事實(shí)上，當(dāng)前很多游戲開發(fā)人員只注重游戲的商用價(jià)值而忽略了App游戲中界面的整體布局、設(shè)計(jì)要素和界面風(fēng)格。一款優(yōu)秀的手機(jī)游戲其UI界面設(shè)計(jì)占據(jù)著主導(dǎo)的地位，影響著用戶的直觀感受，也決定著這款游戲的成功與失敗。

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

中圖分類號：TP399? ? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2021）15-0199-03

隨著科技進(jìn)步、互聯(lián)網(wǎng)的迅猛發(fā)展，各種高配置、高智能的移動手機(jī)如雨后春筍般的涌現(xiàn)。游戲融入了人們的日常生活娛樂中，各種適用不同人群年齡層次的游戲亦越來越多。

在游戲APP開發(fā)過程中，其UI界面設(shè)計(jì)是整個App程序設(shè)計(jì)中的一個重要環(huán)節(jié)，友好美觀的界面會給人帶來舒適的視覺享受，拉近用戶與終端設(shè)備的距離。

1 掌控界面布局、提升產(chǎn)品交互效率

設(shè)計(jì)師在設(shè)計(jì)游戲UI界面時，主要涉及的元素有文字、圖形或按鈕等，為使各類信息更加條理清晰，富有層次，需要對UI界面進(jìn)行布局掌控。通過界面布局掌控，方便用戶在使用過程中快速找到自己想要的信息，從而提升游戲的交互效率和信息的傳遞效率。下面以首頁、分類頁、搜索頁等頁面為例進(jìn)行UI界面布局詳解。

1.1 豎向排列布局

眾所周知，不同手機(jī)品牌，其屏幕尺寸大小亦不相同，設(shè)計(jì)師在設(shè)計(jì)游戲UI界面時需要考慮游戲界面的布局、色彩、造型等方面。常見的游戲的界面采用豎向排列布局，如圖1，圖2所示。采用這種布局方式，可以直觀的展示功能目錄或產(chǎn)品類別并列元素。理論上列表長度可以向下無線延伸，但是為了保證用戶的良好體驗(yàn)，建議豎屏采用2-3頁顯示，用戶通過上下滑動屏幕查看更多內(nèi)容。

1.2 橫向排列布局

當(dāng)用戶進(jìn)入游戲程序后，由于智能手機(jī)的屏幕分辨率有限，為了方便人機(jī)交互，設(shè)計(jì)師一般會將游戲界面大部分設(shè)計(jì)成橫屏。如圖3所示。采用這種布局方式，一方面能夠展示游戲大一些的場景，用戶快速進(jìn)入娛樂狀態(tài)，暢享游戲帶來的愉悅。另一方面，用戶可以雙手操作手機(jī)，該操作方式更加符合人體工學(xué)，節(jié)奏感較強(qiáng)，操作頻率大。

1.3 熱門標(biāo)簽流式布局

對于游戲中的搜索界面，為方便用戶觀看搜索到的游戲資源，設(shè)計(jì)師通常采用熱門標(biāo)簽流式布局方式。如圖4所示。采用這種布局方式讓界面更加語義化，用戶一目了然看到搜索結(jié)果。

1.4 轉(zhuǎn)盤式布局

轉(zhuǎn)盤式布局又稱為“走馬燈式布局”，主要采用圖片環(huán)繞在界面四周的形式。如圖5所示。這種布局方式便于用戶單手操作，簡單靈活，許多抽獎游戲界面采用。

2 統(tǒng)一設(shè)計(jì)風(fēng)格、悅享舒適“游”趣

游戲UI界面設(shè)計(jì)的風(fēng)格、結(jié)構(gòu)必須要與游戲的主題、內(nèi)容相一致。因此，設(shè)計(jì)師必須具備一定的心理學(xué)、美術(shù)繪畫、平面構(gòu)成、色彩構(gòu)成、版式設(shè)計(jì)、創(chuàng)意設(shè)計(jì)等知識，進(jìn)而完成圖標(biāo)、游戲界面及界面其他元素的設(shè)計(jì)制作。

2.1 圖像的風(fēng)格與設(shè)計(jì)風(fēng)格一致

在游戲UI 界面設(shè)計(jì)中，圖片的設(shè)計(jì)風(fēng)格可以有多種，使用風(fēng)格統(tǒng)一的圖片進(jìn)行設(shè)計(jì)會讓界面看起來更加統(tǒng)一，例如“商品搜索”頁“套裝”中的圖片，其顏色風(fēng)格與本頁面的整體梅紅色設(shè)計(jì)風(fēng)格一致。如圖6所示。

2.2 圖片的色調(diào)與設(shè)計(jì)風(fēng)格一致

在選擇圖片的過程中，要注意圖片色調(diào)與設(shè)計(jì)風(fēng)格的一致。例如“購物車”頁中每個列表項(xiàng)的圖片背景設(shè)為淡紫色，與本頁面的整體紫色設(shè)計(jì)風(fēng)格一致，畫面“檔次感”瞬時提高了許多。如圖7所示。

2.3 icon圖標(biāo)的色調(diào)與設(shè)計(jì)風(fēng)格一致

icon是游戲UI界面中的一種圖標(biāo)格式，具有明確的指代含義功能，是帶給用戶的主要印象，一款好看的icon圖標(biāo)容易吸引用戶的關(guān)注與下載。例如“商品分類”頁中各種商品的按鈕顏色與本頁面的整體淺粉色設(shè)計(jì)風(fēng)格一致。如圖8所示。

2.4 UI界面設(shè)計(jì)在手機(jī)游戲中的綜合應(yīng)用

隨著智能手機(jī)的不斷發(fā)展，手機(jī)游戲憑借其娛樂性、靈活性以及操作簡易性，越來越受人們的青睞。設(shè)計(jì)師在設(shè)計(jì)時需要對游戲UI界面設(shè)計(jì)進(jìn)行整體布局把控，使游戲信息條理清晰、層次分明、降低用戶使用的認(rèn)知負(fù)擔(dān)，提升產(chǎn)品的交互效率和信息傳遞效率。圖9、圖10、圖11、圖12、圖13、圖14、圖15、圖16為UI界面在游戲UI界面中的綜合應(yīng)用案例。

3 結(jié)束語

作為一名優(yōu)秀的UI界面設(shè)計(jì)師，首先要有立體的專業(yè)能力，例如產(chǎn)品分析、用戶研究、交互設(shè)計(jì)、視覺設(shè)計(jì)以及動效設(shè)計(jì);其次，擁有系統(tǒng)的思考能力，即不局限于專業(yè)，發(fā)散思維，積極擁抱科技智能和大數(shù)據(jù)，提升認(rèn)知，具有跨界的融合創(chuàng)新能力;最后，具有終身學(xué)習(xí)的能力，時刻保持對不同知識領(lǐng)域的學(xué)習(xí)好奇心和熱情，擁抱新科技。

參考文獻(xiàn)：

[1] 蔣珍珍.Photoshop移動UI設(shè)計(jì)從入門到精通[M].北京：清華大學(xué)出版社，2017.

[2] 黑馬程序員.跨平臺UI設(shè)計(jì)寶典[M].北京：中國鐵道出版社，2018.

[3] 高君.手機(jī)UI界面中情感化表現(xiàn)的創(chuàng)新性研究與應(yīng)用[D].天津：天津工業(yè)大學(xué)，2016.

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

[5] 蔡希陽.探究UI設(shè)計(jì)的視覺傳達(dá)藝術(shù)——以手機(jī)游戲《蠻荒與未來》設(shè)計(jì)為例[D].哈爾濱：哈爾濱師范大學(xué)，2015.

[6] 陳希赟，王玨，呂瑞境.智能手機(jī)游戲界面設(shè)計(jì)——以“嘉興紅十”UI設(shè)計(jì)為例[J].設(shè)計(jì)，2017（5）：11-13.

【通聯(lián)編輯：朱寶貴】