Matt Gemmell：設計師如何幫助開發者
傳統觀點來看，開發者肯定不會是很贊的設計師，反之亦然。在日常工作中，由于工作的需要而在項目中設計師和開發者必須相互協作，即便有些例外，大部分開發者還是覺得設計師的工作（或反之）是很神秘的。作為一個兩邊都混得開的人，我給設計師們列了如下的單子，希望這些建議能讓應用程序/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上，你肯丁會喜歡打開了抗鋸齒模式之后的樣子。
確認設計的幅面尺寸
這一點特別針對移動設備的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部分，外圍都是不拉伸的，中間由一個像素寬度拉伸而成。
按鈕就是由以上這些方式拉伸而成。選擇合適的漸變方式，與開發者事先溝通，選擇確定的按鈕生成方案。
***的一些思考
創造任何的軟件都是一種團隊合作經歷，需要考慮協調圖形設計，交互設計以及實現方式。這三面都不可缺少，都是至關重要的。關注你所在領域之外其他領域的同事的需求，這樣才能更有效率的完成項目，甚至獲得自我提升。
原文鏈接：http://article.yeeyan.org/view/284135/249615
【編輯推薦】
