前言

“這個(gè)做不了、很難做的啊、我沒(méi)時(shí)間啊、改這個(gè)有什么意義嗎?不是上次剛改過(guò)么怎么又讓我改?”

“我都沒(méi)見(jiàn)過(guò)哪個(gè)設(shè)計(jì)師像你這樣，不就幾個(gè)像素而已?有必要扣這么細(xì)嗎，能用就行了啊。還改?!我覺(jué)得這已經(jīng)很好看了啊，這么搞很麻煩的啊……”

各位設(shè)計(jì)師是不是已經(jīng)開(kāi)始按耐不住摩拳擦掌了，以上場(chǎng)景在跟開(kāi)發(fā)提需求和設(shè)計(jì)走查的時(shí)候經(jīng)常碰到，或是無(wú)奈或是生氣，但開(kāi)發(fā)就是有無(wú)數(shù)種理由拒絕你。

毫不客氣的說(shuō)，這個(gè)問(wèn)題一般都會(huì)在你職業(yè)生涯中的某個(gè)階段碰到，或早或晚，雖遲但到一般不缺席。想必很多設(shè)計(jì)師都踩過(guò)下面這個(gè)坑…

上線后還原不到位被領(lǐng)導(dǎo)職責(zé)“你這設(shè)計(jì)怎么做的，為什么這里設(shè)計(jì)成這樣?”一對(duì)設(shè)計(jì)稿，一把辛酸淚…你正想極力辯解，不好意思，領(lǐng)導(dǎo)說(shuō)：“我 只 看 結(jié) 果。”

就問(wèn)你氣不氣?氣不氣?

開(kāi)發(fā)到底為什么拒絕你?

收起大刀，咱先分析一波。這個(gè)問(wèn)題不會(huì)隨著技術(shù)的變化而改變，也不像是方法論擁有固定的解題策略，但是在面試中又經(jīng)常碰到，比如“開(kāi)發(fā)不配合、還原度不高時(shí)怎么辦”。這足以說(shuō)明很多公司都會(huì)有這個(gè)問(wèn)題，其實(shí)說(shuō)到底還是人的問(wèn)題，那我們就來(lái)看看“當(dāng)事人”是怎么說(shuō)的。

由于某些原因?qū)舆^(guò)很多開(kāi)發(fā)，也咨詢了幾個(gè)前端朋友。不管開(kāi)發(fā)口頭拒絕的原因有多么千奇百怪，一般情況下，開(kāi)發(fā)反感或者不愿意配合設(shè)計(jì)還原都可以歸納為以下幾個(gè)原因：

1. 業(yè)務(wù)緊，任務(wù)重

也許是項(xiàng)目趕著上線，也許是一堆需求還未交付，當(dāng)開(kāi)發(fā)手頭有更重要的事情要處理時(shí)，他沒(méi)辦法分心或者用額外的勞動(dòng)力去做設(shè)計(jì)優(yōu)化的內(nèi)容。很多時(shí)候給定的工時(shí)就那些，若是跟績(jī)效掛鉤就更別提了。我做需求改 bug 已經(jīng)要加班了，還要我配合你調(diào)來(lái)調(diào)去的，是你還會(huì)有這個(gè)心情嗎?

因此設(shè)計(jì)師也要關(guān)注項(xiàng)目的整個(gè)排期，嘗試著去宏觀把握項(xiàng)目進(jìn)度，做到理解或評(píng)估開(kāi)發(fā)的工時(shí)。多站在對(duì)方的角度考慮現(xiàn)狀。再者就是要判斷走查結(jié)果的優(yōu)先級(jí)，開(kāi)發(fā)側(cè)的用戶體驗(yàn)因素如性能、bug 數(shù)等要優(yōu)先于界面還原。畢竟用戶體驗(yàn)并不等于界面的開(kāi)發(fā)實(shí)現(xiàn)。當(dāng)連 bug 都沒(méi)修完的情況下，還死盯著幾個(gè)像素去摳顯然是不妥的。完全可以先把低優(yōu)先級(jí)的問(wèn)題記錄下來(lái)，留著某個(gè)版本再一起更新優(yōu)化。

2. 有背職業(yè)方向

前端的方向一類偏視覺(jué)展示的(動(dòng)效視覺(jué)還原組件搭建等)，一類偏數(shù)據(jù)層面的(算法之類)。共性都需要比較強(qiáng)的數(shù)據(jù)處理和邏輯能力。

有些開(kāi)發(fā)會(huì)十分明確自己的方向，比如往算法類的會(huì)認(rèn)為專注視覺(jué)還原側(cè)是在浪費(fèi)時(shí)間，因此在面對(duì)該類需求時(shí)內(nèi)心會(huì)產(chǎn)生一定的排斥心理。他們經(jīng)常不關(guān)注體驗(yàn)這種東西。

其實(shí)像還原這種的都算開(kāi)發(fā)底層的基礎(chǔ)能力。就像 UI 有的偏交互有的偏視覺(jué)，但一個(gè)偏交互的 UI 說(shuō)不愿意畫圖標(biāo)這說(shuō)不過(guò)去吧。說(shuō)到底本職工作還是設(shè)計(jì)。

3. 水平不夠

設(shè)計(jì)圈里都流傳著這樣一句話“沒(méi)有實(shí)現(xiàn)不了的效果，只有不想做的開(kāi)發(fā)”。

不想做更傾向于是態(tài)度問(wèn)題，不會(huì)做是能力問(wèn)題。但所有技術(shù)不都是由不會(huì)到會(huì)么，況且大部分的還原問(wèn)題借助搜索引擎是可以解決的，只是要權(quán)衡學(xué)習(xí)成本與收益的問(wèn)題。若是實(shí)在基礎(chǔ)的問(wèn)題都不愿意去做，必要的時(shí)候可以讓設(shè)計(jì)領(lǐng)導(dǎo)同開(kāi)發(fā)領(lǐng)導(dǎo)反饋。

4. 價(jià)值觀不一致

有部分開(kāi)發(fā)會(huì)不認(rèn)可設(shè)計(jì)，你跟他談對(duì)齊親密性，他跟你說(shuō)聽(tīng)不懂要下班;他不想也不愿意去接受或了解設(shè)計(jì)的作用，沉浸在自己的認(rèn)知體系里，自然也就不會(huì)認(rèn)同你。這種是很少數(shù)了，只能說(shuō)是公司招人不慎，可以嘗試多次溝通，依然無(wú)果后，與領(lǐng)導(dǎo)反饋。

以上就是常見(jiàn)的開(kāi)發(fā)不愿意配合的原因了，有些情況會(huì)由于客觀條件確實(shí)難以解決，有時(shí)候可能睜一只眼閉一只眼就過(guò)去了。

那么有什么其他的辦法呢?

設(shè)計(jì)師該怎么做?

開(kāi)發(fā)本身的問(wèn)題很多時(shí)候我們作為設(shè)計(jì)師沒(méi)辦法介入，作為設(shè)計(jì)師，更應(yīng)該從自身出發(fā)去解決問(wèn)題。

掐指一算對(duì)接過(guò)的開(kāi)發(fā)也不在少數(shù)，軟磨硬泡，用盡畢生所學(xué)與其斗智斗勇，在耗盡氣力之前終習(xí)得了一點(diǎn)心法同大家探討，文末也一同附上了所有用到的工具和寶典配合使用，希望對(duì)大家有幫助。

1. 良好的溝通是前提

所有的合作都是基于溝通進(jìn)行下去的，好的溝通方式會(huì)直接決定結(jié)果。別一聽(tīng)開(kāi)發(fā)不愿意做上來(lái)就急眼干架，友誼的小船說(shuō)翻就翻，都是同事，不出意外以后還要天天見(jiàn)面的。這樣只會(huì)顯得自己更不專業(yè)，冷靜冷靜…

首先要保持客觀，聚焦問(wèn)題。作為設(shè)計(jì)師要明確方案解決的問(wèn)題是什么，為什么要做這個(gè)方案，盡可能地深入剖析問(wèn)題根源，試著對(duì)著一個(gè)問(wèn)題連續(xù)問(wèn)自己 5 個(gè)為什么。這樣在對(duì)接需求時(shí)，既能做到證明自己的方案是對(duì)的，同時(shí)也可以游刃有余的回復(fù)對(duì)方的疑問(wèn)。

另一方面，在溝通或設(shè)計(jì)評(píng)審時(shí)，可以廣泛的聽(tīng)取他人的建議，每個(gè)人的出發(fā)點(diǎn)和認(rèn)知是不同的，這就意味著看待問(wèn)題的角度會(huì)不一樣，多記錄并思考別人的視角會(huì)更加拓寬自己的思維，這也有利于設(shè)計(jì)交接。

說(shuō)了這么多，舉幾個(gè)最常見(jiàn)的可直接落地的實(shí)際方案：

• 條件允許的話，搬個(gè)凳子直接坐在開(kāi)發(fā)旁邊磨(前期最好也可以帶點(diǎn)小零食慰問(wèn)品，收了禮總得給個(gè)面子改改吧，這招通常都很管用)，面對(duì)面溝通細(xì)節(jié)是最高效的。

有一些開(kāi)發(fā)壓根不懂設(shè)計(jì)，基本的對(duì)齊都看不出來(lái)，不是不愿意做，是真的看不出來(lái)。不要笑，一大把。這種方式雖然前期比較耗時(shí)間，但既可以培養(yǎng)感情，同時(shí)比聊天式的溝通更清晰高效。因?yàn)槊鎸?duì)面的溝通能夠感受到你的情緒和狀態(tài)，有句話怎么說(shuō)來(lái)著“線上聊千遍，不如線下見(jiàn)一面”。

• 盡量跟開(kāi)發(fā)混好點(diǎn)。比如有球局就一起去打打、有機(jī)會(huì)就一起吃吃飯、平時(shí)有聚會(huì)就多玩玩嘮嘮嗑。混熟了調(diào)個(gè)樣式什么的那還不是分分鐘的事情。
• 在解釋自己的方案時(shí)，可以用“我有解釋清楚嗎”而不是“我這么說(shuō)你聽(tīng)得懂吧?”多站在聽(tīng)者的角度去闡述。

2. 有一定的前端基礎(chǔ)常識(shí)

別擔(dān)心，我并不會(huì)在這里提如何敲代碼。想必很多從事設(shè)計(jì)師的朋友一部分原因是被代碼勸退了，二選一選了設(shè)計(jì)。

設(shè)計(jì)師沒(méi)有要求一定要會(huì)寫代碼，但做到看懂一些常規(guī)的內(nèi)容其實(shí)不會(huì)很難，一方面提高我們走查還原的效率，一方面也是自己“專業(yè)”的體現(xiàn)，提高開(kāi)發(fā)信任感，同時(shí)溝通也能更順暢。

熟悉主流 UI 框架

當(dāng)前市面上最主要的就 3 個(gè)：移動(dòng)端 H5 的 Vant，PC 端的 Element 和 Ant。官網(wǎng)都有組件庫(kù)的源文件，導(dǎo)入 sketch 就可以直接調(diào)用了。

這里順帶提一嘴，element 是基于 vue 開(kāi)發(fā)的，而 ant 主流是 react，但也有 vue 版( https://2x.antdv.com/docs/vue/introduce-cn )

因此動(dòng)手前一定要提前跟前端確認(rèn)用哪套框架再進(jìn)行設(shè)計(jì)。尤其是 B 端，非大團(tuán)隊(duì)是沒(méi)有足夠的人力和資源去搞源生的。大部分公司前期的開(kāi)發(fā)都是基于 ant 或 Element，可直接用官方組件做設(shè)計(jì)稿，市面上的話 Element 的占有率還是會(huì)偏多一些。

考慮到開(kāi)發(fā)效率與成本，基本上樣式都是基于框架調(diào)整的，所以碰到差距非常大的樣式最好是提前跟前端確認(rèn)。

走查工具的應(yīng)用

再提工具之前，建議大家學(xué)習(xí)了解一下“盒模型”的概念，它是前端設(shè)計(jì)布局還原設(shè)計(jì)稿的基礎(chǔ)，下面要講的工具也會(huì)用到，篇幅有限，關(guān)于盒模型的內(nèi)容就不展開(kāi)了，有興趣的可以自行搜索。

不知道大家有沒(méi)有遇到過(guò)以下這種場(chǎng)景：

開(kāi)發(fā)上線后發(fā)現(xiàn)實(shí)際效果跟預(yù)期的有點(diǎn)差距，可能想微調(diào)字體大小或者間距或者某個(gè)顏色，要么屁顛屁顛求開(kāi)發(fā)大爺調(diào)整一下，要么就自己再用軟件做調(diào)整試錯(cuò)，這些方法也不是不行，但是有種更快捷的方式。下面提到的兩個(gè)工具就可以幫到你。

瀏覽器審查定位，快速試錯(cuò)

第一步：鍵盤 F12 或鼠標(biāo)右鍵點(diǎn)擊“檢查”調(diào)出如圖所示的代碼界面。

第二步：點(diǎn)擊右上角的小箭頭，再移動(dòng)到左側(cè)頁(yè)面尋找你想查看的任何元素，比如“UI 設(shè)計(jì)_百度百科”，鼠標(biāo)移上去時(shí)就可以看到基礎(chǔ)的元素屬性了。

第三步：?jiǎn)螕魟倓傄x擇的元素“UI 設(shè)計(jì)_百度百科”，在右側(cè)就會(huì)自動(dòng)定位到對(duì)應(yīng)的代碼，雙擊可以自己隨便打字，按 enter 立即生效，有時(shí)候測(cè)試文本極限值的時(shí)候用這個(gè)方法就不用再打開(kāi) sketch 敲文本了。

第四步：定位元素，設(shè)計(jì)試錯(cuò)。重頭戲來(lái)了，還是選中剛剛的“UI 設(shè)計(jì)_百度百科”為例，點(diǎn)擊代碼塊右上角的“Computed”，很好，現(xiàn)在映入眼簾的這個(gè)大色塊就是傳說(shuō)中的盒模型了。簡(jiǎn)單理解就是前端在實(shí)現(xiàn)時(shí)，每個(gè)元素都用類似于盒子的這種模式一層套一層實(shí)現(xiàn)的，沒(méi)錯(cuò)，你也可以理解為套娃。

鼠標(biāo)移動(dòng)到對(duì)應(yīng)的某一層，就可以看到每一層對(duì)應(yīng)在界面的哪個(gè)位置。比如這里的 padding 就是對(duì)應(yīng)左側(cè)界面的綠色條高度：10px。

那快速試錯(cuò)又怎么理解呢?比如我們現(xiàn)在想調(diào)整“UI 設(shè)計(jì)_百度百科”上面的間距，點(diǎn)擊下方的“Filter”，輸入 padding 就可以看到這個(gè)數(shù)值了。

點(diǎn)擊箭頭直達(dá)修改路徑，雙擊修改直接生效。

要改其他的屬性同理。這樣就避免了請(qǐng)開(kāi)發(fā)大爺幫忙，也省去了用軟件去調(diào)整試錯(cuò)設(shè)計(jì)效果了。

當(dāng)然這只是很小的一個(gè)例子，應(yīng)用在各種場(chǎng)景后會(huì)有很多新發(fā)現(xiàn)的，就比如某些在線設(shè)計(jì)的網(wǎng)址可以用這種方式拿到原始圖片，大家可以自己多去嘗試。

走查神器：CSS Peeper

CSS Peeper 是一款 Chrome 瀏覽器插件。主要用來(lái)輔助走查，如果你是得了看到代碼就頭疼的病，F(xiàn)12 審查也幫不了你，那這款絕對(duì)是你的最佳良藥了。

1. 快速查看元素屬性以及間距。字號(hào)、行高、色值、字重、元素間距，哪里不懂點(diǎn)哪里，驗(yàn)收原來(lái)還可以如此輕松。

2. 預(yù)覽網(wǎng)頁(yè)所有色值。只要有不按規(guī)范的基本無(wú)所遁形，全站色值給你扒過(guò)來(lái)，查顏閱色，我是專業(yè)的。

3. 一鍵下載網(wǎng)站圖片素材。下載圖片什么的那是信手拈來(lái)，圖標(biāo) banner 任意素材，只要你是圖，我就下的來(lái)。

就問(wèn)你香不香吧。

以上兩款都可以幫助我們快速的驗(yàn)收，回歸主題，這一節(jié)主要提到的是了解前端基礎(chǔ)常識(shí)，其實(shí)主要還是為了更好的交接，說(shuō)到這就順帶提一下設(shè)計(jì)交付的小技巧：

1. 除了交付靜態(tài)圖外，還要帶上交互說(shuō)明。比如基礎(chǔ)的字段極限值、圖標(biāo)的 hover、禁用狀態(tài)、適配方案等等，這些是產(chǎn)品不一定考慮的到的，在設(shè)計(jì)執(zhí)行過(guò)程中可以另起一個(gè)畫板一并寫下來(lái)，避免開(kāi)發(fā)時(shí)的頻繁溝通。

另外涉及微交互/難實(shí)現(xiàn)或難描述的樣式，都可以拿現(xiàn)成已上線的成品給到開(kāi)發(fā)去做參考，直接調(diào)用代碼、學(xué)習(xí)或改動(dòng)都可以增加他們的效率或者提高他們?nèi)プ龅囊庠浮．吘拐f(shuō)再多不如見(jiàn)一面，動(dòng)態(tài)效果總比文案描述要容易理解，不是所有開(kāi)發(fā)都能夠看一眼靜態(tài)圖就知道怎么實(shí)現(xiàn)。

2. 設(shè)計(jì)稿完成后在交付開(kāi)發(fā)時(shí)要有一次正式的交接，也可以帶上測(cè)試，大概闡述一下設(shè)計(jì)稿的一些還原、交互難點(diǎn)以及注意點(diǎn)，畢竟還未正式介入開(kāi)發(fā)，若有問(wèn)題可以及時(shí)處理。小的問(wèn)題一般在開(kāi)發(fā)執(zhí)行時(shí)才會(huì)碰到，到時(shí)再給到設(shè)計(jì)支持就行了。

3. 注意標(biāo)注平臺(tái)的設(shè)計(jì)稿布局和分組。先給大家感受一下普遍的在線平臺(tái)設(shè)計(jì)圖，包括但不限于藍(lán)湖、慕客、Codesign 等。

很多時(shí)候畫布一多，設(shè)計(jì)稿全堆一起，就算是設(shè)置好對(duì)齊，隔開(kāi)間距，但還是遭不住一多就難以定位的問(wèn)題。就算是產(chǎn)品自帶的分散功能也沒(méi)辦法解決。

開(kāi)發(fā)一點(diǎn)進(jìn)來(lái)，我是誰(shuí)?我在哪?我要點(diǎn)哪里?圖一多就亂難免會(huì)引起一定的不適感。

那么有什么解決辦法嗎?

這個(gè)時(shí)候可以把設(shè)計(jì)稿按類別/模塊整理清楚，一個(gè)模塊的設(shè)計(jì)稿盡量不要超過(guò) 10 張，多了就考慮建一個(gè)子類別，另外要多建一個(gè)畫板做好分組。同時(shí)平臺(tái)自帶的分組功能也要應(yīng)用上，設(shè)計(jì)稿的命名也要準(zhǔn)確便于利用搜索去定位。

最后就是按版本建立大的文件夾存放設(shè)計(jì)稿。切忌所有的稿都放在一個(gè)畫布里，多了不方便找是其次的，卡到想你錘爛屏幕的心才是最難受的。

既然一直談體驗(yàn)，那么看稿的開(kāi)發(fā)就是我們的核心用戶了，好的閱覽體驗(yàn)說(shuō)不定能帶來(lái)更高的代碼效率呢。千萬(wàn)不要小看這些細(xì)節(jié)，都是一些小事情，無(wú)外乎命個(gè)名以及拖動(dòng)拖動(dòng)畫板，耐心一點(diǎn)也就幾分鐘的事。這些都是個(gè)人能力與專業(yè)的體現(xiàn)。

3. 建立走查機(jī)制

前面講的都是基于個(gè)人角度出發(fā)，而建立走查機(jī)制有點(diǎn)偏團(tuán)隊(duì)側(cè)了。將走查納入整個(gè)產(chǎn)品設(shè)計(jì)流程的一部分，提測(cè)后就可以進(jìn)入走查階段了，過(guò)程中需要記錄并與開(kāi)發(fā)溝通修改還原問(wèn)題。

一來(lái)可追溯防背鍋(你懂的)，二來(lái)讓還原的問(wèn)題有沉淀，方便我們?nèi)ビ涗浐蛷?fù)盤。

類似這樣的表格模板，因?yàn)楦鱾€(gè)團(tuán)隊(duì)大小和工作模式都不一樣，所以字段會(huì)有所差異，有的也有產(chǎn)、設(shè)、測(cè)共同維護(hù)的表。這個(gè)可以按實(shí)際情況參考這個(gè)模板適當(dāng)增加刪減，另外走查時(shí)除了視覺(jué)類的，也可以通過(guò)交互自查表去做一些驗(yàn)證，查缺補(bǔ)漏。

其中特別注意的一點(diǎn)就是走查反饋盡量寫的細(xì)致一些。比如截圖后在圖片上帶上箭頭指向，同時(shí)配合文字填寫在“問(wèn)題描述”那一列里，是間距差了還是不對(duì)齊等等，有色值給錯(cuò)的就把正確的色值也標(biāo)注上。

最后，就算存在趕時(shí)間趕項(xiàng)目的情況，也要有基礎(chǔ)的設(shè)計(jì)底線，有些原則性的內(nèi)容不能隨意更改，比如通用的設(shè)計(jì)準(zhǔn)則、一致性等，設(shè)計(jì)師需要根據(jù)實(shí)際情況把握好這個(gè)平衡點(diǎn)，對(duì)走查內(nèi)容做篩選沉淀。

4. 提升設(shè)計(jì)在團(tuán)隊(duì)的影響力

這里的“設(shè)計(jì)”不僅是指設(shè)計(jì)師本人，還可以引申到具體的設(shè)計(jì)輸出、設(shè)計(jì)團(tuán)隊(duì)等一切跟設(shè)計(jì)相關(guān)的人和事務(wù)。

比如做一些設(shè)計(jì)知識(shí)分享、設(shè)計(jì)團(tuán)隊(duì)(或個(gè)人)項(xiàng)目的復(fù)盤總結(jié)，讓結(jié)果呈現(xiàn)更加的專業(yè)化，期間還可以引入用戶的聲音、用戶研究結(jié)論、數(shù)據(jù)分析等。這些都是建立信任、提高影響力的方式，長(zhǎng)期執(zhí)行下來(lái)會(huì)帶來(lái)很大價(jià)值的。

5. 培養(yǎng)開(kāi)發(fā)的用戶體驗(yàn)意識(shí)

開(kāi)發(fā)的設(shè)計(jì)意識(shí)越高，設(shè)計(jì)落地自然就越順暢。一方面通過(guò)上面提到的技術(shù)分享耳濡目染，不斷提高開(kāi)發(fā)側(cè)的設(shè)計(jì)認(rèn)知。

另一方面相關(guān)考核可以把開(kāi)發(fā)側(cè)的用戶體驗(yàn)因素權(quán)重提高。比如，穩(wěn)定性、性能、系統(tǒng)資源占用與消耗、bug 數(shù)、bug 解決率等，同時(shí)在招聘時(shí)也適當(dāng)做一些篩選。再者就是常說(shuō)的界面還原度了，視覺(jué)、交互動(dòng)效與優(yōu)化等，可以通過(guò)驗(yàn)收次數(shù)等來(lái)做一定的量化。

不過(guò)要達(dá)到這一點(diǎn)比較難，尤其是剛建立的小團(tuán)隊(duì)。過(guò)程涉及多方協(xié)作，還要具體看開(kāi)發(fā)側(cè)的認(rèn)知和配合情況，需要基于人和現(xiàn)有的工作流去建立起設(shè)計(jì)共識(shí)，因此還是得細(xì)水長(zhǎng)流，逐個(gè)攻破。

結(jié)尾

以上提到的種種是對(duì)開(kāi)發(fā)不配合，設(shè)計(jì)難還原等相關(guān)問(wèn)題的思考，經(jīng)驗(yàn)有限，不一定能解決所有情況，具體的落地也會(huì)因人而異。如果實(shí)在接受不了也改變不了現(xiàn)狀，在實(shí)力允許的情況下大不了就換咯，大團(tuán)隊(duì)在流程上肯定要更規(guī)范和成熟的。

我也遇到過(guò)很貼心的開(kāi)發(fā)小哥，他甚至可以與你一起探討解決方案，視覺(jué)還原什么的都是基操，壓根不用你擔(dān)憂。這種的開(kāi)發(fā)只能說(shuō)是可遇不可求了，碰到了一定抓住好好珍惜~