作為互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)師，在和前端開發(fā)人員溝通時(shí)你是否常常會(huì)聽到這樣的聲音：

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

面對(duì)這些回答，除了欲哭無淚，你有沒有想過是什么原因?qū)е鲁霈F(xiàn)這樣溝通偏差，有沒有解決的辦法呢？設(shè)計(jì)師需要了解哪些知識(shí)才能和前端開發(fā)人員來更好的合作呢？ 

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

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

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

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

• 制定文件命名標(biāo)準(zhǔn)
• 設(shè)定文件統(tǒng)一路徑
• 保存原始創(chuàng)作文件（例如PSD、Fla源文件）
• 最終完成文件（經(jīng)過產(chǎn)品經(jīng)理認(rèn)可的文件）
• 視覺模式庫和與其對(duì)應(yīng)的代碼模式庫

當(dāng)然，前端都很忙的，經(jīng)常去“騷擾”他們會(huì)被鄙視的。跟他們溝通也需要技巧和一些基礎(chǔ)認(rèn)識(shí)，我總結(jié)了以下幾點(diǎn)需要謹(jǐn)記：

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

好了，這些血和淚的經(jīng)驗(yàn)是我工作一段時(shí)間慢慢總結(jié)的，如果你有更多的方法，希望能一起分享。

原文：http://ued.taobao.com/blog/2009/05/03/conmunicate/