這才叫改版:阿里巴巴資訊站升級(jí)項(xiàng)目總結(jié)

0 評(píng)論 2654 瀏覽 4 收藏 15 分鐘

序:

2年前,剛?cè)肼毎⒗镞€沒(méi)轉(zhuǎn)正就有幸參與了資訊改版項(xiàng)目,那可是我的產(chǎn)品處女秀,出演視覺(jué)設(shè)計(jì)師一角,當(dāng)時(shí)拿到手的就已經(jīng)是一份未上色的黑白稿以及一份飛機(jī)稿。不知道監(jiān)制是誰(shuí),也不知道導(dǎo)演是誰(shuí),更不知道其他演員是誰(shuí),老板說(shuō)交給我了,就糊里糊涂的出演了。跌跌撞撞演出7.8個(gè)版本就拿去讓需求方選了,最后也是蠻順利的選了一版。然后再優(yōu)化再改改,也在那一周每天熬到個(gè)11點(diǎn),最后在約定時(shí)間之前,交給負(fù)責(zé)后期的前端同學(xué),然后,然后就上線了。。。當(dāng)時(shí)的感受是:原來(lái)產(chǎn)品設(shè)計(jì)就是這樣的啊。。上線之后,不盡人意,很多東西和我想象的還是有點(diǎn)距離。

2個(gè)月前,也滿了2周年,我似乎發(fā)現(xiàn)我與“2”這個(gè)數(shù)字非常有緣,回頭在看看,原來(lái)我從來(lái)都不曾離開(kāi)社區(qū)。這次我又接到了資訊升級(jí)的任務(wù),意料之中,經(jīng)過(guò)2年的滾打,我早想改他了,礙于“沒(méi)有資源”,幸好行巔有眼開(kāi)了金口,要求資訊要更專業(yè)更海量更權(quán)威!于是乎,我就又一次出演了資訊升級(jí)項(xiàng)目!這次的出演真是感觸頗深了,雖然仍然是出演視覺(jué)設(shè)計(jì)師一角,但是要讓最后的作品能接近完美的出現(xiàn)在眾人面前,光只做好自己的本職是完全不夠的,當(dāng)然在這個(gè)過(guò)程當(dāng)中,如果你也遇到了像小帥和狒狒這種出色的監(jiān)制,也是可以省去非常多的時(shí)間,比如我可以不用花太多時(shí)間去糾結(jié)數(shù)據(jù)問(wèn)題,打點(diǎn)問(wèn)題,也不用想著如何去重復(fù)解釋這里為什么要這樣演的問(wèn)題等等…盡管如此,也不代表我出了做好視覺(jué),其他都不用管了,否則,視覺(jué)設(shè)計(jì)師就永遠(yuǎn)都是美工了:不想做監(jiān)制的演員都不是好導(dǎo)演!不想做PM的體驗(yàn)設(shè)計(jì)師不是好產(chǎn)品經(jīng)理!被復(fù)制了無(wú)數(shù)版本的名言用在很多地方都是很有效的。也為了更豐富自己的歷練和對(duì)項(xiàng)目的了解,很多事仍然要親力親為,盡管最后仍然有很多細(xì)小的問(wèn)題暴露出來(lái),但是回頭想想,如果什么都不做,最后暴露出來(lái)的問(wèn)題會(huì)更多,雖然沒(méi)有做到心目中的完美,但是至少離“完美”又近了一步。

項(xiàng)目總流程:

阿里巴巴資訊站升級(jí)項(xiàng)目總結(jié)

*黃點(diǎn)所點(diǎn)之處都是我在這個(gè)項(xiàng)目流程中參與的環(huán)節(jié)。

①體驗(yàn)關(guān)鍵指標(biāo):這里是項(xiàng)目前期小帥的專業(yè)方法論提及的5個(gè)維度,聽(tīng)過(guò)分享的同學(xué)應(yīng)該都知道H-E-A-R-T:

阿里巴巴資訊站升級(jí)項(xiàng)目總結(jié)

②六度分析:這里提到的六度分析和人與人之間關(guān)系的六度關(guān)系不一樣,簡(jiǎn)單先解釋一下這里的六度分析是一種分布式、一體化、幫助使用者對(duì)問(wèn)題進(jìn)行系統(tǒng)化分析的思考方式。

阿里巴巴資訊站升級(jí)項(xiàng)目總結(jié)

這里做簡(jiǎn)單解釋,具體詳情請(qǐng)關(guān)注李龍的分享或者咨詢本人,聯(lián)系旺旺:lilong4174

項(xiàng)目前期小帥非常給力,取了資訊的數(shù)據(jù)進(jìn)行分析并分享給PD,運(yùn)營(yíng)以及前端,為之后項(xiàng)目進(jìn)行以及產(chǎn)品的規(guī)劃打了扎實(shí)的基礎(chǔ)。用戶調(diào)研這里分了2部分,一部分是和小帥一起參與的對(duì)資訊資深用戶進(jìn)行的訪談,另外一個(gè)部分對(duì)我針對(duì)專業(yè)人士(公司內(nèi)部人員:老板,PD,運(yùn)營(yíng),設(shè)計(jì)師,開(kāi)發(fā))進(jìn)行的簡(jiǎn)單訪問(wèn)。這 2部分人員的調(diào)研加起來(lái)就產(chǎn)生了之后的信息模塊推導(dǎo)而出的信息架構(gòu)(交互稿)和最后情緒版分析產(chǎn)生的最終稿。那作為整個(gè)項(xiàng)目的主演視覺(jué)設(shè)計(jì)師,在這個(gè)項(xiàng)目總結(jié)中具體就說(shuō)說(shuō)對(duì)于情緒版分析到視覺(jué)稿的產(chǎn)出過(guò)程,后期前端跟進(jìn)注意事項(xiàng)以及回顧項(xiàng)目最初需要考慮的問(wèn)題三方面情況。好,文章過(guò)半,接下來(lái)才真走入重點(diǎn)…

一:情緒版分析到視覺(jué)稿的產(chǎn)出過(guò)程

情緒版:

關(guān)于情緒版的簡(jiǎn)單步驟:體驗(yàn)關(guān)鍵詞(來(lái)源于以上提及用戶調(diào)研的2部分)→關(guān)鍵詞衍生(物化,視覺(jué)以及心境的映射)→根據(jù)衍生關(guān)鍵詞搜索到的圖片→圖片色塊→生成情緒版(詳細(xì)可見(jiàn)資訊升級(jí)情緒版查看地址:\\nas\Alibaba\B2B\項(xiàng)目組\中文站UED\#應(yīng)用設(shè)計(jì)組#\資訊升級(jí)(slide貌似需要翻墻了,就用咱們的服務(wù)器吧))

阿里巴巴資訊站升級(jí)項(xiàng)目總結(jié)

結(jié)合整個(gè)設(shè)計(jì)經(jīng)驗(yàn)來(lái)看:其實(shí)對(duì)于產(chǎn)品本身,尤其是視覺(jué)設(shè)計(jì)師,在要設(shè)計(jì)之前,設(shè)計(jì)師就應(yīng)該在腦海中有一個(gè)成形的視覺(jué)幻影,而情緒版正是為了這種視覺(jué)幻影做的一個(gè)很好的論證的方法,也為了視覺(jué)評(píng)審的時(shí)候?yàn)檎f(shuō)服老板和觀點(diǎn)可能和你不太一致的人找一個(gè)比較有效的理由。當(dāng)然無(wú)法產(chǎn)生感覺(jué)的時(shí)候直接用情緒版也是一個(gè)非常有效的方法了。但是切記,沒(méi)有事情是絕對(duì)的!尤其是像我們這種所謂“喜歡暖色調(diào)的中國(guó)人”,或許設(shè)計(jì)一個(gè)藍(lán)色調(diào)或者冷色調(diào)的產(chǎn)品需要下定很大的決心以及能說(shuō)服老板的氣場(chǎng)!而我雖然下定了很大的決心,可是深知?dú)鈭?chǎng)不夠強(qiáng)大,因此我也為自己留了一條后路。。。

競(jìng)品分析:

在情緒版的最后面加了一個(gè)畫面,如下:

阿里巴巴資訊站升級(jí)項(xiàng)目總結(jié)

為了避免老板最后強(qiáng)行要用暖色調(diào)的版本,導(dǎo)致情緒版的論證方法部分失效…事實(shí)證明,這樣做并非不科學(xué),因?yàn)槔习宓拇_提了一個(gè)坑爹的要求:“在做一版暖色調(diào)的吧。。。”“嗯,那好吧。?!弊詈蟮慕Y(jié)局可想而知。資訊嘛,當(dāng)然還是要遵循市場(chǎng)規(guī)律的,市場(chǎng)規(guī)律從何而來(lái),競(jìng)品分析!這絕對(duì)是能和情緒版一起稱作“答辯雙雄”的證詞!競(jìng)品分析可以是印證情緒版分析的最后一步,因此最后還是采用了冷色調(diào)的視覺(jué)版本,也總算讓我如釋重負(fù)呼了一口氣。。也總算沒(méi)有讓我的情緒版變成坑爹的方法論。很多人可能會(huì)在競(jìng)品分析的時(shí)候不知道選擇哪些維度,其實(shí)可以根據(jù)你要設(shè)計(jì)的設(shè)計(jì)稿中去抽取,例如:主色調(diào),圖片占比,是否有背景色,模塊是否有邊框,懸停色,大段落文字色等等,可以用于作為DPL的部分都可是是競(jìng)品分析的關(guān)鍵要素。同理,部分提取要素即使是大部分競(jìng)品所具有的,有時(shí)候老板就是希望某一點(diǎn)不一樣,這種情況也是會(huì)發(fā)生的,在不破壞整體效果太多的情況下,那就按老板說(shuō)的去做些嘗試吧,而這種特殊情況有一定的風(fēng)向,風(fēng)險(xiǎn)不在于是否會(huì)破壞視覺(jué)效果,而是和前端同學(xué)的合作時(shí)間點(diǎn),進(jìn)入下部分。

二:后期前端跟進(jìn)注意事項(xiàng)

小插曲:第一部分的尾聲說(shuō)到的,老板會(huì)對(duì)于某個(gè)產(chǎn)品有些特殊要求,比如在本次過(guò)程中遇到的,其他N多次確認(rèn)都不算,最后已經(jīng)確認(rèn)為最終稿的某個(gè)月黑風(fēng)高的晚上,旺旺一跳,老板說(shuō):其他看的都挺不錯(cuò),看了好久,字體顏色有點(diǎn)淺不夠聚焦,能否把#444改成#333,當(dāng)即虎軀一震,脫口而出:最終稿已經(jīng)確認(rèn)了啊,進(jìn)入前端了,在改不太好啊,老板說(shuō)沒(méi)關(guān)系啊,改個(gè)色值很快的,于是我就只好硬著頭皮找前端改了,第二天,老板又覺(jué)得鏈接色有點(diǎn)問(wèn)題,太灰了啊,要改鏈接色,當(dāng)時(shí)心里就嘀咕:尼瑪就不能一次性說(shuō)完嘛,最終稿確認(rèn)前怎么都不說(shuō)啊。。當(dāng)然沒(méi)說(shuō)出口,于是灰溜溜的找前端又想改啦,前端同學(xué)就不開(kāi)心啦,就說(shuō)你需求變更啊,幾次了啊,不干啊,找PD啊,不能按時(shí)上線你負(fù)責(zé)嗎,過(guò)程很揪心你懂嗎,其實(shí)我能理解前端同學(xué)改一個(gè)色值是小事,過(guò)程有些還原度不夠的又補(bǔ)標(biāo)注重新改,某個(gè)小點(diǎn)改了又怕改了之后老板說(shuō)要改回來(lái),于是自己反省了一會(huì)終于經(jīng)過(guò)不懈努力以及堅(jiān)持說(shuō)服了老板不改這里的鏈接色了,即時(shí)要改也等項(xiàng)目發(fā)布之后提統(tǒng)一需求了。

總結(jié)幾個(gè)點(diǎn)需要在進(jìn)入前端之前就要確認(rèn)好的:

標(biāo)注:尤其是統(tǒng)一輸出的標(biāo)注要詳細(xì),否則之后還原度不夠責(zé)任還是你的(有幾個(gè)部分要謹(jǐn)慎:導(dǎo)航,面包屑,模塊可編輯區(qū)域,字體顏色和大小使用情況,統(tǒng)一類型模塊間距)

按鈕:狀態(tài)必須在最終稿給前端時(shí)候就要補(bǔ)全,別想著前端會(huì)來(lái)問(wèn)你要,自己先準(zhǔn)備好放頁(yè)面上吧

懸停:雖然說(shuō)懸停是個(gè)統(tǒng)一規(guī)范,但是務(wù)必要記住,導(dǎo)航是整個(gè)頁(yè)面特殊的存在也是使頁(yè)面與頁(yè)面之間流通的樞紐,有背景色的導(dǎo)航特別要注意,懸停色千萬(wàn)別說(shuō)全頁(yè)面統(tǒng)一,導(dǎo)航的懸停只加下劃線就夠了。

特殊區(qū)域:特殊情況必須另做說(shuō)明,要詳細(xì)說(shuō)明,否則前端就按你的統(tǒng)一規(guī)范做了。及時(shí)視覺(jué)稿上做了效果可能也未必會(huì)被發(fā)現(xiàn),還是需要注解。

日常跟進(jìn):每天抽至少2次去看看前端的設(shè)計(jì)情況,還原度問(wèn)題可以當(dāng)場(chǎng)解決,省去一些麻煩。

三:項(xiàng)目最初需要考慮的問(wèn)題

如果是新項(xiàng)目,這個(gè)不必太擔(dān)心,產(chǎn)品經(jīng)理在建立需求文檔就會(huì)規(guī)劃好這系列問(wèn)題。項(xiàng)目升級(jí)或改版,這樣的問(wèn)題會(huì)相對(duì)較多,有很多升級(jí)或者改版都不是項(xiàng)目原始創(chuàng)建者發(fā)起或者推進(jìn)的,因此在信息的傳遞上會(huì)出現(xiàn)一些偏差。那要注意點(diǎn)幾個(gè)方面如下:

廣告位:在改版之前需要弄清楚整個(gè)頁(yè)面中哪些位置是本部門的,哪些更新權(quán)限是給別的部門的,這些事先一定要在設(shè)計(jì)之前就做好功課,否則會(huì)導(dǎo)致項(xiàng)目上線延期或者上線這塊位置與視覺(jué)稿不一致,例如本次資訊改版中首頁(yè)與detail都有部分廣告位是屬于北京雅虎負(fù)責(zé)的,tanx廣告位,還有一塊屬于如影隨形廣告位,這些位置有時(shí)候不是時(shí)時(shí)刻刻都展示出來(lái),有時(shí)候只有某個(gè)月的幾天時(shí)間展示,因此很容易在改版設(shè)計(jì)的時(shí)候忽略?;蛘邥?huì)誤以為是屬于本產(chǎn)品所屬部門負(fù)責(zé)。那目前的解決方案就是在簽約出去的合同之前的廣告位暫時(shí)按設(shè)計(jì)尺寸壓縮或拉長(zhǎng)處理,暫時(shí)盡可能保持效果不要相差太大,等合同結(jié)束后改成設(shè)計(jì)稿的最終尺寸并及時(shí)給到雅虎負(fù)責(zé)人以后的新尺寸。

合作位:資訊detail當(dāng)中有部分位置給了P4P,同理,由于頁(yè)面這塊位置是直接嵌入P4P的代碼,沒(méi)有提前一定時(shí)間知會(huì)P4P我們需要升級(jí)換模板樣式,導(dǎo)致上線之后這塊位置的模塊樣式和統(tǒng)一樣式相差甚遠(yuǎn),也實(shí)在是破壞了氣氛,雖然有些慘不忍睹,引以為鑒,貼出來(lái)給大家過(guò)目,目前根據(jù)P4P部門的資源排期要月底才能完成新模板的匹配。

阿里巴巴資訊站升級(jí)項(xiàng)目總結(jié)

*代碼:這點(diǎn)不屬于設(shè)計(jì)師前瞻性的范疇內(nèi),但是過(guò)程中遇到了覺(jué)得挺有意思,一個(gè)產(chǎn)品問(wèn)世了,總是會(huì)和seo掛上關(guān)系,流量是王道啊,seo權(quán)重比有部分會(huì)根據(jù)代碼的書寫來(lái)判斷,前端同學(xué)之前采用了比較簡(jiǎn)便的代碼方式后來(lái)相關(guān)seo負(fù)責(zé)的同學(xué)做了小分享,前端同學(xué)把代碼改成適于seo的方式,當(dāng)然前臺(tái)看起來(lái)是無(wú)差別的。在這個(gè)過(guò)程中把主動(dòng)因素都考慮進(jìn)去才能讓產(chǎn)品更優(yōu)質(zhì)。

還有其他注意事項(xiàng)的歡迎補(bǔ)充,以上所述都是本人在本次項(xiàng)目中演繹角色的體驗(yàn)和感受。

總結(jié):請(qǐng)回到文章頂部,詳見(jiàn)“序”。

本文作者:阿里巴巴李龍

更多精彩內(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ā)揮!