前言：無論眾人之前怎么稱呼我們。前端工程師？重構工程師？JS 交互工程師？UED？切圖仔(妹)？美工等等，都沒關系，下文統稱為：前端。至于“產品經理”，PM 這個縮寫就簡明多了。如果你是這里提到的前端，那么無論你是否戴表，你已經被代表了，還望見諒。
前端和 PM 的關系
早在上古時期，UI 和 UE 還未分化，UE 還未被重視到今朝這個程度的時候，前端這一職位多半被劃分到設計部門，所以對于依然混淆前端為美工的朋友，我們只會淡然笑曰：呵呵。
切入正題，我們都知道，在產品開發流程日益清晰的今天，PM 這個角色承擔著越來越重要的作用，外界評價一個產品的好壞優劣，第一干系人就直指 PM，然而在產品的流水線上，距離用戶最近的一環卻是前端了，因此 PM 如何跟前端進行良好的溝通就顯得尤為重要。淺顯的來講，設計師出圖，開發寫程序，前端做交互，用戶眼里的每一個頁面元素，指尖上的每一次交互，都經過了前端代碼的包裝和沉淀。
所以，前端對用戶負責，也對 PM 負責。
由于前端這個職位的定義和定性較為寬泛和模糊，尤以大中小企業的不同而各有差異(如：細成分 JS 交互和重構兩個方向)，但無論做重構也好，做交互也好，前端最重要的職責就是把 PM 想要的界面和期待的用戶體驗，制作并呈現給用戶，并以自己專業的角度對當前解決方案進行優化和深入研究，反饋給 PM。
前端與 PM 的對話
如果你看過產品經理專欄的《技術之于產品經理》等文，大概會覺得多半的時候，一些公司的產品和技術是在彼此掐架狀態，其對話或繁或簡，比如我們就先看一段 PM 與前端的對話：
PM：這個滑動效果能實現嗎？
前端：能
PM：這個 Ajax 交互呢？
前端：能
PM：那這個背景色漸變圓角有陰影而且半透明 Hover 之后有旋轉效果的層呢？
前端：呃…
PM：我見到過國外某網站有這效果…
前端：能
前端與PM的對話 - 解
上述對話中前端只說了 3 個“能”字，PM 也得到了想要答復。
當然，前端是有思想的，和大多數程序員一樣，我們思考的時候對外是一個黑盒，那是不是說：一個有思想的圖靈機就能讓所有前端丟掉飯碗呢？答案是否定的。即便不用“中文房間假設”（The Chinese Room）去驗證，我也保證最終 PM 還是會選擇有思想有創造力的前端而非機器。那么我們姑且打開這黑盒，看看上面那段對話里前端腦中那詭異的世界：
PM：這個滑動效果能實現嗎？
PM：這個 Ajax 交互呢？前端腦補：
* 涉及到樣式和交互
* 頁面布局能通過的瀏覽器：IE8 + Firefox3.5 + Chrome 9 + 等等
* IE6/7需要寫個 hack
* 要新寫響應式 CSS 來兼容移動設備（iOS和Android）版本
* 圖片需要一份x2版本兼容 Retina 顯示器
* ……
* 是否針對有色彩障礙用戶進行優化？
* 是否需要兼容盲人瀏覽器？
* 如果用戶禁用 JS 腳本該如何
* 如果是打印設備，樣式如何
* (能)
在經過了若干個回合的斗爭后，前端給出了最終解決方案“能”，那么繼續：
PM：那這個背景色漸變圓角有陰影而且半透明 Hover 之后有旋轉效果的層能實現碼？
前端腦補：(呃...)如果是用 HTML5 實現，so easy，但是 F*ck IE6，其實不建議做這么華麗的裝飾在層上的。PM：我見到過國外某網站有這效果…
前端腦補：(能)好吧，既然我們的用戶不是外國人，那么眼下，還是多寫點 Hack 樣式，能兼容都兼容吧
現在你知道前端最想和誰打架了吧？
PM 如何與前端溝通
上面羅列了這么多，我們大概可以看出，前端大的“敵人”既不是強勢的 PM，也不是頻繁變更的需求，而是萬惡的瀏覽器廠商。這也是前端通常為什么不跟 PM 掐架的一個原因，本來嘛，當內憂和外患共存的時候，前端更理所當然的把所有怨恨矛頭指向變化多端的瀏覽器，指向不愿升級用戶群體，這就是主要矛盾。(此時，PM 是不是在偷笑?)
即便是站在敵對的觀點，知己知彼，百戰不殆，PM 若能洞悉前端的一些習性，了解前端的某些思維方式，那么將用戶體驗發揮到游刃有余便不再是多么難的事情。況且前端本來就是開發工程師和設計師之間的紐帶，我們非常愿意配合好 PM，按照 PM 對產品的理解打造出有優秀的產品。
同樣，在一個被理解和被認同環境中，前端也會得到滿滿的成就感，并同時激發出非凡的創造力。
前端是園丁(PM)手中的剪刀，噢不，應該是園丁的手指。（別忘了還有設計、開發等等別的手指喲~）
前端如何與 PM 溝通
換個位置，那么前端在和 PM 的溝通又需要做到什么呢？
有些團隊這樣默許：“前端沒必要參與到產品的需求和設計，設計出來后自然會找你們。”
面對這樣的困擾，我們前端自己要發揮主觀能動性，極力避免“木已成舟，舟很破”的情況發生，做法很簡單，主動的向 PM 請示對于項目的參與，哪怕只是多一個項目郵件的抄送的對象，也會為后期前端代碼的部署帶來極大的便捷。否則遇到設計已定稿，前端做不出來的情形，責任在誰？多半會歸給前端技術儲備不足，同時讓設計師也很尷尬。
開個玩笑：(PM)是前端的朋友，再不濟也是“敵人”(設計師)的“敵人”(PM)。（PM 又該笑了）
注：試試把()中的人換個位置，LOL
前端的“職業病”
繼續知己知彼，了解前端這個話題，講幾個前端的“職業病”，可以當作福利，用于對癥下藥，今后和前端溝通起來會更順暢。（每個職業都有自己的“職業病”，當然我不認為這是病態，只是這樣形容會比較容易理解）簡單列出兩個：
圖層化的世界
可以說在未來的 Google Glass 出現之前，我們所接觸的 Web 頁面幾乎都是 2D 的，前端（設計師們會附議么？）眼中的世界通常會有一個 2D 的圖層版本。
比如，在公交地鐵站邊看到的巨幅廣告，前端眼中第一感覺是，如果把設計重構為 HTML 頁面布局該如何，標簽怎樣嵌套會優化，CSS 兼容性又是如何，是的，我們常會把圖片打會到圖層的原型來看待，然后進行下一條“職業病”去迭代。
勤換位思考總不會是壞事的。
總是考慮兼容性
知道前端最關心 IT 業界新聞是什么嗎？ (看看下面幾種)
- xx 瀏覽器又升級了，版本號直逼 xx
- xx 公司宣布開始做瀏覽器
- xx 向 W3C 提交了一份新的 xx 標準
- xx 推出了 xx 最新 Retina 硬件，配備 xx 瀏覽器
- xx 又毫無節操的推出了非主流分辨率的屏幕
- xx 系統 500 天后將停止更新
是的，我們關注那些硬件數碼設備的發布，但相比設備本身，我們可能更關心屏幕分辨率，默認瀏覽器內核，JS 性能跑分等等。我們花費大量的時間和精力去解決不同瀏覽器，不同屏幕尺寸，不同設備內核之間的兼容性，為的是盡可能多的用戶得到較好的用戶體驗保證。我們幾乎會把所有的新鮮事物聯系到兼容性的層面來討論，這是可能是旁人無法理解的。
舊版本固然是穩定，但新版才是王道啊。
