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

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

　　Photoshop

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

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

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

　　2. 保持圖層

　　不要輕易合并圖層。需要導(dǎo)出時，通過組合，隱藏／顯示圖層的方式來進(jìn)行，導(dǎo)出后再把文件恢復(fù)到原來的狀態(tài)。不要輕易破壞有用的數(shù)據(jù)。電腦性能更不是合并圖層的理由——若被此限制，你應(yīng)該做的是買內(nèi)存更大，性能更好的電腦。

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

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

　　4. 合理地對圖層編組

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

　　5. 去掉不需要的圖層

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

　　6. 使用圖層復(fù)合

　　Photoshop的圖層復(fù)合功能可以讓你制作多組圖層狀態(tài)，如可見性，位置甚至圖層風(fēng)格。你可以用圖層復(fù)合功能來靈活地在一份文件中整合設(shè)計中不同部分（比如網(wǎng)站的多個標(biāo)簽、應(yīng)用的多個頁面）。這樣做可以不必保留重復(fù)的圖層編組，從而減小文件大小。

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

　　在設(shè)計應(yīng)用時，很可能會需要原設(shè)計兩倍尺寸的圖片來適應(yīng)有雙倍像素的新設(shè)備。確保在這種情況下你不需要重新繪制所有的圖標(biāo)。

　　助力開發(fā)者

　　還有一些特別與應(yīng)用及網(wǎng)頁設(shè)計相關(guān)的建議，每項都有相應(yīng)的要求和限制。

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

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

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

　　一個像素就是一個像素，更多的像素只會生成更大的文件。不要通過改分辨率來蒙混過關(guān)。

　　10. 對齊像素

　　確保相關(guān)的形狀工具設(shè)置成對齊像素。根據(jù)你的需要使用像素網(wǎng)格等工具。一貫使用偶數(shù)尺寸來方便裁剪。

　　11. 使用RGB模式

　　這點不僅對顏色顯示重要，對開發(fā)者將顏色正確地寫入代碼也同樣關(guān)鍵。

　　12. 資源準(zhǔn)備是你工作的一部分

　　很多（大多數(shù)）開發(fā)者除了基本的編輯功能外對Photoshop一竅不通。設(shè)計師需要適時地導(dǎo)出可能會在應(yīng)用或網(wǎng)站上用到的裁剪圖，因為畢竟他們是對文件和Photoshop最熟悉的人。

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

　　13. 謹(jǐn)慎地使用字體

　　不同的設(shè)備和操作系統(tǒng)的預(yù)設(shè)字體有所不同，因此不能確保這些設(shè)備都有你進(jìn)行設(shè)計的電腦上的字體（事實上，你比一般人的設(shè)備上的字體都多）。基本上，將應(yīng)用或網(wǎng)站上的文字以實際文本的格式呈現(xiàn)會有更好的效果，但這也使對字體的選擇不僅基于視覺，還有可行性上的考慮。

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

　　14. 確定設(shè)計尺寸

　　對移動設(shè)備應(yīng)用來說，屏幕尺寸不是全部信息，你還需要考慮系統(tǒng)狀態(tài)欄等的存在，以及他們?nèi)绾卧谄聊粰M排和豎排時影響尺寸（比如iOS設(shè)備的頂端狀態(tài)欄會在橫排的時候減小較小邊的尺寸，在豎排的時候減小大邊的尺寸）。和你的開發(fā)者確認(rèn)一下應(yīng)用是否為完整的全屏很必要。

　　15. 使用平臺風(fēng)格

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

支持兩種屏幕方向的強(qiáng)烈需求

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

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

確定的文件瀏覽器的風(fēng)格

在級別較高的導(dǎo)航欄中，返回按鈕是向左指的圖標(biāo)

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

　　16. 對橫排和豎排分別進(jìn)行設(shè)計

　　不同的屏幕方向需要不同的交互設(shè)計風(fēng)格，這不僅是因為屏幕寬高比，還因為用戶以不同方向手持設(shè)備時外形、重量和平衡上的區(qū)別。

　　只針對適應(yīng)屏幕寬高比進(jìn)行設(shè)計頂多是一個糟糕的妥協(xié)策略。

　　17. 針對每種主流尺寸和情景進(jìn)行設(shè)計

　　同一應(yīng)用在手機(jī)、平板和電腦上的內(nèi)容和交互都應(yīng)有所不同。對移動設(shè)備而言，我們也需要考慮注意力持續(xù)時間、注意力分散、使用設(shè)備時的身體協(xié)調(diào)性減弱，以及用戶在移動或危險情境下使用設(shè)備的可能性（例如走路時的障礙物、過馬路時的交通情況以及駕駛安全性）。

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

　　18. 使用純正的，至少實際的示例內(nèi)容

　　好的示例內(nèi)容標(biāo)準(zhǔn)有以下幾條：

示例內(nèi)容涵蓋應(yīng)用可能的長度，而不是僅僅為了原型設(shè)計的方便。

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

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

包含極端或少見的名字示例，包括超長或不間斷的姓和名。

地址不限制為當(dāng)?shù)氐牡刂沸问?#xff0c;而包括各種可能的長度和格式。

在設(shè)計的任何角落都找不到“Lorem ipsum”。

　　19. 本地化考慮

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

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

　　20. 考慮屏幕全局光源

　　作為設(shè)計師，你應(yīng)該早就了解每個平臺都有其不可改變的屏幕全局光源（例如在iOS上，是在中心的正上方，或90度）。所有高光和陰影效果都應(yīng)該和平臺的光源相協(xié)調(diào)。

　　21. 明確導(dǎo)航和組織控件設(shè)計

　　向你的開發(fā)者明確展示你的設(shè)計中包含的標(biāo)簽、下拉菜單或者其它閉合機(jī)制。在進(jìn)行這種控件設(shè)計時，要尊重平臺的設(shè)計慣例。開發(fā)者在進(jìn)行開發(fā)時需要明確了解信息層次，因此你要確保你的設(shè)計清晰地展示你的意圖。圖層復(fù)合在這種情況下非常有用。

　　22. 導(dǎo)出圖形時不進(jìn)行壓縮

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

　　23. 詢問陰影的處理

　　和你的開發(fā)者溝通是否要將陰影效果包含在導(dǎo)出圖中。通常情況下，開發(fā)者會用CSS或?qū)懘a來應(yīng)用陰影，這樣做事實上會比直接使用預(yù)先保存的陰影位圖更方便容易。不要假定陰影效果應(yīng)該包含在圖像中，雖然在設(shè)計原型時用圖層展示陰影效果。

　　24. 理解按鈕的構(gòu)建方法

　　應(yīng)用或網(wǎng)頁上的按鈕幾乎都不是用單一的圖片創(chuàng)建的，而通常是下面兩種情況：

• 3部分圖像，左端圖像，右端圖像，重復(fù)的單像素寬的中間部分（允許圖像的橫向擴(kuò)展）
• 9部分圖像，上中下－左端圖像，上中下－右端圖像，以及3個重復(fù)的上中下中間部分（允許按鈕的橫向和縱向擴(kuò)展）

　　最后的想法

　　任何軟件都應(yīng)該是平面設(shè)計、交互設(shè)計和開發(fā)三者合作的結(jié)果，這三部分都同等重要。知道另外領(lǐng)域的需求對我們自己的工作非常有幫助。

轉(zhuǎn)載于:https://www.cnblogs.com/naqiang/p/5903133.html

總結(jié)

以上是生活随笔為你收集整理的帮设计师与工程师更好沟通的实用技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。