來源：淘寶ued
作為網際網路產品設計師，在和前端開發人員溝通時有沒有想過這樣的疑問：
——圓角陰影實現起來真的有那麼難嗎？
——載入更多的東西使用者可以得到更多的資訊，但是頁面慢了該如何取捨呢？
面對這些問題，除了要重新考慮自己的設計，有沒有想過是什麼原因導致出現這樣溝通偏差，有沒有解決的辦法呢？設計師需要了解哪些知識才能和前端開發人員來更好的合作呢？
首先得從這兩者之間都有哪些不同說起。我認為最主要原因在於設計師和前端開發在部門中不同的職責劃分。通常情況下，產品設計師的產出物多是線框 圖（wireframe),視覺設計稿（mockup）等，前端負責編寫HTML,CSS等程式碼（demo），有時還會根據需要編寫程式程式碼（如 JSP/ASP/PHP/Rails),光看這些分工，就知道不同的角色對產品的理解和著重點是截然不同的。
按照正常的專案流程，設計團隊通常需要先設計出介面mockup或demo（HTML/CSS),接著開發人員才開始正式編寫程式碼。然而多數情 況下為了保證專案進度，需要開發人員和設計師在專案前期就介入進來，不同的是，開發人員多是稽核通過專案計劃書（PRD）和原型評審，她們更關注於技術可 實現性；而設計師更傾向理解產品經理的專案需求以及通過什麼樣方式來解決需求，從而達到提升使用者體驗的目的，她們更關注創意的可行性。
令人糾結的是前端開發對“介面元素”和“互動動作”的理解和設計師有很大不同。統一的介面元素對網站的前端架構也會很有好處，他們更關注程式碼的 可重用性。 一方面是CSS：前端開發要實現設計師（或者自己引以為自豪）的介面設計，如果新頁面的設計和原先頁面中相同功能元素的設計有出入，哪怕是一點出入，都有 可能帶來很多重複的工作，將CSS檔案變得越來越臃腫。另一方面是JavaScript：對於很多應用型網站，會有很多需要JavaScript的頁面交 互元素。這些互動元素的視覺或者行為設計與之前的有出入，也會讓前端工程師為了既保證程式碼的健壯性來方便後端工程師的開發，又為了實現一些設計上的差別而 對現有程式碼修修補補忙得不可開交…而互動設計師的側重點並不在程式的編碼實現，而注重於使用者如何最好地與系統互動操作，在設計中重點需要考慮的是介面元素 的易用性：比如他們會考慮到並非每個使用者都是計算機的熟練使用者，面對隱藏的層和特殊設計的選單可能會抓瞎，使用者不見得能明白雙擊左鍵能自動滾屏或者怎樣能 讓自動滾屏停下來，直接看最下面的結果？總之，設計師（完美主義者更甚）會不斷完善產品，來滿足更好的使用者體驗。
那麼設計師怎樣來解決這些問題呢？我覺得最重要的就是“溝通”，這是最根本的解決辦法。在原型設計前期就要針對自己想法的詢問前端開發在技術上 的可行性，在介面設計過程中會有很多精確到畫素級的標準，同樣要和他們溝通了解程式碼的實現方式，不然很有可能做無用功。在提交介面設計之後，互動設計師也 要主動出擊，不定時的去關注demo的實現效果（mockup和demo多多少少存在不一致，在後期需要跟進；另外涉及到複雜的互動方式前端很可能會忘記 或者搞混，也需要不斷的去核查）。另外建立標準的文件管理和設計規範也很重要，好在我們開始建立設計規範和標準(淘斯基和TPL 模式庫）的文件管理方法，包括：
▲ 制定檔案命名標準
▲ 設定檔案統一路徑
▲ 儲存原始創作檔案（例如PSD、Fla原始檔）
▲ 最終完成檔案（經過產品經理認可的檔案）
▲ 視覺模式庫和與其對應的程式碼模式庫
當然，前端都很忙的，跟他們溝通也需要技巧和一些基礎認識，我總結了以下幾點需要謹記：
1、網站的頁面是動態的。photoshop呈現的是靜態的東西，而網站頁面是動態的展現內容、佈局和互動。設計師過多關注使用者體驗層面，很難對所有 的細節做到面面俱到。而前端（包括開發）需要照顧到所有的功能點涉及到的頁面，因此在前期要考慮的儘量周全，別讓別人幫我們收拾爛攤子。
2、關注新技術。網頁設計缺少技術支援永遠只是藝術。設計師必須經常關注新的技術和互動方式，這樣才能在設計的時候提供多種解決方案，才能權衡利弊找到最優化的方案。
3、介面元素的標準化和統一。前端關注程式碼的可重用性，設計師關注新創意。因此在設計前期就要考慮哪些元素和互動方式既可以滿足使用者體驗又能夠被重複使用，以此來提高效率。
4、團隊合作很重要。設計師很容易沉浸在自己的小世界裡不能自拔，這是我們經常犯的通病。“溝通”是團隊合作的關鍵，一切皆在溝通。
5、相信自己。前端通常出於不同的原因對一些互動方式可行性做出判斷，比如程式碼複雜程度，技術可實現性等等。好的設計師需要有一些超前意識和冒險精 神，當他們受 新技術的激發，認為它能夠大大提升使用者體驗的時候，就需要把它當作挑戰來實現。在對技術的深入瞭解後去說服前端一起努力實現。
好了，這些經驗是我工作一段時間慢慢總結的，如果你有更多的方法，希望能一起分享。