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

來源:互聯網
上載者:User

作為互連網產品設計師,在和前端開發人員溝通時你是否常常會聽到這樣的聲音:

—— “大姐,給點專業精神好不好,這個表格是自適應的,你這樣設計頁面不好擴充啊…”
——“用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),包括:

  • 制定檔案命名標準
  • 設定檔案統一路徑
  • 儲存原始創作檔案(例如PSD、Fla源檔案)
  • 最終完成檔案(經過產品經理認可的檔案)
  • 視覺模式庫和與其對應的代碼模式庫

當然,前端都很忙的,經常去“騷擾”他們會被鄙視的。跟他們溝通也需要技巧和一些基礎認識,我總結了以下幾點需要謹記:

  1. 網站的頁面是動態。
    photoshop呈現的是靜態東西,而網站頁面是動態展現內容、布局和互動。設計師過多關注使用者體驗層面,很難對所有的細節做到面面俱到。而前端(包括開發)需要照顧到所有的功能點涉及到的頁面,因此在前期要考慮的盡量周全,別讓別人幫我們收拾爛攤子。
  2. 關注新技術。
    網頁設計缺少支援人員永遠只是藝術。設計師必須經常關注新的技術和互動方式,這樣才能在設計的時候提供多種解決方案,才能權衡利弊找到最佳化的方案。
  3. 介面元素的標準化和統一。
    前端關注代碼的可重用性,設計師關注新創意。因此在設計前期就要考慮哪些元素和互動方式既可以滿足使用者體驗又能夠被重複使用,以此來提高效率。
  4. 團隊合作很重要。
    設計師很容易沉浸在自己的小世界裡不能自拔,這是我們經常犯的通病。“溝通”是團隊合作的關鍵,一切皆在溝通。
  5. 相信自己。
    前端通常出於不同的原因對一些互動方式可行性做出判斷,比如代碼複雜程度,技術可實現性等等。好的設計師需要有一些超前意識和冒險精神,當他們受 新技術的激發,認為它能夠大大提升使用者體驗的時候,就需要把它當作挑戰來實現。在對技術的深入瞭解後去說服前端一起努力實現。

好了,這些血和淚的經驗是我工作一段時間慢慢總結的,如果你有更多的方法,希望能一起分享。



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。