今天這篇譯文滿滿干貨，包含超多實用經驗：讓元素在各尺寸保持邊界清晰技巧、切片專業方法、命名規則等，絕對值得每個 UI 設計師收藏！

從低分辨率開始

我通常從非 Retina 顯示的 1x 文檔尺寸開始。iPad 用 1024×768，安卓用 mdpi 或 dp 常規設備適配尺寸。Mac 應用通常從 1280×768 開始（13 寸 MBP 橫向分辨率與 11 寸 MBA 縱向分辨率奇特組合，確保適用 Mac 最小顯示器）。iPhone 用 320×568 或上圖任一分辨率。

理由多多：如同從框架圖開始整理概念，1x 環境構建有助視圖與元素大小設定。換言之，界面每個元素完全吻合 1x 像素網格，雖是技術操作但屬良好開端——意味著設計吻合 iOS/OS X 網格。1x 環境工作另一好處：無需時時考慮元素保持偶數（0,2,4,6,8），大幅減少 Photoshop 內存佔用，操作更快捷。

雖有 Retina MBP，但短期不改現有工作方式。好處太多，即使 2x/3x 在設計中佔比更重，仍推薦以此開始。

同時關注 1×、2×、3×

並非建議都在非 Retina 設備工作，現今及未來趨勢皆為高分辨率。建議按需在多尺寸間切換工作（作者自製 PS 動作，令文檔尺寸切換便捷，有興趣可下載文件包）。但修改版面通常在 1x 中進行，絕對助效率提升。

文檔設置正確，即可在不損質量情況下各尺寸切換。如在 2x 編輯按鈕樣式，回 1x 調整排版，進 3x 設置圖層樣式……一個文檔解決所有問題。

讓元素在各尺寸保持邊界清晰的小方法

漸變邊界效果

嘗試將邊界效果設為漸變色，好處在於自動填補許多細節。Retina 尺寸中銳利漸變效果，邊界處稍亮；非 Retina 尺寸中則為單像素描邊。漸變大有用途，不僅色塊填色，更可應用於描邊及圖層樣式描邊。

圖層樣式與輪廓

追求圖層樣式更優化，可嘗試輪廓設定。外發光效果是外框線條理想之選，令線條在 1x 為單像素，2x 呈現更柔和 2 像素，3x 為更優化 3 像素。

0.5pt 及含小數點描邊

0.5pt 描邊在 2x 顯示為單個像素，1x 中為邊界更柔和單像素，矢量描邊可為非整數（圖層樣式描邊不可設非整數）。同理用於 3x——0.33pt 描邊自動調整為 1 像素。

半像素輕移

開啟 PS 對齊像素功能助創建銳利圖形。想精確移動半像素，關閉像素對齊，視圖放大 200%，按方向鍵輕移半像素。此法在非 Retina 設備模擬 Retina 效果。輕移單位視視圖比例而變。由此建立的描邊在 2x 為 100% 透明度單像素，1x 為 50% 透明度單像素。

羽化蒙板

羽化蒙板是柔化形狀圖層良方。能做到大部分圖層樣式效果，不同在於更精確，因形狀圖層及羽化蒙板均可設非整數。但有弊端：不可隨文檔尺寸自動調整比例。David Jensen 為調整羽化蒙板尺寸創建系列腳本（GitHub 發布，前文 PS 動作包已囊括）。若用前文 PS 動作進行 1x/2x 切換，羽化蒙板尺寸也會自動調整（需安裝 David 腳本前提下運行）。

若文檔需自由變換尺寸，位圖圖層和位圖蒙板是噩夢。大多數蒙板（含柔滑邊緣）可通過形狀圖層、群組、羽化蒙板完成。大力推薦 PS 矢量蒙板功能，能完成大部分想到的圖形，雖創建過程可能慢些。

材質處理

兩種方式。大材質圖片需跟隨文檔不同尺寸調整時，最好在 2x 尺寸設定圖片大小，再將圖層轉換為智能對象。這樣材質在 2x 呈現完美像素，1x 以位圖形式縮小。若是噪點等細膩元素，最好在兩尺寸保持 100% 大小。智能對象不適用，因會令圖片按文檔尺寸比例縮放。此類效果選用圖案圖層或圖層圖案樣式實現。圖案功能同樣有隨文檔尺寸變化問題：2x 設 100% 圖案，1x 變 50%，高清噪點變模糊。David Jensen 另一腳本「圖案比例 100%」解決此問題，動作包文件中已包含，運行動作自動應用。需按比例調整元素設為智能對象，需保持固定大小材質設為圖案，實現文檔自動化。尤其頻繁 1x/2x 切換時，這些設置至關重要。

實時預覽

iOS/安卓應用用免費軟件 Skala Preview 測試整個過程。效果圖含 iPhone/iPad 窗口（設備外框圖片），雙指輕擊居中，預覽圖中隱去設備外框。注意：基於 PS 文檔含設備外框情況。

切片輸出

或覺得工作方式瘋狂：所有項目有兩套 PS 文件——一套模型圖，一套元素文件作切片輸出用。

益處多多。模型文檔所有元素正確命名，不同狀態界面按群組整理。考慮多種情況適用性構建元素，偶爾用位圖圖層（有時甚至效率更高，快速嘗試不同版式）。每個尺寸同一方向只創建一個 PS 文檔。iPhone 豎向文檔包含多個界面狀態，不同群組區分。較少用復合圖層（太脆弱，PS CC 2014 解決很多問題）。用群組意味多次複製，仍覺得是所有方式中最好用。需元素在不同群組同步，可嘗試圖層標簽（功能有意思但不常用）。

輸出文檔保持扁平格式，每個元素單獨設為一切片。清楚顯示每個輸出切片邊界與文件名。扁平格式指文件透明度顯而易見，可輕鬆選取所需矢量節點，不擔心選到另一圖層。通過窗口快速查看預覽 PSD 元素文件，甚至無 PS 電腦也能享用。找幾年前項目元素，幾秒通過快速查看找到文件，用 PS 打開即見元素輸出名稱，對齊編輯重新輸出。每個切片文檔只含應用中一個元素，文件又小又快。

切片設置看似麻煩，上手就簡單。前文動作包含各切片動作。展示最佳尺寸動作通過選取框選區創建最小尺寸位圖圖層，切除多余區域很有用。通過圖層製作切片動作使用所選圖層建立切片。一般選擇剛通過展示最佳尺寸動作創建的圖層。並非常存為最小尺寸，手動控制流程重要，因常想在元素周圍多留像素空間，備將來修改（如加大尺寸），略加空白不影響文件大小或內存……