開(kāi)發(fā)者一般不是令人驚豔的設計師，設計師也通常不是出色的開(kāi)發(fā)者。雖然有很多例外，但這(zhè)兩(liǎng)行的門道(dào)對(duì)對(duì)方而言都(dōu)是難以言說(shuō)的謎，然而雙方卻要在這(zhè)種(zhǒng)情況下合作完成(chéng)項目。作爲在兩(liǎng)個領域都(dōu)工作過(guò)的人，我爲設計師整理了一個列表，使他們能(néng)夠更好(hǎo)地輔助開(kāi)發(fā)者開(kāi)發(fā)應用和網站。

Photoshop

開(kāi)發(fā)者經(jīng)常需要處理設計師制作的Photoshop PSD文件，因此任何對(duì)設計師有益的事(shì)情也會(huì)對(duì)開(kāi)發(fā)者有益，包括繪制易于維護、易于理解的PSD文件。

1. 有效地進(jìn)行版本控制

設計師經(jīng)常會(huì)面(miàn)對(duì)各種(zhǒng)裝滿了一堆沒(méi)有清晰版本命名的PSD的文件夾。爲了解決這(zhè)個問題，設計師可以事(shì)先确定一種(zhǒng)合适的版本命名格式（理想的格式應該使文件在字順排序下自動有意義地排列）。

2. 保持圖層

不要輕易合并圖層。需要導出時(shí)，通過(guò)組合，隐藏／顯示圖層的方式來進(jìn)行，導出後(hòu)再把文件恢複到原來的狀态。不要輕易破壞有用的數據。電腦性能(néng)更不是合并圖層的理由——若被(bèi)此限制，你應該做的是買内存更大，性能(néng)更好(hǎo)的電腦。

3. 對(duì)圖層進(jìn)行有意義的命名

雖然對(duì)圖層命名比較繁瑣，但這(zhè)樣(yàng)做确實能(néng)夠幫助理解，尤其是在重用文件元素的時(shí)候。命名時(shí)應确保文字圖層的名稱反應其内容。重複的圖層也要進(jìn)行有意義的命名，而不是簡單的“副件”。

4. 合理地對(duì)圖層編組

應該把分散在不同圖層的視覺元素編爲一組。對(duì)單一設計的文件來說(shuō)，編組整體上應該一緻按照從左到右，從上到下的順序。層次和順序比按顔色編碼圖層更好(hǎo)，因爲圖層移動時(shí)，顔色還(hái)需要保持。

5. 去掉不需要的圖層

不再需要的舊版本、模版和參考材料以及臨時(shí)複件應該從圖層中及時(shí)删除。間歇性地浏覽一下你的所有圖層，及時(shí)删除不需要的東西。

6. 使用圖層複合

Photoshop的圖層複合功能(néng)可以讓你制作多組圖層狀态，如可見性，位置甚至圖層風格。你可以用圖層複合功能(néng)來靈活地在一份文件中整合設計中不同部分（比如網站的多個标簽、應用的多個頁面(miàn)）。這(zhè)樣(yàng)做可以不必保留重複的圖層編組，從而減小文件大小。

7. 保存矢量文件和可伸縮效果

在設計應用時(shí)，很可能(néng)會(huì)需要原設計兩(liǎng)倍尺寸的圖片來适應有雙倍像素的新設備。确保在這(zhè)種(zhǒng)情況下你不需要重新繪制所有的圖标。

助力開(kāi)發(fā)者

還(hái)有一些特别與應用及網頁設計相關的建議，每項都(dōu)有相應的要求和限制。

8. 學(xué)會(huì)在縮放時(shí)保存圓角

操作系統經(jīng)常會(huì)統一圓角的角半徑（iOS通常爲12像素）。Adobe Fireworks會(huì)保持圓角矩形的角半徑，但Photoshop不會(huì)。因此确保你用直接選擇工具來選取圓角的點并且以傳統的方式縮放圖像。

9. 在72ppi下進(jìn)行設計

一個像素就(jiù)是一個像素，更多的像素隻會(huì)生成(chéng)更大的文件。不要通過(guò)改分辨率來蒙混過(guò)關。

10. 對(duì)齊像素

确保相關的形狀工具設置成(chéng)對(duì)齊像素。根據你的需要使用像素網格等工具。一貫使用偶數尺寸來方便裁剪。

11. 使用RGB模式

這(zhè)點不僅對(duì)顔色顯示重要，對(duì)開(kāi)發(fā)者將(jiāng)顔色正确地寫入代碼也同樣(yàng)關鍵。

12. 資源準備是你工作的一部分

很多（大多數）開(kāi)發(fā)者除了基本的編輯功能(néng)外對(duì)Photoshop一竅不通。設計師需要适時(shí)地導出可能(néng)會(huì)在應用或網站上用到的裁剪圖，因爲畢竟他們是對(duì)文件和Photoshop最熟悉的人。

這(zhè)項工作雖然很痛苦，而且很耗時(shí)，但這(zhè)是除“設計”外90%的工作。

13. 謹慎地使用字體

不同的設備和操作系統的預設字體有所不同，因此不能(néng)确保這(zhè)些設備都(dōu)有你進(jìn)行設計的電腦上的字體（事(shì)實上，你比一般人的設備上的字體都(dōu)多）。基本上，將(jiāng)應用或網站上的文字以實際文本的格式呈現會(huì)有更好(hǎo)的效果，但這(zhè)也使對(duì)字體的選擇不僅基于視覺，還(hái)有可行性上的考慮。

還(hái)有一點值得注意，允許個人設計使用的許可也許不允許你將(jiāng)該字體完全使用在應用或網頁上。在選定設計中使用的字體之前，确保和你的開(kāi)發(fā)者或客戶進(jìn)行有效溝通。

14. 确定設計尺寸

對(duì)移動設備應用來說(shuō)，屏幕尺寸不是全部信息，你還(hái)需要考慮系統狀态欄等的存在，以及他們如何在屏幕橫排和豎排時(shí)影響尺寸（比如iOS設備的頂端狀态欄會(huì)在橫排的時(shí)候減小較小邊的尺寸，在豎排的時(shí)候減小大邊的尺寸）。和你的開(kāi)發(fā)者确認一下應用是否爲完整的全屏很必要。

15. 使用平台風格

每個平台（操作系統）都(dōu)有其獨特的用戶界面(miàn)元素和交互風格（也會(huì)根據不同的設備有所不同）。在設計時(shí)注意這(zhè)些風格，并且除了有特殊原因，不要進(jìn)行與平台本身風格差别太大的設計。例如，在iPad上，你會(huì)發(fā)現這(zhè)些需要注意的地方：

1. 支持兩(liǎng)種(zhǒng)屏幕方向(xiàng)的強烈需求

2. 雙欄設計在兩(liǎng)種(zhǒng)屏幕方向(xiàng)上都(dōu)可接受

3. 將(jiāng)彈出框作爲一種(zhǒng)界面(miàn)元素和分組機制

4. 确定的文件浏覽器的風格

5. 在級别較高的導航欄中，返回按鈕是向(xiàng)左指的圖标

因此，在設計時(shí)要熟悉平台，因爲你的設計要适應它。沒(méi)有哪一種(zhǒng)單一的設計可以适應所有的平台。

16. 對(duì)橫排和豎排分别進(jìn)行設計

不同的屏幕方向(xiàng)需要不同的交互設計風格，這(zhè)不僅是因爲屏幕寬高比，還(hái)因爲用戶以不同方向(xiàng)手持設備時(shí)外形、重量和平衡上的區别。

隻針對(duì)适應屏幕寬高比進(jìn)行設計頂多是一個糟糕的妥協策略。

17. 針對(duì)每種(zhǒng)主流尺寸和情景進(jìn)行設計

同一應用在手機、平闆和電腦上的内容和交互都(dōu)應有所不同。對(duì)移動設備而言，我們也需要考慮注意力持續時(shí)間、注意力分散、使用設備時(shí)的身體協調性減弱，以及用戶在移動或危險情境下使用設備的可能(néng)性（例如走路時(shí)的障礙物、過(guò)馬路時(shí)的交通情況以及駕駛安全性）。

這(zhè)些使用情景與設備的尺寸和本質有不可否認的關系，有效的設計應該充分考慮這(zhè)些因素。

18. 使用純正的，至少實際的示例内容

好(hǎo)的示例内容标準有以下幾條：

1. 示例内容涵蓋應用可能(néng)的長(cháng)度，而不是僅僅爲了原型設計的方便。

2. 設計必需的數據缺省時(shí)的顯示方案，尤其如用戶照片等。

3. 考慮不合需要的輸入示例，比如需要進(jìn)行裁剪的過(guò)寬或過(guò)長(cháng)的圖片。

4. 包含極端或少見的名字示例，包括超長(cháng)或不間斷的姓和名。

5. 地址不限制爲當地的地址形式，而包括各種(zhǒng)可能(néng)的長(cháng)度和格式。

6. 在設計的任何角落都(dōu)找不到“Lorem ipsum”。

19. 本地化考慮

當大多數人考慮支持其它語言時(shí)，他們想的是文本。而當設計師或開(kāi)發(fā)者考慮本地化時(shí)，他們應該考慮的是布局。爲了實現本地化，你的設計應該使所有文本支持與英文50%的寬度差異。

在顯示同等内容時(shí)，亞洲語言需要的空間比英語少接近50%，而歐洲語言會(huì)比英語多接近50%。這(zhè)個問題在設計按鈕和幫助文本時(shí)尤其重要。

20. 考慮屏幕全局光源

作爲設計師，你應該早就(jiù)了解每個平台都(dōu)有其不可改變的屏幕全局光源（例如在iOS上，是在中心的正上方，或90度）。所有高光和陰影效果都(dōu)應該和平台的光源相協調。

21. 明确導航和組織控件設計

向(xiàng)你的開(kāi)發(fā)者明确展示你的設計中包含的标簽、下拉菜單或者其它閉合機制。在進(jìn)行這(zhè)種(zhǒng)控件設計時(shí)，要尊重平台的設計慣例。開(kāi)發(fā)者在進(jìn)行開(kāi)發(fā)時(shí)需要明确了解信息層次，因此你要确保你的設計清晰地展示你的意圖。圖層複合在這(zhè)種(zhǒng)情況下非常有用。

22. 導出圖形時(shí)不進(jìn)行壓縮

在導出時(shí)以PNG alpha通道(dào)格式保存，除非被(bèi)明确告知其它保存方式。除非被(bèi)明确要求，否則不要使用JPEG格式。不要考慮圖像文件大小，因爲開(kāi)發(fā)者或他們的開(kāi)發(fā)環境會(huì)對(duì)圖像進(jìn)行最優化。以透明背景導出每個元素，而不是純色，即便你設計中的一部分背景确實是純色的。

23. 詢問陰影的處理

和你的開(kāi)發(fā)者溝通是否要將(jiāng)陰影效果包含在導出圖中。通常情況下，開(kāi)發(fā)者會(huì)用CSS或寫代碼來應用陰影，這(zhè)樣(yàng)做事(shì)實上會(huì)比直接使用預先保存的陰影位圖更方便容易。不要假定陰影效果應該包含在圖像中，雖然在設計原型時(shí)用圖層展示陰影效果。

24. 理解按鈕的構建方法

應用或網頁上的按鈕幾乎都(dōu)不是用單一的圖片創建的，而通常是下面(miàn)兩(liǎng)種(zhǒng)情況：

• 3部分圖像，左端圖像，右端圖像，重複的單像素寬的中間部分（允許圖像的橫向(xiàng)擴展）

• 9部分圖像，上中下－左端圖像，上中下－右端圖像，以及3個重複的上中下中間部分（允許按鈕的橫向(xiàng)和縱向(xiàng)擴展）

最後(hòu)的想法

任何軟件都(dōu)應該是平面(miàn)設計、交互設計和開(kāi)發(fā)三者合作的結果，這(zhè)三部分都(dōu)同等重要。知道(dào)另外領域的需求對(duì)我們自己的工作非常有幫助。