設(shè)計(jì)和開發(fā)不是相互割裂，而是相輔相成的，視覺設(shè)計(jì)師需要對技術(shù)有所了解，才不會局限在單一的設(shè)計(jì)思維和技法中；同樣的開發(fā)工程師也需要有一定的審美能力和感性認(rèn)識，才能開發(fā)出擁有愉悅體驗(yàn)的程序。

隨著電商玩法的越來越多樣化，以及新技術(shù)的不斷涌現(xiàn)和落地，交互、視覺對于項(xiàng)目技術(shù)的要求也越來越高，如何讓設(shè)計(jì)與開發(fā)無縫結(jié)合，完美還原設(shè)計(jì)稿甚至更添畫龍點(diǎn)睛的效果？這就是作為連接設(shè)計(jì)與開發(fā)的橋梁——重構(gòu)工程師，需要思考和解決的問題。

IXDC通過對京東重構(gòu)工程師黃昊先生的采訪，希望能帶大家了解重構(gòu)對于設(shè)計(jì)團(tuán)隊(duì)的意義，他們是如何推進(jìn)設(shè)計(jì)與開發(fā)，如何幫助團(tuán)隊(duì)提升協(xié)作的效率，如何為業(yè)務(wù)賦能的。

Q1 重構(gòu)工程師，一般來說是負(fù)責(zé)一些什么樣的事情？

A：大家對重構(gòu)工程師可能會比較陌生，一般來說視覺設(shè)計(jì)師是直接對接到前端開發(fā)工程師這樣的一個流程，但是隨著行業(yè)分工越來越細(xì)，重構(gòu)工程師應(yīng)運(yùn)而生，相當(dāng)于就是銜接視覺與開發(fā)之間的一個盲區(qū)。

視覺設(shè)計(jì)師可能比較感性，關(guān)注的是好不好看、是不是美觀這樣的問題，但是程序員是理想思維，考慮的是業(yè)務(wù)的復(fù)用性或者程序的便捷性，兩者之間自然會存在一些矛盾。

重構(gòu)工程師就需要去調(diào)和他們之間的矛盾，既要考慮視覺實(shí)現(xiàn)的完美性、視覺表達(dá)的豐富與層次感，也要考慮整個代碼可行性方面的內(nèi)容，相當(dāng)于左右橫跳，既有視覺方面也有程序方面的工作。

日常工作中，與視覺進(jìn)行對接的話，更多的是溝通某個效果能不能實(shí)現(xiàn)，或者某個設(shè)計(jì)在代碼運(yùn)行上會不會有問題，還有就是整個技術(shù)的可行性是否存在問題，包括對一些新技術(shù)的需求。

比如說設(shè)計(jì)師想做一些骨骼或者人物的動畫，這就是需要我們?nèi)ヮA(yù)演的，我們要去沉淀一些和視覺相關(guān)的技術(shù)架構(gòu)。

然后，也需要做普通程序員的工作，就是對代碼進(jìn)行一些架構(gòu)或者做一些可復(fù)用組件的開發(fā)，還有對代碼效率、運(yùn)行流暢度進(jìn)行優(yōu)化，這些基本上都是我們在開發(fā)方面的工作。

Q2 在您看來，怎樣才能成為一名優(yōu)秀的重構(gòu)工程師？

A：因?yàn)橹貥?gòu)工程師是在視覺和開發(fā)之間左右搖擺的職能，所以最重要的是前后左右都要兼顧。

在項(xiàng)目前期，我們要和視覺一起去制定方案，視覺需要做一個怎樣的識別效果，我們要給到一個基本的評估，判斷大體的效果能否做出來，然后根據(jù)視覺的草圖去生成整個的視覺印象。

在項(xiàng)目中期，視覺已經(jīng)出了一些具體的視覺稿了，重構(gòu)也就可以更具象、更接近最終成品的對整個視覺效果有一個感知，這個時候我們就可以更加準(zhǔn)確的去評估，甚至可以真正的去把這個代碼跑起來。

到了項(xiàng)目的后期，我們需要去校驗(yàn)完成的產(chǎn)品效果，我們把成品給到視覺，看看是不是和他前期的方案存在偏差，然后我們?nèi)ピu估，這個產(chǎn)品是否是滿足它的預(yù)期的。

在我的理解中，一個優(yōu)秀的重構(gòu)工程師，他必須能在這個復(fù)雜的工作流程中游刃有余。哪怕他已經(jīng)有一定的經(jīng)驗(yàn)，也勢必會遇到一些問題和瓶頸，譬如說視覺制作的流暢性，視覺和代碼實(shí)現(xiàn)之間的矛盾等等。

通常來說，如果希望有一個比較好的視覺效果，或者比較豐富的一個視覺效果，整個視覺實(shí)現(xiàn)就會非常復(fù)雜，最終的流暢性就會越差，代碼的體量和復(fù)雜度也越高。

一個好的重構(gòu)工程師，就需要有足夠的能力，在有限的開發(fā)時間內(nèi)去平衡好這樣的一些事情。如果他能夠去拿捏好這個度的話，就已經(jīng)是一個飛躍，已經(jīng)是上了一個臺階的能力范圍。

Q3 您在互動營銷設(shè)計(jì)與開發(fā)的過程中遇到過什么難點(diǎn)嗎？

A：因?yàn)槲覀冋麄€團(tuán)隊(duì)是負(fù)責(zé)營銷互動的，問題最主要就是需要考慮整個項(xiàng)目的工期，項(xiàng)目是不能往后去延期的，所以在時間節(jié)點(diǎn)把控這方面要求非常高。

營銷互動不像一些長期在線的互動，長期在線的互動可以隨時上線，但營銷互動是有時間點(diǎn)限制的，譬如“雙11”、“6.18”等活動，錯過了這個時間點(diǎn)就是錯過了，延期是絕對不允許的。

之前“年貨節(jié)”的時候，我們需要做一個“炸年獸”的主題活動，這里涉及到一個動效的設(shè)計(jì)，就是年獸要有一個相互推搡、能表現(xiàn)出年獸的活潑的動作。

一開始視覺是希望由他們來主導(dǎo)，大體的設(shè)計(jì)就是兩個年獸互相推搡，表現(xiàn)出正在PK的狀態(tài)，然后我們用一個序列幀去進(jìn)行了實(shí)現(xiàn)。

這個效果出來以后，相對來說還是比較生硬的，因?yàn)橛玫氖切蛄袔募夹g(shù)，幀數(shù)比較多的話，整張圖的大小就會增加，然后就會導(dǎo)致這張圖加載的比較慢，流暢性就會打一點(diǎn)折扣。

如果要保證設(shè)計(jì)效果，同時又要保持流暢的話，這里就有一個矛盾的點(diǎn)，這就需要我們?nèi)テ胶狻?/strong>于是我們就嘗試通過代碼來實(shí)現(xiàn)，就是在代碼里去寫這個動作。

這樣的話，就只需要視覺給到一個大體的設(shè)計(jì)，動作是什么樣的，把demo繪制出來，然后就完全由前端代碼去完成實(shí)現(xiàn)，這樣就會比較流暢，因?yàn)樗前凑诊@示器的刷新率，一幀幀的去繪制的動作。

另外，我們還要對年獸的骨骼進(jìn)行拆解，你可以把年獸理解成一個人的形態(tài)，就需要把手、身體、頭、四肢全部“拆”出來，然后去做一些形變，比方說旋轉(zhuǎn)或者“推”的時候手部的橫向縮放的效果等等，這樣手腳什么的就能動起來，才能達(dá)到年獸相互推搡的形態(tài)。

因?yàn)槟戢F的關(guān)節(jié)會非常多，這里面就包含了特別多的動畫樣式，全部都是純前端的去實(shí)現(xiàn)的，所以用前端的方式去解決這樣的一個方案，也完全釋放了我們之前在前端動畫樣式上的所有積累。

并且，還需要在項(xiàng)目要求的時間節(jié)點(diǎn)，趕著點(diǎn)的去把它給做出來，對我們來說，這也是對我們綜合能力的一個考驗(yàn)，基本上就是付諸了全力這樣一個感覺。

Q4 您是如何理解京東營銷業(yè)務(wù)的特點(diǎn)并做出響應(yīng)的？

A：我理解的話，它會特別注重商家的話語權(quán)。通常來說，商家或者負(fù)責(zé)對接商家的運(yùn)營，會給到我們一些需求，需要我們站在商家的角度去為他們謀劃最大的利益。

然后我們這邊的話，就是盡量去滿足，去實(shí)現(xiàn)他們想要的效果，包括我們目前所做的一些技術(shù)棧，也都是為了面向商家、服務(wù)商家。

因?yàn)?strong>商家不了解項(xiàng)目的復(fù)雜性，也不知道開發(fā)需要多少時間，所以他們不太會去考慮時間的問題，譬如說他就只給你一個月的時間，那這一個月里我們就要把所有東西全部都做完。

為了應(yīng)對這樣的情況，我們就把很多可復(fù)用的東西都給它組件化，包括在組件設(shè)計(jì)的時候，盡量去融入各種各樣的參數(shù)，調(diào)整這些參數(shù)就能做出更多的效果，以響應(yīng)商家的“奇奇怪怪”的需求。

這樣，需要幫商家設(shè)計(jì)開發(fā)的時候，我們就可以直接復(fù)用這些組件，然后花時間去做一些特殊的設(shè)計(jì)，這樣就能減少整個開發(fā)的時間。

Q5 現(xiàn)在技術(shù)發(fā)展非常迅猛，給您的工作帶來哪些機(jī)遇和挑戰(zhàn)？

A：以前的電商行業(yè)，它所需要制作的內(nèi)容，對設(shè)計(jì)人員的制作水平要求，相對來說都是比較簡單的，譬如當(dāng)時的電商會場，通常來說就是會有一些商品，選擇購買加入購物車，復(fù)雜一些的玩法，可能就是領(lǐng)取優(yōu)惠券，然后在購買的時候直接使用。

伴隨著整個行業(yè)的發(fā)展，現(xiàn)在的電商活動越來越多的偏向于游戲的性質(zhì)，它的游戲性會非常強(qiáng)。譬如“紅包雨”，就是最初級的一個游戲模版，紅包挨個往下落，然后用戶在屏幕上點(diǎn)點(diǎn)點(diǎn)。

然后到現(xiàn)在，游戲變得越來越復(fù)雜，像我們的“炸年獸”，你需要去培養(yǎng)年獸，然后等級越來越高，可以用年獸的等級去和其他用戶PK，PK完以后還可以獲得戰(zhàn)隊(duì)的紅包等等，還有年獸的一些升級的操作，整個游戲的復(fù)雜性越來越強(qiáng)。

整體要求的提高，對我們來說，就意味著能力需要去提升。不管是個人的設(shè)計(jì)能力、開發(fā)能力，還是團(tuán)隊(duì)協(xié)作的效率，包括一些協(xié)同工作的工具等等。

像是以前的“紅包”活動，我們可能一個人一周左右就能完成整個的開發(fā)，但是到了“炸年獸”這樣的活動，就需要一個團(tuán)隊(duì)一起去完成，可能會有重構(gòu)團(tuán)隊(duì)的四五個人，共同開發(fā)一個月來完成。

這里就牽涉到整個團(tuán)隊(duì)之間的協(xié)作問題，譬如整個代碼的架構(gòu)需要能夠解耦，就是我和你的代碼不能有一些吻合的地方，這樣我進(jìn)行改動的時候就不會影響到你，然后我們通過提前溝通好的一些形式，就是代碼的方式或者對象去進(jìn)行串聯(lián)。

未來我們這個行業(yè)會越來越偏向于一個復(fù)雜的形態(tài)，我理解的話，可能會越來越偏向于游戲行業(yè)的形態(tài)，可能會引入一些算法或者AI方面的一些內(nèi)容，還有對于圖形處理的一些未來的趨勢。

最近的這種趨勢或者說潮流，也在不斷督促我們對自己的能力有一個提升，促使我們更多的去完善自身。