英文原文：how designers can help developers，翻譯：sharen24
前言：傳統觀點來看，開發者肯定不會是很出色的設計師，反之亦然。在日常工作中，由於工作的需要而在專案中設計師和開發者必須相互協作，即便有些例外，大部分開發者還是覺得設計師的工作（或反之）是很神祕的。作為一個兩邊都混得開的人，我給設計師們列了如下的單子，希望這些建議能讓Web開發者們的生活開心點。
這篇文章得到了Evgenia Grinblo和Sarah Parmenter的啟發和建議，他們都是很棒的設計師。你可以點這裡看Sarah的演講(某著名的不存在視訊網站)，也提到了一些相同的看法。
下面是一些關於Photoshop的建議
開發者經常要面對來自設計師發來的PSD檔案，所以呢，只要是設計師覺得對自己有益，就會對別人有益。下面這些建議適用於建立易於維護的，方便易懂的PSD。
使用智慧化的版本控制
有的資料夾裝滿了莫名其妙名字的各種版本的PSD檔案是設計師杯具的夢魘。可以用一些可讀好理解的檔案命名規則，來給檔案的每個版本命名，或者用一些第三方的資源管理工具以及版本控制系統。
用好圖層
能不「合併可見圖層」就儘量不要這麼做。要匯出的時候可以先對層分組或者隱藏/顯示圖層然後再匯出，最後再還原成最初的狀態。有用的資料就別丟掉，為了流暢/提高效能真不值得合併圖層：完全可以用加記憶體 或者換電腦解決。
給圖層命名時要有意義，不要亂起名字
我知道這樣很麻煩，但真的很易於別人理解，特別是想要重用裡面某些元素時。確保文字圖層的名字就是文字的內容，複製圖層時候也改個易於理解的名字 而不是xxx copy。
恰當地使圖層成組
一個由分散在各個圖層的圖形元素構成的元件應該放在一個組裡，而且這些圖層的排列順序應該按照從左到右從上到下這樣的順序。以層次結構/次序來管理圖層一般會比用彩色標籤來管理要好點，因為彩色標籤在圖層呢個移動了以後要重新維護一遍。
精簡掉用不著的圖層
舊版本，模板，還有引用到的素材，臨時的複製圖層，這些東西如果以後再也用不著了就應該刪掉。時不時地瞟一眼哪些是完全用不著的東西，幹掉它。
使用組合圖層工具(Layer Comps)
Photoshop的組合圖層特性使你可以建立一組圖層成為一個組合，改變可不可見/透明度/位置和圖層風格。這個特性可以用來處理一個設計的多個狀態（例如Web/App的很多Tab導航欄的多種狀態等）合成在一個檔案裡。這可以有效減少維護一大堆複製的圖層，同事減小了檔案尺寸。學會使用它。
儘量多地使用向量圖形，或者是可以不失真縮放的效果
為了設計的可縮放性，尺寸越大越好。特別是在app的設計上，很可能某天就要把整個設計的尺寸翻倍(iPad3可能就要這樣double了你懂的)。確保今後不用再重新繪製一遍某些點陣圖。
如何幫助開發者
下面是一些可以有效幫助到開發者的建議，特別是關於網頁設計和app設計，因為他們有特殊的要求和限制：
學會在需要縮放尺寸的地方處理圓角
某些作業系統（OSX或者iOS）會有這樣的圓角，並且在所有地方都這麼使用，iOS通常矩形圓角的半徑是12畫素(不太確定@_@)。Firework知道怎麼去自動處理這個圓角，但Photoshop不會。所以呢，要熟悉使用「直接選擇」工具（囧 我也不知道這是啥意思）在縮放圖形尺寸時去處理好圓角。
一定要用72ppi的解析度
目標是液晶螢幕顯示，這不是印刷或出版（解析度），所以為了使畫素可以點點對應，只能選72ppi這個解析度。超過這個解析度只會使圖形尺寸變大檔案變大，木有其他意義。數字出版業的解析度在這裡不太適用。
保證畫素完整性
確保Snap to(不知道中文版裡叫神馬，好像是吸附？)裡面的都勾上了，然後根據你的喜好用網格去控制。（解釋一下，這裡作者意思是圖形的邊界不要出現出現跨畫素的情況）。推薦使用銳利的邊界，用精確的畫素去區分邊界，否則次畫素級別的渲染會在某些裝置上使你的美麗的設計變得很屎。相關的，在巨集觀上和某些小的元素都推薦使用偶數長度的影像尺寸，也是方便縮放。感謝Matt Drance指出了這一點。
永遠使用RGB顏色模式
這一點不僅對顯示器顯示比較重要，而且在開發者需要在圖中拾色並轉成16進位制程式碼寫程式的時候也很重要，不能錯用其他顏色模式喔。
提供最終可用的資源是你的工作內容之一
絕大多數開發者基本不知道Photoshop咋用，用也只能用到一些最基礎的用途。正確地匯出所需切圖是設計師們的工作，因為他們最熟悉Phtoshop以及這些PSD。
我知道這個比較痛苦，而且很花時間，但這也是在設計完工之後設計師們幾乎唯一的工作內容了。
當心字型的使用
不同作業系統會預裝不同的字型庫，根本無法保證他們在別處也有你在做設計時用到的那些字型（因為你們時設計師肯定擁有比普通人多的字型）。因為顯示文字最好的方法就是由系統來渲染這些文字在螢幕上（而不是做成圖形），所以選用什麼字型是要慎重考量的。
一定記住，有些給定的字型授權你在設計中使用，但是不允許你將字型檔案嵌入web或app中，當心使用他們，確保在使用前溝通過有關方面。
模擬特定平臺的文字渲染
有時會為了視覺的一致性，可以試驗一下在Photoshop中抗鋸齒選項開啟之後跟在裝置中開啟抗鋸齒之後的效果是否一致。在iOS上，你肯丁會喜歡開啟了抗鋸齒模式之後的樣子。
本文作者 Matt Gemmell
確認設計的幅面尺寸
這一點特別針對移動裝置的app，僅僅按照螢幕尺寸是不太夠的－有時需要按照狀態列（最上方）的高度以及裝置方向（橫或豎）來調整。例如iOS裝置豎屏時狀態列會佔據長邊的長度，橫屏時會佔據短邊的長度。提前跟開發者確認app是否會全屏顯示。
善用每個平臺的特色
每個平臺（作業系統）都有其別緻的一面，都有與眾不同的介面元素，互動風格（也與裝置型號相關）。要經常考慮到這些因素。儘量不去設計得超越了這些規則的限制，除非有非做不可的必要。舉個例子，在iPad上有如下的規則需要遵守：
1、需要app能支援裝置在各個方向都有很好的表現
2、支援左右兩欄的layout，橫屏時同時顯示兩欄，豎屏時可以讓其中一欄成為另一欄的一部分。
3、彈出框成為app統一的UI的一部分。
4、一種比較獨特的文件瀏覽器
5、在一級一級導航欄上，每個返回上一級的Back按鈕都是在左側切有尖角。
諸如此類，要用心去熟悉這個平臺，因為你的設計要去匹配他。沒辦法用一套設計去匹配所有平臺的。
既然設計了橫屏模式，那就要再設計一遍豎屏模式
不同的姿勢（橫豎屏方向）需要不同的物理上的互動風格，不僅僅因為不同的裝置有不同的螢幕寬高比例，外殼材質，重量和手持地平衡感。一種不能適配除了原始寬高比之外其他寬高比的設計，是最好的妥協辦法。
為不同螢幕尺寸分別設計
在app介面設計中，手機上的內容和展現形式都應該與平板和電腦不同。移動裝置，我們還需要考慮諸如此類：使用者在螢幕上的關注區域，使使用者分心的地方，物理上的缺陷，使用者在移動中會使用的風險比如走路/過馬路時，或者在開車的時候。
上述這些內容不可避免地與尺寸和裝置息息相關，那些有效的設計必須考慮這些因素。
使用真正的內容去填充空白處，最少也是理想化的內容
一些很好的例子都擁有如下特徵（這事關於設計中文字資訊用什麼文字來填充的）：
1、示例文字要經過充分測試，測試所有可能的長度，而不僅僅在設計時方便隨意寫了一段。
2、有時為了方便會省略一些資料，比如使用者的頭像，這些在實際的設計中是一定要有的。
3、有些讓人感到不舒服的情況是要考慮的，比如極寬或者極窄的圖片。
4、要考慮到有時別人姓名會很長而且中箭不分割；不要僅僅假設人名是兩個字的。
5、輸入地址的地方不應該有長度限制，因為地球上任何長度/格式/書寫方式的地址都能找到，一定要做到彈性化和允許有空格。
6、設計中儘量不要通篇都用”Lorem ipsum”。
注：Lorem ipsum是指一篇常用於排版設計領域的拉丁文文章，主要的目的為測試文章或文字在不同字型、版型下看起來的效果。
考慮語言本地化
絕大部分人一談到支援別的語言，就立即想到的是文字。當設計師或開發者考慮這個問題時，會去想到佈局。所以為了支援多語言顯示，你的設計需要為所有文字元素設定50%的字型寬度，不僅僅為了英文。
全域性性的光源設定（跟文字陰影投射方向有關）
作為設計師，應該不跟你提這個問題了，但每個平臺都有其不能輕易改變的特質（例如iOS裡就是光源在正上方居中）。設計中的所有發光和陰影效果都應該與平臺本身保持一致性。
使導航/組織結構易於理解
如果你的設計中用到了例如標籤導航，或者層級式的導航方式或者其他已成型的結構，就要讓這些東西對開發者來說簡單易懂。而且要考慮到平臺特定的習慣，就像上面說過的那些。應該及早告訴開發者這些層級關係和結構，因為這些與app開發時使用的架構休慼相關。確信看到你的設計就可以輕易理解你的想法。組合圖層(Layer Comps)在處理這方面的時候就很有用。
能匯出切圖的時候不要去自己壓縮
一定使用帶透明度的PNG格式。別用JPG除非特定場合。檔案尺寸不用管，開發者或者他們使用的開發環境會去優化這些影像（得到較小尺寸）。匯出每個圖形元素都要用透明的背景（及時這個元素就是要放在一個不透明背景上）。
提前溝通關於陰影的處理
與開發者去溝通這個陰影是含在影像裡還是有程式碼去生成。一般的，開發者會自己做陰影，用CSS或者有其他繪圖的程式碼，這樣會更簡單方便一些，而且還比點陣圖形式的陰影更有一致性。別開始就假設要把陰影嵌在影像裡（在草圖設計時就應該用圖層特效去生成陰影而不是繪製獨立陰影層）。
理解按鈕是怎樣工作的
在app中或者是在web裡 按鈕們都是有一個單一的圖片生成的。或者，也有可能是如下方式生成：
1、影像分成3部分，左中右，左和右是不拉伸的，中間由一個畫素寬度拉伸而成（不能垂直拉伸）
2、影像分成9部分，外圍都是不拉伸的，中間由一個畫素寬度拉伸而成。
按鈕就是由以上這些方式拉伸而成。選擇合適的漸變方式，與開發者事先溝通，選擇確定的按鈕生成方案。
最後的一些思考
創造任何的軟體都是一種團隊合作經歷，需要考慮協調圖形設計，互動設計以及實現方式。這三面都不可缺少，都是至關重要的。關注你所在領域之外其他領域的同事的需求，這樣才能更有效率的完成專案，甚至獲得自我提升。
我打算繼續寫一些從相反的角度看問題的文章－開發者如何能幫助設計師更好地完成工作。寫好後肯定在推特上告訴大家，可以跟我聯絡，而且在這些探討上非常樂意得到你慷慨地分享思考和建議。