手機QQ游戲2008~2009 UI 設計分享
最初 在2008版本之前,這個項目都沒有UI設計的加入,所有UI界面都是開發(fā)自己拼圖繪制而成,雖然不是很美觀,但是基本功能還是比較完善,依托公司這個大的平臺,有一定的用戶基數。 接觸: 剛接觸需求的時候還未入職,以前也一直是從事大型網游UI的設計工作,對手機UI的還不是很了解,不過生活就是不斷挑戰(zhàn)嘛!就根據自己的想法做了幾個風格稿,分辨率是176×208,因為當時自己用的手機w550就是這個分辨率。。。 學習、成長: 2008~2009版本概況 2008版本的主要目的:是在程序代碼不進行大變動的情況下,簡單快速提升用戶體驗。做法就是在不改動圖片資源尺寸和坐標的條件下,優(yōu)化UI圖 片資源,替換游戲的UI圖片資源。在短短幾個月的時間里,項目組就完成一個大廳UI設計開發(fā)和七款游戲的UI替換工作。 2009有了上一個過渡版本作鋪墊,設計、開發(fā)的時間相對寬裕很多,開發(fā)在這個版本里將修改圖象引擎、調整程序框架、增加動畫效果、優(yōu)化體驗 等! UI設計在這個版本算是得到了解放,不用在被上一個版本的條條框框所限制,得到了開發(fā)同事的全力支持! 下面例舉2008和2009大 廳、游戲: 大廳 2008版的QQ手機游戲大廳是延續(xù)的手機QQ的一個概念設計的風格,手機QQ起步比我們早,工作上也提供了很多幫助,這里感謝3G產品中心給 予幫助的朋友:)。 設計2009版本的時候,感覺大家都受到微軟設計風格的影像,質感表現(xiàn)的手法都比較相近,在3個方案過后,最后一個被訂了下來。 很多人都會問,為什么色調不再明快些呢?這里借鑒一個手機QQ用戶調查經驗:手機QQ的夜間模式很受歡迎,還有一些用戶喜歡白天也用,作為常用的皮 膚。 分析一下有這樣幾個原因: 1、? 手機的屏幕相比電腦差很多,比較亮,看久容易疲勞; 2、? 晚上使用的場景還是很多的,界面色調太亮會對眼睛造成負擔; 3、? 有些用戶心理上會覺的暗的色調會比較省電; 4、暗的、飽和度低的色調在手機上不易偏色。 聊天界面這里最先是全屏的,聊天和游戲界面的切換、輸入是很麻煩的,后來嘗試做成半透明的,但是很影響程序性能,最后決定做成現(xiàn)在這樣半屏結構 的聊天框,聊天顯示部分的界面是可以開啟和關閉的,聊天輸入的同時可以看到其他玩家的出牌狀態(tài),做到游戲聊天兩不誤。聊天、表情的輸入方式和手機QQ一樣 的,只是數量和PC qqgame的是同步的,比手機QQ要少一排 斗地主 不知道大家一眼能不能看出2008和2009版斗地主的區(qū)別呢? 牌類游戲最重要的就是牌,清晰明快的牌面會使戶玩起來更輕松,不過手機屏幕的尺寸不比PC,這點上有很大的限制,那么就需要作出取舍,去掉了多 余的元素,放大了用戶關注的數字花色, 數字加大了撲克牌之間的間距也加大了,所以優(yōu)化后的牌面看起來比原來的牌面要小,但是數字花色不是看起來更加清楚呢? 還有一個明顯的改動就是聊天泡泡,相比08版現(xiàn)在在最下面的信息欄中更加直觀;背景上使用了大的四方連圖案填充,背景更加豐富不再單調;優(yōu)化了 鬧鐘和托管機器人的設計……等等,更多不同,邀您親身體驗:) 象棋 象棋的棋子是設計的關鍵,初稿在原版棋子的基礎上修改了一下,效果不理想,于是把棋子盡 量做大,文字也加大。 生活中棋子文字顏色有很多種,游戲中定下用紅黑,是對少數色盲、色弱用戶的關懷;棋盤需要襯托棋子,這里09版的設計在棋子、棋盤色的飽和度上 也做了優(yōu)化:棋子的飽和度和明度要比棋盤高,看起來更加明顯突出,棋盤的飽和度相對低些,暗些,除了襯托棋子,還可以避免不同屏幕之間的偏色問題。手機屏 幕之間顯示效果有很大差異,整體調整后到了目前的大家都滿意的效果。 制作經驗分享 SYMBIAN和kjava平臺性能和程序繪圖方式; symbian: 控件:控件可以把代碼模塊化,方便在編寫相同模塊的時候調用,提升代碼編寫時的效率, 代碼維護容易,代碼量輕便。但是在遇到功能變動,和修改的時候,顯得不靈活,需 要重新訂制。 自繪:通過繪圖的方式,用代碼實現(xiàn)基本圖形界面,自由方便;但是在調用的時候需要通過 復制代碼的方式實現(xiàn),和控件相比沒那么方便,代碼量大,維護成本高,程序讀寫負 載較高。 補充: Mtk基本格式其實都支持,但是程序處理起來比較麻煩,需要另外寫接口 透明: Png24: 支持半透明,不支持調節(jié)色深壓縮 Bmp : 透明需要透過黑白遮罩實現(xiàn)透明效果,為全透明 Svg? : 在制作中不要使用遮罩效果,在手機上顯示會出錯 UI設計規(guī)范: 1、規(guī)范是UI設計稿的制作說明書,讓開發(fā)人員理解制作思路,減少溝通成本; 2、在多平臺移植的情況下,使UI設計風格整體統(tǒng)一。 最開始大廳和游戲都沒有規(guī)范,做完一個分辨率做下一個,重復工作大,效率很低;后來大廳、游戲重構后,可以通過一個安裝包適應不同分辨率,這個 時候就迫切需要規(guī)范文檔了,因為每一個界面都要適應不同的分辨率,需要整體規(guī)劃設計,不然很難做到統(tǒng)一。 現(xiàn)在采用的是圖形標注 [用于大廳的規(guī)范] 和坐標工具+說 明文檔 [用于游戲] 的形式制 作規(guī)范的. 1、圖片標注: 2、文檔標注: 3、工具標注: 這幾個項目讓我收獲不少,對手機UI的制作方式有了更多的了解,在這不大屏幕上,各種限制,也更加考驗設計師的能力和毅力,一款好的產品誕生, 是需要整個團隊辛勤汗水去灌溉的! 源地址:http://wsd.tencent.com/20……i-design.html
png8 : 只支持全透明,可以通過調節(jié)色深進行壓縮
- 目前還沒評論,等你發(fā)揮!