web前端培訓 幫UI設計與web前端溝通的技巧 上

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

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上，你會發現這些需要注意的地方：

支持兩種屏幕方向的強烈需求

雙欄設計在兩種屏幕方向上都可接受

將彈出框作為一種界面元素和分組機制

確定的文件瀏覽器的風格

在級別較高的導航欄中，返回按鈕是向左指的圖標

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

未完待續

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！