作為互聯網產品設計師,在和前端開發人員溝通時你是否常常會聽到這樣的聲音:
—— “大姐,給點專業精神好不好,這個表格是自適應的,你這樣設計頁面不好擴展啊…”
——“用ajax不是不行,不過你要事前給我說嘛,你不說我怎麼知道呢,你說了我就知道了嘛…”
面對這些回答,除了欲哭無淚,你有沒有想過是什麼原因導致出現這樣溝通偏差,有沒有解決的辦法呢?設計師需要了解哪些知識才能和前端開發人員來更好的合作呢?
首先得從這兩者之間都有哪些不同說起。我認為最主要原因在於設計師和前端開發在部門中不同的職責劃分。通常情況下,產品設計師的產出物多是線框圖(wireframe),視覺設計稿(mockup)等,前端負責編寫HTML,CSS等代碼(demo),有時還會根據需要編寫程序代碼(如 JSP/ASP/PHP/Rails),光看這些分工,就知道不同的角色對產品的理解和著重點是截然不同的。
按照正常的項目流程,設計團隊通常需要先設計出界面mockup或demo(HTML/CSS),接著開發人員才開始正式編寫代碼。然而多數情況下為了保證項目進度,需要開發人員和設計師在項目前期就介入進來,不同的是,開發人員多是審核通過項目計劃書(PRD)和原型評審,她們更關注於技術可實現性;而設計師更傾向理解產品經理的項目需求以及通過什麼樣方式來解決需求從而達到提升用戶體驗的目的,她們更關注創意的可行性。
更令人糾結的是前端開發對“界面元素”和“交互動作”的理解和設計師有很大不同。統一的界面元素對網站的前端架構也會很有好處,他們更關注代碼的可重用性。 一方面是CSS:前端開發要實現設計師(或者自己引以為自豪)的界面設計,如果新頁面的設計和原先頁面中相同功能元素的設計有出入,哪怕是一點出入,都有可能帶來很多重復的工作,將CSS文件變得越來越臃腫。另一方面是JavaScript:對於很多應用型網站,會有很多需要JavaScript的頁面交互元素。這些交互元素的視覺或者行為設計與之前的有出入,也會讓前端工程師為了既保證代碼的健壯性來方便後端工程師的開發,又為了實現一些設計上的差別而對現有代碼修修補補忙得不可開交,最可怕的是最終淹沒於bug的海洋…而交互設計師的側重點並不在程序的編碼實現,而注重於用戶如何最好地與系統交互操作,在設計中重點需要考慮的是界面元素的易用性:比如他們會考慮到並非每個用戶都是計算機的熟練用戶,面對隱藏的層和特殊設計的菜單可能會抓瞎,用戶不見得能明白雙擊左鍵能自動滾屏或者怎樣能讓自動滾屏停下來,直接看最下面的結果?總之,設計師(完美主義者更甚)會不斷完善產品,來滿足更好的用戶體驗。
那麼設計師怎樣來解決這些問題呢?我覺得最重要的就是“溝通”,這是最根本的解決辦法。在原型設計前期就要針對自己想法的詢問前端開發在技術上的可行性,在界面設計過程中會有很多精確到像素級的標准,同樣要和他們溝通了解代碼的實現方式,不然很有可能做無用功。在提交界面設計之後,交互設計師也要主動出擊,不定時的去關注demo的實現效果(mockup和demo多多少少存在不一致,在後期需要跟進;另外涉及到復雜的交互方式前端很可能會忘記或者搞混,也需要不斷的去核查)。另外建立標准的文檔管理和設計規范也很重要,好在我們開始建立設計規范和標准(淘斯基和TPL 模式庫)的文檔管理方法(SVN),包括:
當然,前端都很忙的,經常去“騷擾”他們會被鄙視的。跟他們溝通也需要技巧和一些基礎認識,我總結了以下幾點需要謹記:
好了,這些血和淚的經驗是我工作一段時間慢慢總結的,如果你有更多的方法,希望能一起分享。