接上回：Oops~設計過程進展還算順利。慢著！這僅僅是剛剛開始，后面要做的還很多。進入項目開發階段了，遇到新的問題:僅對于一個操作，可能有5種甚至10種可能，如何跟前端工程師進行合作呢？怎樣的交付物能夠將各種界面信息無誤地傳達給工程師利于開發？?如何保證這個過程順利的推進，而且效果能跟自己的預期相符呢？

如果沒有相對明確的原型，在后期會導致大量的返工甚至糾結的討論，整個項目時間計劃因無法細化，也會很難制定。

作為前后端的工程師，最大的期望來自于能夠在做之前看到上線后的全貌，這樣才可以保證所作的底層架構以及接口設計是準確完備的。項目在一直迭代，同時設計和開發一般是在并行，交互設計就需要盡可能的表現出產品的形態

SNS game需要怎樣的交付物，嘗試了下面三種方式：

1.?完全將所有的交互進行定義，做成可以運行的版本。

之前在進行web設計演示方案時，時常會將所有的頁面及交互做成不同的層，然后講解給大家。

這種方案的好處是可以一目了然，讓大家更熟悉整個系統的運作。缺點也很明顯，就是做起來層層相嵌相當麻煩，原型的量成倍的增加，會需要更多的時間。更大的成本來自于迭代后的修改，如果要改某一處，整個原型都將傷筋動骨(即使使用自定義的組件庫)，非常不方便。更重要的是，講解后很多時候工程師不知道該點哪里，導致在拆解任務時容易有疏漏。

這種原型交付物，更適合于產品后期進行用戶測試，而非提供給設計師和開發工程師。

2.將主流程視圖畫出來，將操作的交互細節寫在文檔里，后期的細節不斷與工程師溝通

一些游戲公司里應該是這種配合方式，通過word文檔將主要界面以及一些交互過程通過文字大體描述，后期再不斷地溝通。

但是對于涉及到表現的前端工程師，通過文字的表現仍然會有很多的疑惑。甚至很多時候，看文字本身就是一種負擔，在溝通的時候還會牽涉很多的經歷，效果仍不甚滿意。

3.一切以圖說話。

嘗試使用了狀態圖來進行表現，雖然原型上帶來了一些成本，但是整個項目都減少了很多無效溝通時間，效果非常不錯。

每個視圖的每個點擊，以及不同的變化狀態都用原型圖來示意，基本上可以保證最終效果相似了。

房屋建造狀態圖（點擊小圖看大圖）

狀態圖原型的小技巧：

• 我們不需要將整個頁面都畫出來，可以只將某重要視圖表現即可。例如上面圖中灰色區域都省略了一些固定導航。
• Axure雖然不支持直接畫圖，但是如果利用好最基本圖形組合，也可以拋棄圖像直接進行示意的效果。例如我們可以用幾個方框來表示一棟建筑，幾個圈圈來表示進行建造的動畫等等。靈活運用最簡單的圖形組合，可以節省很多的時間。

來源：http://ued.sohu.com/article/564

游戲類應用設計：尋找夢幻城－視覺設計篇

尋找夢幻城—游戲交互設計篇