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