|
http://tech.qq.com/a/20120524/000173.htm
我發現界面設計是創造遊戲最困難的階段之一。如今市面上充斥著各種不同的屏幕，而在這些較小的屏幕空間裡，設計師更是需要謹慎思考每個屏幕的像素問題。 最近，我們重新設計了一款即將發行的遊戲的整個界面——因為我們發現用戶體驗未像我們預想的那般合理。起初的界面是同時在整個屏幕上提供各種信息，並且沒有任何一個明確的關注點，所以玩家很難搞清楚自己到底在看些什麼。如此玩家便只會看著屏幕1秒就點擊“下一步”按鈕而開始接下來的關卡。換句話說，我們之前的界面未能執行自己的功能。 原本擁擠的勝利界面現在進行了徹底改造(from paladinstudios) 以下我將列出引導開發者設計遊戲界面（特別是針對於iPhone，iPad以及Android遊戲）的8大步驟： 1.選擇平台 界面設計師必須先明確自己的界面能夠支持的平台。就像對於《Momonga》，我們在發佈時只支持iOS和Android。這點看起來好像很簡單，但是實際上我們需要考慮到以下屏幕： iOS設備分辨率： iPhone 3GS（480 x 320像素） iPhone 4（S）（基於326 ppi的960 x 640像素） iPad 1和2（1024 x 768像素） iPad 3 Retina（基於264 ppi的2048 x 1536像素） Android設備分辨率： 包括三星，HTC，宏碁，華碩——其分辨率更是多種多樣！ 處理iOS的顯示器較為簡單。因為這些設備只存在兩種屏幕尺寸，並且Retina像素也只是雙倍增長。所以如果你只是面向iOS開發遊戲，你便可以只創造兩種不同的界面：一種面向iPhone/iPod Touch，另外一種面向iPad。基於Retina分辨率進行設計，然後根據比例調整以適應較早的版本。 而對於Android來說就複雜得多了，因為這裡有各種各樣的設備，並且我們也不可能針對每一台設備定制專屬的界面佈局。所以我們必須選擇兩種基本的分辨率（遊戲邦注：一種是面向手機，另一種是面向平板電腦）。最終我們選擇了三星Galaxy S2以及Droid，而其它受歡迎的設備中也是同樣可行的。 隨後我們明確了自己的設計能否與這些分辨率有效匹配。同時我們需要調整界面以適應其它分辨率。也許我們的界面不能完美地呈現於這些設備中，但是我們卻可以不用投入額外精力輕鬆地完成這種設置。 注：明確你的界面能夠支持哪些平台，並列出所有合適界面的分辨率。 2.明確定向 這是一個很明顯但是卻容易被忽視的步驟。你的界面是支持豎屏還是橫屏模式？或者兩者均可？這是你在進行各種設計之前必須仔細思考的問題。 選擇一種合適的定向能夠幫助你節省許多時間。就像在《Momonga》中我們只使用了橫屏模式，因為在橫屏模式中玩家能夠更好地操縱遊戲。但是設計師們並不能因此而懈怠，因為市場上還存在著各種不同的手機玩家，他們也擁有各自的喜好。設計師應該親自實踐哪種定向更適合自己的遊戲，並堅持自己的判斷。 注：明確你的界面定向。 3.參照其他遊戲 市場上已經出現了許多優秀的遊戲，而如果設計師對於這麼多活生生的參考樣本置之不理那就不可原諒了。設計師應該花錢購買一些遊戲，獲得遊戲界面截圖，然後花點時間仔細琢磨對方設計師的想法，並思考這種設計是否也適用於自己的遊戲。？ 以下是我在進行《Momonga》的互動設計時所參考的一些iPhone遊戲： 手機遊戲界面(from paladinstudios) （上圖分別是《憤怒的小鳥》，《卡勒瓦拉英雄》，《魷魚小英雄》以及《翼飛沖天》的界面。） 尋找參考遊戲主要是為了讓設計師能夠發現其華麗圖像之外的界面佈局原理。但是盲目地複制其它遊戲設計卻不是一種好方法，因為別人的設計不一定符合你的需求。這時候設計師需要自問： *我需要向玩家傳達哪些信息？ *玩家需要哪些功能？ *需要突出哪些內容？ *窗口處於何種環境中？ 注：使用參考範本作為自身設計的靈感和基準，但切記盲目複製，你只要從中學習便可。 4.製作流程圖 在你開始面向個別屏幕進行設計前，請先列出可能會出現於你游戲中的所有窗口。 隨後，你需要創造這些屏幕的流程圖，也就是我所說的“屏幕流程圖”。這是一種手動操作的流程圖，能夠呈現出所有屏幕彼此間的關係。當你完成了一個關卡後，哪個屏幕會最先出現？你是否能夠從主菜單直接進入最高分數榜單頁面？這都是一些複雜的問題，你可以在整個設計過程中不斷對屏幕流程圖做出調整。 以下便是《Momonga》的屏幕流程圖： Momonga流程圖(from paladinstudios) 我們可以從圖中看到，這款遊戲擁有一個主菜單，一個勝利序列，一個遊戲結束屏幕，一個關卡選擇屏幕，並且遊戲所需要的一切內容都能夠有效地運行著。從屏幕流程圖中我們能夠知曉在每個屏幕上需要按壓哪些按鈕。我們必須讓玩家能夠前進到下一個窗口中，並在大多數情況下也能夠回到之前的窗口。 注：列出你需要設計的所有屏幕列表，然後圍繞著這些屏幕創造流程圖。從中你便能夠明確它們彼此之間是如何相互協作的。 5.選擇功能 接下來便需要選擇屏幕的功能。從此你便算真正開始進行遊戲的互動設計。界面主要有兩種功能：一是提供信息，二是允許用戶做某事。 而設計師的工作便是明確需要在屏幕上呈現何種信息以及用戶能夠採取何種行動。我通過一張簡單的草圖勾勒出了遊戲界面應該擁有哪些按鈕並呈現出哪些信息。而這些草圖都較為粗糙，甚至未考慮到尺寸和定位等問題。這時候你便需要問自己：是否該在這裡設置按鈕？具體該將按鈕設置在哪裡？按鈕的尺寸要多大？等等。 以下便是我所勾勒出的一些草圖： 界面草圖(from paladinstudios) 我會根據不同心情或者所處的設計階段，利用書籤，便條紙或者Photoshop等工具繪製草圖。 我們需要牢記： *盡可能將信息量和按鈕壓到最低數量。 *明確每個屏幕都有一個主要目的。 *銘記屏幕流程處所有情境。 *刪除任何重複的內容，除非它們真的有存在必要。 *考慮到需要在多個屏幕上分割內容，所以你需要盡可能地壓縮信息量。 注：創造屏幕的功能草圖。即通過界面的基本草圖列出我們真正需要的內容。 6.創造線框圖 在這個階段我們便需要使用Photoshop！這是關於創造屏幕的佈局（沒有額外的裝飾）。雖然這仍是關於互動設計，但是我們現在卻需要開始正視定位和尺寸。在步驟5中你可能會在一張餐巾紙上繪製出草圖，但是線框圖卻不再是那般隨意。線框圖可以說是設計師的指導方針，你不能草率對待。 wireframe(from paladinstudios) 以下我將列出創造遊戲界麵線框圖的訣竅： *使用一種能夠支持你所有設備分辨率的模板。 *開始設計之前，與程序員好好討論如何真正落實行動。 *在整個設計過程中定期與程序員一起核實設計的可行性。 *在Photoshop中為遊戲的每一個屏幕分組，並使用你所創造的線框圖去填充這些屏幕。 *當你做出了一個巨大的改變後記得複制整個屏幕組，然後重新開始新的設計。這樣你便能夠隨時回到之前的設計中。 *明確一個主導框架：創造指南，並始終堅持這一指南——不論你選擇了何種平台或屏幕。 *設置灰度等級，並且在必要的情況下為按鈕設置顏色。 *還沒有圓角：你需要重新調整尺寸並創造出更容易使用的普通矩形。 *使用Dropbox你便能夠基於目標設備輕鬆地測試你的設計。在Dropbox中以jepg的格式保存設計，並在你自己的iPhone上打開它們。 我總是喜歡以jpeg格式保存設計。並且我會根據時間順序去排列所有的文件。 注：創造線框圖。不加任何修飾，並且也不留任何缺口。在你的目標設備上進行測試。 7.創造設計 這時候就需要Photoshop高手的幫忙了。在我們的遊戲設計中，Jimmy便是我們的專家。我們總是會認為，如果創造出了一個很棒的設計，那麼製作出合適的用戶界面便是輕而易舉的事。 但是實際上卻不是這般簡單。不管你是否做出了慎重的思考，當你真正落實行動時總會出現一些漏洞。這時候你就必須與Photoshop高手保持密切的聯繫，並時刻準備著回答他所提出的複雜問題。同時你還需要顧及到創造性自由，並在必要時刻堅持自己的想法。 設計手機遊戲還需要注意的一個小細節是：要使用矢量圖。在之前遊戲的界面中我們便因為著眼於像素而讓自己陷入一個大麻煩，即當iPad 3帶著更加精確的Retina屏幕問世時，我們便不得不重新搗鼓遊戲的界面設計。 以下是《Momonga》的新界面。你們需要以此為教訓，時刻謹記： new interface(from paladinstudios) 注：該開始設計界面了。 8.測試並迭代 你不要以為來到了這個階段就相當於大功告成了。你真正需要面對的是再次重複之前的工作。設計是一個很奇特的問題：因為只有創造出補救內容並看到它真正運行時你才知道自己的創作是否合理。所以設計師就必須測試自己的遊戲界面，並且在必要時刻重新開始。 我們現在便處於需要完全重新設計界面的過程。這聽起來確實很傷感：我們投入了大把的時間設計出了之前的那個佈局，並且也精心雕琢了其外觀。但是在花費了好幾週的時間後我們卻發現這一佈局並不能有效運行。所以我們不得不重新來過。這一次我們將從Retina的矢量著手，並且有信心創造出更棒的互動設計。 我很早就知道之前設計很糟糕？也許吧，因為再次回首我便很明顯地看到了問題所在。但在那時候我們卻只能依靠測試者去判斷它的好壞。因為這是最簡單的方法。 注：執行界面並測試它。如果必要的話就重新回到繪圖板再次進行設計。反复迭代。要知道任何細微的改變也有可能創造出巨大的不同。
0 評論
|
RSS 訂閱
