UI設計在手機游戲界面中的研究與應用

李泗蘭 郭雅 陳天鑄

摘要：隨著互聯網的飛速發展，高配置、高智能的移動手機如雨后春筍般的涌現，用戶對人性化意識的產品使用需求日益增強。滿足用戶對智能手機游戲UI界面的舒適體驗是游戲開發人員重點關注的內容之一。事實上，當前很多游戲開發人員只注重游戲的商用價值而忽略了App游戲中界面的整體布局、設計要素和界面風格。一款優秀的手機游戲其UI界面設計占據著主導的地位，影響著用戶的直觀感受，也決定著這款游戲的成功與失敗。

關鍵詞： UI界面設計;手機游戲

中圖分類號：TP399? ? ? ? 文獻標識碼：A

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

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

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

1 掌控界面布局、提升產品交互效率

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

1.1 豎向排列布局

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

1.2 橫向排列布局

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

1.3 熱門標簽流式布局

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

1.4 轉盤式布局

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

2 統一設計風格、悅享舒適“游”趣

游戲UI界面設計的風格、結構必須要與游戲的主題、內容相一致。因此，設計師必須具備一定的心理學、美術繪畫、平面構成、色彩構成、版式設計、創意設計等知識，進而完成圖標、游戲界面及界面其他元素的設計制作。

2.1 圖像的風格與設計風格一致

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

2.2 圖片的色調與設計風格一致

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

2.3 icon圖標的色調與設計風格一致

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

2.4 UI界面設計在手機游戲中的綜合應用

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

3 結束語

作為一名優秀的UI界面設計師，首先要有立體的專業能力，例如產品分析、用戶研究、交互設計、視覺設計以及動效設計;其次，擁有系統的思考能力，即不局限于專業，發散思維，積極擁抱科技智能和大數據，提升認知，具有跨界的融合創新能力;最后，具有終身學習的能力，時刻保持對不同知識領域的學習好奇心和熱情，擁抱新科技。

參考文獻：

[1] 蔣珍珍.Photoshop移動UI設計從入門到精通[M].北京：清華大學出版社，2017.

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

[3] 高君.手機UI界面中情感化表現的創新性研究與應用[D].天津：天津工業大學，2016.

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

[5] 蔡希陽.探究UI設計的視覺傳達藝術——以手機游戲《蠻荒與未來》設計為例[D].哈爾濱：哈爾濱師范大學，2015.

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

【通聯編輯：朱寶貴】