2014-6-11 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
UI是什么？很多人心中他只是界面而已，這正是UI往往被忽略甚至分配給新人做的重要因素。事實(shí)也是，目前看到很多設(shè)計(jì)UI的人，都聽漫不經(jīng)心的，或者說 不太負(fù)責(zé)任把，認(rèn)為UI就是沒有技術(shù)含量的設(shè)計(jì)，但我并不這么認(rèn)為，相反的是，User Interface，作為一個(gè)游戲和玩家交互的直接接口，它的設(shè)計(jì)決定了游戲品質(zhì)的至少40%。
怎樣設(shè)計(jì)好一款iOS游戲UI的細(xì)節(jié)
UI是一種用戶體驗(yàn)的總和，除了視覺上的界面，還有聽覺上的音效、直覺上的Feeling以及真正的用戶體驗(yàn)。在我們?cè)O(shè)計(jì)UI之前，我們必須先確定一些UI Patterns，因?yàn)橛辛诉@些Patterns，我們才能夠在一個(gè)合理的約束范圍內(nèi)發(fā)揮，是的，當(dāng)你做一款游戲的時(shí)候，尤其是ios游戲的時(shí)候，你必須面對(duì)一些限制：
1，無論是什么類型的游戲，你不該有超過3個(gè)類型的Button。
事實(shí)上這并不是說你的按鈕只能有yes, no, cancel，而是說在你的游戲中，同樣起到y(tǒng)es功能的按鈕，最多最多不應(yīng)該有超過3中的表現(xiàn)。一些策劃在設(shè)計(jì)界面的時(shí)候通常會(huì)借鑒很多其他游戲的界面 設(shè)計(jì)，找?guī)讉€(gè)同類型的游戲，然后找到他們認(rèn)為在某個(gè)界面上A游戲表現(xiàn)得很棒，全盤抄來，此時(shí)發(fā)現(xiàn)另外一個(gè)界面B表現(xiàn)的很棒……這個(gè)游戲的界面靈感可以來自 盡可能多的游戲，但是請(qǐng)你在借鑒的時(shí)候不要連別人的美術(shù)風(fēng)格一起借鑒了。當(dāng)你發(fā)現(xiàn)自己的設(shè)計(jì)案中，交易界面的“確認(rèn)”是個(gè)藍(lán)色的方塊、丟棄道具的界面中 “是”是一個(gè)綠色的圓圈、而充值界面中“好”是一個(gè)金色的元寶，此時(shí)請(qǐng)你立即停下，因?yàn)樵傧氯ゾ虯nti-Patterns了，事實(shí)上現(xiàn)在，你已經(jīng)在邊緣 了。同樣一個(gè)游戲，每一個(gè)界面中擔(dān)任類似功能的按鈕居然長的都不一樣，這樣的感覺是非常糟糕的，對(duì)于一個(gè)用戶來說，自然的反應(yīng)就是這些界面并不屬于一個(gè)游 戲，smells bad。
并不是說在你統(tǒng)一了美術(shù)風(fēng)格之后就意味著你的界面感覺很棒，拋開主觀的判斷，你還缺少一層設(shè)計(jì)，那是頁游中很少有的，但是作為一款能達(dá)到中等品質(zhì)或者 更高的游戲，你必須有界面出現(xiàn)的方式，而當(dāng)同一個(gè)控件的出現(xiàn)方式都不一樣的時(shí)候，這樣的設(shè)計(jì)也是Anti-Patterns的，還是拿button來 說，A界面的按鈕全都是FadeIn\FadeOut進(jìn)出的，B界面全都是SlideIn\SlideOut的，到了C界面，界面出現(xiàn)的時(shí)候按鈕就全都在 那里了，這也是一種漫不經(jīng)心的設(shè)計(jì)，同樣會(huì)讓人產(chǎn)生整體游戲界面缺乏統(tǒng)籌性、各個(gè)界面風(fēng)格迥異的感覺。
2，字體可以用美術(shù)，但是用不了美術(shù)的字體種類必須少，尤其是中文。
字體是界面不可分割的一部分，除非你的設(shè)計(jì)優(yōu)秀到用圖案就能說清一切了，但是殘酷的現(xiàn)實(shí)是，我們所做的游戲達(dá)不到這樣的水平，有這樣水平的人都被高薪悶死在騰訊了。那么我們不得不用一些文字、數(shù)字來表現(xiàn)出想要表達(dá)的東西。但是這里，初級(jí)策劃往往會(huì)犯一些典型的錯(cuò)誤：
1）同一個(gè)界面上有不下6種的數(shù)字，感覺非常糟糕，這就像上面說的一個(gè)游戲有超過3種同類控件一樣，很不舒服，尤其是當(dāng)他們出現(xiàn)在同一個(gè)界面的時(shí)候。
2）需要程序?qū)懽值牡胤蕉嗲襾y，一會(huì)這里角色名字是幾號(hào)XX字體，一會(huì)那里是技能名字幾號(hào)XX字體，海量出現(xiàn)需要程序運(yùn)算或者讀表獲得的文字（數(shù)字）信息，并且在不同地方表現(xiàn)不一。
且不說這違背了之前說的界面風(fēng)格問題，更重要的是，你必須面對(duì)一個(gè)現(xiàn)實(shí)，一個(gè)ios游戲，尤其是你需要使用漢字的時(shí)候，每增加一種字體，就會(huì)給游戲帶 來致命的威脅，當(dāng)你的游戲有超過6種漢字字體的時(shí)候，事實(shí)上你的游戲已經(jīng)在崩潰邊緣了。因此，作為一個(gè)優(yōu)秀的界面設(shè)計(jì)師，在開始設(shè)計(jì)前，你必須約束好自己 要使用的字體和準(zhǔn)備如何使用，能用美術(shù)畫的字（固定的，如某個(gè)按鈕上的文字“副本”“好友”之類的），盡量用美術(shù)的，但是仍然請(qǐng)注意風(fēng)格的統(tǒng)一性。
3，設(shè)計(jì)UI的技巧在于使得系統(tǒng)和玩法表現(xiàn)得更棒而不是為了去限制和約束系統(tǒng)的設(shè)計(jì)。
我們之所以去設(shè)計(jì)一個(gè)UI，是為了更好的表現(xiàn)出我們的玩法，這里我已經(jīng)不用界面而是用UI了，因?yàn)檫@里要說的設(shè)計(jì)，不僅僅是界面，還包括了一些操作的 交互。很多時(shí)候我們做一些細(xì)節(jié)設(shè)計(jì)的時(shí)候，會(huì)發(fā)現(xiàn)要表現(xiàn)好非常困難，因此惰性促使我們退而求其次——去修改游戲的設(shè)計(jì)。到這里，我必須喊停——Anti- Patterns。
UI設(shè)計(jì)可以是一個(gè)游戲系統(tǒng)設(shè)計(jì)的驗(yàn)證，可以推翻一些愚蠢的設(shè)計(jì)或者對(duì)于一些設(shè)計(jì)的邏輯漏洞提出質(zhì)疑，比如我們?cè)谠O(shè)計(jì)一個(gè)游戲戰(zhàn)報(bào)界面的時(shí)候，假如這 是一個(gè)《我是MT》Like游戲，結(jié)束的時(shí)候我們要顯示給玩家看這個(gè)副本掉落了多少卡牌（也就是本次冒險(xiǎn)我的收獲嘛），但是設(shè)計(jì)的時(shí)候我們可能會(huì)發(fā)現(xiàn)系統(tǒng) 設(shè)計(jì)的時(shí)候想了很多，卻漏了一個(gè)問題，一次副本究竟能掉落多少卡牌？是的，這正是UI檢驗(yàn)了游戲設(shè)計(jì)的漏洞，很可能這個(gè)仿MT卡牌游戲一次副本不僅僅打3 場，可能要打8場、52場、199場甚至……無限循環(huán)？好吧，無論怎樣我們先且不說好玩不好玩，那么這么多場，每場我們很可能會(huì)收獲6張卡牌，那么假設(shè)要 10場，就會(huì)最多收集到60張卡牌，此時(shí)你的設(shè)計(jì)真的合理嗎？
當(dāng)然這個(gè)掉落60張卡牌，沒有上下文設(shè)計(jì)內(nèi)容的時(shí)候我真不好說，那么既然設(shè)計(jì)的時(shí)候已經(jīng)思考過上限是60，而不是可能會(huì)掉落20張也可能12840張 還可能993204張，那么它至少Feeling還是有那么點(diǎn)靠譜的，此時(shí)界面設(shè)計(jì)往往會(huì)產(chǎn)生一個(gè)Anti-Patterns的行為——因?yàn)?0張卡牌太 多可能導(dǎo)致顯示不下，或者為此我設(shè)計(jì)的界面操作很不好（有滾動(dòng)條，至少我個(gè)人認(rèn)為Ios游戲有滾動(dòng)條Smells Bad），因此這個(gè)系統(tǒng)的設(shè)計(jì)是愚蠢的，事實(shí)上這正是惰性導(dǎo)致我想到了如此愚蠢的一個(gè)想法。因?yàn)槲矣X得界面難做，我就要把原先大家已經(jīng)認(rèn)為OK的系統(tǒng)推翻 重來，這是項(xiàng)目制作中最容易犯的也是最大的錯(cuò)誤之一，因此我們要做的應(yīng)該是集思廣益的去思考，比如說我們干脆就不顯示詳細(xì)獲得了什么卡牌等等，各種方案的 思考，而不是想著去推翻某個(gè)甚至程序上已經(jīng)完工的系統(tǒng)。
而當(dāng)談到60張卡牌掉落的時(shí)候，還可能引發(fā)出另外一個(gè)Anti-Patterns，并且會(huì)導(dǎo)致無限爭議的就是——有人會(huì)告訴你“一般來說，這樣的概率 不會(huì)發(fā)生掉落了60張卡牌的事情”，Cut！作為一個(gè)設(shè)計(jì)師，我們只考慮會(huì)還是不會(huì)，會(huì)就要有對(duì)策，不會(huì)就不要，而不是因?yàn)榇蠖嗲闆r如何如何就能忽略。在 我看來“一般來說”是世界上最不負(fù)責(zé)的一句話，一般來說這幢大樓一層樓不可能同時(shí)有100個(gè)人，因?yàn)樗繉訕强墒褂妹娣e僅僅100平方米，可事實(shí)是小小一 個(gè)3平方米不足的電梯，上下班高峰都能擠上10人，那么是不是當(dāng)100人出現(xiàn)在這層樓的時(shí)候，他就活該倒塌了？
為了回避一些界面設(shè)計(jì)的難點(diǎn)或者煩點(diǎn)，而去改變一個(gè)系統(tǒng)的設(shè)計(jì)，只可能產(chǎn)生更大的難點(diǎn)和煩點(diǎn)，so, Anti-Patterns！
4，兩個(gè)界面間的切換必須得有但必須不能過于復(fù)雜或輕浮。
一個(gè)現(xiàn)象就是，做慣了頁游的策劃，他甚至都能不知道界面和界面之間切換還需要一個(gè)動(dòng)畫過程，但事實(shí)上一款品質(zhì)中等以上的游戲，再切換界面的時(shí)候都應(yīng)該 有些細(xì)節(jié)動(dòng)畫表現(xiàn)。而當(dāng)我們專注于設(shè)計(jì)這些表現(xiàn)的時(shí)候，往往會(huì)忽略一個(gè)Patterns——界面的切換事實(shí)上是一個(gè)無聊的過程，如果它太久了，會(huì)導(dǎo)致游戲 枯燥乏味。
一個(gè)簡單的FadeIn\FadeOut效果，配合上相對(duì)不錯(cuò)的美術(shù)設(shè)計(jì)，其實(shí)完全可以起到讓人很不錯(cuò)的感覺，但是千萬不要想玩花哨，尤其是當(dāng)你自己 寫代碼，或者你的程序員寫代碼靈感突發(fā)也許是急于表現(xiàn)的時(shí)候，一定要及時(shí)攔住，一些界面的切換可能過于“花哨”但事實(shí)上缺乏技術(shù)含量又讓人感覺十分輕浮， 甚至導(dǎo)致游戲的整體Feeling走偏，譬如一個(gè)武俠類游戲，偏偏要采用從4個(gè)角聚攏成一個(gè)五角星形狀關(guān)閉界面，然后由五角星展開下一個(gè)界面（類似很老的 《名將》），Anti-Patterns，用戶不僅不會(huì)察覺你寫五角星的技術(shù)，更不會(huì)理解為什么武俠卻要跟五角星掛上鉤。所以這樣畫蛇添足的設(shè)計(jì)必須被提 前制止。
5，用戶體驗(yàn)是主觀的，但是對(duì)于UI來說，長期積累的用戶習(xí)慣是客觀的。
分析一些主觀的事情是疲勞的，因?yàn)楣f公有理、婆說婆有理、誰說都有理、官大就是理，這樣的討論非但得不到很好的結(jié)果，而且還會(huì)傷了團(tuán)隊(duì)的和氣，而事 實(shí)上本身討論的出發(fā)點(diǎn)也是偏的。為什么說UI是用戶體驗(yàn)?zāi)?？這說的更多的是一些操作感，在ios游戲中，你如何去定義一個(gè)行為是一個(gè)典型的例子。
策劃設(shè)計(jì)了，這個(gè)界面上點(diǎn)擊A地方如何如何，長按B地方如何如何，還能把C拖曳到D身上。說的輕巧，可是請(qǐng)問，您的設(shè)計(jì)中，點(diǎn)擊、長按、拖曳是如何定 義的？作為策劃，不懂程序不是理由，這好比一個(gè)廚師說我不會(huì)切菜，你可以刀工布好，但你至少要知道實(shí)現(xiàn)原理。因此，請(qǐng)你給出一個(gè)算法，在程序中，我們所能 截獲的是按下、拖動(dòng)、抬起三個(gè)觸發(fā)點(diǎn)，怎樣的Coding可以實(shí)現(xiàn)您的想法呢？事實(shí)上你會(huì)發(fā)現(xiàn)，你很難區(qū)分所謂的長按和拖曳。（當(dāng)然那些專攻舌戰(zhàn)、巧舌如 簧的策劃總能想到說法的）。
事實(shí)上這個(gè)問題，這就是用戶習(xí)慣問題，用戶是如何定義長按的？用戶習(xí)慣是一個(gè)比較討厭的東西，你不得不先分析出你的目標(biāo)用戶群——我的用戶群主要是 Windows用戶群，所以O(shè)K在左Cancel在右；我的用戶群主要是Mac用戶群，所以O(shè)K在右Cancel在左。這東西沒有誰規(guī)定對(duì)錯(cuò)，但是長久以 來形成了習(xí)慣，你不得不順著習(xí)慣去設(shè)計(jì)。什么是長按？“在我沒有觸發(fā)抬起的時(shí)候已經(jīng)經(jīng)過了一段時(shí)間，并且拖曳的點(diǎn)未曾超過按下點(diǎn)一個(gè)規(guī)范距離”，這個(gè)就可 以理解是一種長按，但不是策劃案，而是一個(gè)說法，因?yàn)闆]有精細(xì)到，多少毫秒以后算發(fā)動(dòng)了長按。
以上5點(diǎn)應(yīng)該被我們作為設(shè)計(jì)界面的基本Patterns，但是Patterns只能是一種約束，卻解決不了很多問題，事實(shí)上開發(fā)一款手機(jī)游戲，對(duì)于一 個(gè)程序員來說最苦的事情往往就是UI的開發(fā)，尤其是對(duì)于使用cocos2d(x)的程序員來說更是如此，那么怎樣的合作會(huì)更好的提高程序開發(fā)效率呢？
1，Axure可以用來設(shè)計(jì)界面，但不是用來產(chǎn)生策劃案的
Axure是一款不錯(cuò)的軟件，他幫助你寫了Javascript，而很多策劃就認(rèn)為神奇的Axure就是設(shè)計(jì)游戲界面的神器。沒錯(cuò)，Axure可以用 于設(shè)計(jì)，但也只能用于設(shè)計(jì)，最多用于檢驗(yàn)，而我們的目的是項(xiàng)目做出來，并非追究責(zé)任。Axure設(shè)計(jì)了一整套界面，卻沒有辦法列出一個(gè)表，告訴程序員和美 術(shù)有多少要做、或者是哪個(gè)界面連接哪個(gè)界面，除非程序員和美術(shù)非常了解這個(gè)設(shè)計(jì)，或者反過來說這個(gè)界面設(shè)計(jì)的太好了以至于誰都一眼能看明白如何操作，但事 實(shí)上你我都沒有這個(gè)實(shí)力。因此還是老老實(shí)實(shí)的列出界面流程，列清楚要那些界面，但是它們的動(dòng)畫表現(xiàn)可以參考Axure沒錯(cuò)。
2，“字太多誰高興看啊”
是的，在界面設(shè)計(jì)的時(shí)候，更多的應(yīng)該是圖，而少量的時(shí)一些文字注釋，如果說你的設(shè)計(jì)案里連這部分都是文字多于圖片，那就要好好鍛煉下表達(dá)能力了。
3，請(qǐng)不要忽略對(duì)于操作的定義和設(shè)計(jì)
對(duì)于操作的定義和設(shè)計(jì)，往往是最容易被人忽略的，正如我上面所說的，我需要點(diǎn)擊之后如何如何、長按之后如何如何，想法很棒，但是何謂點(diǎn)擊？何謂長按？ 每個(gè)人的定義不同，因此請(qǐng)給出標(biāo)準(zhǔn)，如果你不愿意給出標(biāo)準(zhǔn)，那么在程序員完成設(shè)計(jì)（確切的說是替你擦屁 股）之后，請(qǐng)不要JJWW說這不好那不爽的。
4，Scale9很棒，但不要為了Scale9而Scale9
Scale9（九宮圖）用來拼界面是一個(gè)很棒的主意，他解決了當(dāng)年49K的S40限制，也是很傳統(tǒng)很優(yōu)秀的優(yōu)化算法，可是現(xiàn)在的ios游戲已經(jīng)不是那 個(gè)年代的手機(jī)游戲了，當(dāng)你一個(gè)界面復(fù)用率不高、也并不是大到離譜（超過2048×2048？這的確離譜了，這界面你給誰看？）的時(shí)候，請(qǐng)不要選擇 Scale9的做法，你說給美術(shù)聽辛苦，美術(shù)拆辛苦、程序?qū)ψ鴺?biāo)辛苦（雖然cocos2dx通過工具實(shí)現(xiàn)了簡化，但是工具卻不支持動(dòng)畫效果，如這個(gè)界面從 外面飛進(jìn)來之類的，這得程序員去coding，而該死的CCAction機(jī)制，骨子里面又缺乏一種“司令部”的概念，這導(dǎo)致開發(fā)連續(xù)動(dòng)畫有鴻溝）。
5，小時(shí)的高達(dá)模型，你還記得嗎？
如果你想問——什么樣的UI設(shè)計(jì)案會(huì)很好，我想告訴你的是高達(dá)模型的說明書，上百塊的素材放在10來塊速料上面，誰知道那塊是干什么的？因此我們需要 定義好一個(gè)編號(hào)給每塊材料，并且在說明書上標(biāo)注這個(gè)編號(hào)的材料用哪兒，怎么個(gè)用法，甚至用起來要注意什么。而且更關(guān)鍵的是，高達(dá)的說明書很圖形化！
以上是我對(duì)于UI設(shè)計(jì)的一些淺見，作為同樣自負(fù)的設(shè)計(jì)師，我也曾忽略了UI設(shè)計(jì)的重要性，直到在這個(gè)論壇看到了一個(gè)叫“橙子醬”（好像是這名字）的發(fā) 的幾個(gè)貼，問的是手機(jī)游戲中是否該顯示時(shí)間、手機(jī)游戲橫著好還是豎著好，我感到十分慚愧，因?yàn)橐粋€(gè)老牌設(shè)計(jì)師卻會(huì)忽略了這樣的細(xì)節(jié)，這也是先天的不足—— 缺乏細(xì)心。的確UI設(shè)計(jì)是一門技術(shù)活，也許生活中不少的積累，為了那兩個(gè)問題，我還特地?cái)D了幾次公交車、地鐵上班偷 窺大多人使用手機(jī)的習(xí)慣。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com