幫設計師與工程師更好溝通的實用技巧

　　設計師與工程師的交流經常是雞同鴨講，牛頭對不上馬嘴，為了幫同學們搞定這個難題，一位國外的設計師兼開發者整理了一個列表，幫同學們能跟工程師無障礙溝通，全是非常實用的知識點。

　　開發者一般不是令人驚豔的設計師，設計師也通常不是出色的開發者。雖然有很多例外，但這兩行的門道對對方而言都是難以言說的謎，然而雙方卻要在這種情況下合作完成專案。作為在兩個領域都工作過的人，我為設計師整理了一個列表，使他們能夠更好地輔助開發者開發應用和網站。

　　Photoshop

　　開發者經常需要處理設計師製作的Photoshop PSD檔案，因此任何對設計師有益的事情也會對開發者有益，包括繪製易於維護、易於理解的PSD檔案。

　　1. 有效地進行版本控制

　　設計師經常會面對各種裝滿了一堆沒有清晰版本命名的PSD的資料夾。為了解決這個問題，設計師可以事先確定一種合適的版本命名格式（理想的格式應該使檔案在字順排序下自動有意義地排列）。

　　2. 保持圖層

　　不要輕易合併圖層。需要匯出時，通過組合，隱藏／顯示圖層的方式來進行，匯出後再把檔案恢復到原來的狀態。不要輕易破壞有用的資料。電腦效能更不是合併圖層的理由——若被此限制，你應該做的是買記憶體更大，效能更好的電腦。

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

　　雖然對圖層命名比較繁瑣，但這樣做確實能夠幫助理解，尤其是在重用檔案元素的時候。命名時應確保文字圖層的名稱反應其內容。重複的圖層也要進行有意義的命名，而不是簡單的“副件”。

　　4. 合理地對圖層編組

　　應該把分散在不同圖層的視覺元素編為一組。對單一設計的檔案來說，編組整體上應該一致按照從左到右，從上到下的順序。層次和順序比按顏色編碼圖層更好，因為圖層移動時，顏色還需要保持。

　　5. 去掉不需要的圖層

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

　　6. 使用圖層複合

　　Photoshop的圖層複合功能可以讓你製作多組圖層狀態，如可見性，位置甚至圖層風格。你可以用圖層複合功能來靈活地在一份檔案中整合設計中不同部分（比如網站的多個標籤、應用的多個頁面）。這樣做可以不必保留重複的圖層編組，從而減小檔案大小。

　　7. 儲存向量檔案和可伸縮效果

　　在設計應用時，很可能會需要原設計兩倍尺寸的圖片來適應有雙倍畫素的新裝置。確保在這種情況下你不需要重新繪製所有的圖示。

　　助力開發者

　　還有一些特別與應用及網頁設計相關的建議，每項都有相應的要求和限制。

　　8. 學會在縮放時儲存圓角

　　作業系統經常會統一圓角的角半徑（iOS通常為12畫素）。Adobe Fireworks會保持圓角矩形的角半徑，但Photoshop不會。因此確保你用直接選擇工具來選取圓角的點並且以傳統的方式縮放影像。

　　9. 在72ppi下進行設計

　　一個畫素就是一個畫素，更多的畫素只會生成更大的檔案。不要通過改解析度來矇混過關。

　　10. 對齊畫素

　　確保相關的形狀工具設定成對齊畫素。根據你的需要使用畫素網格等工具。一貫使用偶數尺寸來方便裁剪。

　　11. 使用RGB模式

　　這點不僅對顏色顯示重要，對開發者將顏色正確地寫入程式碼也同樣關鍵。

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

　　很多（大多數）開發者除了基本的編輯功能外對Photoshop一竅不通。設計師需要適時地匯出可能會在應用或網站上用到的裁剪圖，因為畢竟他們是對檔案和Photoshop最熟悉的人。

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

　　13. 謹慎地使用字型

　　不同的裝置和作業系統的預設字型有所不同，因此不能確保這些裝置都有你進行設計的電腦上的字型（事實上，你比一般人的裝置上的字型都多）。基本上，將應用或網站上的文字以實際文字的格式呈現會有更好的效果，但這也使對字型的選擇不僅基於視覺，還有可行性上的考慮。

　　還有一點值得注意，允許個人設計使用的許可也許不允許你將該字型完全使用在應用或網頁上。在選定設計中使用的字型之前，確保和你的開發者或客戶進行有效溝通。

　　14. 確定設計尺寸

　　對移動裝置應用來說，螢幕尺寸不是全部資訊，你還需要考慮系統狀態列等的存在，以及他們如何在螢幕橫排和豎排時影響尺寸（比如iOS裝置的頂端狀態列會在橫排的時候減小較小邊的尺寸，在豎排的時候減小大邊的尺寸）。和你的開發者確認一下應用是否為完整的全屏很必要

　　15. 使用平臺風格

　　每個平臺（作業系統）都有其獨特的使用者介面元素和互動風格（也會根據不同的裝置有所不同）。在設計時注意這些風格，並且除了有特殊原因，不要進行與平臺本身風格差別太大的設計。例如，在iPad上，你會發現這些需要注意的地方：

1. 支援兩種螢幕方向的強烈需求
2. 雙欄設計在兩種螢幕方向上都可接受
3. 將彈出框作為一種介面元素和分組機制
4. 確定的檔案瀏覽器的風格
5. 在級別較高的導航欄中，返回按鈕是向左指的圖示

　　因此，在設計時要熟悉平臺，因為你的設計要適應它。沒有哪一種單一的設計可以適應所有的平臺。

　　16. 對橫排和豎排分別進行設計

　　不同的螢幕方向需要不同的互動設計風格，這不僅是因為螢幕寬高比，還因為使用者以不同方向手持裝置時外形、重量和平衡上的區別。

　　只針對適應螢幕寬高比進行設計頂多是一個糟糕的妥協策略。

　　17. 針對每種主流尺寸和情景進行設計

　　同一應用在手機、平板和電腦上的內容和互動都應有所不同。對移動裝置而言，我們也需要考慮注意力持續時間、注意力分散、使用裝置時的身體協調性減弱，以及使用者在移動或危險情境下使用裝置的可能性（例如走路時的障礙物、過馬路時的交通情況以及駕駛安全性）。

　　這些使用情景與裝置的尺寸和本質有不可否認的關係，有效的設計應該充分考慮這些因素。

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

　　好的示例內容標準有以下幾條：

1. 示例內容涵蓋應用可能的長度，而不是僅僅為了原型設計的方便。
2. 設計必需的資料預設時的顯示方案，尤其如使用者照片等。
3. 考慮不合需要的輸入示例，比如需要進行裁剪的過寬或過長的圖片。
4. 包含極端或少見的名字示例，包括超長或不間斷的姓和名。
5. 地址不限制為當地的地址形式，而包括各種可能的長度和格式。
6. 在設計的任何角落都找不到“Lorem ipsum”。

　　19. 本地化考慮

　　當大多數人考慮支援其它語言時，他們想的是文字。而當設計師或開發者考慮本地化時，他們應該考慮的是佈局。為了實現本地化，你的設計應該使所有文字支援與英文50%的寬度差異。

　　在顯示同等內容時，亞洲語言需要的空間比英語少接近50%，而歐洲語言會比英語多接近50%。這個問題在設計按鈕和幫助文字時尤其重要。

　　20. 考慮螢幕全域性光源

　　作為設計師，你應該早就瞭解每個平臺都有其不可改變的螢幕全域性光源（例如在iOS上，是在中心的正上方，或90度）。所有高光和陰影效果都應該和平臺的光源相協調。

　　21. 明確導航和組織控制元件設計

　　向你的開發者明確展示你的設計中包含的標籤、下拉選單或者其它閉合機制。在進行這種控制元件設計時，要尊重平臺的設計慣例。開發者在進行開發時需要明確瞭解資訊層次，因此你要確保你的設計清晰地展示你的意圖。圖層複合在這種情況下非常有用。

　　22. 匯出圖形時不進行壓縮

　　在匯出時以PNG alpha通道格式儲存，除非被明確告知其它儲存方式。除非被明確要求，否則不要使用JPEG格式。不要考慮影像檔案大小，因為開發者或他們的開發環境會對影像進行最優化。以透明背景匯出每個元素，而不是純色，即便你設計中的一部分背景確實是純色的。

　　23. 詢問陰影的處理

　　和你的開發者溝通是否要將陰影效果包含在匯出圖中。通常情況下，開發者會用CSS或寫程式碼來應用陰影，這樣做事實上會比直接使用預先儲存的陰影點陣圖更方便容易。不要假定陰影效果應該包含在影像中，雖然在設計原型時用圖層展示陰影效果。

　　24. 理解按鈕的構建方法

　　應用或網頁上的按鈕幾乎都不是用單一的圖片建立的，而通常是下面兩種情況：

• 3部分影像，左端影像，右端影像，重複的單畫素寬的中間部分（允許影像的橫向擴充套件）
• 9部分影像，上中下－左端影像，上中下－右端影像，以及3個重複的上中下中間部分（允許按鈕的橫向和縱向擴充套件）

　　最後的想法

　　任何軟體都應該是平面設計、互動設計和開發三者合作的結果，這三部分都同等重要。知道另外領域的需求對我們自己的工作非常有幫助。