• <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
  • <pre id="gvoe3"></pre>
    <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

  • <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">
      axure商城

      產品經理應該如何與前端溝通 誰才是前端最大的敵人?

      前言:無論眾人之前怎么稱呼我們。前端工程師?重構工程師?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 的溝通又需要做到什么呢?

      有些團隊這樣默許:“前端沒必要參與到產品的需求和設計,設計出來后自然會找你們?!?/p>

      面對這樣的困擾,我們前端自己要發揮主觀能動性,極力避免“木已成舟,舟很破”的情況發生,做法很簡單,主動的向 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 性能跑分等等。我們花費大量的時間和精力去解決不同瀏覽器,不同屏幕尺寸,不同設備內核之間的兼容性,為的是盡可能多的用戶得到較好的用戶體驗保證。我們幾乎會把所有的新鮮事物聯系到兼容性的層面來討論,這是可能是旁人無法理解的。

      舊版本固然是穩定,但新版才是王道啊。

      結語

      做一個能溝通的 PM,做一個能溝通的前端,讓產品在用戶體驗的叢林中一路披荊斬棘。

      給TA買糖
      共{{data.count}}人
      人已贊賞
      產品經理

      用戶體驗測試實例:交互設計的簡單與復雜

      2012-12-6 9:48:19

      產品經理

      那些在設計iOS應用時犯過的錯誤

      2012-12-12 17:32:24

      axure商城
      0 條回復 A文章作者 M管理員
        暫無討論,說說你的看法吧
      ?
      個人中心
      購物車
      優惠劵
      今日簽到
      有新私信 私信列表
      搜索
      俄罗斯videoxxxoo
    1. <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
    2. <pre id="gvoe3"></pre>
      <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

    3. <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">