尋找夢(mèng)幻城—游戲交互設(shè)計(jì)篇

1 評(píng)論 11640 瀏覽 13 收藏 9 分鐘

接到夢(mèng)幻城這個(gè)項(xiàng)目,內(nèi)心其實(shí)是比較興奮的,因?yàn)橛螒虻慕换ピO(shè)計(jì)變化多樣挑戰(zhàn)大,自己一直想探索。但另一方面,初做游戲交互心里也有些緊張,擺在眼前的問題馬上浮現(xiàn):

1.游戲設(shè)計(jì)的交互與web交互有何區(qū)別,應(yīng)該怎樣進(jìn)行?

2.各個(gè)環(huán)節(jié)應(yīng)該拿出怎樣的交付物呢?

第一反應(yīng)是在網(wǎng)上查閱相關(guān)資料,看看別人是怎么做的。但是很遺憾的是,網(wǎng)上對(duì)游戲交互設(shè)計(jì)的資料很少,很多是點(diǎn)到為止,并沒有哪個(gè)案例可供拿來研究的。

但問題總不會(huì)憋死人,何況事物萬變不離其宗,揣著問題摸索著開干吧?。ū疚囊庠谶€原夢(mèng)幻城游戲的交互設(shè)計(jì)過程,傾向于總結(jié)sns游戲的設(shè)計(jì)流程和產(chǎn)出物,不成熟之處還請(qǐng)同行多提建議。)

1.起步

小L:“恩,我想我已大體了解了項(xiàng)目的主要玩法和框架,可是對(duì)著密密麻麻的說明文檔,每次都需要想半天才能清楚。”

小A:“我很想知道用戶會(huì)看到的是哪些?”

PM:“不知道我的產(chǎn)品方案大家都完全理解了沒有?有沒有哪些地方漏掉了?”

交互設(shè)計(jì)的第一步,自然是要與PM一起,對(duì)產(chǎn)品提出的功能和各種想法進(jìn)行了解。在這個(gè)過程中,PM的主要努力會(huì)放在我們要有怎樣的功能,以及為何要有這樣的功能上面。此時(shí)最可能產(chǎn)生的問題是,游戲里功能復(fù)雜,即使對(duì)于某單一操作,會(huì)有各種各樣的狀態(tài),一眼望去似有無限可能(如下面的圖片),從哪里入手呢?

回顧一下人機(jī)界面設(shè)計(jì)的主要工作是,1.如何將界面信息明白無誤地傳達(dá)給用戶 2.幫助用戶更方便地進(jìn)行正確操作

信息傳達(dá)是主題,那么做為交互設(shè)計(jì)師,需要了解如何將信息可視化。信息可視化的第一步是信息結(jié)構(gòu)化,結(jié)構(gòu)化的前提是我們有怎樣的信息。

再多的信息,也可以進(jìn)行歸類,在夢(mèng)幻城的項(xiàng)目里,我劃定了自己最關(guān)心的幾個(gè)序列,分別是:操作(對(duì)自己、對(duì)別人)、房子狀態(tài)、動(dòng)畫、界面框架。在這里,可以看到并沒有按PM文檔里的功能分,而選擇了操作,是因?yàn)椴僮鞲脩艟o密相關(guān),在設(shè)計(jì)界面時(shí)最需要關(guān)注。在對(duì)操作梳理的同時(shí),因?yàn)槊總€(gè)操作可想到的流程比較簡(jiǎn)單,順便也畫了上去。(點(diǎn)擊小圖查看大圖)

夢(mèng)幻城結(jié)構(gòu)流程圖

對(duì)信息一拆分,似乎在無邊的項(xiàng)目文檔里來回反復(fù)的過程不存在了,因?yàn)閿[在自己面前的項(xiàng)目問題變得很清晰簡(jiǎn)單。

信息架構(gòu)的過程讓我們一開始就能把握整個(gè)界面的設(shè)計(jì)容量,結(jié)構(gòu)化的結(jié)果是更清晰地從全局把握設(shè)計(jì)問題。

這個(gè)過程我又找PM仔細(xì)核實(shí),是否符合他之前的想法,這個(gè)溝通確認(rèn)的過程是很必要的。

將紛繁冗雜的信息拆解歸類,復(fù)雜歸為簡(jiǎn)單。

1.2 交互模式確定

流程確定了,但是需要抽離出其中共性的部分。這也就是我們之前說的交互規(guī)范,或者是總結(jié)的交互設(shè)計(jì)模式。在夢(mèng)幻城里的模式很簡(jiǎn)單,對(duì)話框/錯(cuò)誤信息提示/各種類型的tips等等,因?yàn)橹坝羞^對(duì)搜狐博客和白社會(huì)交互規(guī)范定義的基礎(chǔ),所以基礎(chǔ)元素上不會(huì)有大的偏差。自己也想游戲不需要像web設(shè)計(jì)那樣的死板,所以出于探索嘗試的心態(tài),這里采取的是邊做邊定義的方法。

1.3界面布局是怎樣的?

小V:“我想知道操作是怎樣定義布局的?這樣我就可以開始工作了。”

小L:“恩,我明白用戶都有怎樣的操作了,我很急切地想知道我們的游戲是什么樣子了。”

這個(gè)過程,交互設(shè)計(jì)師實(shí)際上是拋出想法,然后大家討論的過程。設(shè)計(jì)本身就是一個(gè)在矛盾中尋求平衡的過程,不論哪種方案都有利弊。拿出方案進(jìn)行討論再確定,在集體思維中會(huì)讓這個(gè)結(jié)果顯得更加完善。還好的是,在夢(mèng)幻城項(xiàng)目中,這個(gè)過程似乎并沒有花多長(zhǎng)時(shí)間。

在設(shè)計(jì)過程中,針對(duì)界面布局及信息識(shí)別,界面設(shè)計(jì)的輕重緩急對(duì)比強(qiáng)調(diào),信息相似性的表達(dá)等都是交互和視覺設(shè)計(jì)需要考慮的問題,以后專門寫篇文章跟大家一起探討。

1.4 出Demo

由于前幾步在整體上進(jìn)行了定義和梳理。很快,示意性Demo就出來了。不論高低保真,最重要是需要讓大家感受到整個(gè)操作的過程,以便于及早發(fā)現(xiàn)問題。在這個(gè)過程中,可以省去一些細(xì)節(jié)。

工具當(dāng)然是用的axure和PS,為了演示方便,對(duì)其中各操作做了些動(dòng)態(tài)效果。

我的城鎮(zhèn)

我的城市示意圖

規(guī)劃

城市規(guī)劃及公共設(shè)施示意圖

在這時(shí),產(chǎn)品玩法上進(jìn)行了重新的調(diào)整。之前的方案,房子建成后,需要將其賣掉才能賺錢。這種玩法的破壞性太大,用戶無法享受擁有漂亮城市的美好感受,討論一度陷入僵局。但沒多久,投資收租金和裝扮的玩法理念,立即得到了所有人的認(rèn)同。

你知道的,無論視覺交互還是產(chǎn)品設(shè)計(jì)師,就是要這樣自己折磨自己。

還好的是,由于前期定義較清楚,即使玩法變了,整個(gè)交互模式上變化并不大。修改也相對(duì)更容易,經(jīng)過1,2..n次的迭代,基本上設(shè)計(jì)方案才能成形。

簡(jiǎn)單總結(jié)一下交互設(shè)計(jì)的過程,將信息拆解、打散、定義規(guī)則再歸類聚合,很簡(jiǎn)單不是么?

Oops~設(shè)計(jì)過程進(jìn)展還算順利。慢著!這僅僅是剛剛開始,后面要做的還很多。進(jìn)入項(xiàng)目開發(fā)階段了,遇到新的問題:僅對(duì)于一個(gè)操作,可能有5種甚至10種可能,如何跟前端工程師進(jìn)行合作呢?怎樣的交付物能夠?qū)⒏鞣N界面信息無誤地傳達(dá)給工程師利于開發(fā)??如何保證這個(gè)過程順利的推進(jìn),而且效果能跟自己的預(yù)期相符呢?

下一期:

尋找夢(mèng)幻城–開發(fā)工程師的需求

尋找夢(mèng)幻城–這不是設(shè)計(jì)

來源:http://ued.sohu.com/article/491

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 詳細(xì)

    回復(fù)