前言：無(wú)論眾人之前怎么稱呼我們。前端工程師？重構(gòu)工程師？JS 交互工程師？UED？切圖仔(妹)？美工等等，都沒(méi)關(guān)系，下文統(tǒng)稱為：前端。至于“產(chǎn)品經(jīng)理”，PM 這個(gè)縮寫(xiě)就簡(jiǎn)明多了。如果你是這里提到的前端，那么無(wú)論你是否戴表，你已經(jīng)被代表了，還望見(jiàn)諒。

前端和 PM 的關(guān)系

早在上古時(shí)期，UI 和 UE 還未分化，UE 還未被重視到今朝這個(gè)程度的時(shí)候，前端這一職位多半被劃分到設(shè)計(jì)部門(mén)，所以對(duì)于依然混淆前端為美工的朋友，我們只會(huì)淡然笑曰：呵呵。

切入正題，我們都知道，在產(chǎn)品開(kāi)發(fā)流程日益清晰的今天，PM 這個(gè)角色承擔(dān)著越來(lái)越重要的作用，外界評(píng)價(jià)一個(gè)產(chǎn)品的好壞優(yōu)劣，第一干系人就直指 PM，然而在產(chǎn)品的流水線上，距離用戶最近的一環(huán)卻是前端了，因此 PM 如何跟前端進(jìn)行良好的溝通就顯得尤為重要。淺顯的來(lái)講，設(shè)計(jì)師出圖，開(kāi)發(fā)寫(xiě)程序，前端做交互，用戶眼里的每一個(gè)頁(yè)面元素，指尖上的每一次交互，都經(jīng)過(guò)了前端代碼的包裝和沉淀。

所以，前端對(duì)用戶負(fù)責(zé)，也對(duì) PM 負(fù)責(zé)。

由于前端這個(gè)職位的定義和定性較為寬泛和模糊，尤以大中小企業(yè)的不同而各有差異(如：細(xì)成分 JS 交互和重構(gòu)兩個(gè)方向)，但無(wú)論做重構(gòu)也好，做交互也好，前端最重要的職責(zé)就是把 PM 想要的界面和期待的用戶體驗(yàn)，制作并呈現(xiàn)給用戶，并以自己專業(yè)的角度對(duì)當(dāng)前解決方案進(jìn)行優(yōu)化和深入研究，反饋給 PM。

前端與 PM 的對(duì)話

如果你看過(guò)產(chǎn)品經(jīng)理專欄的《技術(shù)之于產(chǎn)品經(jīng)理》等文，大概會(huì)覺(jué)得多半的時(shí)候，一些公司的產(chǎn)品和技術(shù)是在彼此掐架狀態(tài)，其對(duì)話或繁或簡(jiǎn)，比如我們就先看一段 PM 與前端的對(duì)話：

PM：這個(gè)滑動(dòng)效果能實(shí)現(xiàn)嗎？
前端：能
PM：這個(gè) Ajax 交互呢？
前端：能
PM：那這個(gè)背景色漸變圓角有陰影而且半透明 Hover 之后有旋轉(zhuǎn)效果的層呢？
前端：呃…
PM：我見(jiàn)到過(guò)國(guó)外某網(wǎng)站有這效果…
前端：能

前端與PM的對(duì)話 - 解

上述對(duì)話中前端只說(shuō)了 3 個(gè)“能”字，PM 也得到了想要答復(fù)。

當(dāng)然，前端是有思想的，和大多數(shù)程序員一樣，我們思考的時(shí)候?qū)ν馐且粋€(gè)黑盒，那是不是說(shuō)：一個(gè)有思想的圖靈機(jī)就能讓所有前端丟掉飯碗呢？答案是否定的。即便不用“中文房間假設(shè)”（The Chinese Room）去驗(yàn)證，我也保證最終 PM 還是會(huì)選擇有思想有創(chuàng)造力的前端而非機(jī)器。那么我們姑且打開(kāi)這黑盒，看看上面那段對(duì)話里前端腦中那詭異的世界：

PM：這個(gè)滑動(dòng)效果能實(shí)現(xiàn)嗎？
PM：這個(gè) Ajax 交互呢？

前端腦補(bǔ)：
* 涉及到樣式和交互
* 頁(yè)面布局能通過(guò)的瀏覽器：IE8 + Firefox3.5 + Chrome 9 + 等等
* IE6/7需要寫(xiě)個(gè) hack
* 要新寫(xiě)響應(yīng)式 CSS 來(lái)兼容移動(dòng)設(shè)備（iOS和Android）版本
* 圖片需要一份x2版本兼容 Retina 顯示器
* ……
* 是否針對(duì)有色彩障礙用戶進(jìn)行優(yōu)化？
* 是否需要兼容盲人瀏覽器？
* 如果用戶禁用 JS 腳本該如何
* 如果是打印設(shè)備，樣式如何
* (能)

在經(jīng)過(guò)了若干個(gè)回合的斗爭(zhēng)后，前端給出了最終解決方案“能”，那么繼續(xù)：

PM：那這個(gè)背景色漸變圓角有陰影而且半透明 Hover 之后有旋轉(zhuǎn)效果的層能實(shí)現(xiàn)碼？
前端腦補(bǔ)：(呃...)如果是用 HTML5 實(shí)現(xiàn)，so easy，但是 F*ck IE6，其實(shí)不建議做這么華麗的裝飾在層上的。

PM：我見(jiàn)到過(guò)國(guó)外某網(wǎng)站有這效果…
前端腦補(bǔ)：(能)好吧，既然我們的用戶不是外國(guó)人，那么眼下，還是多寫(xiě)點(diǎn) Hack 樣式，能兼容都兼容吧

現(xiàn)在你知道前端最想和誰(shuí)打架了吧？

PM 如何與前端溝通

上面羅列了這么多，我們大概可以看出，前端大的“敵人”既不是強(qiáng)勢(shì)的 PM，也不是頻繁變更的需求，而是萬(wàn)惡的瀏覽器廠商。這也是前端通常為什么不跟 PM 掐架的一個(gè)原因，本來(lái)嘛，當(dāng)內(nèi)憂和外患共存的時(shí)候，前端更理所當(dāng)然的把所有怨恨矛頭指向變化多端的瀏覽器，指向不愿升級(jí)用戶群體，這就是主要矛盾。(此時(shí)，PM 是不是在偷笑?)

即便是站在敵對(duì)的觀點(diǎn)，知己知彼，百戰(zhàn)不殆，PM 若能洞悉前端的一些習(xí)性，了解前端的某些思維方式，那么將用戶體驗(yàn)發(fā)揮到游刃有余便不再是多么難的事情。況且前端本來(lái)就是開(kāi)發(fā)工程師和設(shè)計(jì)師之間的紐帶，我們非常愿意配合好 PM，按照 PM 對(duì)產(chǎn)品的理解打造出有優(yōu)秀的產(chǎn)品。

同樣，在一個(gè)被理解和被認(rèn)同環(huán)境中，前端也會(huì)得到滿滿的成就感，并同時(shí)激發(fā)出非凡的創(chuàng)造力。

前端是園丁(PM)手中的剪刀，噢不，應(yīng)該是園丁的手指。（別忘了還有設(shè)計(jì)、開(kāi)發(fā)等等別的手指喲~）

前端如何與 PM 溝通

換個(gè)位置，那么前端在和 PM 的溝通又需要做到什么呢？

有些團(tuán)隊(duì)這樣默許：“前端沒(méi)必要參與到產(chǎn)品的需求和設(shè)計(jì)，設(shè)計(jì)出來(lái)后自然會(huì)找你們。”

面對(duì)這樣的困擾，我們前端自己要發(fā)揮主觀能動(dòng)性，極力避免“木已成舟，舟很破”的情況發(fā)生，做法很簡(jiǎn)單，主動(dòng)的向 PM 請(qǐng)示對(duì)于項(xiàng)目的參與，哪怕只是多一個(gè)項(xiàng)目郵件的抄送的對(duì)象，也會(huì)為后期前端代碼的部署帶來(lái)極大的便捷。否則遇到設(shè)計(jì)已定稿，前端做不出來(lái)的情形，責(zé)任在誰(shuí)？多半會(huì)歸給前端技術(shù)儲(chǔ)備不足，同時(shí)讓設(shè)計(jì)師也很尷尬。

開(kāi)個(gè)玩笑：(PM)是前端的朋友，再不濟(jì)也是“敵人”(設(shè)計(jì)師)的“敵人”(PM)。（PM 又該笑了）

注：試試把()中的人換個(gè)位置，LOL

前端的“職業(yè)病”

繼續(xù)知己知彼，了解前端這個(gè)話題，講幾個(gè)前端的“職業(yè)病”，可以當(dāng)作福利，用于對(duì)癥下藥，今后和前端溝通起來(lái)會(huì)更順暢。（每個(gè)職業(yè)都有自己的“職業(yè)病”，當(dāng)然我不認(rèn)為這是病態(tài)，只是這樣形容會(huì)比較容易理解）簡(jiǎn)單列出兩個(gè)：

圖層化的世界

可以說(shuō)在未來(lái)的 Google Glass 出現(xiàn)之前，我們所接觸的 Web 頁(yè)面幾乎都是 2D 的，前端（設(shè)計(jì)師們會(huì)附議么？）眼中的世界通常會(huì)有一個(gè) 2D 的圖層版本。

比如，在公交地鐵站邊看到的巨幅廣告，前端眼中第一感覺(jué)是，如果把設(shè)計(jì)重構(gòu)為 HTML 頁(yè)面布局該如何，標(biāo)簽怎樣嵌套會(huì)優(yōu)化，CSS 兼容性又是如何，是的，我們常會(huì)把圖片打會(huì)到圖層的原型來(lái)看待，然后進(jìn)行下一條“職業(yè)病”去迭代。

勤換位思考總不會(huì)是壞事的。

總是考慮兼容性

知道前端最關(guān)心 IT 業(yè)界新聞是什么嗎？ (看看下面幾種)

• xx 瀏覽器又升級(jí)了，版本號(hào)直逼 xx
• xx 公司宣布開(kāi)始做瀏覽器
• xx 向 W3C 提交了一份新的 xx 標(biāo)準(zhǔn)
• xx 推出了 xx 最新 Retina 硬件，配備 xx 瀏覽器
• xx 又毫無(wú)節(jié)操的推出了非主流分辨率的屏幕
• xx 系統(tǒng) 500 天后將停止更新

是的，我們關(guān)注那些硬件數(shù)碼設(shè)備的發(fā)布，但相比設(shè)備本身，我們可能更關(guān)心屏幕分辨率，默認(rèn)瀏覽器內(nèi)核，JS 性能跑分等等。我們花費(fèi)大量的時(shí)間和精力去解決不同瀏覽器，不同屏幕尺寸，不同設(shè)備內(nèi)核之間的兼容性，為的是盡可能多的用戶得到較好的用戶體驗(yàn)保證。我們幾乎會(huì)把所有的新鮮事物聯(lián)系到兼容性的層面來(lái)討論，這是可能是旁人無(wú)法理解的。

舊版本固然是穩(wěn)定，但新版才是王道啊。