轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.cqzjtgb.com  )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請(qǐng)點(diǎn)這里　

設(shè)計(jì)是一個(gè)漫長和痛苦的過程，期間可以用點(diǎn)技巧來減少痛苦，30+ tips to improve your iOS design workflow (in Photoshop)一文總結(jié)30個(gè)實(shí)用的技巧可以借鑒和學(xué)習(xí)。

————–以下為譯文——————-

在本文中我（英文原作者）總結(jié)了在photoshop中設(shè)計(jì)ios軟件時(shí)所遵守的方法。許多的技巧適用于一般的UI設(shè)計(jì)。注意：文中所提到的快捷鍵針對(duì)于Windows；Mac 用戶可，Cmd對(duì)應(yīng)Crtl鍵，Opt對(duì)應(yīng)Alt鍵。

1.保持尺寸為偶數(shù)

你是首先針對(duì)Retina屏幕設(shè)計(jì)然后再對(duì)標(biāo)準(zhǔn)分辨率的進(jìn)行縮小是吧？為了在標(biāo)準(zhǔn)分辨率下像素仍然保持完美的呈現(xiàn)，你需要保證大小和距離為偶數(shù)。具體的做法便是：基于2ps的網(wǎng)格設(shè)計(jì)。在編輯（Edit）〉首選項(xiàng)（Preference）〉參考線、網(wǎng)格和切片（Cuides,Grids&Slices）。更改網(wǎng)格線間隔（Gridline）和子網(wǎng)格（Subdivisions）來是使得網(wǎng)格間隔線為2px。例如：設(shè)置網(wǎng)格線間隔為64px，子網(wǎng)格為32。

2.混合模式只使用正常模式

在設(shè)置直接處于其他元素上面的圖層效果時(shí)，混合模式只使用正常（例如：在混合選項(xiàng)中投影和外發(fā)光）。使用其他的混合模式或許在Photoshop中看起來很好，但是也可能會(huì)在在保存為PNG格式之后出現(xiàn)不良的效果。

3.更方便的改變漸變顏色

想要更改漸變按鈕的色調(diào)（色相），而不必每次都去改變漸變的起始顏色值？下面介紹兩個(gè)方法，均可達(dá)到完全一樣的效果。

方法1：在漸變圖層混合選項(xiàng)中使用顏色疊加

1. 創(chuàng)建一個(gè)漸變圖層。起始顏色設(shè)為淺灰和深灰色，也可以在之后調(diào)整。
2. 為按鈕創(chuàng)建矢量蒙版。
3. 復(fù)制矢量蒙版粘貼到漸變圖層（選擇矢量蒙版〉Ctrll+ C〉選擇漸變圖層〉Ctrl + V）
4. 設(shè)置圖層〉矢量蒙版〉當(dāng)前路徑
5. 設(shè)置漸變圖層混合選項(xiàng)〉顏色疊加更改混合模式為顏色。
6. 現(xiàn)在便可以只是更改此處的顏色來更改漸變。

方法2：在純色圖層使用漸變疊加

1. 用你想要的顏色，創(chuàng)建一個(gè)純色的圖層。
2. 和方法1相同。
3. 和方法1相同。
4. 和方法1相同。
5. 在純色模版混合選項(xiàng)〉漸變疊加，設(shè)置混合模式為明度（Luminosity）。
6. 現(xiàn)在只是改變純色模版的顏色即可改變漸變。

譯者注：上述使用了矢量蒙版，其實(shí)使用剪切蒙版也可達(dá)到相應(yīng)的效果，個(gè)人認(rèn)為還簡單點(diǎn)。

4.更多的使用徑向漸變

在導(dǎo)航條上疊加徑向漸變層，讓導(dǎo)航欄變得更為有趣。

方法1：徑向漸變工具

1. 在導(dǎo)航條圖層上方新建圖層。
2. 復(fù)制導(dǎo)航條圖層的矢量蒙版到剛才新建的圖層(按住Ctrl + Alt同時(shí)按鼠標(biāo)左鍵拖動(dòng)矢量蒙版到新圖層)。
3. 選擇徑向漸變工具（設(shè)置漸變?yōu)橹行陌咨┒巳该鳎?/li>
4. 在圖層中從中心到邊緣繪制漸變。
5. 改變圖層混合模式為疊加（Overlay）設(shè)置不透明度為25%。

方法2：斜面和浮雕

同樣也可以使用圖層混合選項(xiàng)中的斜面和浮雕。可以按下圖所示來設(shè)置。通過調(diào)整設(shè)置來達(dá)到你想要的效果。通常調(diào)整的越為精妙效果也越為好看。

5.更多的使用陰影變形

Photoshop中陰影（任何的其他圖層效果）和它對(duì)應(yīng)圖層可以分開。這樣便可獨(dú)立操作陰影。

1. 選擇圖層〉圖層樣式〉創(chuàng)建圖層（譯者注：必須在對(duì)圖層使用了混合選項(xiàng)中的效果才能使用此命令，此步目的即是將效果和圖層分離）。
2. 轉(zhuǎn)換圖層為智能對(duì)象（在混合選項(xiàng)中勾選透明形狀圖層。右擊圖層〉選擇轉(zhuǎn)換為智能對(duì)象），這樣你就可以在之后編輯效果。
3. Ctrl + T 選擇變形。
4. 點(diǎn)擊和拖動(dòng)手柄來改變形狀。手柄不會(huì)對(duì)其網(wǎng)格，但可以使用網(wǎng)格作為參考對(duì)其他的手柄進(jìn)行重復(fù)同樣的拖動(dòng)。
5. 往上輕移圖層直到像下圖效果。

6.使用內(nèi)發(fā)光更容易的增加精細(xì)的紋理

像下圖所示通過內(nèi)發(fā)光快速的增加紋理。

7.隱藏路徑

Photoshop cs6中比較惱人的一點(diǎn)是當(dāng)你選中一個(gè)形狀圖層的時(shí)候形狀的路徑會(huì)顯示出來，并且在你操作該圖層的時(shí)候路徑會(huì)一直存在，譬如在更改圖層混合選項(xiàng)的時(shí)候。你和使用Ctrl + H 來隱藏所有的輔助工具（路徑、網(wǎng)格線和參考線），當(dāng)然你可以按Ctrl + Shift + H 只隱藏路徑。

8.使用對(duì)齊像素網(wǎng)格來使形狀像素完美

這算是cs6中最好的改進(jìn)之一了。按Ctrl + K 打開首選選面板選擇將矢量工具與變換與像素網(wǎng)格對(duì)其（Snap Vector Tools and Transforms to Pixel Grid）勾選。在cs5中只有形狀（沒有變換）與像素網(wǎng)格對(duì)齊。像下圖示在首選項(xiàng)〉常規(guī)中勾選最下面一項(xiàng)。

cs5中只有形狀對(duì)齊

9.使用電子表格來計(jì)算縮略圖的尺寸

想要?jiǎng)?chuàng)建一個(gè)iPad app來展示大量的縮略圖？使用電子表格來計(jì)算縮略圖的尺寸和之間的尺寸。電子表格實(shí)時(shí)的計(jì)算并展示了在改變一個(gè)尺寸之后對(duì)其他元素的影響以及它們是否適用于屏幕。下載（iPad-Grid-Calculator）我在創(chuàng)建iPad app使用創(chuàng)建的微軟Excel 表格（文件中包含了4個(gè)表格，6×6, 5×5, 4×4 和3×3）。

10.自動(dòng)導(dǎo)出資源文件

如果你必須創(chuàng)建圖片資源，選擇文件（File）〉腳本(Script)〉將圖層導(dǎo)出到文件（Export Layers to Files）。

11.圖層復(fù)制的時(shí)避免給圖層名添加后綴同時(shí)避免圖層效果得到擴(kuò)張

對(duì)每次復(fù)制圖層都在圖層名稱后面添加“副本（copy）”的字眼很是惱火？同時(shí)惱火的是每次復(fù)制粘貼圖層效果的時(shí)候圖層效果就會(huì)擴(kuò)張？可以圖層面板選項(xiàng)中將兩者關(guān)閉。

12.以15°的步長旋轉(zhuǎn)

在自由旋轉(zhuǎn)的時(shí)候，可以按住Shift以15°的倍數(shù)旋轉(zhuǎn)。

13.保存樣式

保存多次使用的樣式到樣式面板，這樣免去每次都復(fù)制粘貼的麻煩。

14.在打開的兩個(gè)文件之間移動(dòng)圖層

按下V選擇移動(dòng)工具〉選中想要移動(dòng)的圖層〉在當(dāng)前文件內(nèi)（不是圖層面板）左擊不松開〉拖動(dòng)光標(biāo)到目標(biāo)文件的名稱標(biāo)簽上〉當(dāng)文件切換之后將光標(biāo)拖動(dòng)到文件內(nèi)，然后松開鼠標(biāo)。

15.設(shè)置全局光為90°

當(dāng)光源在90°的時(shí)候高光、陰影以及其他圖層效果看起來最好。為了避免重復(fù)設(shè)置，在混合選項(xiàng)中（斜面和浮雕、內(nèi)發(fā)光和陰影）勾選使用全局光。或者選擇圖層〉圖層樣式〉使用全局光。

16.在你創(chuàng)建圖層的時(shí)候你便對(duì)它進(jìn)行命名

在將設(shè)計(jì)文檔發(fā)給開發(fā)人員之前對(duì)圖層命名是件令人頭痛的事情。因此不妨形成在創(chuàng)建圖層的同時(shí)就給它命名的習(xí)慣。

17.使用自定義快捷鍵

注意哪些工具和任務(wù)是你最常用到的，為它們創(chuàng)建快捷鍵。例如，如果你發(fā)現(xiàn)將一個(gè)文件發(fā)送給開發(fā)人員處理的時(shí)候你需要重命名大量的圖層，我使用功能鍵F2作為快捷鍵。

18.使用徑向漸變

使用徑向漸變有時(shí)候會(huì)看起來有點(diǎn)扁平。試試用徑向漸變作為背景，還可以用內(nèi)發(fā)光來強(qiáng)調(diào)。

19.努力做到非破壞的編輯

通過使用智能對(duì)象和調(diào)整圖層來做到一個(gè)非破壞性的工作流程。當(dāng)你發(fā)發(fā)現(xiàn)自己需要重復(fù)編輯同樣?xùn)|西的時(shí)候這會(huì)幫你減少很多痛苦。

20.在對(duì)文件作重大改變之前備份文件

當(dāng)你發(fā)現(xiàn)保存了自己不想要的變化，或者在撤銷更改之前意外地關(guān)閉了文件（譯者注：這樣會(huì)導(dǎo)致丟失歷史記錄），備份文件會(huì)大大減少你的痛苦。

21.使用快捷鍵給形狀圖層和文本填色

你可能知道使用Alt/Ctrl + Delete 給圖層或者選區(qū)填充前景色/背景色。它同樣適用于形狀圖層和文本。

22.Photoshop的怪異之處——投影和內(nèi)陰影尺寸

還記得訣竅1中關(guān)于保證尺寸和圖層效果為偶數(shù)像素嗎？你或許在對(duì)所有的都設(shè)置了偶數(shù)之后，仍然迷惑于為什么按鈕的高度仍然是奇數(shù)。罪魁禍?zhǔn)妆闶?Photoshop的怪異之處，投影增加了尺寸。投影的大?。╯ize）值設(shè)置為1px或者2px，投影將會(huì)產(chǎn)生同樣的尺寸，如下圖所示。

23.使用智能參考線來進(jìn)行更為完美的對(duì)齊

來讓Photoshop對(duì)你的元素進(jìn)行智能對(duì)齊。在視圖（View）〉顯示（Show）〉智能參考線（Smart Guides）處打開。一旦你使用過智能參考線，你會(huì)再也離不開它了。

24.使用圖層復(fù)合在同一文件中展示不同的顯示屏

你是將app的所有屏幕都創(chuàng)建在一個(gè)PSD中然后對(duì)圖層可視進(jìn)行打開和關(guān)閉來查看？此時(shí)圖層復(fù)合（Layer Comps）就可幫助解決這個(gè)問題。勾選窗口（Window）〉圖層復(fù)合（Layer Comps）即可打開圖層復(fù)合面板。在你新建app屏幕的時(shí)候你可以通過單擊面板底部創(chuàng)建新的圖層復(fù)合按鈕來創(chuàng)建一個(gè)新的圖層復(fù)合。這個(gè)圖層復(fù)合面板包含了所有圖層的可見性和位置作為一個(gè)屏幕（譯者注：可以理解為一個(gè)快照）。現(xiàn)在你便可以在同樣的圖層上更改其可見性和位置來作為下一個(gè)屏幕并把它保存為另一個(gè)圖層復(fù)合。

通過使用同樣的工具去創(chuàng)建不同的屏幕，這樣就保證了文件數(shù)量和大小達(dá)到了最小。并且，你和開發(fā)人員可以簡單的通過單擊圖層復(fù)合名稱前面的小盒子或者點(diǎn)擊面板底部的往前/往后箭頭來循環(huán)切換圖層復(fù)合來展示不同的屏幕。

25.在設(shè)備上預(yù)覽你的設(shè)計(jì)

你的設(shè)計(jì)桌面設(shè)備上看起來很好，但是當(dāng)你放到真正的設(shè)備上或許會(huì)暴漏問題，因此，保證經(jīng)常的在顯示器上預(yù)覽你的設(shè)計(jì)。對(duì)Mac來說有像LiveView、Scala Preview等工具，對(duì)Windows來則有WiFileSync和Photoshop Display。我使用免費(fèi)的Polkast，它允許你在IOS設(shè)備上通過wifi預(yù)覽你桌面設(shè)備上的文件。

26.保持icon設(shè)計(jì)的一致性

在icon的選用上要保證其大小和風(fēng)格一致?？梢蚤喿xWhy consistency is important這篇文章。

27.給客戶發(fā)送全尺寸的預(yù)覽圖

客戶許愿在他們的設(shè)備上?？丛O(shè)計(jì)。因此，可以考慮給他們一個(gè)全尺寸的PNG設(shè)計(jì)組合。

28.避免過于像素完美的線框圖

不要在線框圖軟件上浪費(fèi)時(shí)間去創(chuàng)建一個(gè)漂亮的線框圖。我發(fā)現(xiàn)客戶一旦理解這會(huì)節(jié)省時(shí)間他們便更傾向于審查草圖而不是漂亮的線框圖。向客戶解釋為什么減少線框圖會(huì)節(jié)省項(xiàng)目的整體時(shí)間，他們一旦同意便發(fā)給他們草圖的照片。同時(shí)別忘了讓草圖盡量易讀。

29.首先設(shè)計(jì)Retina屏然后再縮小到標(biāo)準(zhǔn)尺寸

是從1x（譯者注：指設(shè)備像素比）放大到2x的順序還是2x縮小到1x現(xiàn)在仍有爭論。1x大小尺寸的手機(jī)將會(huì)在未來幾年逐漸淘汰并且將來只會(huì)剩下Retina屏的。因此最好是從Retina屏來開始設(shè)計(jì)，同時(shí)你可以早早的便在你的設(shè)計(jì)中添加針對(duì)Retina屏的特殊細(xì)節(jié)。

30.創(chuàng)建一個(gè)icon庫

任何時(shí)候你針對(duì)工具欄或者標(biāo)簽欄創(chuàng)建了矢量的icon，保存一份icon（保存完好無損的尺寸以便于編輯）到單獨(dú)的PSD文件中，這樣，你便不必下次再使用這些icon時(shí)到處尋找了，這樣也就形成了我ikonic項(xiàng)目的基礎(chǔ)。

31.使用一個(gè)批量重命名的軟件

使用批量重命名軟件來給文件增加或者移除@2x。我使用免費(fèi)的Bulk Rename Utility。

飛鳥分享翻譯源文：share.9ikblog.com