DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 視覺設計實例分享:尋找夢幻城
視覺設計實例分享:尋找夢幻城
編輯:關於網頁技巧     

網頁制作poluoluo文章簡介:在白社會上線一段時間以後,我們的UI組接到了前所未有的挑戰。設計一款游戲。OMG,這還真不是說做就做的,既然有這麼好的嘗試機會,做呗!

show-icon

在白社會上線一段時間以後,我們的UI組接到了前所未有的挑戰。設計一款游戲。OMG,這還真不是說做就做的,既然有這麼好的嘗試機會,做呗!

其實一開始,我們並沒有什麼頭緒,不知道從何下手。新招了三位同學(一個原畫一個動畫一個界面),雖然有手繪的功底,但也並沒有游戲設計的經驗。我們一窮二白的就這麼開始了,結果可想而知,沒有方法的指導,我們簡直就像無頭蒼蠅一般到處亂撞,一方面被項目進度緊逼著,一方面卻又郁悶於兩個設計師畫風不一致、原畫效果始終不能確定,無法批量開始繪制。我那一頭包哇,真是愁到掉了好多頭發。。。

俗話說,逆境求生存嘛,狀況那麼慘了,只能靜下心來好好想想怎麼辦。接下來,我們暫停了一切無頭蒼蠅的行為,開始用一些方法來指導我們的設計。其實做游戲和做產品是有很多相似之處的,流程、方法都是可以借鑒的。於是,我們花了些時間,和幾位設計師們一起,嘗試用線條、拼貼、素材收集等各種方式確定了我們的視覺表現風格,出了一些設定設計的小DEMO,確定了整個游戲故事背景的氣氛和渲染的方式,甚至還風暴了很多有趣的設定idea。
期間我們嘗試的草稿之一:
草圖1

逐漸的,我們的思路清晰了,設計師們之間也找到了共同的表現方式。當然,這還不夠,這些東西需要用某種方式去落實下來,於是,我們想到了規范這個東東。規范涉及了很多東西,以防不同的設計師畫出來的東西不同,要知道即便是一個飽和度使用不同,那也會是完全兩個東西,這個是很要命的。。。

是的,我們的規范華麗麗的就出場了,規范裡定義了物件的透視角度、光線分布、漸變方式、描邊大小、色彩飽和度值、投影方向等等一系列細節的東西,總之我們能想到的會讓兩個設計師造成設計差異的東西都盡量的去規范了一下。
這裡截取了幾個片段:
規范1

規范2

規范3

再接著,我們變得順利了很多,終於開始走上了正軌。但對於龐大的游戲到底哪些東西需要設計,這些設計用什麼創意手法來實現都是需要梳理的。這個時候,我們根據游戲策劃文檔和游戲的框架圖,將所有涉及到需要設計的部分進行了拆分,繪制了一張甚是華麗麗的大表格,裡面盡可能的詳細定義(例如我們會去定義投資房子的動畫要采用魔法師施展魔法的效果),並按照開發時間、階段,做了設計上的階段計劃。

就這樣,一份規范、一張大表讓我們終於擺脫了那難熬的階段,順利的進行了項目,直到今天大家能看到的擁有還不錯畫面設計的夢幻城游戲。

這裡我簡單繪制了一個流程表,是這個游戲項目接近尾聲的時候畫的,其實是吸取了第一次游戲設計的經驗,期望之後再有此類項目可用的參考,也希望能有機會向有經驗的游戲設計專家來請教吧。獻丑了:)

game design

其實這裡有一個講故事的概念,我個人覺得挺不錯的,前兩天看了本書,上面說道:
“當故事性、娛樂性成為商品的終極需求後,設計師僅僅畫出美觀的設計圖已經遠遠不夠,唯有認真的“講一個故事”,讓最終使用者感動到無以復加,這樣的設計才算成功。”
是的,我們都是講故事的人,給用戶講故事,游戲類的設計更是如此,強情境化,強氛圍渲染,強沉浸式體驗等等。

最後,簡單小秀冰山一角吧,我們的夢幻城還請各位有時間能親自去白社會上體驗體驗,給我們多多提意見噢。地址:bai.sohu.com同時,要感謝我們一起浴血奮戰的姜小魚、華太師、張張!~你們辛苦啦~~~~~

show

另奉送兩張我們在某雜志的內頁秀~
1

2

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved