免費(fèi)
設(shè)計(jì)和開(kāi)發(fā)不是相互割裂,而是相輔相成的,視覺(jué)設(shè)計(jì)師需要對(duì)技術(shù)有所了解,才不會(huì)局限在單一的設(shè)計(jì)思維和技法中;同樣的開(kāi)發(fā)工程師也需要有一定的審美能力和感性認(rèn)識(shí),才能開(kāi)發(fā)出擁有愉悅體驗(yàn)的程序。
隨著電商玩法的越來(lái)越多樣化,以及新技術(shù)的不斷涌現(xiàn)和落地,交互、視覺(jué)對(duì)于項(xiàng)目技術(shù)的要求也越來(lái)越高,如何讓設(shè)計(jì)與開(kāi)發(fā)無(wú)縫結(jié)合,完美還原設(shè)計(jì)稿甚至更添畫(huà)龍點(diǎn)睛的效果?這就是作為連接設(shè)計(jì)與開(kāi)發(fā)的橋梁——重構(gòu)工程師,需要思考和解決的問(wèn)題。
IXDC通過(guò)對(duì)京東重構(gòu)工程師黃昊先生的采訪,希望能帶大家了解重構(gòu)對(duì)于設(shè)計(jì)團(tuán)隊(duì)的意義,他們是如何推進(jìn)設(shè)計(jì)與開(kāi)發(fā),如何幫助團(tuán)隊(duì)提升協(xié)作的效率,如何為業(yè)務(wù)賦能的。
Q1 重構(gòu)工程師,一般來(lái)說(shuō)是負(fù)責(zé)一些什么樣的事情?
A:大家對(duì)重構(gòu)工程師可能會(huì)比較陌生,一般來(lái)說(shuō)視覺(jué)設(shè)計(jì)師是直接對(duì)接到前端開(kāi)發(fā)工程師這樣的一個(gè)流程,但是隨著行業(yè)分工越來(lái)越細(xì),重構(gòu)工程師應(yīng)運(yùn)而生,相當(dāng)于就是銜接視覺(jué)與開(kāi)發(fā)之間的一個(gè)盲區(qū)。
視覺(jué)設(shè)計(jì)師可能比較感性,關(guān)注的是好不好看、是不是美觀這樣的問(wèn)題,但是程序員是理想思維,考慮的是業(yè)務(wù)的復(fù)用性或者程序的便捷性,兩者之間自然會(huì)存在一些矛盾。
重構(gòu)工程師就需要去調(diào)和他們之間的矛盾,既要考慮視覺(jué)實(shí)現(xiàn)的完美性、視覺(jué)表達(dá)的豐富與層次感,也要考慮整個(gè)代碼可行性方面的內(nèi)容,相當(dāng)于左右橫跳,既有視覺(jué)方面也有程序方面的工作。
日常工作中,與視覺(jué)進(jìn)行對(duì)接的話,更多的是溝通某個(gè)效果能不能實(shí)現(xiàn),或者某個(gè)設(shè)計(jì)在代碼運(yùn)行上會(huì)不會(huì)有問(wèn)題,還有就是整個(gè)技術(shù)的可行性是否存在問(wèn)題,包括對(duì)一些新技術(shù)的需求。
比如說(shuō)設(shè)計(jì)師想做一些骨骼或者人物的動(dòng)畫(huà),這就是需要我們?nèi)ヮA(yù)演的,我們要去沉淀一些和視覺(jué)相關(guān)的技術(shù)架構(gòu)。
然后,也需要做普通程序員的工作,就是對(duì)代碼進(jìn)行一些架構(gòu)或者做一些可復(fù)用組件的開(kāi)發(fā),還有對(duì)代碼效率、運(yùn)行流暢度進(jìn)行優(yōu)化,這些基本上都是我們?cè)陂_(kāi)發(fā)方面的工作。
Q2 在您看來(lái),怎樣才能成為一名優(yōu)秀的重構(gòu)工程師?
A:因?yàn)橹貥?gòu)工程師是在視覺(jué)和開(kāi)發(fā)之間左右搖擺的職能,所以最重要的是前后左右都要兼顧。
在項(xiàng)目前期,我們要和視覺(jué)一起去制定方案,視覺(jué)需要做一個(gè)怎樣的識(shí)別效果,我們要給到一個(gè)基本的評(píng)估,判斷大體的效果能否做出來(lái),然后根據(jù)視覺(jué)的草圖去生成整個(gè)的視覺(jué)印象。
在項(xiàng)目中期,視覺(jué)已經(jīng)出了一些具體的視覺(jué)稿了,重構(gòu)也就可以更具象、更接近最終成品的對(duì)整個(gè)視覺(jué)效果有一個(gè)感知,這個(gè)時(shí)候我們就可以更加準(zhǔn)確的去評(píng)估,甚至可以真正的去把這個(gè)代碼跑起來(lái)。
到了項(xiàng)目的后期,我們需要去校驗(yàn)完成的產(chǎn)品效果,我們把成品給到視覺(jué),看看是不是和他前期的方案存在偏差,然后我們?nèi)ピu(píng)估,這個(gè)產(chǎn)品是否是滿足它的預(yù)期的。
在我的理解中,一個(gè)優(yōu)秀的重構(gòu)工程師,他必須能在這個(gè)復(fù)雜的工作流程中游刃有余。哪怕他已經(jīng)有一定的經(jīng)驗(yàn),也勢(shì)必會(huì)遇到一些問(wèn)題和瓶頸,譬如說(shuō)視覺(jué)制作的流暢性,視覺(jué)和代碼實(shí)現(xiàn)之間的矛盾等等。
通常來(lái)說(shuō),如果希望有一個(gè)比較好的視覺(jué)效果,或者比較豐富的一個(gè)視覺(jué)效果,整個(gè)視覺(jué)實(shí)現(xiàn)就會(huì)非常復(fù)雜,最終的流暢性就會(huì)越差,代碼的體量和復(fù)雜度也越高。
一個(gè)好的重構(gòu)工程師,就需要有足夠的能力,在有限的開(kāi)發(fā)時(shí)間內(nèi)去平衡好這樣的一些事情。如果他能夠去拿捏好這個(gè)度的話,就已經(jīng)是一個(gè)飛躍,已經(jīng)是上了一個(gè)臺(tái)階的能力范圍。
Q3 您在互動(dòng)營(yíng)銷設(shè)計(jì)與開(kāi)發(fā)的過(guò)程中遇到過(guò)什么難點(diǎn)嗎?
A:因?yàn)槲覀冋麄€(gè)團(tuán)隊(duì)是負(fù)責(zé)營(yíng)銷互動(dòng)的,問(wèn)題最主要就是需要考慮整個(gè)項(xiàng)目的工期,項(xiàng)目是不能往后去延期的,所以在時(shí)間節(jié)點(diǎn)把控這方面要求非常高。
營(yíng)銷互動(dòng)不像一些長(zhǎng)期在線的互動(dòng),長(zhǎng)期在線的互動(dòng)可以隨時(shí)上線,但營(yíng)銷互動(dòng)是有時(shí)間點(diǎn)限制的,譬如“雙11”、“6.18”等活動(dòng),錯(cuò)過(guò)了這個(gè)時(shí)間點(diǎn)就是錯(cuò)過(guò)了,延期是絕對(duì)不允許的。
之前“年貨節(jié)”的時(shí)候,我們需要做一個(gè)“炸年獸”的主題活動(dòng),這里涉及到一個(gè)動(dòng)效的設(shè)計(jì),就是年獸要有一個(gè)相互推搡、能表現(xiàn)出年獸的活潑的動(dòng)作。
一開(kāi)始視覺(jué)是希望由他們來(lái)主導(dǎo),大體的設(shè)計(jì)就是兩個(gè)年獸互相推搡,表現(xiàn)出正在PK的狀態(tài),然后我們用一個(gè)序列幀去進(jìn)行了實(shí)現(xiàn)。
這個(gè)效果出來(lái)以后,相對(duì)來(lái)說(shuō)還是比較生硬的,因?yàn)橛玫氖切蛄袔募夹g(shù),幀數(shù)比較多的話,整張圖的大小就會(huì)增加,然后就會(huì)導(dǎo)致這張圖加載的比較慢,流暢性就會(huì)打一點(diǎn)折扣。
如果要保證設(shè)計(jì)效果,同時(shí)又要保持流暢的話,這里就有一個(gè)矛盾的點(diǎn),這就需要我們?nèi)テ胶狻?/strong>于是我們就嘗試通過(guò)代碼來(lái)實(shí)現(xiàn),就是在代碼里去寫(xiě)這個(gè)動(dòng)作。
這樣的話,就只需要視覺(jué)給到一個(gè)大體的設(shè)計(jì),動(dòng)作是什么樣的,把demo繪制出來(lái),然后就完全由前端代碼去完成實(shí)現(xiàn),這樣就會(huì)比較流暢,因?yàn)樗前凑诊@示器的刷新率,一幀幀的去繪制的動(dòng)作。
另外,我們還要對(duì)年獸的骨骼進(jìn)行拆解,你可以把年獸理解成一個(gè)人的形態(tài),就需要把手、身體、頭、四肢全部“拆”出來(lái),然后去做一些形變,比方說(shuō)旋轉(zhuǎn)或者“推”的時(shí)候手部的橫向縮放的效果等等,這樣手腳什么的就能動(dòng)起來(lái),才能達(dá)到年獸相互推搡的形態(tài)。
因?yàn)槟戢F的關(guān)節(jié)會(huì)非常多,這里面就包含了特別多的動(dòng)畫(huà)樣式,全部都是純前端的去實(shí)現(xiàn)的,所以用前端的方式去解決這樣的一個(gè)方案,也完全釋放了我們之前在前端動(dòng)畫(huà)樣式上的所有積累。
并且,還需要在項(xiàng)目要求的時(shí)間節(jié)點(diǎn),趕著點(diǎn)的去把它給做出來(lái),對(duì)我們來(lái)說(shuō),這也是對(duì)我們綜合能力的一個(gè)考驗(yàn),基本上就是付諸了全力這樣一個(gè)感覺(jué)。
Q4 您是如何理解京東營(yíng)銷業(yè)務(wù)的特點(diǎn)并做出響應(yīng)的?
A:我理解的話,它會(huì)特別注重商家的話語(yǔ)權(quán)。通常來(lái)說(shuō),商家或者負(fù)責(zé)對(duì)接商家的運(yùn)營(yíng),會(huì)給到我們一些需求,需要我們站在商家的角度去為他們謀劃最大的利益。
然后我們這邊的話,就是盡量去滿足,去實(shí)現(xiàn)他們想要的效果,包括我們目前所做的一些技術(shù)棧,也都是為了面向商家、服務(wù)商家。
因?yàn)?strong>商家不了解項(xiàng)目的復(fù)雜性,也不知道開(kāi)發(fā)需要多少時(shí)間,所以他們不太會(huì)去考慮時(shí)間的問(wèn)題,譬如說(shuō)他就只給你一個(gè)月的時(shí)間,那這一個(gè)月里我們就要把所有東西全部都做完。
為了應(yīng)對(duì)這樣的情況,我們就把很多可復(fù)用的東西都給它組件化,包括在組件設(shè)計(jì)的時(shí)候,盡量去融入各種各樣的參數(shù),調(diào)整這些參數(shù)就能做出更多的效果,以響應(yīng)商家的“奇奇怪怪”的需求。
這樣,需要幫商家設(shè)計(jì)開(kāi)發(fā)的時(shí)候,我們就可以直接復(fù)用這些組件,然后花時(shí)間去做一些特殊的設(shè)計(jì),這樣就能減少整個(gè)開(kāi)發(fā)的時(shí)間。
Q5 現(xiàn)在技術(shù)發(fā)展非常迅猛,給您的工作帶來(lái)哪些機(jī)遇和挑戰(zhàn)?
A:以前的電商行業(yè),它所需要制作的內(nèi)容,對(duì)設(shè)計(jì)人員的制作水平要求,相對(duì)來(lái)說(shuō)都是比較簡(jiǎn)單的,譬如當(dāng)時(shí)的電商會(huì)場(chǎng),通常來(lái)說(shuō)就是會(huì)有一些商品,選擇購(gòu)買(mǎi)加入購(gòu)物車(chē),復(fù)雜一些的玩法,可能就是領(lǐng)取優(yōu)惠券,然后在購(gòu)買(mǎi)的時(shí)候直接使用。
伴隨著整個(gè)行業(yè)的發(fā)展,現(xiàn)在的電商活動(dòng)越來(lái)越多的偏向于游戲的性質(zhì),它的游戲性會(huì)非常強(qiáng)。譬如“紅包雨”,就是最初級(jí)的一個(gè)游戲模版,紅包挨個(gè)往下落,然后用戶在屏幕上點(diǎn)點(diǎn)點(diǎn)。
然后到現(xiàn)在,游戲變得越來(lái)越復(fù)雜,像我們的“炸年獸”,你需要去培養(yǎng)年獸,然后等級(jí)越來(lái)越高,可以用年獸的等級(jí)去和其他用戶PK,PK完以后還可以獲得戰(zhàn)隊(duì)的紅包等等,還有年獸的一些升級(jí)的操作,整個(gè)游戲的復(fù)雜性越來(lái)越強(qiáng)。
整體要求的提高,對(duì)我們來(lái)說(shuō),就意味著能力需要去提升。不管是個(gè)人的設(shè)計(jì)能力、開(kāi)發(fā)能力,還是團(tuán)隊(duì)協(xié)作的效率,包括一些協(xié)同工作的工具等等。
像是以前的“紅包”活動(dòng),我們可能一個(gè)人一周左右就能完成整個(gè)的開(kāi)發(fā),但是到了“炸年獸”這樣的活動(dòng),就需要一個(gè)團(tuán)隊(duì)一起去完成,可能會(huì)有重構(gòu)團(tuán)隊(duì)的四五個(gè)人,共同開(kāi)發(fā)一個(gè)月來(lái)完成。
這里就牽涉到整個(gè)團(tuán)隊(duì)之間的協(xié)作問(wèn)題,譬如整個(gè)代碼的架構(gòu)需要能夠解耦,就是我和你的代碼不能有一些吻合的地方,這樣我進(jìn)行改動(dòng)的時(shí)候就不會(huì)影響到你,然后我們通過(guò)提前溝通好的一些形式,就是代碼的方式或者對(duì)象去進(jìn)行串聯(lián)。
未來(lái)我們這個(gè)行業(yè)會(huì)越來(lái)越偏向于一個(gè)復(fù)雜的形態(tài),我理解的話,可能會(huì)越來(lái)越偏向于游戲行業(yè)的形態(tài),可能會(huì)引入一些算法或者AI方面的一些內(nèi)容,還有對(duì)于圖形處理的一些未來(lái)的趨勢(shì)。
最近的這種趨勢(shì)或者說(shuō)潮流,也在不斷督促我們對(duì)自己的能力有一個(gè)提升,促使我們更多的去完善自身。
免費(fèi)
0人打賞
機(jī)構(gòu)簡(jiǎn)介
畢業(yè)于復(fù)旦大學(xué),目前在京東營(yíng)銷設(shè)計(jì)部擔(dān)任重構(gòu)工程師,負(fù)責(zé)618、雙11、年貨節(jié)等大促活動(dòng)中重量級(jí)互動(dòng)及會(huì)場(chǎng)的開(kāi)發(fā)。
多年互聯(lián)網(wǎng)行業(yè)前端WEB程序開(kāi)發(fā)工作經(jīng)驗(yàn),曾主導(dǎo)社區(qū)網(wǎng)站MiniSocials的開(kāi)發(fā),參與問(wèn)答網(wǎng)站啊煩題的視覺(jué)設(shè)計(jì)和前端開(kāi)發(fā),致力于前端產(chǎn)品的組件化工作。
這里擁有全球領(lǐng)先的用戶體驗(yàn)創(chuàng)新知識(shí)。全網(wǎng)獨(dú)家,更權(quán)威,更全面。
每一年,來(lái)自全球領(lǐng)先企業(yè)的專家、CEO們都給我們分享最成功的案例、方法與前瞻觀點(diǎn)。幫助數(shù)以萬(wàn)計(jì)的從業(yè)者們解決產(chǎn)品、設(shè)計(jì)、運(yùn)營(yíng)、技術(shù)、管理等5大內(nèi)容類別的困惑與瓶頸。在這里,你可以觀看500+國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)高清權(quán)威視頻課程。
IXDC帶你建立全球視野與能力,解決專業(yè)困惑與職場(chǎng)瓶頸,足不出戶汲取讓你成長(zhǎng)的海量知識(shí)。聯(lián)系在線客服:18826260168