轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(   m.sillybuy.com  )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源：http://www.app111.com/doc/100059765_1.htmlll

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，   請點(diǎn)這里

UI是什么？很多人心中他只是界面而已，這正是UI往往被忽略甚至分配給新人做的重要因素。事實(shí)也是，目前看到很多設(shè)計UI的人，都聽漫不經(jīng)心的，或者說 不太負(fù)責(zé)任把，認(rèn)為UI就是沒有技術(shù)含量的設(shè)計，但我并不這么認(rèn)為，相反的是，User Interface，作為一個游戲和玩家交互的直接接口，它的設(shè)計決定了游戲品質(zhì)的至少40%。

　　怎樣設(shè)計好一款iOS游戲UI的細(xì)節(jié)

　　UI是一種用戶體驗的總和，除了視覺上的界面，還有聽覺上的音效、直覺上的Feeling以及真正的用戶體驗。在我們設(shè)計UI之前，我們必須先確定一些UI Patterns，因為有了這些Patterns，我們才能夠在一個合理的約束范圍內(nèi)發(fā)揮，是的，當(dāng)你做一款游戲的時候，尤其是ios游戲的時候，你必須面對一些限制：

　　1，無論是什么類型的游戲，你不該有超過3個類型的Button。

　　事實(shí)上這并不是說你的按鈕只能有yes, no, cancel，而是說在你的游戲中，同樣起到y(tǒng)es功能的按鈕，最多最多不應(yīng)該有超過3中的表現(xiàn)。一些策劃在設(shè)計界面的時候通常會借鑒很多其他游戲的界面 設(shè)計，找?guī)讉€同類型的游戲，然后找到他們認(rèn)為在某個界面上A游戲表現(xiàn)得很棒，全盤抄來，此時發(fā)現(xiàn)另外一個界面B表現(xiàn)的很棒……這個游戲的界面靈感可以來自 盡可能多的游戲，但是請你在借鑒的時候不要連別人的美術(shù)風(fēng)格一起借鑒了。當(dāng)你發(fā)現(xiàn)自己的設(shè)計案中，交易界面的“確認(rèn)”是個藍(lán)色的方塊、丟棄道具的界面中 “是”是一個綠色的圓圈、而充值界面中“好”是一個金色的元寶，此時請你立即停下，因為再下去就Anti-Patterns了，事實(shí)上現(xiàn)在，你已經(jīng)在邊緣 了。同樣一個游戲，每一個界面中擔(dān)任類似功能的按鈕居然長的都不一樣，這樣的感覺是非常糟糕的，對于一個用戶來說，自然的反應(yīng)就是這些界面并不屬于一個游 戲，smells bad。

　　并不是說在你統(tǒng)一了美術(shù)風(fēng)格之后就意味著你的界面感覺很棒，拋開主觀的判斷，你還缺少一層設(shè)計，那是頁游中很少有的，但是作為一款能達(dá)到中等品質(zhì)或者 更高的游戲，你必須有界面出現(xiàn)的方式，而當(dāng)同一個控件的出現(xiàn)方式都不一樣的時候，這樣的設(shè)計也是Anti-Patterns的，還是拿button來 說，A界面的按鈕全都是FadeIn\FadeOut進(jìn)出的，B界面全都是SlideIn\SlideOut的，到了C界面，界面出現(xiàn)的時候按鈕就全都在 那里了，這也是一種漫不經(jīng)心的設(shè)計，同樣會讓人產(chǎn)生整體游戲界面缺乏統(tǒng)籌性、各個界面風(fēng)格迥異的感覺。

　　2，字體可以用美術(shù)，但是用不了美術(shù)的字體種類必須少，尤其是中文。

　　字體是界面不可分割的一部分，除非你的設(shè)計優(yōu)秀到用圖案就能說清一切了，但是殘酷的現(xiàn)實(shí)是，我們所做的游戲達(dá)不到這樣的水平，有這樣水平的人都被高薪悶死在騰訊了。那么我們不得不用一些文字、數(shù)字來表現(xiàn)出想要表達(dá)的東西。但是這里，初級策劃往往會犯一些典型的錯誤：

　　1）同一個界面上有不下6種的數(shù)字，感覺非常糟糕，這就像上面說的一個游戲有超過3種同類控件一樣，很不舒服，尤其是當(dāng)他們出現(xiàn)在同一個界面的時候。

　　2）需要程序?qū)懽值牡胤蕉嗲襾y，一會這里角色名字是幾號XX字體，一會那里是技能名字幾號XX字體，海量出現(xiàn)需要程序運(yùn)算或者讀表獲得的文字（數(shù)字）信息，并且在不同地方表現(xiàn)不一。

　　且不說這違背了之前說的界面風(fēng)格問題，更重要的是，你必須面對一個現(xiàn)實(shí)，一個ios游戲，尤其是你需要使用漢字的時候，每增加一種字體，就會給游戲帶 來致命的威脅，當(dāng)你的游戲有超過6種漢字字體的時候，事實(shí)上你的游戲已經(jīng)在崩潰邊緣了。因此，作為一個優(yōu)秀的界面設(shè)計師，在開始設(shè)計前，你必須約束好自己 要使用的字體和準(zhǔn)備如何使用，能用美術(shù)畫的字（固定的，如某個按鈕上的文字“副本”“好友”之類的），盡量用美術(shù)的，但是仍然請注意風(fēng)格的統(tǒng)一性。

　　3，設(shè)計UI的技巧在于使得系統(tǒng)和玩法表現(xiàn)得更棒而不是為了去限制和約束系統(tǒng)的設(shè)計。

　　我們之所以去設(shè)計一個UI，是為了更好的表現(xiàn)出我們的玩法，這里我已經(jīng)不用界面而是用UI了，因為這里要說的設(shè)計，不僅僅是界面，還包括了一些操作的 交互。很多時候我們做一些細(xì)節(jié)設(shè)計的時候，會發(fā)現(xiàn)要表現(xiàn)好非常困難，因此惰性促使我們退而求其次——去修改游戲的設(shè)計。到這里，我必須喊停——Anti- Patterns。

　　UI設(shè)計可以是一個游戲系統(tǒng)設(shè)計的驗證，可以推翻一些愚蠢的設(shè)計或者對于一些設(shè)計的邏輯漏洞提出質(zhì)疑，比如我們在設(shè)計一個游戲戰(zhàn)報界面的時候，假如這 是一個《我是MT》Like游戲，結(jié)束的時候我們要顯示給玩家看這個副本掉落了多少卡牌（也就是本次冒險我的收獲嘛），但是設(shè)計的時候我們可能會發(fā)現(xiàn)系統(tǒng) 設(shè)計的時候想了很多，卻漏了一個問題，一次副本究竟能掉落多少卡牌？是的，這正是UI檢驗了游戲設(shè)計的漏洞，很可能這個仿MT卡牌游戲一次副本不僅僅打3 場，可能要打8場、52場、199場甚至……無限循環(huán)？好吧，無論怎樣我們先且不說好玩不好玩，那么這么多場，每場我們很可能會收獲6張卡牌，那么假設(shè)要 10場，就會最多收集到60張卡牌，此時你的設(shè)計真的合理嗎？

　　當(dāng)然這個掉落60張卡牌，沒有上下文設(shè)計內(nèi)容的時候我真不好說，那么既然設(shè)計的時候已經(jīng)思考過上限是60，而不是可能會掉落20張也可能12840張 還可能993204張，那么它至少Feeling還是有那么點(diǎn)靠譜的，此時界面設(shè)計往往會產(chǎn)生一個Anti-Patterns的行為——因為60張卡牌太 多可能導(dǎo)致顯示不下，或者為此我設(shè)計的界面操作很不好（有滾動條，至少我個人認(rèn)為Ios游戲有滾動條Smells Bad），因此這個系統(tǒng)的設(shè)計是愚蠢的，事實(shí)上這正是惰性導(dǎo)致我想到了如此愚蠢的一個想法。因為我覺得界面難做，我就要把原先大家已經(jīng)認(rèn)為OK的系統(tǒng)推翻 重來，這是項目制作中最容易犯的也是最大的錯誤之一，因此我們要做的應(yīng)該是集思廣益的去思考，比如說我們干脆就不顯示詳細(xì)獲得了什么卡牌等等，各種方案的 思考，而不是想著去推翻某個甚至程序上已經(jīng)完工的系統(tǒng)。

　　而當(dāng)談到60張卡牌掉落的時候，還可能引發(fā)出另外一個Anti-Patterns，并且會導(dǎo)致無限爭議的就是——有人會告訴你“一般來說，這樣的概率 不會發(fā)生掉落了60張卡牌的事情”，Cut！作為一個設(shè)計師，我們只考慮會還是不會，會就要有對策，不會就不要，而不是因為大多情況如何如何就能忽略。在 我看來“一般來說”是世界上最不負(fù)責(zé)的一句話，一般來說這幢大樓一層樓不可能同時有100個人，因為他每層樓可使用面積僅僅100平方米，可事實(shí)是小小一 個3平方米不足的電梯，上下班高峰都能擠上10人，那么是不是當(dāng)100人出現(xiàn)在這層樓的時候，他就活該倒塌了？

　　為了回避一些界面設(shè)計的難點(diǎn)或者煩點(diǎn)，而去改變一個系統(tǒng)的設(shè)計，只可能產(chǎn)生更大的難點(diǎn)和煩點(diǎn)，so, Anti-Patterns！

　　4，兩個界面間的切換必須得有但必須不能過于復(fù)雜或輕浮。

　　一個現(xiàn)象就是，做慣了頁游的策劃，他甚至都能不知道界面和界面之間切換還需要一個動畫過程，但事實(shí)上一款品質(zhì)中等以上的游戲，再切換界面的時候都應(yīng)該 有些細(xì)節(jié)動畫表現(xiàn)。而當(dāng)我們專注于設(shè)計這些表現(xiàn)的時候，往往會忽略一個Patterns——界面的切換事實(shí)上是一個無聊的過程，如果它太久了，會導(dǎo)致游戲 枯燥乏味。

　　一個簡單的FadeIn\FadeOut效果，配合上相對不錯的美術(shù)設(shè)計，其實(shí)完全可以起到讓人很不錯的感覺，但是千萬不要想玩花哨，尤其是當(dāng)你自己 寫代碼，或者你的程序員寫代碼靈感突發(fā)也許是急于表現(xiàn)的時候，一定要及時攔住，一些界面的切換可能過于“花哨”但事實(shí)上缺乏技術(shù)含量又讓人感覺十分輕浮， 甚至導(dǎo)致游戲的整體Feeling走偏，譬如一個武俠類游戲，偏偏要采用從4個角聚攏成一個五角星形狀關(guān)閉界面，然后由五角星展開下一個界面（類似很老的 《名將》），Anti-Patterns，用戶不僅不會察覺你寫五角星的技術(shù)，更不會理解為什么武俠卻要跟五角星掛上鉤。所以這樣畫蛇添足的設(shè)計必須被提 前制止。

　　5，用戶體驗是主觀的，但是對于UI來說，長期積累的用戶習(xí)慣是客觀的。

　　分析一些主觀的事情是疲勞的，因為公說公有理、婆說婆有理、誰說都有理、官大就是理，這樣的討論非但得不到很好的結(jié)果，而且還會傷了團(tuán)隊的和氣，而事 實(shí)上本身討論的出發(fā)點(diǎn)也是偏的。為什么說UI是用戶體驗?zāi)兀窟@說的更多的是一些操作感，在ios游戲中，你如何去定義一個行為是一個典型的例子。

　　策劃設(shè)計了，這個界面上點(diǎn)擊A地方如何如何，長按B地方如何如何，還能把C拖曳到D身上。說的輕巧，可是請問，您的設(shè)計中，點(diǎn)擊、長按、拖曳是如何定 義的？作為策劃，不懂程序不是理由，這好比一個廚師說我不會切菜，你可以刀工布好，但你至少要知道實(shí)現(xiàn)原理。因此，請你給出一個算法，在程序中，我們所能 截獲的是按下、拖動、抬起三個觸發(fā)點(diǎn)，怎樣的Coding可以實(shí)現(xiàn)您的想法呢？事實(shí)上你會發(fā)現(xiàn)，你很難區(qū)分所謂的長按和拖曳。（當(dāng)然那些專攻舌戰(zhàn)、巧舌如 簧的策劃總能想到說法的）。

　　事實(shí)上這個問題，這就是用戶習(xí)慣問題，用戶是如何定義長按的？用戶習(xí)慣是一個比較討厭的東西，你不得不先分析出你的目標(biāo)用戶群——我的用戶群主要是 Windows用戶群，所以O(shè)K在左Cancel在右；我的用戶群主要是Mac用戶群，所以O(shè)K在右Cancel在左。這東西沒有誰規(guī)定對錯，但是長久以 來形成了習(xí)慣，你不得不順著習(xí)慣去設(shè)計。什么是長按？“在我沒有觸發(fā)抬起的時候已經(jīng)經(jīng)過了一段時間，并且拖曳的點(diǎn)未曾超過按下點(diǎn)一個規(guī)范距離”，這個就可 以理解是一種長按，但不是策劃案，而是一個說法，因為沒有精細(xì)到，多少毫秒以后算發(fā)動了長按。

　　以上5點(diǎn)應(yīng)該被我們作為設(shè)計界面的基本Patterns，但是Patterns只能是一種約束，卻解決不了很多問題，事實(shí)上開發(fā)一款手機(jī)游戲，對于一 個程序員來說最苦的事情往往就是UI的開發(fā)，尤其是對于使用cocos2d(x)的程序員來說更是如此，那么怎樣的合作會更好的提高程序開發(fā)效率呢？

　　1，Axure可以用來設(shè)計界面，但不是用來產(chǎn)生策劃案的

　　Axure是一款不錯的軟件，他幫助你寫了Javascript，而很多策劃就認(rèn)為神奇的Axure就是設(shè)計游戲界面的神器。沒錯，Axure可以用 于設(shè)計，但也只能用于設(shè)計，最多用于檢驗，而我們的目的是項目做出來，并非追究責(zé)任。Axure設(shè)計了一整套界面，卻沒有辦法列出一個表，告訴程序員和美 術(shù)有多少要做、或者是哪個界面連接哪個界面，除非程序員和美術(shù)非常了解這個設(shè)計，或者反過來說這個界面設(shè)計的太好了以至于誰都一眼能看明白如何操作，但事 實(shí)上你我都沒有這個實(shí)力。因此還是老老實(shí)實(shí)的列出界面流程，列清楚要那些界面，但是它們的動畫表現(xiàn)可以參考Axure沒錯。

　　2，“字太多誰高興看啊”

　　是的，在界面設(shè)計的時候，更多的應(yīng)該是圖，而少量的時一些文字注釋，如果說你的設(shè)計案里連這部分都是文字多于圖片，那就要好好鍛煉下表達(dá)能力了。

　　3，請不要忽略對于操作的定義和設(shè)計

　　對于操作的定義和設(shè)計，往往是最容易被人忽略的，正如我上面所說的，我需要點(diǎn)擊之后如何如何、長按之后如何如何，想法很棒，但是何謂點(diǎn)擊？何謂長按？ 每個人的定義不同，因此請給出標(biāo)準(zhǔn)，如果你不愿意給出標(biāo)準(zhǔn)，那么在程序員完成設(shè)計（確切的說是替你擦屁 股）之后，請不要JJWW說這不好那不爽的。

　　4，Scale9很棒，但不要為了Scale9而Scale9

　　Scale9（九宮圖）用來拼界面是一個很棒的主意，他解決了當(dāng)年49K的S40限制，也是很傳統(tǒng)很優(yōu)秀的優(yōu)化算法，可是現(xiàn)在的ios游戲已經(jīng)不是那 個年代的手機(jī)游戲了，當(dāng)你一個界面復(fù)用率不高、也并不是大到離譜（超過2048×2048？這的確離譜了，這界面你給誰看？）的時候，請不要選擇 Scale9的做法，你說給美術(shù)聽辛苦，美術(shù)拆辛苦、程序?qū)ψ鴺?biāo)辛苦（雖然cocos2dx通過工具實(shí)現(xiàn)了簡化，但是工具卻不支持動畫效果，如這個界面從 外面飛進(jìn)來之類的，這得程序員去coding，而該死的CCAction機(jī)制，骨子里面又缺乏一種“司令部”的概念，這導(dǎo)致開發(fā)連續(xù)動畫有鴻溝）。

　　5，小時的高達(dá)模型，你還記得嗎？

　　如果你想問——什么樣的UI設(shè)計案會很好，我想告訴你的是高達(dá)模型的說明書，上百塊的素材放在10來塊速料上面，誰知道那塊是干什么的？因此我們需要 定義好一個編號給每塊材料，并且在說明書上標(biāo)注這個編號的材料用哪兒，怎么個用法，甚至用起來要注意什么。而且更關(guān)鍵的是，高達(dá)的說明書很圖形化！

　　以上是我對于UI設(shè)計的一些淺見，作為同樣自負(fù)的設(shè)計師，我也曾忽略了UI設(shè)計的重要性，直到在這個論壇看到了一個叫“橙子醬”（好像是這名字）的發(fā) 的幾個貼，問的是手機(jī)游戲中是否該顯示時間、手機(jī)游戲橫著好還是豎著好，我感到十分慚愧，因為一個老牌設(shè)計師卻會忽略了這樣的細(xì)節(jié)，這也是先天的不足—— 缺乏細(xì)心。的確UI設(shè)計是一門技術(shù)活，也許生活中不少的積累，為了那兩個問題，我還特地擠了幾次公交車、地鐵上班偷 窺大多人使用手機(jī)的習(xí)慣。