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

Photoshop

開發者經常需要(yào / yāo)處理設計師制作的(de)Photoshop PSD文件，因此任何對設計師有益的(de)事情也(yě)會對開發者有益，包括繪制易于(yú)維護、易于(yú)理解的(de)PSD文件。

1. 有效地(dì / de)進行版本控制

設計師經常會面對各種裝滿了(le／liǎo)一(yī / yì ／yí)堆沒有清晰版本命名的(de)PSD的(de)文件夾。爲(wéi / wèi)了(le／liǎo)解決這(zhè)個(gè)問題，設計師可以(yǐ)事先确定一(yī / yì ／yí)種合适的(de)版本命名格式（理想的(de)格式應該使文件在(zài)字順排序下自動有意義地(dì / de)排列）。

2. 保持圖層

不(bù)要(yào / yāo)輕易合并圖層。需要(yào / yāo)導出(chū)時(shí)，通過組合，隐藏／顯示圖層的(de)方式來(lái)進行，導出(chū)後再把文件恢複到(dào)原來(lái)的(de)狀态。不(bù)要(yào / yāo)輕易破壞有用的(de)數據。電腦性能更不(bù)是(shì)合并圖層的(de)理由——若被此限制，你應該做的(de)是(shì)買内存更大(dà)，性能更好的(de)電腦。

3. 對圖層進行有意義的(de)命名

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

4. 合理地(dì / de)對圖層編組

應該把分散在(zài)不(bù)同圖層的(de)視覺元素編爲(wéi / wèi)一(yī / yì ／yí)組。對單一(yī / yì ／yí)設計的(de)文件來(lái)說(shuō)，編組整體上(shàng)應該一(yī / yì ／yí)緻按照從左到(dào)右，從上(shàng)到(dào)下的(de)順序。層次和(hé / huò)順序比按顔色編碼圖層更好，因爲(wéi / wèi)圖層移動時(shí)，顔色還需要(yào / yāo)保持。

5. 去掉不(bù)需要(yào / yāo)的(de)圖層

不(bù)再需要(yào / yāo)的(de)舊版本、模版和(hé / huò)參考材料以(yǐ)及臨時(shí)複件應該從圖層中及時(shí)删除。間歇性地(dì / de)浏覽一(yī / yì ／yí)下你的(de)所有圖層，及時(shí)删除不(bù)需要(yào / yāo)的(de)東西。

6. 使用圖層複合

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

7. 保存矢量文件和(hé / huò)可伸縮效果

在(zài)設計應用時(shí)，很可能會需要(yào / yāo)原設計兩倍尺寸的(de)圖片來(lái)适應有雙倍像素的(de)新設備。确保在(zài)這(zhè)種情況下你不(bù)需要(yào / yāo)重新繪制所有的(de)圖标。

助力開發者

還有一(yī / yì ／yí)些特别與應用及網頁設計相關的(de)建議，每項都有相應的(de)要(yào / yāo)求和(hé / huò)限制。

8. 學會在(zài)縮放時(shí)保存圓角

操作系統經常會統一(yī / yì ／yí)圓角的(de)角半徑（iOS通常爲(wéi / wèi)12像素）。Adobe Fireworks會保持圓角矩形的(de)角半徑，但Photoshop不(bù)會。因此确保你用直接選擇工具來(lái)選取圓角的(de)點并且以(yǐ)傳統的(de)方式縮放圖像。

9. 在(zài)72ppi下進行設計

一(yī / yì ／yí)個(gè)像素就(jiù)是(shì)一(yī / yì ／yí)個(gè)像素，更多的(de)像素隻會生成更大(dà)的(de)文件。不(bù)要(yào / yāo)通過改分辨率來(lái)蒙混過關。

10. 對齊像素

确保相關的(de)形狀工具設置成對齊像素。根據你的(de)需要(yào / yāo)使用像素網格等工具。一(yī / yì ／yí)貫使用偶數尺寸來(lái)方便裁剪。

11. 使用RGB模式

這(zhè)點不(bù)僅對顔色顯示重要(yào / yāo)，對開發者将顔色正确地(dì / de)寫入代碼也(yě)同樣關鍵。

12. 資源準備是(shì)你工作的(de)一(yī / yì ／yí)部分

很多（大(dà)多數）開發者除了(le／liǎo)基本的(de)編輯功能外對Photoshop一(yī / yì ／yí)竅不(bù)通。設計師需要(yào / yāo)适時(shí)地(dì / de)導出(chū)可能會在(zài)應用或網站上(shàng)用到(dào)的(de)裁剪圖，因爲(wéi / wèi)畢竟他(tā)們是(shì)對文件和(hé / huò)Photoshop最熟悉的(de)人(rén)。

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

13. 謹慎地(dì / de)使用字體

不(bù)同的(de)設備和(hé / huò)操作系統的(de)預設字體有所不(bù)同，因此不(bù)能确保這(zhè)些設備都有你進行設計的(de)電腦上(shàng)的(de)字體（事實上(shàng)，你比一(yī / yì ／yí)般人(rén)的(de)設備上(shàng)的(de)字體都多）。基本上(shàng)，将應用或網站上(shàng)的(de)文字以(yǐ)實際文本的(de)格式呈現會有更好的(de)效果，但這(zhè)也(yě)使對字體的(de)選擇不(bù)僅基于(yú)視覺，還有可行性上(shàng)的(de)考慮。

還有一(yī / yì ／yí)點值得注意，允許個(gè)人(rén)設計使用的(de)許可也(yě)許不(bù)允許你将該字體完全使用在(zài)應用或網頁上(shàng)。在(zài)選定設計中使用的(de)字體之(zhī)前，确保和(hé / huò)你的(de)開發者或客戶進行有效溝通。

14. 确定設計尺寸

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

15. 使用平台風格

每個(gè)平台（操作系統）都有其獨特的(de)用戶界面元素和(hé / huò)交互風格（也(yě)會根據不(bù)同的(de)設備有所不(bù)同）。在(zài)設計時(shí)注意這(zhè)些風格，并且除了(le／liǎo)有特殊原因，不(bù)要(yào / yāo)進行與平台本身風格差别太大(dà)的(de)設計。例如，在(zài)iPad上(shàng)，你會發現這(zhè)些需要(yào / yāo)注意的(de)地(dì / de)方：

1. 支持兩種屏幕方向的(de)強烈需求

2. 雙欄設計在(zài)兩種屏幕方向上(shàng)都可接受

3. 将彈出(chū)框作爲(wéi / wèi)一(yī / yì ／yí)種界面元素和(hé / huò)分組機制

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

5. 在(zài)級别較高的(de)導航欄中，返回按鈕是(shì)向左指的(de)圖标

因此，在(zài)設計時(shí)要(yào / yāo)熟悉平台，因爲(wéi / wèi)你的(de)設計要(yào / yāo)适應它。沒有哪一(yī / yì ／yí)種單一(yī / yì ／yí)的(de)設計可以(yǐ)适應所有的(de)平台。

16. 對橫排和(hé / huò)豎排分别進行設計

不(bù)同的(de)屏幕方向需要(yào / yāo)不(bù)同的(de)交互設計風格，這(zhè)不(bù)僅是(shì)因爲(wéi / wèi)屏幕寬高比，還因爲(wéi / wèi)用戶以(yǐ)不(bù)同方向手持設備時(shí)外形、重量和(hé / huò)平衡上(shàng)的(de)區别。

隻針對适應屏幕寬高比進行設計頂多是(shì)一(yī / yì ／yí)個(gè)糟糕的(de)妥協策略。

17. 針對每種主流尺寸和(hé / huò)情景進行設計

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

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

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

好的(de)示例内容标準有以(yǐ)下幾條：

1. 示例内容涵蓋應用可能的(de)長度，而(ér)不(bù)是(shì)僅僅爲(wéi / wèi)了(le／liǎo)原型設計的(de)方便。

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

3. 考慮不(bù)合需要(yào / yāo)的(de)輸入示例，比如需要(yào / yāo)進行裁剪的(de)過寬或過長的(de)圖片。

4. 包含極端或少見的(de)名字示例，包括超長或不(bù)間斷的(de)姓和(hé / huò)名。

5. 地(dì / de)址不(bù)限制爲(wéi / wèi)當地(dì / de)的(de)地(dì / de)址形式，而(ér)包括各種可能的(de)長度和(hé / huò)格式。

6. 在(zài)設計的(de)任何角落都找不(bù)到(dào)“Lorem ipsum”。

19. 本地(dì / de)化考慮

當大(dà)多數人(rén)考慮支持其它語言時(shí)，他(tā)們想的(de)是(shì)文本。而(ér)當設計師或開發者考慮本地(dì / de)化時(shí)，他(tā)們應該考慮的(de)是(shì)布局。爲(wéi / wèi)了(le／liǎo)實現本地(dì / de)化，你的(de)設計應該使所有文本支持與英文50%的(de)寬度差異。

在(zài)顯示同等内容時(shí)，亞洲語言需要(yào / yāo)的(de)空間比英語少接近50%，而(ér)歐洲語言會比英語多接近50%。這(zhè)個(gè)問題在(zài)設計按鈕和(hé / huò)幫助文本時(shí)尤其重要(yào / yāo)。

20. 考慮屏幕全局光源

作爲(wéi / wèi)設計師，你應該早就(jiù)了(le／liǎo)解每個(gè)平台都有其不(bù)可改變的(de)屏幕全局光源（例如在(zài)iOS上(shàng)，是(shì)在(zài)中心的(de)正上(shàng)方，或90度）。所有高光和(hé / huò)陰影效果都應該和(hé / huò)平台的(de)光源相協調。

21. 明确導航和(hé / huò)組織控件設計

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

22. 導出(chū)圖形時(shí)不(bù)進行壓縮

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

23. 詢問陰影的(de)處理

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

24. 理解按鈕的(de)構建方法

應用或網頁上(shàng)的(de)按鈕幾乎都不(bù)是(shì)用單一(yī / yì ／yí)的(de)圖片創建的(de)，而(ér)通常是(shì)下面兩種情況：

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

• 9部分圖像，上(shàng)中下－左端圖像，上(shàng)中下－右端圖像，以(yǐ)及3個(gè)重複的(de)上(shàng)中下中間部分（允許按鈕的(de)橫向和(hé / huò)縱向擴展）

最後的(de)想法

任何軟件都應該是(shì)平面設計、交互設計和(hé / huò)開發三者合作的(de)結果，這(zhè)三部分都同等重要(yào / yāo)。知道(dào)另外領域的(de)需求對我們自己的(de)工作非常有幫助。