李泗蘭 郭雅 陳天鑄
摘要:隨著互聯(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)編輯:朱寶貴】