產品設計師和前端開發(fā)人員之間的溝通

作為互聯網產品設計師，在和前端開發(fā)職員溝通時你是否經常會聽到這樣的聲音：

—— “大姐，給點專業(yè)精神好不好，這個表格是自適應的，你這樣設計頁面不好擴展啊…” ——“用ajax不是不行，不過你要事前給我說嘛，你不說我怎么知道呢，你說了我就知道了嘛…”

面對這些回答，除了欲哭無淚，你有沒有想過是什么原因導致出現這樣溝通偏差，有沒有解決的辦法呢？設計師需要了解哪些知識才能和前端開發(fā)職員來更好的合作呢？

首先得從這兩者之間都有哪些不同說起。我以為最主要原因在于設計師和前端開發(fā)在部分中不同的職責劃分。通常情況下，產品設計師的產出物多是線框圖（wireframe),視覺設計稿（mockup）等，前端負責編寫HTML,CSS等代碼（demo），有時還會根據需要編寫程序代碼（如 JSP/ASP/PHP/Rails),光看這些分工，就知道不同的角色對產品的理解和著重點是截然不同的。

按照正常的項目流程，設計團隊通常需要先設計出界面mockup或demo（HTML/CSS),接著開發(fā)職員才開始正式編寫代碼。然而多數情況下為了保證項目進度，需要開發(fā)職員和設計師在項目前期就參與進來，不同的是，開發(fā)職員多是審核通過項目計劃書（PRD）和原型評審，她們更關注于技術可實現性；而設計師更傾向理解產品經理的項目需求以及通過什么樣方式來解決需求從而達到提升用戶體驗的目的，她們更關注創(chuàng)意的可行性。

更令人糾結的是前端開發(fā)對“界面元素”和“交互動作”的理解和設計師有很大不同。同一的界面元素對網站的前端架構也會很有好處，他們更關注代碼的可重用性。 一方面是CSS：前端開發(fā)要實現設計師（或者自己引以為自豪）的界面設計，假如新頁面的設計和原先頁面中相同功能元素的設計有出進，哪怕是一點出進，都有可能帶來很多重復的工作，將CSS文件變得越來越臃腫。另一方面是JavaScript：對于很多應用型網站，會有很多需要JavaScript的頁面交互元素。這些交互元素的視覺或者行為設計與之前的有出進，也會讓前端工程師為了既保證代碼的健壯性來方便后端工程師的開發(fā)，又為了實現一些設計上的差別而對現有代碼修修補補忙得不可開交，最可怕的是終極沉沒于bug的海洋…而交互設計師的側重點并不在程序的編碼實現，而注重于用戶如何最好地與系統(tǒng)交互操縱，在設計中重點需要考慮的是界面元素的易用性：比如他們會考慮到并非每個用戶都是計算機的熟練用戶，面對隱躲的層和特殊設計的菜單可能會抓瞎，用戶不見得能明白雙擊左鍵能自動滾屏或者怎樣能讓自動滾屏停下來，直接看最下面的結果？總之，設計師（完美主義者愈甚）會不斷完善產品，來滿足更好的用戶體驗。

那么設計師怎樣來解決這些題目呢？我覺得最重要的就是“溝通”，這是最根本的解決辦法。在原型設計前期就要針對自己想法的詢問前端開發(fā)在技術上的可行性，在界面設計過程中會有很多精確到像素級的標準，同樣要和他們溝通了解代碼的實現方式，不然很有可能做無用功。在提交界面設計之后，交互設計師也要主動出擊，不定時的往關注demo的實現效果（mockup和demo多多少少存在不一致，在后期需要跟進；另外涉及到復雜的交互方式前端很可能會忘記或者搞混，也需要不斷的往核查）。另外建立標準的文檔治理和設計規(guī)范也很重要，好在我們開始建立設計規(guī)范和標準(淘斯基和TPL 模式庫）的文檔治理方法（SVN)，包括：

制定文件命名標準 設定文件同一路徑 保存原始創(chuàng)作文件（例如PSD、Fla源文件） 終極完成文件（經過產品經理認可的文件） 視覺模式庫和與其對應的代碼模式庫 當然，前端都很忙的，經常往“騷擾”他們會被鄙視的。跟他們溝通也需要技巧和一些基礎熟悉，我總結了以下幾點需要謹記：

網站的頁面是動態(tài)的。 photoshop呈現的是靜態(tài)的東西，而網站頁面是動態(tài)的展現內容、布局和交互。設計師過多關注用戶體驗層面，很難對所有的細節(jié)做到面面俱到。而前端（包括開發(fā)）需要照顧到所有的功能點涉及到的頁面，因此在前期要考慮的盡量周全，別讓別人幫我們收拾爛攤子。 關注新技術。 網頁設計缺少技術支持永遠只是藝術。設計師必須經常關注新的技術和交互方式，這樣才能在設計的時候提供多種解決方案，才能權衡利弊找到最優(yōu)化的方案。 界面元素的標準化和同一。 前端關注代碼的可重用性，設計師關注新創(chuàng)意。因此在設計前期就要考慮哪些元素和交互方式既可以滿足用戶體驗又能夠被重復使用，以此來進步效率。 團隊合作很重要。 設計師很輕易沉醉在自己的小世界里不能自拔，這是我們經常犯的通病?！皽贤ā笔菆F隊合作的關鍵，一切皆在溝通。 相信自己。 前端通常出于不同的原因對一些交互方式可行性做出判定，比如代碼復雜程度，技術可實現性等等。好的設計師需要有一些超前意識和冒險精神，當他們受 新技術的激發(fā)，以為它能夠大大提升用戶體驗的時候，就需要把它當作挑戰(zhàn)來實現。在對技術的深進了解后往說服前端一起努力實現。

本文來源于成都網站建設公司與成都網站設計制作公司-創(chuàng)新互聯成都公司！

網站標題：產品設計師和前端開發(fā)人員之間的溝通
本文來源：http://www.muchs.cn/news15/315515.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站策劃、動態(tài)網站、營銷型網站建設、響應式網站、手機網站建設、自適應網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯