設計師遇到前端工程師

做爲互聯網產品設計師，在和前端開發人員溝通時有沒有想過這樣的疑問：

——圓角陰影實現起來真的有那麼難嗎？

——載入更多的東西用戶能夠獲得更多的信息，可是頁面慢了該如何取捨呢？ 

面對這些問題，除了要從新考慮本身的設計，有沒有想過是什麼緣由致使出現這樣溝通誤差，有沒有解決的辦法呢？設計師須要瞭解哪些知識才能和前端開發人員來更好的合做呢？

 

首先得從這二者之間都有哪些不一樣提及。我認爲最主要緣由在於設計師和前端開發在部門中不一樣的職責劃分。一般狀況下，產品設計師的產出物可能是線框圖（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. 相信本身。前端一般出於不一樣的緣由對一些交互方式可行性作出判斷，好比代碼複雜程度，技術可實現性等等。好的設計師須要有一些超前意識和冒險精神，當他們受 新技術的激發，認爲它可以大大提高用戶體驗的時候，就須要把它看成挑戰來實現。在對技術的深刻了解後去說服前端一塊兒努力實現。