阿里巴巴中國(guó)站手機(jī)客戶端項(xiàng)目總結(jié)

0 評(píng)論 3082 瀏覽 2 收藏 6 分鐘

從無(wú)到有的阿里巴巴無(wú)線端設(shè)計(jì),經(jīng)歷了由前期的產(chǎn)品定位、產(chǎn)品形態(tài)探索、無(wú)線需求場(chǎng)景腦暴、產(chǎn)品拆解、分合的產(chǎn)品思路討論、版本規(guī)劃到手機(jī)行為、手機(jī)平臺(tái)特性分析乃至信息架構(gòu)的確定、細(xì)節(jié)的推敲…

無(wú)線端敏捷開(kāi)發(fā)節(jié)奏快,如何低成本、有條不紊的迭代更新,版本規(guī)劃以及產(chǎn)品的拓展性考慮尤為關(guān)鍵。九宮格聚合的工具平臺(tái)形態(tài)和運(yùn)營(yíng)形態(tài)在我們客戶端的定位中必然共存,但一期內(nèi)容不足功能較少,過(guò)渡期既要保證目前版本的充實(shí)和架構(gòu)合理,又要考慮用戶習(xí)慣的延續(xù)和activity等的代碼模塊可復(fù)用。

在已有13年歷史的網(wǎng)站(培養(yǎng)了穩(wěn)定的用戶群以及培養(yǎng)了一定的用戶習(xí)慣)基礎(chǔ)上,實(shí)際上我們并非從零開(kāi)始。B2B的業(yè)務(wù)屬性決定了無(wú)線場(chǎng)景的設(shè)計(jì)與網(wǎng)站的關(guān)聯(lián)性,而用戶使用時(shí)必然伴隨部分網(wǎng)站習(xí)慣的遷移,因此在基于無(wú)線場(chǎng)景和手機(jī)端特性設(shè)計(jì)的同時(shí),我們也同時(shí)考慮用戶在網(wǎng)站端的認(rèn)知映射。

作為項(xiàng)目owner,跟進(jìn)后續(xù)流程的過(guò)程中有幾點(diǎn)經(jīng)驗(yàn)值得highlight:

1. 關(guān)于視覺(jué)適配難

相比于iOS平臺(tái), android硬件廠商眾多,屏幕分辨率五花八門, 且dpi不同,我們這樣做:
(1) 進(jìn)行目標(biāo)用戶群使用手機(jī)比例調(diào)研(可通過(guò)問(wèn)卷投放等方式),選取一個(gè)主流分辨率和目標(biāo)機(jī)(本項(xiàng)目中目標(biāo)機(jī)為htc G7,分辨率480*800) ;
(2) 視覺(jué)設(shè)計(jì)過(guò)程中,實(shí)時(shí)在目標(biāo)機(jī)并定期在其他分辨率手機(jī)上查看實(shí)際效果,并調(diào)整方案;
(3) 規(guī)范點(diǎn)九圖(九宮格)的切片尤為重要。.9.png不但能最大程度低成本、高還原度的適配到android的各個(gè)屏幕,更是設(shè)計(jì)師和開(kāi)發(fā)同學(xué)之間的溝通工具,避免在視覺(jué)-前端這一環(huán)節(jié)的設(shè)計(jì)走樣。

2. 關(guān)于視覺(jué)切片資源文件大

由于功能模塊相對(duì)獨(dú)立的迭代開(kāi)發(fā),造成不同開(kāi)發(fā)同學(xué)對(duì)于切片管理不統(tǒng)一,以至app文件大且運(yùn)行過(guò)程中占用內(nèi)存大,操作流暢度不佳的情況。在UI Check過(guò)程中,優(yōu)化切片資源包,替換掉不規(guī)則漸變和紋理,盡可能復(fù)用樣式,統(tǒng)一.9.png格式。

3. 關(guān)于UI Check

UI Check的目標(biāo)不但是保證UI在開(kāi)發(fā)環(huán)節(jié)的設(shè)計(jì)還原度,更是對(duì)設(shè)計(jì)方案的重要review。尤其手機(jī)操作流程性強(qiáng),過(guò)程更為動(dòng)態(tài),轉(zhuǎn)場(chǎng)動(dòng)畫、hover效果、gesture這些內(nèi)容都需要高保真demo在真實(shí)的測(cè)試下確認(rèn)調(diào)整和再優(yōu)化。

最后,產(chǎn)品更新和體驗(yàn)優(yōu)化是一個(gè)永無(wú)止境的過(guò)程。之后我們除了拓展更多無(wú)線平臺(tái)(windows phone/iPad/…)以及新產(chǎn)品新功能追加,也會(huì)根據(jù)埋點(diǎn)數(shù)據(jù)和一手用研不斷在迭代過(guò)程中同步優(yōu)化體驗(yàn)設(shè)計(jì)。敬請(qǐng)期待!

下面為項(xiàng)目總結(jié)ppt中的部分內(nèi)容,方便大家有個(gè)更加直觀的了解:

阿里巴巴無(wú)線端設(shè)計(jì).005

阿里巴巴無(wú)線端設(shè)計(jì).006
阿里巴巴無(wú)線端設(shè)計(jì).007

阿里巴巴無(wú)線端設(shè)計(jì).009

阿里巴巴無(wú)線端設(shè)計(jì).010
阿里巴巴無(wú)線端設(shè)計(jì).011
阿里巴巴無(wú)線端設(shè)計(jì).012
阿里巴巴無(wú)線端設(shè)計(jì).013
阿里巴巴無(wú)線端設(shè)計(jì).014
阿里巴巴無(wú)線端設(shè)計(jì).015
阿里巴巴無(wú)線端設(shè)計(jì).017
阿里巴巴無(wú)線端設(shè)計(jì).018

阿里巴巴無(wú)線端設(shè)計(jì).019

阿里巴巴無(wú)線端設(shè)計(jì).020

感謝各位看官的時(shí)間,歡迎親們更多的專業(yè)交流~~

源地址:http://www.aliued.cn/2012……e7%bb%93.html

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!