隨著網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的開(kāi)放，越來(lái)越多的設(shè)計(jì)人員技術(shù)知識(shí)非常有限，開(kāi)發(fā)一個(gè)網(wǎng)站似乎成了一件非?？膳碌氖虑?。特別是初次與某個(gè)美工合作時(shí)更是困難重重。這篇文章將給大家提供一些合作的基本竅門(mén)，幫助你與美工完美協(xié)作。這里假設(shè)大家使用Photoshop，不過(guò)不管你使用什么設(shè)計(jì)工具，以下基本原則都適用。

1.制定一個(gè)統(tǒng)一的計(jì)劃

俗話(huà)說(shuō)”計(jì)劃失敗一切失敗” ，網(wǎng)站的設(shè)計(jì)和開(kāi)發(fā)也是如此。創(chuàng)建一個(gè)成功的網(wǎng)站，策略是必備的，但更為重要的是要確保美工明白你的期望。 避免這個(gè)交流不暢的一個(gè)有效方法就是在設(shè)計(jì)開(kāi)始前讓美工先預(yù)覽你的設(shè)計(jì)框架。

這是一個(gè)非常重要的階段，可以問(wèn)美工下面的問(wèn)題： “我們的預(yù)算里可以有這個(gè)嗎？” 或者”你覺(jué)的……會(huì)成問(wèn)題嗎？”

2. 提交完善的網(wǎng)頁(yè)設(shè)計(jì)模型

啟動(dòng)Photoshop開(kāi)始設(shè)計(jì)之前，要注意一些圖形元素。

網(wǎng)格系統(tǒng)

為了確保網(wǎng)站能與所有的解析兼容，使用960px網(wǎng)格系統(tǒng)可以避免在不同的顯示器下網(wǎng)站出現(xiàn)問(wèn)題。另外，使用網(wǎng)格系統(tǒng)也將給你和美工提供參考，確保你的設(shè)計(jì)能完美地對(duì)齊。使用網(wǎng)格化布局是實(shí)現(xiàn)完美設(shè)計(jì)的最簡(jiǎn)單最佳方法，它也為你簡(jiǎn)化了設(shè)計(jì)流程，因?yàn)榇罅康牟聹y(cè)和調(diào)整都從工作流程中消失了。

規(guī)劃網(wǎng)站發(fā)展和變化規(guī)模

這里要注意的一點(diǎn)是，你的網(wǎng)站一旦上線(xiàn)后，其整體布局將非常難改變。無(wú)論是客戶(hù)有額外的內(nèi)容需要添加還是網(wǎng)站進(jìn)入到下一個(gè)開(kāi)發(fā)階段，一定要對(duì)你的網(wǎng)站將會(huì)發(fā)展到什么樣的規(guī)模有一個(gè)明確的概念。

如果要添加五個(gè)段落的文章，你的布局會(huì)受到什么樣的影響？你的導(dǎo)航能否允許添加更多的頁(yè)面？在開(kāi)始與美工工作時(shí)，你就需要先確認(rèn)好這些問(wèn)題。

有序組織管理圖樣

關(guān)于PS文檔一定要組織完善這一點(diǎn)，有很多東西可以說(shuō)。清晰并有條理地管理你的文檔，這樣美工能夠輕松地找出和分解你的設(shè)計(jì)?？梢酝ㄟ^(guò)與網(wǎng)站內(nèi)容相關(guān)的命名來(lái)分類(lèi)管理你的文檔。例如，你可能想將設(shè)計(jì)元素分解為頭部（header）、主要內(nèi)容區(qū)（main content area）、底部（footer）和側(cè)邊欄（sidebar）等?；蛘咭云渌壿嫹绞絹?lái)給你的圖形分組。

此外，一個(gè)組織有序的PS文檔，分隔各個(gè)元素時(shí)盡可能依據(jù)圖層來(lái)處理，否則美工想要單獨(dú)使用某個(gè)設(shè)計(jì)時(shí)卻發(fā)現(xiàn)它是與另一些元素融合一起的，這會(huì)讓美工相當(dāng)頭疼。

這樣做看起來(lái)沒(méi)什么，但是你會(huì)發(fā)現(xiàn)它將為你省下多少寶貴的開(kāi)發(fā)時(shí)間。

還要說(shuō)明一下，確保給美工提供網(wǎng)站一旦上線(xiàn)時(shí)所有可能需要用到的圖像和鏈接設(shè)計(jì)。包括導(dǎo)航系統(tǒng)的不同狀態(tài) (正常狀態(tài)和游離狀態(tài))、界面按鈕，如行動(dòng)召喚按鈕（Call to Action buttons ）等。

3. 深入了解用戶(hù)界面功能

當(dāng)設(shè)計(jì)那些有特殊效果和功能的元素時(shí)，花一點(diǎn)時(shí)間去找些例子和文獻(xiàn)資料向美工闡述清楚你的想法。

如果你呈現(xiàn)給美工的是靜態(tài)圖片沒(méi)有任何標(biāo)記，美工很可能不會(huì)注意到而沒(méi)有到達(dá)你所期望的效果。花點(diǎn)時(shí)間去搜尋一下你要達(dá)到什么樣的效果，現(xiàn)在網(wǎng)上有很多關(guān)于各種特殊效果和功能這方面的文檔、樣例以及教程。我相信你會(huì)有很多意想不到的收獲，至少你也可以受到一點(diǎn)啟發(fā)。

4. 給出反饋意見(jiàn)

開(kāi)發(fā)人員寫(xiě)完設(shè)計(jì)代碼后，還需要你和客戶(hù)提出一些修改意見(jiàn)幫助修改。很少有人不經(jīng)過(guò)嘗試就可以成功的，現(xiàn)在你的一項(xiàng)任務(wù)就是整理出一個(gè)明確的修改建議。修改意見(jiàn)應(yīng)盡可能的具體詳細(xì)，避免含糊不清。對(duì)修改的次數(shù)和版本做記錄，方便你和開(kāi)發(fā)人員對(duì)版本的控制 。

總結(jié)

花時(shí)間精心管理你的文件最終被證明是值得的，作為一個(gè)設(shè)計(jì)師，如果在網(wǎng)站開(kāi)發(fā)上還算是新手，應(yīng)該抓住所有學(xué)習(xí)新事物的機(jī)會(huì)。有問(wèn)題，你可以向程序開(kāi)發(fā)人員咨詢(xún)，從自己的錯(cuò)誤中吸取教訓(xùn)，確保下一個(gè)項(xiàng)目能夠如期的完工，設(shè)計(jì)能如你所計(jì)劃的樣子。

原文： Collaboration Tips for Designers Working with Developers
本文來(lái)自：http://www.wordpress.la/collaboration-tips.html