有很多同學(xué)面試都遇到過這樣一個(gè)問題（包括我）：如果你做的設(shè)計(jì)開發(fā)說實(shí)現(xiàn)不了，你會(huì)怎么辦？這是一個(gè)直接反映設(shè)計(jì)師在自己領(lǐng)域業(yè)務(wù)水平的問題，也是 UI 設(shè)計(jì)工作中最常遇到的阻力之一，是設(shè)計(jì)師和前端程序員的主要矛盾來源。

開發(fā)溝通指南

這一篇，我就要從幾個(gè)維度來講講，在真實(shí)項(xiàng)目環(huán)境中，開發(fā)說設(shè)計(jì)不出來的話，我們應(yīng)該怎么辦。

想要解決開發(fā)做不了的問題首先要了解他們做不了的原因。

在正常的團(tuán)隊(duì)協(xié)作中，正式進(jìn)入前端開發(fā)階段前，有需求評(píng)審、交互評(píng)審和視覺評(píng)審。需求評(píng)審即產(chǎn)品經(jīng)理的工作產(chǎn)出評(píng)審，告知團(tuán)隊(duì)這個(gè)階段要實(shí)現(xiàn)的功能有哪些。而交互和視覺評(píng)審，則是設(shè)計(jì)師交付給團(tuán)隊(duì)，產(chǎn)品怎么操作，界面長什么樣的過程。這個(gè)過程不一定是要在會(huì)議室中一群人看設(shè)計(jì)師演示交互原型或 PPT，只要是設(shè)計(jì)沒有完全定稿針對(duì)它的討論都可以算是評(píng)審過程。

開發(fā)會(huì)告訴你設(shè)計(jì)稿實(shí)現(xiàn)不了，就是在這個(gè)階段中發(fā)生的，那為什么他們會(huì)在這個(gè)階段說實(shí)現(xiàn)不了呢？

主要原因有四個(gè)：

1. 技術(shù)上有難度，實(shí)現(xiàn)不了
2. 時(shí)間不夠充裕，來不及做
3. 單純看你不爽，對(duì)人不對(duì)事
4. 看破職場沉浮，一心躺平

針對(duì)第一點(diǎn)，稍微有點(diǎn)經(jīng)驗(yàn)的程序員都不會(huì)在看到設(shè)計(jì)稿后判斷不了自己能不能實(shí)現(xiàn)，不會(huì)把設(shè)計(jì)稿拿回去代碼寫到一半，再跑回來和你說實(shí)現(xiàn)不了。

這里的不能實(shí)現(xiàn)包含三種情況，第一種是技術(shù)上真沒辦法實(shí)現(xiàn)，比如使用了一些非常復(fù)雜的 3D 著色器、渲染效果。

第二種是開發(fā)的能力有限，以他目前的水平做不出來。尤其是小公司中的初級(jí)前端群體，因?yàn)榻?jīng)驗(yàn)和技術(shù)能力不足，往往復(fù)雜點(diǎn)的效果就不知道怎么下手，所以自然實(shí)現(xiàn)不出來。

第三種，就是為了實(shí)現(xiàn)這個(gè)效果的代價(jià)過大，覺得完全沒有必要，這是最常見的情況。比如團(tuán)隊(duì)已經(jīng)使用某開源框架做前端了，結(jié)果你設(shè)計(jì)稿效果和官方組件南轅北轍，為了和你的設(shè)計(jì)效果保持一致，得花費(fèi)幾倍的時(shí)間精力。

可能設(shè)計(jì)新人會(huì)覺得奇怪，程序員還原設(shè)計(jì)稿效果不是天經(jīng)地義的嘛？

但程序員的思考方式是不一樣的，程序?qū)懘a的第一目標(biāo)必然是 “功能實(shí)現(xiàn)”。所以他們分配給界面樣式的時(shí)間和精力是不多的，如果視覺稿需要讓他們投入過多的精力，影響到功能的實(shí)現(xiàn)，那么他們肯定優(yōu)先選擇功能而不是視覺效果。

多數(shù) B 端項(xiàng)目中程序員的時(shí)間都是不夠用的，所以也導(dǎo)致復(fù)雜的視覺效果基本都會(huì)被他們駁回。這就關(guān)聯(lián)到第二點(diǎn)，時(shí)間不夠充裕的問題。因?yàn)闀r(shí)間緊迫，一些開發(fā)成本過高的視覺效果，即使程序員認(rèn)可你的設(shè)計(jì)方案，也想這么輸出，但是根本沒有充裕時(shí)間完成，所以只能拒絕。

再到第三點(diǎn)，程序員就是對(duì)你有意見，只要設(shè)計(jì)稿稍微復(fù)雜，就算做的了也有時(shí)間但就是不想和你配合，也會(huì)想方設(shè)法找理由給借口說做不了。同事發(fā)展到這個(gè)地步并不少見，根據(jù)我多年的經(jīng)驗(yàn)和觀察，除了少數(shù)心理健康有待商榷的程序員以外，這種情況多數(shù)由設(shè)計(jì)師的不專業(yè)行為長期積累而引發(fā)的，被對(duì)接程序員嫌棄……

最后一點(diǎn)，就是和你對(duì)接的前端看破滾滾紅塵，參透職場的真理，認(rèn)清剝削的真相，選擇躺平了……躺平了……平了……了……這和上一點(diǎn)類似都是消極對(duì)待工作，只是這次他沒針對(duì)你了，而是針對(duì)項(xiàng)目團(tuán)隊(duì)在座的各位。這種程序員高頻出現(xiàn)在國企或其它大型企業(yè)中，有比較長的工作年限，得過且過沒有任何的工作熱情了?；蛘呤且呀?jīng)打定主意要離職，已經(jīng)抱著你們愛咋咋滴和我已經(jīng)沒關(guān)系的心態(tài)了。

以上就是程序員會(huì)講開發(fā)實(shí)現(xiàn)不出來的主要原因。

想要解決實(shí)現(xiàn)不了的問題，肯定要先定位出實(shí)現(xiàn)不了的原因?qū)儆谏厦婺囊活?，然后才能?duì)癥下藥。

第 1：技術(shù)實(shí)現(xiàn)不了的解決方案

如果是技術(shù)上的困難導(dǎo)致無法實(shí)現(xiàn)，那么設(shè)計(jì)師修改方案是必須的。但改動(dòng)前，要盡量和程序員詢問技術(shù)實(shí)現(xiàn)不了的原理，再針對(duì)性的做出調(diào)整。比如我們之前做過的一個(gè)篩選面板優(yōu)化，增加了右下角 “查詢” 按鈕，需要每次篩選完成后點(diǎn) “查詢” 才能刷新篩選結(jié)果，而不是像京東這些網(wǎng)站的篩選項(xiàng)一樣點(diǎn)擊后立刻刷新。

這是因?yàn)殚_發(fā)做不到結(jié)果秒出，一般項(xiàng)目的后端數(shù)據(jù)庫搭建非常簡陋，檢索效率極低，每次查詢請(qǐng)求到輸出結(jié)果需要數(shù)秒到數(shù)十秒不等。所以，增加查詢按鈕多一個(gè)操作步驟反而是效率更高的做法。

還有特別常見的情況，就是設(shè)計(jì)師自己辛辛苦苦畫了花里胡哨的圖表、可視內(nèi)容，還加上各種酷炫的動(dòng)畫和特效，但是開發(fā)做出來和設(shè)計(jì)稿完全不一致。

這就是因?yàn)橐话汩_發(fā)掌握的圖形技術(shù)往往非常有限，或者使用的引擎本身也不具備實(shí)現(xiàn)相關(guān)模型、效果的渲染。這需要設(shè)計(jì)師和程序員進(jìn)一步確認(rèn)可以實(shí)現(xiàn)的效果特征有哪些，支持什么程度的模型，可以應(yīng)用哪種著色器、光源，再根據(jù)這些特性重新優(yōu)化設(shè)計(jì)方案。

解決技術(shù)實(shí)現(xiàn)上的難度，就是找出問題在交互的步驟上還是視覺上（動(dòng)畫也算），然后圍繞這個(gè)方向和開發(fā)進(jìn)一步商議出可以實(shí)現(xiàn)的方案，再動(dòng)手去修改。

第 2：時(shí)間不夠充裕，來不及做

時(shí)間來不及也是非常常見的情況，尤其在設(shè)計(jì)師設(shè)計(jì)出非常多全新的樣式和細(xì)節(jié)時(shí)。多數(shù)項(xiàng)目都會(huì)使用類似 Ant、Element、Tdesign 之類的開源前端框架，如果你制定了大量新組建或修改了原有組件的樣式或細(xì)節(jié)，那么調(diào)整起來是非常耗時(shí)的，即使是一些看似簡單的微小改動(dòng)。

因?yàn)槌墒斓拇笮烷_源項(xiàng)目，每一個(gè)元素的樣式、邏輯都作用了大量的代碼，這些代碼又分布在不同的樣式表或者腳本中。往往做一點(diǎn)小改動(dòng)，就會(huì)發(fā)生莫名其妙的 BUG，這種情況就要倒逼程序員去檢查和理解與它關(guān)聯(lián)的所有代碼信息。即使成功把這個(gè)細(xì)節(jié)改好了，保不準(zhǔn)其它關(guān)聯(lián)到的元素會(huì)出現(xiàn)問題，引發(fā)一連串的連鎖反應(yīng)……

所以通常在前端時(shí)間不足的情況下，最簡單的解決辦法就是減少新樣式的使用，盡可能使用框架自帶樣式或者過去開發(fā)的原有樣式。這不是說每次迭代時(shí)間緊迫設(shè)計(jì)師永遠(yuǎn)不思進(jìn)取，對(duì)所有設(shè)計(jì) Ctrl+C/V 就結(jié)束了，而是要做權(quán)重評(píng)估，哪些樣式的改動(dòng)不僅重要性不高而且花費(fèi)的時(shí)間特別多，哪些是非常必要且無法忽視的更新。

之后，就是要和開發(fā)進(jìn)行討價(jià)還價(jià)的時(shí)候，放棄一部分次要的樣式，集中精力來處理一些重要的內(nèi)容。要有目的性的把整體視覺樣式迭代拆分成多個(gè)版本來完成，每個(gè)版本見縫插針，而不是一口吃成胖子指望前端工程師進(jìn)行 007 強(qiáng)行軍。

第 3：單純和你有矛盾，不想做你的需求

產(chǎn)品、設(shè)計(jì)、程序員之間如果有矛盾，一般不會(huì)是一天兩天產(chǎn)生的，而是長期積累下來的。如果關(guān)系已經(jīng)惡化到不能調(diào)和，那么需求的執(zhí)行只能依靠公司規(guī)章，或者同對(duì)方上級(jí)溝通強(qiáng)行推進(jìn)（也可能推不動(dòng)）。

如果關(guān)系還有挽回的余地，你又想順利推進(jìn)設(shè)計(jì)落地，那只有主動(dòng)低頭示好一條路能走了。因?yàn)樵O(shè)計(jì)和開發(fā)是沒有從屬關(guān)系的，只能曉之以情動(dòng)之以禮，強(qiáng)勢的壓迫只會(huì)獲得相反的結(jié)果。提升自己的專業(yè)能力，溝通能力，全局觀，站在別人角度思考做出有效的讓步，才能長期維護(hù)協(xié)作關(guān)系的緊密性。

第 4：看破職場沉浮，一心躺平

這種情況接近無解，當(dāng)一個(gè)員工選擇徹底躺平，就已經(jīng)放棄追求和責(zé)任感。除非你們的私交非常好可以站在基友、朋友的角度上做感化，否則只能全部改成最簡單的方案。

如果和你對(duì)接的前端都已經(jīng)躺了，而你又是個(gè)有追求的設(shè)計(jì)，那給你們唯一的建議：

跳槽……

上面的建議，與其說是解決方案，不如說是如何 “妥協(xié)” 的方案。

這是一種無奈的客觀要求，任何行業(yè)的設(shè)計(jì)，都是一個(gè)針對(duì)理想方案和現(xiàn)實(shí)情況進(jìn)行妥協(xié)的過程。強(qiáng)如蘋果，也在極度追求輕薄后重新增加了筆記本的厚度和散熱模塊尺寸（變成磚頭）。

固然我們可以用圓滑的處事方法和職場生存技巧處理樣式實(shí)現(xiàn)不了的問題，但一個(gè)真正有職業(yè)精神和追求的設(shè)計(jì)師，會(huì)在項(xiàng)目初期就做好開發(fā)可行性的研究判斷，而不是等到設(shè)計(jì)都輸出完了再做調(diào)整。

讓可以遇見的問題扼殺在搖籃中，項(xiàng)目的推進(jìn)效率才會(huì)更高，留給視覺交互的開發(fā)時(shí)間才會(huì)更多。

想要盡量避免開發(fā)做不了的問題，就要滿足下面的條件：

1. 掌握基礎(chǔ)的前端技術(shù)邏輯
2. 前期進(jìn)行開發(fā)可行性評(píng)估
3. 培養(yǎng)和開發(fā)團(tuán)隊(duì)的協(xié)作默契

掌握前端技術(shù)邏輯這個(gè)觀點(diǎn)以往的分享已經(jīng)講爛了，但還是不能不提，沒有任何前端技術(shù)認(rèn)識(shí)是絕對(duì)沒辦法判斷設(shè)計(jì)的可行性的。

拓展閱讀

掌握 HTML + CSS 認(rèn)識(shí)靜態(tài)頁面的布局，是唯一要涉及到需要自己上手做練習(xí)的地方，這個(gè)我們過去錄制過對(duì)應(yīng)的教學(xué)，頂多一周就能掌握。其它的部分，就是理解 JS 或 React、VUE 是什么，前端語言的基本認(rèn)識(shí)和功能實(shí)現(xiàn)邏輯，還有諸如響應(yīng)式、API、封裝、異步等術(shù)語的意思。

除了 JS 建議花一周時(shí)間看一些入門教程，其它的專業(yè)術(shù)語學(xué)習(xí)，就是在工作中碰到什么百度什么，全都有非?；A(chǔ)的科普掃盲。

第二，就是在每次項(xiàng)目前期，將你認(rèn)為可能會(huì)遇到的技術(shù)問題提前和開發(fā)商議。比如特殊的業(yè)務(wù)組件的復(fù)雜交互方法，界面框架響應(yīng)式的變更，特殊動(dòng)效的動(dòng)畫形式，圖表的自定樣式等等。

掌握越多的前端知識(shí)，可以發(fā)現(xiàn)的問題就越精準(zhǔn)。在構(gòu)思設(shè)計(jì)方案的階段覺得有開發(fā)難度，又拿捏不準(zhǔn)的地方就一定要提前和開發(fā)通氣，排除掉不合理的，確定出具體的實(shí)現(xiàn)方向。

這可以避免很多沒必要的問題，以及建立開發(fā)在界面實(shí)現(xiàn)方向工作量的預(yù)期，這點(diǎn)非常重要。因?yàn)樵O(shè)計(jì)稿沒拿出來之前，對(duì)前端開發(fā)來說就是盲盒，很可能會(huì)收到一份意想不到的 “大禮”。只要預(yù)期可以建立，項(xiàng)目進(jìn)度又不是非常迫切的話，專業(yè)的前端都是愿意盡量配合設(shè)計(jì)師實(shí)現(xiàn)一些更優(yōu)或者更有挑戰(zhàn)的效果。

在過去，我和不同團(tuán)隊(duì)的前端工程師都會(huì)預(yù)留一部分的時(shí)間，進(jìn)行特殊的效果嘗試，嘗試不同的技術(shù)方案和可能性，即使他們最終不一定能落地，但這可以非常好的提升各自的專業(yè)水平和眼界。

有效的前期溝通也是專業(yè)性和獲得話語權(quán)的關(guān)鍵操作，因?yàn)闇贤ㄒ馕吨鴧f(xié)商，協(xié)商意味著尊重，對(duì)技術(shù)人員尊重的缺失就是后面會(huì)被針對(duì)的主要問題之一（另一個(gè)是菜）。試想一下，你們的老板還是運(yùn)營、市場人員，不咨詢你的意見也不管你的能力范圍，指定要下面這些效果的 Banner 還是 H5，你會(huì)怎么想？

能滿足前面兩點(diǎn)，就能追求第三點(diǎn)，培養(yǎng)和開發(fā)團(tuán)隊(duì)的默契了。優(yōu)秀的產(chǎn)品團(tuán)隊(duì)產(chǎn)品、設(shè)計(jì)、開發(fā)都要有一定的協(xié)作默契，這樣可以減少很多不必要的溝通成本。默契是多方面的，包括了解雙方的工作流程，每個(gè)階段要做什么，怎么配合。另一方面，是了解對(duì)方的技術(shù)水平，擅長哪個(gè)方面，做出正確的評(píng)估，交付對(duì)應(yīng)的成果。

這是在半年到一年以內(nèi)可以實(shí)現(xiàn)的目標(biāo)，當(dāng)你了解對(duì)接的前端工程師主要熟悉哪些技術(shù)棧、框架，技術(shù)水平、工作投入程度，你就會(huì)對(duì)怎么溝通，提供給對(duì)方什么樣的設(shè)計(jì)內(nèi)容有更深入的見解。

雖然我們不能確保每次項(xiàng)目中所有界面技術(shù)問題全能在前期完美解決，但我們的目標(biāo)就是盡可能減少到項(xiàng)目后期開發(fā)說 “做不出來”，再浪費(fèi)時(shí)間在爭吵誰聽誰的問題上。

理解完前面的內(nèi)容，就可以進(jìn)入最后的重點(diǎn)。針對(duì)面試中開發(fā)說 “實(shí)現(xiàn)不了” 的回復(fù)框架：

找出原因：開發(fā)說實(shí)現(xiàn)不了，我首先要和對(duì)方確認(rèn)并判斷實(shí)現(xiàn)不了的原因是什么，是技術(shù)上的難點(diǎn)還是時(shí)間不夠，而不是無理由強(qiáng)行推進(jìn)自己的設(shè)計(jì)方案。

解決方案：如果是技術(shù)上的問題，我會(huì)和程序員商量解決方案再做調(diào)整，來適應(yīng)落地需要。如果是時(shí)間不夠，那么我就會(huì)評(píng)估相關(guān)內(nèi)容的優(yōu)先級(jí)，放棄一些低優(yōu)先級(jí)的設(shè)計(jì)需求留到后面版本再實(shí)現(xiàn)，集中精力在核心需求的開發(fā)上。

提前避免：當(dāng)然，除此之外我會(huì)盡力避免在設(shè)計(jì)完以后才知道實(shí)現(xiàn)不了。第一是我會(huì)積極掌握前端的相關(guān)技術(shù)內(nèi)容，具備技術(shù)難度的初級(jí)評(píng)估能力。第二是我會(huì)在每次動(dòng)手設(shè)計(jì)前，通過一些基礎(chǔ)原型和程序員做更具體的開發(fā)可行性評(píng)估，提前調(diào)整不合理的方案。第三，我會(huì)在長期的研發(fā)過程中培養(yǎng)和前端團(tuán)隊(duì)的默契，盡可能提升設(shè)計(jì)落地的效率，從而預(yù)留出更多時(shí)間來實(shí)現(xiàn)更好的用戶體驗(yàn)或視覺效果。

這類問題主要考察的就是設(shè)計(jì)師針對(duì)項(xiàng)目實(shí)施的態(tài)度，是只在意你自己的想法，還是把團(tuán)隊(duì)產(chǎn)出放到個(gè)人喜好之上。以及你的團(tuán)隊(duì)協(xié)作潛力，一個(gè)缺乏協(xié)作精神的設(shè)計(jì)師，越有優(yōu)秀的設(shè)計(jì)能力或者吹毛求疵的態(tài)度，越是項(xiàng)目研發(fā)中的負(fù)資產(chǎn)。

所以，上面的回復(fù)框架大家可以根據(jù)自己的理解修改，或加入過去實(shí)際經(jīng)歷過的案例做說明，讓它更有說服力！

本次的分享就到這里，如果還有一些遇到不知道如何回答的面試問題，也可以發(fā)到下方留言中。

我們下篇再賤～

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」