在2008版本之前，這個(gè)項(xiàng)目都沒(méi)有UI設(shè)計(jì)的加入，所有UI界面都是開(kāi)發(fā)自己拼圖繪制而成，雖然不是很美觀(guān)，但是基本功能還是比較完善，依托公司這個(gè)大的平臺(tái)，有一定的用戶(hù)基數(shù)。

接觸：

剛接觸需求的時(shí)候還未入職，以前也一直是從事大型網(wǎng)游UI的設(shè)計(jì)工作，對(duì)手機(jī)UI的還不是很了解，不過(guò)生活就是不斷挑戰(zhàn)嘛！就根據(jù)自己的想法做了幾個(gè)風(fēng)格稿，分辨率是176×208，因?yàn)楫?dāng)時(shí)自己用的手機(jī)w550就是這個(gè)分辨率。。。

學(xué)習(xí)、成長(zhǎng)：

2008~2009版本概況

2008版本的主要目的：是在程序代碼不進(jìn)行大變動(dòng)的情況下，簡(jiǎn)單快速提升用戶(hù)體驗(yàn)。做法就是在不改動(dòng)圖片資源尺寸和坐標(biāo)的條件下，優(yōu)化UI圖 片資源，替換游戲的UI圖片資源。在短短幾個(gè)月的時(shí)間里，項(xiàng)目組就完成一個(gè)大廳UI設(shè)計(jì)開(kāi)發(fā)和七款游戲的UI替換工作。

2009有了上一個(gè)過(guò)渡版本作鋪墊，設(shè)計(jì)、開(kāi)發(fā)的時(shí)間相對(duì)寬裕很多，開(kāi)發(fā)在這個(gè)版本里將修改圖象引擎、調(diào)整程序框架、增加動(dòng)畫(huà)效果、優(yōu)化體驗(yàn) 等！ UI設(shè)計(jì)在這個(gè)版本算是得到了解放，不用在被上一個(gè)版本的條條框框所限制，得到了開(kāi)發(fā)同事的全力支持！

下面例舉2008和2009大 廳、游戲：

大廳

2008版的QQ手機(jī)游戲大廳是延續(xù)的手機(jī)QQ的一個(gè)概念設(shè)計(jì)的風(fēng)格，手機(jī)QQ起步比我們?cè)?，工作上也提供了很多幫助，這里感謝3G產(chǎn)品中心給 予幫助的朋友：）。

設(shè)計(jì)2009版本的時(shí)候，感覺(jué)大家都受到微軟設(shè)計(jì)風(fēng)格的影像，質(zhì)感表現(xiàn)的手法都比較相近，在3個(gè)方案過(guò)后，最后一個(gè)被訂了下來(lái)。

很多人都會(huì)問(wèn)，為什么色調(diào)不再明快些呢？這里借鑒一個(gè)手機(jī)QQ用戶(hù)調(diào)查經(jīng)驗(yàn)：手機(jī)QQ的夜間模式很受歡迎，還有一些用戶(hù)喜歡白天也用，作為常用的皮 膚。

分析一下有這樣幾個(gè)原因：

1、? 手機(jī)的屏幕相比電腦差很多，比較亮，看久容易疲勞；

2、? 晚上使用的場(chǎng)景還是很多的，界面色調(diào)太亮?xí)?duì)眼睛造成負(fù)擔(dān)；

3、? 有些用戶(hù)心理上會(huì)覺(jué)的暗的色調(diào)會(huì)比較省電；

4、暗的、飽和度低的色調(diào)在手機(jī)上不易偏色。

聊天界面這里最先是全屏的，聊天和游戲界面的切換、輸入是很麻煩的，后來(lái)嘗試做成半透明的，但是很影響程序性能，最后決定做成現(xiàn)在這樣半屏結(jié)構(gòu) 的聊天框，聊天顯示部分的界面是可以開(kāi)啟和關(guān)閉的，聊天輸入的同時(shí)可以看到其他玩家的出牌狀態(tài)，做到游戲聊天兩不誤。聊天、表情的輸入方式和手機(jī)QQ一樣 的，只是數(shù)量和PC qqgame的是同步的，比手機(jī)QQ要少一排

斗地主

不知道大家一眼能不能看出2008和2009版斗地主的區(qū)別呢？

牌類(lèi)游戲最重要的就是牌，清晰明快的牌面會(huì)使戶(hù)玩起來(lái)更輕松，不過(guò)手機(jī)屏幕的尺寸不比PC，這點(diǎn)上有很大的限制，那么就需要作出取舍，去掉了多 余的元素，放大了用戶(hù)關(guān)注的數(shù)字花色， 數(shù)字加大了撲克牌之間的間距也加大了，所以?xún)?yōu)化后的牌面看起來(lái)比原來(lái)的牌面要小，但是數(shù)字花色不是看起來(lái)更加清楚呢？

還有一個(gè)明顯的改動(dòng)就是聊天泡泡，相比08版現(xiàn)在在最下面的信息欄中更加直觀(guān)；背景上使用了大的四方連圖案填充，背景更加豐富不再單調(diào)；優(yōu)化了 鬧鐘和托管機(jī)器人的設(shè)計(jì)……等等，更多不同，邀您親身體驗(yàn)：）

象棋

象棋的棋子是設(shè)計(jì)的關(guān)鍵，初稿在原版棋子的基礎(chǔ)上修改了一下，效果不理想，于是把棋子盡 量做大，文字也加大。

生活中棋子文字顏色有很多種，游戲中定下用紅黑，是對(duì)少數(shù)色盲、色弱用戶(hù)的關(guān)懷；棋盤(pán)需要襯托棋子，這里09版的設(shè)計(jì)在棋子、棋盤(pán)色的飽和度上 也做了優(yōu)化：棋子的飽和度和明度要比棋盤(pán)高，看起來(lái)更加明顯突出，棋盤(pán)的飽和度相對(duì)低些，暗些，除了襯托棋子，還可以避免不同屏幕之間的偏色問(wèn)題。手機(jī)屏 幕之間顯示效果有很大差異，整體調(diào)整后到了目前的大家都滿(mǎn)意的效果。

制作經(jīng)驗(yàn)分享

SYMBIAN和kjava平臺(tái)性能和程序繪圖方式；

symbian：

控件：控件可以把代碼模塊化，方便在編寫(xiě)相同模塊的時(shí)候調(diào)用，提升代碼編寫(xiě)時(shí)的效率，

代碼維護(hù)容易，代碼量輕便。但是在遇到功能變動(dòng)，和修改的時(shí)候，顯得不靈活，需

要重新訂制。

自繪：通過(guò)繪圖的方式，用代碼實(shí)現(xiàn)基本圖形界面，自由方便；但是在調(diào)用的時(shí)候需要通過(guò)

復(fù)制代碼的方式實(shí)現(xiàn)，和控件相比沒(méi)那么方便，代碼量大，維護(hù)成本高，程序讀寫(xiě)負(fù)

載較高。

補(bǔ)充： Mtk基本格式其實(shí)都支持，但是程序處理起來(lái)比較麻煩，需要另外寫(xiě)接口

透明：
png8 ： 只支持全透明，可以通過(guò)調(diào)節(jié)色深進(jìn)行壓縮

Png24： 支持半透明，不支持調(diào)節(jié)色深壓縮

Bmp ： 透明需要透過(guò)黑白遮罩實(shí)現(xiàn)透明效果，為全透明

Svg? ： 在制作中不要使用遮罩效果，在手機(jī)上顯示會(huì)出錯(cuò)

UI設(shè)計(jì)規(guī)范：

1、規(guī)范是UI設(shè)計(jì)稿的制作說(shuō)明書(shū)，讓開(kāi)發(fā)人員理解制作思路，減少溝通成本；

2、在多平臺(tái)移植的情況下，使UI設(shè)計(jì)風(fēng)格整體統(tǒng)一。

最開(kāi)始大廳和游戲都沒(méi)有規(guī)范，做完一個(gè)分辨率做下一個(gè)，重復(fù)工作大，效率很低；后來(lái)大廳、游戲重構(gòu)后，可以通過(guò)一個(gè)安裝包適應(yīng)不同分辨率，這個(gè) 時(shí)候就迫切需要規(guī)范文檔了，因?yàn)槊恳粋€(gè)界面都要適應(yīng)不同的分辨率，需要整體規(guī)劃設(shè)計(jì)，不然很難做到統(tǒng)一。

現(xiàn)在采用的是圖形標(biāo)注 [用于大廳的規(guī)范] 和坐標(biāo)工具+說(shuō) 明文檔 [用于游戲] 的形式制

作規(guī)范的.

1、圖片標(biāo)注：

2、文檔標(biāo)注：

3、工具標(biāo)注：

這幾個(gè)項(xiàng)目讓我收獲不少，對(duì)手機(jī)UI的制作方式有了更多的了解，在這不大屏幕上，各種限制，也更加考驗(yàn)設(shè)計(jì)師的能力和毅力，一款好的產(chǎn)品誕生， 是需要整個(gè)團(tuán)隊(duì)辛勤汗水去灌溉的！

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