今天想和大家分享一下游戲UI界面的設(shè)計(jì)心得。

首先，什么是UI，百度百科解釋：UI即User Interface（用戶界面）的簡稱。泛指用戶的操作界面，UI設(shè)計(jì)主要指界面的樣式，美觀程度。而使用上，對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)則是同樣重要的另一個(gè)門道。

總之，大家對UI并不陌生，那么，怎樣才是一個(gè)好的UI界面呢？我剛工作時(shí)認(rèn)為一個(gè)漂亮的界面就是一個(gè)好的界面，凡向美術(shù)提需求必要其加上復(fù)雜絢麗的邊框，雍容華貴的底紋，角落上還要有精致的圖標(biāo)裝飾，想方設(shè)法讓所有好看的東西都能出現(xiàn)在這個(gè)界面里。

這樣做當(dāng)然是不行的。在游戲中，每一個(gè)界面都是具有相應(yīng)功能的，玩法也好養(yǎng)成也罷，界面展示的信息必須是這個(gè)功能想要讓玩家獲得的信息。這句話有些拗口，直白點(diǎn)就是：讓玩家看到你要告訴他的東西。如果加入一些不必要的元素，就勢必會增加玩家的理解成本：復(fù)雜的紋理會喧賓奪主，錯(cuò)落的icon會讓玩家摸不清頭腦，邊邊角角的圖標(biāo)會讓玩家誤以為這里有什么東西可以點(diǎn)擊。這些都不是我們想要的。所以，保證一個(gè)界面的簡潔十分必要，與其花里胡哨，不如突出重點(diǎn)，思考一下，我在這個(gè)界面中想告訴玩家什么信息，想讓玩家進(jìn)行什么操作，將這些內(nèi)容凸顯出來，就已經(jīng)體現(xiàn)了這個(gè)界面應(yīng)有的價(jià)值。

以上是我領(lǐng)悟的第一個(gè)道理。之后我所負(fù)責(zé)的系統(tǒng)的界面不再繁雜不堪。我領(lǐng)悟的第二個(gè)道理是：按鈕就應(yīng)該有個(gè)按鈕的樣子，頁簽就該是頁簽的形狀。千萬不要覺得自己做的東西是一種創(chuàng)新而去挑戰(zhàn)一些已經(jīng)成為習(xí)慣的東西。當(dāng)時(shí)在玩天諭，好像是要做一件事的條件是某個(gè)技能修煉到多少多少級，他的技能界面是這樣的：

我在整個(gè)技能界面里面看了半天，不知道應(yīng)該怎么做。查詢游戲小助手提示是這樣的：

最后請教百度大法，終于發(fā)現(xiàn)，這里竟然是一個(gè)按鈕！點(diǎn)進(jìn)去是滿滿的養(yǎng)成，簡直把我氣得不行。

拜托，按正常的理解，這個(gè)界面叫做技能修煉，上面那么多技能到多少級就是技能修煉到多少級。即使按照小助手的說法，所謂的“下方”不是一個(gè)綠色一個(gè)土黃色按鈕的位置嗎？再者，上方的技能icon飽和度那么高，吸引了所有注意力，“技能修煉”顏色那么樸素，簡直要融到背景里去了。最關(guān)鍵的是，按鈕應(yīng)該有一個(gè)按鈕的樣子好嗎，就算是半圓形的也請描個(gè)邊，更換一下材質(zhì)，加個(gè)強(qiáng)光效果，讓我能感覺出它是能夠點(diǎn)擊的。

這個(gè)過程我重復(fù)了兩次，第二次我流失好久回歸又忘記了，只好再次請教百度?；仡^我就仔細(xì)檢查了一下自己曾經(jīng)做過的界面，發(fā)現(xiàn)的確存在過類似的問題。在設(shè)計(jì)的過程中，有時(shí)會很主觀地想當(dāng)然，甚至還會為此洋洋得意，感覺自己做了了不起的創(chuàng)新，如果不是換個(gè)角度去思考，很容易陷入思維陷阱?，F(xiàn)在我設(shè)計(jì)的每個(gè)界面都會讓同事看一遍，讓他把從界面獲取的信息說一遍，看看和自己的想表達(dá)的是不是一樣。有時(shí)會有意想不到的結(jié)果哈哈。

再深入一些就是一些用戶體驗(yàn)的設(shè)計(jì)了，比如要在某個(gè)特定界面中使用一個(gè)道具，進(jìn)入這個(gè)界面要按4下，而如果在包裹可以直接使用該道具進(jìn)入這個(gè)界面只要按3下，那后者的體驗(yàn)就是好于前者的。如果玩家獲得一個(gè)禮包，需要到包裹中才能打開，那我在他獲得禮包的時(shí)候就在主界面中允許他打開，那么這種體驗(yàn)就是很好的。如果我在購買道具時(shí)只能一下一下按小加號增加購買數(shù)量，那么我增加一個(gè)拖動條或者數(shù)字輸入框，那就是極好的。這個(gè)東西我們稱它為“操作流”。一個(gè)簡潔的操作流對于用戶體驗(yàn)的提升是非常明顯的。我們的游戲改過一次新手引導(dǎo)，減少了近1/3的操作，前期流失有了明顯降低。當(dāng)然了，這個(gè)是建立在大量經(jīng)驗(yàn)和體驗(yàn)上的，隨著體驗(yàn)次數(shù)越來越多，這方面的感受和體會會越來越明顯。

隨著對游戲的理解越來越深，我個(gè)人認(rèn)為，游戲UI界面最重要的一點(diǎn)，就是一個(gè)界面是否易于理解。我曾經(jīng)看到過一個(gè)SLG游戲，煞費(fèi)苦心將出陣布兵界面做成太極的樣子，我看到這個(gè)界面的時(shí)候驚了一下，認(rèn)真看了半分鐘，還是沒看懂，于是單擊右上角的小叉，關(guān)掉了游戲。果然，這個(gè)游戲后來再也沒有聽到過什么消息了，可能是跪了吧。這個(gè)是反面例子，很明顯這個(gè)策劃活在自己的世界中。

總結(jié)一下，如果能讓玩家很容易GET到你的點(diǎn)，那么這個(gè)UI界面就是成功的。如果這個(gè)界面的操作還很簡潔，那么這個(gè)界面就是相當(dāng)成功的。如果這個(gè)界面還很漂亮，那么，這個(gè)界面就是非常成功的。

好了，以上都是方法論的東西，那具體到執(zhí)行時(shí)應(yīng)該如何去實(shí)現(xiàn)？

首先，想好你這個(gè)界面是用來干什么的。

請不要假裝思考了兩秒鐘就說已經(jīng)很明確自己的目的了。舉個(gè)例子，很久很久以前我要做一個(gè)資源回收的系統(tǒng)，界面里面我準(zhǔn)備把被回收資源的3D模型全放進(jìn)去。過了一會我老大跑過來問我怎么想的，我說因?yàn)楸环纸獾亩际且恍┍容^低級的道具，沒有展示的地方，但是我們也都辛辛苦苦建了模的，所以我想在回收系統(tǒng)里展示一下。我老大說哦，感情玩家要是覺得模型好看就不分解了？你有沒有想過加載資源量？你讓用2MB的小水管怎么辦？你有沒有想過模型縮小可能會有鋸齒和噪點(diǎn)？

所以，明確自己的目的，不要為了目的以外的原因影響你的設(shè)計(jì)。除了這個(gè)界面（功能）最原始的目的，你每想再加一個(gè)東西的時(shí)候都要反復(fù)問自己：加了額外的東西有什么好處？會不會引發(fā)某些問題？如果不加會不會有什么壞處？三思而后行。

其次，思考你需要在這個(gè)界面展示的信息。

這個(gè)說來也簡單，無非是，在養(yǎng)成系統(tǒng)中講清楚消耗什么可以增長什么屬性，玩法系統(tǒng)中講清楚游戲規(guī)則。運(yùn)營活動中講清楚資源便宜了時(shí)間有限大家快來買買買。但是把這個(gè)做好也是很難的，因?yàn)槟阋嬖V玩家的信息有很多，總有重點(diǎn)和非重點(diǎn)，重點(diǎn)信息需要放在醒目位置，核心信息要甚至要加強(qiáng)提示。而非重點(diǎn)信息能藏起來就藏起來（可以做成tips之類的形式）。做這步的時(shí)候請牢記你的目的性，舉個(gè)反面教材：仙俠道有一個(gè)星石的養(yǎng)成，插3個(gè)同屬性的石頭會激活一個(gè)技能。講道理，這種帶策略性的養(yǎng)成是非常受歡迎的，效果遠(yuǎn)遠(yuǎn)好于純數(shù)值方面的養(yǎng)成，讓玩家插3塊同屬性的石頭應(yīng)該是這個(gè)養(yǎng)成的核心目的。但是他在做界面設(shè)計(jì)的時(shí)候根本沒有提示我插3塊同屬性石頭會激活一個(gè)技能，只有在激活后放一個(gè)非?？焖俣也幻黠@的特效（下面右邊那張圖），我一看還以為是插滿3個(gè)石頭的特效。

然后，左上角“我的星石”點(diǎn)開后和下方的信息重復(fù)了（見下圖）。寸土寸金的養(yǎng)成界面怎么能犯這種錯(cuò)誤！要是我的話，就把左上角的icon換成技能圖鑒，點(diǎn)開icon查看所有技能效果和激活條件。每次進(jìn)入星石養(yǎng)成界面會有一個(gè)小氣泡指向這個(gè)icon，提示裝3塊同屬性的石頭會激活一個(gè)新技能，過幾秒后氣泡自動消失。每次激活了技能時(shí)，會有特效將3塊石頭連起來連起來亮一下，然后化作星星點(diǎn)點(diǎn)光粒飄向左上方的技能圖鑒icon，然后砰砰砰彈幾個(gè)字“星石之力：欲火焚身1級<font color="green">已經(jīng)激活</font>”

再接下來就是美觀方面的東西，這個(gè)就仁者見仁智者見智了，我提一點(diǎn)，是關(guān)于UI的明顯程度。（就是指UI是否明顯的程度）

一般來說，UI是越醒目越好的。怎么判斷是否醒目，你可以把一張圖去色，看看UI能不能一眼就看出來。喏，看看少年三國志或者龍珠，去色后UI圖標(biāo)都十分明顯。

做個(gè)對比，我到QQ空間上從700多頁的頁游中隨便找了幾個(gè)跪了的，就發(fā)現(xiàn)有一個(gè)犯了這樣的錯(cuò)誤。大家注意看我圈出來的那一塊，有個(gè)新手指引的箭頭大家看到了嗎？此外，它的圖標(biāo)用色和背景十分相近，導(dǎo)致整體界面看起來都不是很協(xié)調(diào)。

再找個(gè)比較成功的頁游，隨便點(diǎn)個(gè)小廣告，找一個(gè)開了幾百服的游戲，主界面各個(gè)icon清晰可見，這點(diǎn)就做得比較好了，各icon似乎還都做了描邊處理，此外每個(gè)icon底下有統(tǒng)一的襯底，保證了icon整體的協(xié)調(diào)，一些需要特殊提示的內(nèi)容還加了特效。

這個(gè)辦法是一個(gè)畫UI的大神告訴我的，有時(shí)候覺得需要重點(diǎn)突出的信息無法第一眼看到，嘗試一下去色可能會有幫助。這個(gè)方法沒有經(jīng)過科學(xué)驗(yàn)證，反正我試下來感覺挺好用的。

再接下來就是便捷性的問題。有個(gè)叫3次點(diǎn)擊原則，大概的意思就是不要讓玩家點(diǎn)擊三次以上才能進(jìn)入一個(gè)界面。這個(gè)表達(dá)的思想是好的，但是并不是所有的情況下都要按照這個(gè)要求，不然整個(gè)界面上都得是圖標(biāo)了。舉個(gè)例子，比如某些附屬的養(yǎng)成點(diǎn)就可以適當(dāng)藏得深一些，哪怕玩家多點(diǎn)幾次也沒關(guān)系。而要是一個(gè)SLG游戲，布陣的入口一定要放在一個(gè)很方便的位置，否則要先點(diǎn)三下才能布陣，玩家分分鐘流失。

便捷性原則中還有一點(diǎn)，從一個(gè)功能中可以快速進(jìn)入到另一個(gè)功能。比如強(qiáng)化到一半強(qiáng)化石不夠，可以直接跳轉(zhuǎn)到獲取強(qiáng)化石的玩法中。引導(dǎo)玩家做需要的事情。早期的游戲這方面都很缺失，現(xiàn)在大多游戲有有注意這個(gè)細(xì)節(jié)，前兩天聽魂世界劉哲的分享里他還特意提到了這點(diǎn)。

好了，大概想到的就是那么多了。最實(shí)際的還是多做，多想，想好了再去做。話說回來，決定一個(gè)游戲最重要的還是核心玩法和美術(shù)風(fēng)格，界面什么的實(shí)在沒有辦法起到逆天改命的作用。但是，就是這些細(xì)節(jié)堆砌出一個(gè)高品質(zhì)的游戲。作為一個(gè)游戲策劃，通過不斷優(yōu)化自己的游戲，本來玩家要思考一下才能理解，現(xiàn)在玩家看一眼就能懂這個(gè)玩法是怎么玩的，不是很有成就感嗎。讓玩家更輕松地體驗(yàn)到游戲的樂趣，這才是一個(gè)游戲設(shè)計(jì)者的樂趣。

好了，關(guān)于界面設(shè)計(jì)我能想到的就是這些，覺得我說的有道理的可以記下來，覺得我在瞎扯的也不要太較真，覺得有不同想法的歡迎交流。以后可能還會寫一些其他方面的總結(jié)，希望到時(shí)繼續(xù)交流。