雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁 案例 服務(wù) 關(guān)于 face+

手游UI設(shè)計五大基本原則,讓手游UI界面更和諧統(tǒng)一

Time: 2020-01-14


手游已經(jīng)成為了目前游戲行業(yè)的主要市場之一,因為手游隨時隨地都可以玩,玩家群體也非常的龐大,因此手游的ui設(shè)計需求也非常大,下面我們跟隨小編一起來了解一下手游UI設(shè)計的相關(guān)資料吧。


手游UI設(shè)計原則

原則一、視覺流的引導(dǎo)

  視覺流,就是我們在查看單個界面時的視覺流程。暫且先不考慮手勢的熱區(qū)范圍,單從眼動軌跡來看,眼睛對于物體的關(guān)注本身是有一定的視覺規(guī)律的,比如最簡單的從上到下從左到右的規(guī)律。一般而言,我們在設(shè)計頁面的時候會盡量考慮人眼的視覺規(guī)律,比如最重要的功能不要放在視覺盲區(qū)范圍內(nèi)。但是在這里筆者要強(qiáng)調(diào)的是,眼睛的視覺流是可以通過對界面控件合理的層級羅列,恰當(dāng)?shù)牟季謥磉M(jìn)行有效引導(dǎo)的。


1.jpg

(圖片來自網(wǎng)絡(luò))


  原則二、相似相近原則

  相似相近,就是“風(fēng)格統(tǒng)一,同類相近”。

  風(fēng)格統(tǒng)一,要保證同一類圖標(biāo)外形上的一致,即使按鈕因為字體長短而變得長短不一,但是至少從外形看起來是同一類的。如果按鈕從外形上看不出來是同一類,在每一個圖標(biāo)的文字下方增加同樣的灰色漸變半透底圖,這種由部分到整體的做法很好的保證了這些功能圖標(biāo)的一致性。如果你的游戲走的是3D真實風(fēng)格,那么游戲里就一定不能出現(xiàn)一個二次元妹子,可以考慮增加異次元元素,但是一定要經(jīng)過美術(shù)的專業(yè)處理,讓整個游戲的畫風(fēng)不至于那么奇怪。

  同類相近,同一類型控件的位置要離的近一些,即使沒有圖案的框選,也能知道它們屬于同一類按鈕。同類功能的按鈕都擺在一起,不同類型的按鈕之間也沒有出現(xiàn)相互干擾。最忌諱沒有規(guī)律的亂擺控件,會造成玩家找不到可點擊控件的困惑,還會對功能產(chǎn)生迷茫,不知道該干什么。


4.png

(圖片來自網(wǎng)絡(luò))


  原則三、色彩偏向和色彩層次

  色彩偏向,在ui界面設(shè)計中,都應(yīng)該有一個色彩的偏向,也就是主色調(diào)。在任何一個畫面中,色彩都不宜過多,不同色系最好不要超過3種。這就好像穿衣服一樣,除非是高級設(shè)計師,擁有很好的配色駕馭能力,很少犯錯那種,一般人拍在身上的顏色越多越花哨,整個檔次就越low。分享一個小技巧:在游戲界面中,可以使用黃金分割率來做出劃分,主色調(diào)約占60%,輔助色占30%,突出色占10%。

  色彩層次,在UI制作中,因為精確度要求很高,色彩的亮度和面積有個反比應(yīng)用關(guān)系,這很重要,因為它直接決定了UI原色的主次關(guān)系問題。越亮的、純度越高的顏色在使用面積上慎之又慎,否則就會造成喧賓奪主以及對玩家視覺上的折磨,為了達(dá)到視覺上的等同效應(yīng),亮度、冷暖不同的顏色也要在面積上進(jìn)行微調(diào)。背景色經(jīng)常表現(xiàn)為無彩色(黑、白、灰),或者低飽和度的色彩??偟膩碚f,面積越小的顏色要越亮越純,面積越大顏色就要增加灰度或者降低亮度,色彩的層次出來了整個界面的信息傳遞就會很舒服。


3.png

(圖片來自網(wǎng)絡(luò))


  原則四、字體節(jié)奏

  很多人會覺得游戲中畫面最重要,字體是信息傳遞的輔助角色,這就錯了,內(nèi)容的可讀性永遠(yuǎn)是排在首位的。我們在看圖標(biāo)的時候會發(fā)現(xiàn)很多圖標(biāo)的可辨識度并不是很高,但是一旦添加了字體,馬上就可以理解功能。好的字體設(shè)計,形狀和大小都會直接影響到玩家接收信息的速度。為什么說是字體節(jié)奏?同一個頁面中,使用同一字號,同一類型的字體,會讓信息的傳達(dá)變得冗雜而費力。但是如果給字體在信息重要度的基礎(chǔ)上增加點變化,馬上節(jié)奏感就出來了,信息的層級也一目了然。所以根據(jù)不同的功能場景,使用不同的字體樣式也是極為重要的。字體設(shè)計小編給一個小小的技巧:比如可以都是4的倍數(shù),你的界面里面會出現(xiàn)12px,16px,20px,24px幾種字號的字體。


2.jpg

(圖片來自網(wǎng)絡(luò))


  原則五、目標(biāo)導(dǎo)向原則

  目標(biāo)導(dǎo)向,在游戲中,每一個界面都是具有相應(yīng)目標(biāo)功能的,玩法也好養(yǎng)成也罷,界面展示的信息必須是這個功能需要讓玩家獲的信息。要明確自己的目的,盡量不要為了目的以外的原因影響你的設(shè)計。除了這個界面功能最原始的目的,你每想要加一個東西的時候都要反復(fù)的問自己:加了額外的東西有什么好處?會不會引發(fā)某些問題?如果不加會有什么壞處?多個維度好好想想,優(yōu)秀的設(shè)計都經(jīng)得起反復(fù)推敲。比如,充值界面的左側(cè)為什么一定要加個白無常?玩家會在充值的時候抽個空來欣賞你的立繪嗎?另外同一張立繪在多個界面中反復(fù)使用,你是有多缺乏設(shè)計想法,一定要在每個頁面中都加一張立繪來體現(xiàn)你有進(jìn)行過設(shè)計。這樣做的后果是:不僅降低了立繪本身的價值,也減慢了游戲資源的加載速度,并且讓界面變得復(fù)雜不易識別,造成玩家的審美疲勞。

  功能可視化,寸土寸金的界面里面,為什么要有幾個完全相同的東西存在,既占地方又影響玩家理解。如果表示不同的功能,那么就應(yīng)該在圖標(biāo)上也作出區(qū)分。

最后的調(diào)優(yōu)方案是:增加指向箭頭,對原料進(jìn)行框選,對目標(biāo)物品的顯示進(jìn)行排版上的調(diào)整??偨Y(jié)反思:策劃制作好了游戲邏輯,不能把邏輯直接擺到玩家面前,這里面需要有一個功能可視化的過程。玩家并不關(guān)心你的生產(chǎn)過程是什么,他也并不能理解界面里面同一個圖案的3個圖標(biāo),為什么一個是配方,一個是圖樣,另一個是物品。你只需要告訴玩家我點擊目標(biāo)物品,湊夠了原料和金錢,點制作能不能得到就可以了。

  單一頁面精簡功能,同一個頁面上可實現(xiàn)的功能最好不要超過三個,功能太多,玩家到了這個頁面潛意識會特別煩躁。


小編相信只要掌握了手游UI設(shè)計的以上這五大原則之后,一定可以幫助你更好的找準(zhǔn)手游的ui設(shè)計的定位,讓你的設(shè)計更出彩哦!


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號22號樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號
028-62790929
service@faceui.com

辦公地址地圖
首頁 | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

上海辦公地點地圖
北京辦公地點地圖
深圳辦公地點地圖
在微信中搜索faceui
或保存二維碼在微信中打開