Matt Gemmell：設(shè)計(jì)師如何幫助開發(fā)者
傳統(tǒng)觀點(diǎn)來看，開發(fā)者肯定不會是很贊的設(shè)計(jì)師，反之亦然。在日常工作中，由于工作的需要而在項(xiàng)目中設(shè)計(jì)師和開發(fā)者必須相互協(xié)作，即便有些例外，大部分開發(fā)者還是覺得設(shè)計(jì)師的工作（或反之）是很神秘的。作為一個(gè)兩邊都混得開的人，我給設(shè)計(jì)師們列了如下的單子，希望這些建議能讓應(yīng)用程序/Web開發(fā)者們的生活開心點(diǎn)。
這篇文章得到了Evgenia Grinblo和Sarah Parmenter的啟發(fā)和建議，他們都是很棒的設(shè)計(jì)師。你可以點(diǎn)這里看Sarah的演講(某著名的不存在視頻網(wǎng)站)，也提到了一些相同的看法。
下面是一些關(guān)于Photoshop的建議
開發(fā)者經(jīng)常要面對來自設(shè)計(jì)師發(fā)來的PSD文件，所以呢，只要是設(shè)計(jì)師覺得對自己有益，就會對別人有益。下面這些建議適用于創(chuàng)建易于維護(hù)的，方便易懂的PSD。
使用智能化的版本控制
有的文件夾裝滿了莫名其妙名字的各種版本的PSD文件是設(shè)計(jì)師杯具的夢魘。可以用一些可讀好理解的文件命名規(guī)則，來給文件的每個(gè)版本命名，或者用一些第三方的資源管理工具以及版本控制系統(tǒng)。
用好圖層
能不「合并可見圖層」就盡量不要這么做。要導(dǎo)出的時(shí)候可以先對層分組或者隱藏/顯示圖層然后再導(dǎo)出，***再還原成最初的狀態(tài)。有用的數(shù)據(jù)就別丟掉，為了流暢/提高性能真不值得合并圖層：完全可以用加內(nèi)存 或者換電腦解決。
給圖層命名時(shí)要有意義，不要亂起名字
我知道這樣很麻煩，但真的很易于別人理解，特別是想要重用里面某些元素時(shí)。確保文字圖層的名字就是文字的內(nèi)容，復(fù)制圖層時(shí)候也改個(gè)易于理解的名字 而不是xxx copy。
恰當(dāng)?shù)厥箞D層成組
一個(gè)由分散在各個(gè)圖層的圖形元素構(gòu)成的組件應(yīng)該放在一個(gè)組里，而且這些圖層的排列順序應(yīng)該按照從左到右從上到下這樣的順序。以層次結(jié)構(gòu)/次序來管理圖層一般會比用彩色標(biāo)簽來管理要好點(diǎn)，因?yàn)椴噬珮?biāo)簽在圖層呢個(gè)移動了以后要重新維護(hù)一遍。
精簡掉用不著的圖層
舊版本，模板，還有引用到的素材，臨時(shí)的復(fù)制圖層，這些東西如果以后再也用不著了就應(yīng)該刪掉。時(shí)不時(shí)地瞟一眼哪些是完全用不著的東西，干掉它。
使用組合圖層工具(Layer Comps)
Photoshop的組合圖層特性使你可以創(chuàng)建一組圖層成為一個(gè)組合，改變可不可見/透明度/位置和圖層風(fēng)格。這個(gè)特性可以用來處理一個(gè)設(shè)計(jì)的多個(gè)狀態(tài)（例如Web/App的很多Tab導(dǎo)航欄的多種狀態(tài)等）合成在一個(gè)文件里。這可以有效減少維護(hù)一大堆復(fù)制的圖層，同事減小了文件尺寸。學(xué)會使用它。
盡量多地使用矢量圖形，或者是可以不失真縮放的效果
為了設(shè)計(jì)的可縮放性，尺寸越大越好。特別是在app的設(shè)計(jì)上，很可能某天就要把整個(gè)設(shè)計(jì)的尺寸翻倍(iPad3可能就要這樣double了你懂的)。確保今后不用再重新繪制一遍某些位圖。
如何幫助開發(fā)者
下面是一些可以有效幫助到開發(fā)者的建議，特別是關(guān)于網(wǎng)頁設(shè)計(jì)和app設(shè)計(jì)，因?yàn)樗麄冇刑厥獾囊蠛拖拗疲?/p>
學(xué)會在需要縮放尺寸的地方處理圓角
某些操作系統(tǒng)（OSX或者iOS）會有這樣的圓角，并且在所有地方都這么使用，iOS通常矩形圓角的半徑是12像素(不太確定@_@)。Firework知道怎么去自動處理這個(gè)圓角，但Photoshop不會。所以呢，要熟悉使用「直接選擇」工具（囧 我也不知道這是啥意思）在縮放圖形尺寸時(shí)去處理好圓角。
一定要用72ppi的分辨率
目標(biāo)是液晶屏幕顯示，這不是印刷或出版（分辨率），所以為了使像素可以點(diǎn)點(diǎn)對應(yīng)，只能選72ppi這個(gè)分辨率。超過這個(gè)分辨率只會使圖形尺寸變大文件變大，木有其他意義。數(shù)字出版業(yè)的分辨率在這里不太適用。
保證像素完整性
確保Snap to(不知道中文版里叫神馬，好像是吸附？)里面的都勾上了，然后根據(jù)你的喜好用網(wǎng)格去控制。（解釋一下，這里作者意思是圖形的邊界不要出現(xiàn)出現(xiàn)跨像素的情況）。推薦使用銳利的邊界，用精確的像素去區(qū)分邊界，否則次像素級別的渲染會在某些設(shè)備上使你的美麗的設(shè)計(jì)變得很屎。相關(guān)的，在宏觀上和某些小的元素都推薦使用偶數(shù)長度的圖像尺寸，也是方便縮放。感謝Matt Drance指出了這一點(diǎn)。
永遠(yuǎn)使用RGB顏色模式
這一點(diǎn)不僅對顯示器顯示比較重要，而且在開發(fā)者需要在圖中拾色并轉(zhuǎn)成16進(jìn)制代碼寫程序的時(shí)候也很重要，不能錯(cuò)用其他顏色模式喔。
提供最終可用的資源是你的工作內(nèi)容之一
絕大多數(shù)開發(fā)者基本不知道Photoshop咋用，用也只能用到一些最基礎(chǔ)的用途。正確地導(dǎo)出所需切圖是設(shè)計(jì)師們的工作，因?yàn)樗麄冏钍煜htoshop以及這些PSD。
我知道這個(gè)比較痛苦，而且很花時(shí)間，但這也是在設(shè)計(jì)完工之后設(shè)計(jì)師們幾乎唯一的工作內(nèi)容了。
當(dāng)心字體的使用
不同操作系統(tǒng)會預(yù)裝不同的字體庫，根本無法保證他們在別處也有你在做設(shè)計(jì)時(shí)用到的那些字體（因?yàn)槟銈儠r(shí)設(shè)計(jì)師肯定擁有比普通人多的字體）。因?yàn)轱@示文字***的方法就是由系統(tǒng)來渲染這些文字在屏幕上（而不是做成圖形），所以選用什么字體是要慎重考量的。
一定記住，有些給定的字體授權(quán)你在設(shè)計(jì)中使用，但是不允許你將字體文件嵌入web或app中，當(dāng)心使用他們，確保在使用前溝通過有關(guān)方面。
模擬特定平臺的文字渲染
有時(shí)會為了視覺的一致性，可以試驗(yàn)一下在Photoshop中抗鋸齒選項(xiàng)打開之后跟在設(shè)備中打開抗鋸齒之后的效果是否一致。在iOS上，你肯丁會喜歡打開了抗鋸齒模式之后的樣子。
確認(rèn)設(shè)計(jì)的幅面尺寸
這一點(diǎn)特別針對移動設(shè)備的app，僅僅按照屏幕尺寸是不太夠的－有時(shí)需要按照狀態(tài)欄（最上方）的高度以及設(shè)備方向（橫或豎）來調(diào)整。例如iOS設(shè)備豎屏?xí)r狀態(tài)欄會占據(jù)長邊的長度，橫屏?xí)r會占據(jù)短邊的長度。提前跟開發(fā)者確認(rèn)app是否會全屏顯示。
善用每個(gè)平臺的特色
每個(gè)平臺（操作系統(tǒng)）都有其別致的一面，都有與眾不同的界面元素，交互風(fēng)格（也與設(shè)備型號相關(guān)）。要經(jīng)?？紤]到這些因素。盡量不去設(shè)計(jì)得超越了這些規(guī)則的限制，除非有非做不可的必要。舉個(gè)例子，在iPad上有如下的規(guī)則需要遵守：
1、需要app能支持設(shè)備在各個(gè)方向都有很好的表現(xiàn)
2、支持左右兩欄的layout，橫屏?xí)r同時(shí)顯示兩欄，豎屏?xí)r可以讓其中一欄成為另一欄的一部分。
3、彈出框成為app統(tǒng)一的UI的一部分。
4、一種比較獨(dú)特的文檔瀏覽器
5、在一級一級導(dǎo)航欄上，每個(gè)返回上一級的Back按鈕都是在左側(cè)切有尖角。
諸如此類，要用心去熟悉這個(gè)平臺，因?yàn)槟愕脑O(shè)計(jì)要去匹配他。沒辦法用一套設(shè)計(jì)去匹配所有平臺的。
既然設(shè)計(jì)了橫屏模式，那就要再設(shè)計(jì)一遍豎屏模式
不同的姿勢（橫豎屏方向）需要不同的物理上的交互風(fēng)格，不僅僅因?yàn)椴煌脑O(shè)備有不同的屏幕寬高比例，外殼材質(zhì)，重量和手持地平衡感。一種不能適配除了原始寬高比之外其他寬高比的設(shè)計(jì)，是***的妥協(xié)辦法。
為不同屏幕尺寸分別設(shè)計(jì)
在app界面設(shè)計(jì)中，手機(jī)上的內(nèi)容和展現(xiàn)形式都應(yīng)該與平板和電腦不同。移動設(shè)備，我們還需要考慮諸如此類：用戶在屏幕上的關(guān)注區(qū)域，使用戶分心的地方，物理上的缺陷，用戶在移動中會使用的風(fēng)險(xiǎn)比如走路/過馬路時(shí)，或者在開車的時(shí)候。
上述這些內(nèi)容不可避免地與尺寸和設(shè)備息息相關(guān)，那些有效的設(shè)計(jì)必須考慮這些因素。
使用真正的內(nèi)容去填充空白處，最少也是理想化的內(nèi)容
一些很好的例子都擁有如下特征（這事關(guān)于設(shè)計(jì)中文本信息用什么文字來填充的）：
1、示例文字要經(jīng)過充分測試，測試所有可能的長度，而不僅僅在設(shè)計(jì)時(shí)方便隨意寫了一段。
2、有時(shí)為了方便會省略一些數(shù)據(jù)，比如用戶的頭像，這些在實(shí)際的設(shè)計(jì)中是一定要有的。
3、有些讓人感到不舒服的情況是要考慮的，比如極寬或者極窄的圖片。
4、要考慮到有時(shí)別人姓名會很長而且中箭不分割；不要僅僅假設(shè)人名是兩個(gè)字的。
5、輸入地址的地方不應(yīng)該有長度限制，因?yàn)榈厍蛏先魏伍L度/格式/書寫方式的地址都能找到，一定要做到彈性化和允許有空格。
6、設(shè)計(jì)中盡量不要通篇都用”Lorem ipsum”。
注：Lorem ipsum是指一篇常用于排版設(shè)計(jì)領(lǐng)域的拉丁文文章，主要的目的為測試文章或文字在不同字型、版型下看起來的效果。
考慮語言本地化
絕大部分人一談到支持別的語言，就立即想到的是文字。當(dāng)設(shè)計(jì)師或開發(fā)者考慮這個(gè)問題時(shí)，會去想到布局。所以為了支持多語言顯示，你的設(shè)計(jì)需要為所有文本元素設(shè)置50%的字體寬度，不僅僅為了英文。
全局性的光源設(shè)置（跟文字陰影投射方向有關(guān)）
作為設(shè)計(jì)師，應(yīng)該不跟你提這個(gè)問題了，但每個(gè)平臺都有其不能輕易改變的特質(zhì)（例如iOS里就是光源在正上方居中）。設(shè)計(jì)中的所有發(fā)光和陰影效果都應(yīng)該與平臺本身保持一致性。
使導(dǎo)航/組織結(jié)構(gòu)易于理解
如果你的設(shè)計(jì)中用到了例如標(biāo)簽導(dǎo)航，或者層級式的導(dǎo)航方式或者其他已成型的結(jié)構(gòu)，就要讓這些東西對開發(fā)者來說簡單易懂。而且要考慮到平臺特定的習(xí)慣，就像上面說過的那些。應(yīng)該及早告訴開發(fā)者這些層級關(guān)系和結(jié)構(gòu)，因?yàn)檫@些與app開發(fā)時(shí)使用的架構(gòu)休戚相關(guān)。確信看到你的設(shè)計(jì)就可以輕易理解你的想法。組合圖層(Layer Comps)在處理這方面的時(shí)候就很有用。
能導(dǎo)出切圖的時(shí)候不要去自己壓縮
一定使用帶透明度的PNG格式。別用JPG除非特定場合。文件尺寸不用管，開發(fā)者或者他們使用的開發(fā)環(huán)境會去優(yōu)化這些圖像（得到較小尺寸）。導(dǎo)出每個(gè)圖形元素都要用透明的背景（及時(shí)這個(gè)元素就是要放在一個(gè)不透明背景上）。
提前溝通關(guān)于陰影的處理
與開發(fā)者去溝通這個(gè)陰影是含在圖像里還是有代碼去生成。一般的，開發(fā)者會自己做陰影，用CSS或者有其他繪圖的代碼，這樣會更簡單方便一些，而且還比位圖形式的陰影更有一致性。別開始就假設(shè)要把陰影嵌在圖像里（在草圖設(shè)計(jì)時(shí)就應(yīng)該用圖層特效去生成陰影而不是繪制獨(dú)立陰影層）。
理解按鈕是怎樣工作的
在app中或者是在web里 按鈕們都是有一個(gè)單一的圖片生成的?；蛘撸灿锌赡苁侨缦路绞缴桑?/p>
1、圖像分成3部分，左中右，左和右是不拉伸的，中間由一個(gè)像素寬度拉伸而成（不能垂直拉伸）
2、圖像分成9部分，外圍都是不拉伸的，中間由一個(gè)像素寬度拉伸而成。
按鈕就是由以上這些方式拉伸而成。選擇合適的漸變方式，與開發(fā)者事先溝通，選擇確定的按鈕生成方案。
***的一些思考
創(chuàng)造任何的軟件都是一種團(tuán)隊(duì)合作經(jīng)歷，需要考慮協(xié)調(diào)圖形設(shè)計(jì)，交互設(shè)計(jì)以及實(shí)現(xiàn)方式。這三面都不可缺少，都是至關(guān)重要的。關(guān)注你所在領(lǐng)域之外其他領(lǐng)域的同事的需求，這樣才能更有效率的完成項(xiàng)目，甚至獲得自我提升。
原文鏈接：http://article.yeeyan.org/view/284135/249615
【編輯推薦】
