工欲善其事，必先利其器。针对移动端 UI 设计（以 iPhone 为例），本文梳理从「新建文档预设」到「导出切图规范」的完整配置清单，覆盖画布设置、像素对齐、首选项优化、文字渲染、全局光、网格系统、Retina 适配、色彩管理八大维度，配置一次，长期受益。

1. 新建文档标准预设

菜单「文件」→「新建」或 Ctrl+N，建立以下预设并存为模板：

参数	推荐值	说明
宽度	375 px / 750 px / 1125 px	对应 1×/2×/3× 逻辑像素宽度
高度	812 px / 1624 px / 2436 px	iPhone X 系列安全区高度
分辨率	72 ppi	屏幕设计标准，非印刷
颜色模式	RGB Color	屏幕显色空间
背景内容	白色/透明	视项目而定
色彩配置文件	sRGB IEC61966-2.1	Web/移动端统一标准
像素长宽比	方形像素	避免非方形像素变形

2. 像素级对齐设置（防模糊边缘）

• 「视图」→「对齐」✅
• 「视图」→「对齐到」→「全部」✅（网格、参考线、文档边界、图层）

原理：矢量形状/文字/选区边缘自动吸附像素网格，彻底杜绝半像素模糊边。

3. 首选项核心优化（编辑 → 首选项 → 一般 / 界面 / 性能）

选项	建议	理由
启用轻击平移	❌ 关闭	占内存、无效率增益
根据 HUD 垂直移动改变画笔硬度	✅ 开启	Alt+右键上下调硬度、左右调大小，单手盲操作
将矢量工具与变换与像素网格对齐	✅ 强烈开启	防半像素虚边，微调时临时关闭即可
自动保存恢复信息间隔	5 分钟	防崩溃丢失进度
缓存级别	4 (高分辨率) / 2 (UI 设计)	UI 设计图层少，低级别响应更快
历史记录状态	200	充分后悔空间

4. 文字渲染：Windows LCD / Mac LCD 抗锯齿

PS CC 新增「Windows LCD」「Mac LCD」抗锯齿模式，模拟系统原生字体渲染（DirectWrite / Core Text），让设计稿文字与代码实现像素级一致。
操作：选中文字图层 → 字符面板 (AA) → 选择对应 LCD 模式。

强烈建议升级 PS CC 仅为这一项，告别「设计稿字体发虚、上线字体锐利」的视觉偏差。

5. 全局光统一：90° 直射

遵循 iOS Human Interface Guidelines，光源统一设为 90°（正上方）。
菜单「图层」→「图层样式」→「全局光」→ 角度 90°、高度 30°。
所有图层样式（投影、内阴影、斜面浮雕）自动继承，保证全界面光影逻辑零冲突。

6. 网格系统：Retina 适配的 2px 基准

「编辑」→「首选项」→「参考线、网格与切片」：

• 网格线间距：4 像素，分割数 2（即 2px 子网格）
  或 网格线间距：2 像素，分割数 1
• 颜色建议浅蓝 #00aaff，样式「点线」

配合「视图」→「显示」→「网格」（Ctrl+'），2px 基准网格完美适配 @2x/@3x 导出，任意偶数尺寸组件天然对齐。

7. 导出设置：「存储为 Web 所用格式」黄金参数

菜单「文件」→「导出」→「存储为 Web 所用格式」（Ctrl+Alt+Shift+S），以 PNG-24 为例：

参数	值	备注
预设	PNG-24	无损透明
透明度	✅ 勾选	保留 Alpha 通道
交错	❌ 取消	非渐进式加载
嵌入色彩配置文件	❌ 取消 (CC 版本)	避免浏览器双重色彩管理偏色
转换为 sRGB	❌ 取消	文档已是 sRGB，免双重转换
质量/重采样	双三次	缩放锐度最佳平衡

8. Retina 显示器系统级设置

MacBook Pro Retina 用户：
「系统偏好设置」→「显示器」→「最适合显示器」（默认 1440×900 点 = 2880×1800 像素）。
PS 界面缩放：「编辑」→「首选项」→「界面」→「UI 缩放」选「100%」或「自动」，配合系统缩放获得清晰 UI 与足够工作区。

9. 色彩管理：采用 Marc Edwards 推荐配置

色彩管理极其复杂，非专业领域请直接沿用业界公认配置（Bjango 文章）：

• RGB 工作空间：sRGB IEC61966-2.1
• CMYK 工作空间：Japan Color 2001 Coated
• 灰度/点增值：Gray Gamma 2.2 / 20%
• 色彩管理策略：全部「保留嵌入配置文件」，配置文件不匹配「询问打开时」
• 转换选项：引擎 Adobe (ACE)，目的空间 sRGB，意图「相对色度」，黑点补偿 ✅

总结与个性化延伸

以上为「UI 设计基准配置」，落地后请根据个人肌肉记忆继续微调：

• 自定义快捷键（编辑 → 键盘快捷键）
• 工作区布局保存（窗口 → 工作区 → 新建工作区）
• 常用动作/脚本放入「动作」面板单键触发
• 常用形状/图标存为「形状预设」/「CC 库」

欢迎在评论区分享你的「秘制配置」，共同进化！

更多精彩教程请关注三联 Photoshop 教程栏目，三联 PS 群：339853166 欢迎加入。