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