手機QQ遊戲2008~2009 UI 設計分享

最初

在2008版本之前,這個項目都沒有UI設計的加入,所有UI界面都是開發自己拼圖繪製而成,雖然不是很美觀,但是基本功能還是比較完善,依托公司這個大的平台,有一定的用戶基數。

接觸:

剛接觸需求的時候還未入職,以前也一直是從事大型網游UI的設計工作,對手機UI的還不是很了解,不過生活就是不斷挑戰嘛!就根據自己的想法做了幾個風格稿,分辨率是176×208,因為當時自己用的手機w550就是這個分辨率。 。 。



學習、成長:

2008~2009版本概況

2008版本的主要目的:是在程序代碼不進行大變動的情況下,簡單快速提升用戶體驗。做法就是在不改動圖片資源尺寸和坐標的條件下,優化UI圖片資源,替換遊戲的UI圖片資源。在短短幾個月的時間裡,項目組就完成一個大廳UI設計開發和七款遊戲的UI替換工作。

2009有了上一個過渡版本作鋪墊,設計、開發的時間相對寬裕很多,開發在這個版本里將修改圖像引擎、調整程序框架、增加動畫效果、優化體驗等! UI設計在這個版本算是得到了解放,不用在被上一個版本的條條框框所限制,得到了開發同事的全力支持!

下面例舉2008和2009大廳、遊戲:

大廳

2008版的QQ手機遊戲大廳是延續的手機QQ的一個概念設計的風格,手機QQ起步比我們早,工作上也提供了很多幫助,這裡感謝3G產品中心給予幫助的朋友:)。

設計2009版本的時候,感覺大家都受到微軟設計風格的影像,質感表現的手法都比較相近,在3個方案過後,最後一個被訂了下來。

很多人都會問,為什麼色調不再明快些呢?這裡借鑒一個手機QQ用戶調查經驗:手機QQ的夜間模式很受歡迎,還有一些用戶喜歡白天也用,作為常用的皮膚。

分析一下有這樣幾個原因:

1、  手機的屏幕相比電腦差很多,比較亮,看久容易疲勞;

2、  晚上使用的場景還是很多的,界面色調太亮會對眼睛造成負擔;

3、  有些用戶心理上會覺的暗的色調會比較省電;

4、暗的、飽和度低的色調在手機上不易偏色。

聊天界面這裡最先是全屏的,聊天和遊戲界面的切換、輸入是很麻煩的,後來嘗試做成半透明的,但是很影響程序性能,最後決定做成現在這樣半屏結構的聊天框,聊天顯示部分的界面是可以開啟和關閉的,聊天輸入的同時可以看到其他玩家的出牌狀態,做到遊戲聊天兩不誤。聊天、表情的輸入方式和手機QQ一樣的,只是數量和PC qqgame的是同步的,比手機QQ要少一排

斗地主

不知道大家一眼能不能看出2008和2009版斗地主的區別呢?

牌類游戲最重要的就是牌,清晰明快的牌面會使戶玩起來更輕鬆,不過手機屏幕的尺寸不比PC,這點上有很大的限制,那麼就需要作出取捨,去掉了多餘的元素,放大了用戶關注的數字花色, 數字加大了撲克牌之間的間距也加大了,所以優化後的牌面看起來比原來的牌面要小,但是數字花色不是看起來更加清楚呢?

還有一個明顯的改動就是聊天泡泡,相比08版現在在最下面的信息欄中更加直觀;背景上使用了大的四方連圖案填充,背景更加豐富不再單調;優化了鬧鐘和託管機器人的設計……等等,更多不同,邀您親身體驗:)

象棋

象棋的棋子是設計的關鍵,初稿在原版棋子的基礎上修改了一下,效果不理想,於是把棋子盡量做大,文字也加大。

生活中棋子文字顏色有很多種,遊戲中定下用紅黑,是對少數色盲、色弱用戶的關懷;棋盤需要襯托棋子,這裡09版的設計在棋子、棋盤色的飽和度上也做了優化:棋子的飽和度和明度要比棋盤高,看起來更加明顯突出,棋盤的飽和度相對低些,暗些,除了襯托棋子,還可以避免不同屏幕之間的偏色問題。手機屏幕之間顯示效果有很大差異,整體調整後到了目前的大家都滿意的效果。

製作經驗分享

SYMBIAN和kjava平台性能和程序繪圖方式;

symbian:

控件:控件可以把代碼模塊化,方便在編寫相同模塊的時候調用,提升代碼編寫時的效率,

代碼維護容易,代碼量輕便。但是在遇到功能變動,和修改的時候,顯得不靈活,需

要重新訂製。

自繪:通過繪圖的方式,用代碼實現基本圖形界面,自由方便;但是在調用的時候需要通過

複製代碼的方式實現,和控件相比沒那麼方便,代碼量大,維護成本高,程序讀寫負

載較高。

補充: Mtk基本格式其實都支持,但是程序處理起來比較麻煩,需要另外寫接口

透明:

png8 : 只支持全透明,可以通過調節色深進行壓縮

Png24: 支持半透明,不支持調節色深壓縮

Bmp : 透明需要透過黑白遮罩實現透​​明效果,為全透明

Svg  : 在製作中不要使用遮罩效果,在手機上顯示會出錯

UI設計規範:

1、規範是UI設計稿的製作說明書,讓開發人員理解製作思路,減少溝通成本;

2、在多平台移植的情況下,使UI設計風格整體統一。

最開始大廳和遊戲都沒有規範,做完一個分辨率做下一個,重複工作大,效率很低;後來大廳、遊戲重構後,可以通過一個安裝包適應不同分辨率,這個時候就迫切需要規範文檔了,因為每一個界面都要適應不同的分辨率,需要整體規劃設計,不然很難做到統一。

現在採用的是圖形標註[用於大廳的規範] 和坐標工具+說明文檔[用於遊戲] 的形式製

作規範的.

1、圖片標註:

2、文檔標註:

3、工具標註:

這幾個項目讓我收穫不少,對手機UI的製作方式有了更多的了解,在這不大屏幕上,各種限制,也更加考驗設計師的能力和毅力,一款好的產品誕生, 是需要整個團隊辛勤汗水去灌溉的!

源地址:http://wsd.tencent.com/20……i -design.html

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.