简介这份PPT讲义面向移动UI设计初学者与希望系统提升的设计师围绕Photoshop在移动端界面设计中的应用展开帮助读者从零建立移动UI设计认知并逐步进阶。内容按模块递进新手导航讲解手机与平板界面差异、iOS/Android/Windows Phone三大平台特点及Logo设计常识布局原则部分覆盖竖向、横向、九宫格、侧边栏、弹出框、导航栏置顶置底等十余种布局方式并给出图表信息与界面细节的优化措施视觉交互法则则聚焦简洁与抽象美感、色彩运用、文字层次与间距、图案效果优化等深层技巧最后延伸至按钮、图标、列表等构成元素的设计应用。资源包为1个pptx文件大小约2.66MB结构清晰、由浅入深适合作为课堂讲义或自学参考。目前已有110人学习可帮助读者快速掌握移动UI从布局到视觉交互的完整设计思路。1. 从一份 PPT 到可交付的移动 UI 设计稿Photoshop 到底该怎么上手很多人第一次接触移动 UI 设计是从一份《Photoshop移动UI设计从入门到精通.pptx》课件开始的。打开一看满屏都是工具面板截图和零散步骤跟着点了一遍关掉软件又全忘了。问题不在你在于课件只告诉你“点哪里”没告诉你“为什么点这里”。移动 UI 设计和平面设计最大的区别是画布尺寸固定、控件尺寸有规范、切图要适配多倍率。Photoshop 虽然不是专门的 UI 工具但它的图层样式、矢量形状、智能对象和导出功能足够撑起一套完整的移动端界面设计流程。这篇文章面向两类人一是刚转行做 UI、手里只有 PS 的初学者二是接私活需要快速出移动端设计稿的自由职业者。我会把课件里跳过的参数逻辑、切图规范和避坑点补全让你看完能直接打开 PS 复现一套可交付的界面。2. 移动 UI 画布搭建从新建文档到参考线体系2.1 为什么移动端画布不能随便建平面设计里画布尺寸跟着成品走名片 90×54mm、海报 600×800mm但移动 UI 的画布逻辑完全不同。你设计的界面最终要跑在手机屏幕上而手机屏幕的物理尺寸和逻辑像素是两套体系。以目前主流的 1080×2340 物理分辨率为例设计稿通常按 360×780 的逻辑像素来建倍率是 3x。如果你直接按 1080 宽建画布后期标注和切图时所有数值都要除以 3沟通成本极高。常见做法是新建文档时宽度设 360px高度设 780px 或 800px分辨率 72ppi颜色模式 RGB 8 位。这个尺寸对应的是 1x 逻辑像素导出时再按 2x、3x 放大。有人会问为什么不直接建 750×1334那是早期 iPhone 6 的物理像素现在安卓机型碎片化严重按逻辑像素建稿更通用。新建文档的参数设置如下# 这不是命令行操作是 Photoshop 新建文档面板的填写逻辑 宽度360 像素 高度780 像素 分辨率72 像素/英寸 颜色模式RGB 颜色 8 位 背景内容透明逻辑说明宽度 360px 是安卓和 iOS 共同遵循的逻辑像素基准高度 780px 覆盖了绝大多数全面屏手机的首屏内容区。背景透明是为了后期导出 PNG 切图时保留圆角和阴影的透明度。参数改动的边界如果你只做 iPhone 设计可以建 375×812如果做平板宽度改 768 或 834。但不要混用一套稿子只用一个基准尺寸。2.2 参考线不是装饰是控件的对齐基准建好画布后第一件事不是画图标而是拉参考线。移动 UI 的参考线体系分三层安全边距、栏间距、控件对齐线。安全边距通常左右各 16px 或 20px这是内容区不能越过的边界。栏间距用于卡片列表常见 8px 或 12px。控件对齐线是状态栏、导航栏、底部标签栏的分割线。在 Photoshop 里拉参考线的操作# 视图菜单操作路径 视图 → 新建参考线版面 → 列数 4 → 装订线 16px → 边距 16px # 手动拉单条参考线 视图 → 标尺CtrlR→ 从左侧标尺拖出垂直参考线 → 定位到 16px 和 344px逻辑说明新建参考线版面可以一次性生成对称的列和装订线适合做卡片流布局。手动拉参考线适合做导航栏和标签栏的分割。参数说明列数 4 对应移动端常见的四列网格装订线 16px 是卡片之间的间隙边距 16px 是屏幕边缘到内容区的距离。失败时看什么如果参考线拖不出来检查视图菜单里的“对齐”是否开启以及标尺是否显示。常见误用是把参考线拉得太多太密反而干扰视觉判断建议只拉关键几条。提示参考线颜色可以在首选项里改成高对比度的青色或洋红默认的浅蓝色在深色背景上看不清。3. 控件绘制与图层样式按钮、输入框、卡片的最小实现3.1 用矢量形状画按钮别用位图移动 UI 里出现频率最高的控件是按钮。很多初学者用画笔或矩形选框画按钮结果放大后边缘模糊改圆角要重新画。正确做法是用矢量形状工具U 键画出来的按钮可以无损缩放圆角半径随时改。以主按钮为例尺寸 328×48px圆角 8px填充色 #2F6BFF。绘制步骤# Photoshop 操作序列 1. 选择圆角矩形工具U 2. 顶部选项栏模式选“形状”半径填 8px 3. 在画布上拖出 328×48 的矩形 4. 双击图层缩略图填充色改为 #2F6BFF 5. 双击图层空白处打开图层样式添加投影不透明度 20%距离 4px大小 8px逻辑说明形状模式生成的图层是矢量蒙版属性面板里可以随时改圆角和尺寸。填充色用十六进制值而不是拾色器随便点是为了和开发对接时颜色值一致。投影参数里距离 4px 和大小 8px 是移动端卡片的常见值再大就显得脏。参数改动边界圆角半径 8px 适合中等尺寸按钮小按钮用 4px大卡片用 12px 或 16px。投影不透明度不要超过 30%否则在深色模式下发灰。3.2 输入框和卡片的图层样式复用输入框和卡片的结构比按钮复杂但图层样式可以复用。输入框通常由外框、占位文字、图标三部分组成。外框用 1px 描边颜色 #E0E0E0圆角 8px高度 48px。占位文字用 14px 字号颜色 #999999左对齐左边距 16px。卡片的图层样式更丰富常见的是白底 圆角 轻投影。但这里有个坑卡片投影不要用图层样式里的“投影”因为多个卡片叠在一起时投影会互相叠加显得很重。正确做法是用“内阴影”模拟轻微凹陷或者用“描边”代替投影。# 卡片图层样式参数 填充白色 #FFFFFF 描边1px颜色 #F0F0F0位置内部 圆角12px 内阴影不透明度 8%距离 2px大小 4px逻辑说明描边代替投影可以让卡片边界清晰但不厚重适合信息密度高的列表页。内阴影模拟的是卡片微微凸起的光感比外投影更克制。参数说明描边颜色 #F0F0F0 在白色背景上几乎看不见但在浅灰背景上能勾勒出卡片轮廓。内阴影不透明度 8% 是经验值超过 15% 就像按钮按下去的凹陷。失败时看什么如果卡片边缘出现锯齿检查描边是否对齐像素圆角是否用了非整数。注意图层样式复制用右键“拷贝图层样式”和“粘贴图层样式”不要手动一个个改容易漏参数。4. 切图与导出从设计稿到开发可用的 PNG 和标注4.1 切图命名规范和倍率导出设计稿画完只是第一步开发要的是切图。Photoshop 导出切图有两种方式一是用“导出为”面板二是用“生成图像资源”。后者更高效但需要先给图层命名。命名规范是切图的核心。移动端切图通常按“模块_功能_状态倍率”来命名例如home_btn_login_normal2x.png。在 Photoshop 里给图层或图层组重命名时用2x后缀然后开启“文件 → 生成 → 图像资源”PS 会自动导出对应倍率的 PNG。# 生成图像资源的操作 1. 文件 → 生成 → 图像资源勾选 2. 给图层组重命名为home_btn_login_normal2x.png 3. 如果需要 3x再复制一份命名为home_btn_login_normal3x.png 4. PS 会在当前文档同目录生成一个 assets 文件夹里面是导出的切图逻辑说明图像资源功能监听图层名变化只要名字符合“文件名倍率.格式”的规则就自动导出。参数说明2x 对应 720 宽画布3x 对应 1080 宽画布。如果设计稿是 360 宽2x 就是 720 宽3x 就是 1080 宽。失败时看什么如果没导出检查文件名是否包含非法字符以及“生成”菜单是否勾选。常见误用是给每个图层都加 2x导致导出大量无用切图建议只给需要切图的图标和背景加后缀。4.2 标注稿的三种交付方式切图之外开发还需要标注间距、字号、颜色值。Photoshop 本身没有标注功能常见做法有三种。第一种是手动标注用矩形工具画红线写上数值导出 PNG 给开发。第二种是用插件比如“标你妹”或“Assistor PS”自动生成标注页。第三种是导出 PSD 给开发让开发用“PS 切图”工具自己量。我一般用第二种插件生成标注页后导出 PDF开发打开就能看。但插件标注有个坑它读取的是图层位置如果图层有透明边距标注值会偏大。所以画稿时尽量让图层边界贴合内容边界。# 手动标注的图层组织方式 新建图层组“标注” 在组内用 1px 线性图标画箭头和引线 文字图层写数值字号 10px颜色 #FF0000 导出时隐藏设计稿图层只显示标注组逻辑说明手动标注虽然慢但最可控适合小项目。标注图层单独成组导出时可以一键隐藏设计稿避免混淆。参数说明标注文字用红色是因为在灰度设计稿上最醒目字号 10px 是保证在 100% 缩放下能看清的最小值。失败时看什么如果标注文字被设计稿遮挡检查图层顺序标注组要放在最顶层。提示导出标注稿时把设计稿的不透明度降到 30%标注线会更清晰。5. 避坑与排查移动 UI 设计里最容易翻车的五个地方5.1 现象导出切图边缘有白边原因图层有羽化或抗锯齿导出 PNG 时边缘像素半透明放在深色背景上就显白边。解决把图层栅格化之前先扩展 1px 再收缩 1px或者用“图层 → 修边 → 去边”功能。更彻底的办法是画图标时用形状图层不要用画笔。5.2 现象PS 提示“无法完成请求因为 Photoshop 无法与 Creative Cloud 桌面版通信”原因这是热词里高频出现的报错通常是 Creative Cloud 后台进程卡死或网络验证失败。解决先退出 PS在任务管理器里结束所有 Adobe 相关进程重启 Creative Cloud 桌面版再打开 PS。如果还不行在首选项里关闭“生成器”和“云文档同步”这两个功能会频繁请求网络。5.3 现象画布放大后文字模糊原因文字图层被栅格化了或者用了非整数字号。解决文字图层永远不要栅格化保持矢量。字号用偶数比如 14px、16px、18px不要用 13.5px。如果必须用奇数开启“消除锯齿”里的“锐利”模式。5.4 现象图层样式复制后参数错乱原因不同版本的 PS 对图层样式的默认值不同复制粘贴时可能丢失“投影”或“描边”。解决不要跨版本复制图层样式尽量在同一版本内完成设计。如果必须跨版本复制后手动检查每个效果是否开启。5.5 现象导出 3x 切图时 PS 内存不足原因3x 切图尺寸是设计稿的 3 倍一个 360×780 的画布导出 3x 就是 1080×2340如果图层多、智能对象多内存占用会飙升。解决导出前合并无关图层关闭历史记录面板在首选项里把“历史记录状态”降到 20 步以内。如果还不行分批导出不要一次性导出所有切图。6. 进阶技巧用智能对象和动作批量处理多机型适配移动 UI 设计最耗时的不是画界面而是适配不同机型。iPhone 有刘海屏和灵动岛安卓有挖孔屏和曲面屏状态栏高度和底部安全区都不一样。如果每个机型都手动改一遍效率极低。我的做法是用智能对象 动作来批量处理。先把状态栏和底部标签栏做成智能对象替换内容时双击智能对象修改所有引用它的画板同步更新。然后录制一个动作新建文档 → 置入智能对象 → 调整画布高度 → 导出 PNG。这样换机型时只需要改智能对象里的状态栏高度跑一遍动作就能生成所有机型的预览图。# 动作录制步骤 1. 窗口 → 动作 → 新建动作命名为“多机型导出” 2. 开始录制文件 → 新建 → 宽度 360高度 780 3. 文件 → 置入链接的智能对象 → 选择状态栏.psb 4. 图像 → 画布大小 → 高度改为 800适配底部安全区 5. 文件 → 导出 → 导出为 PNG 6. 停止录制逻辑说明动作把重复操作串成一条流水线智能对象保证内容可替换。参数说明画布高度从 780 改到 800 是为了给底部安全区留 20px这个值根据机型调整。失败时看什么如果动作执行到“置入智能对象”报错检查智能对象路径是否包含中文PS 对中文路径支持不好。另一个技巧是用“图层复合”记录不同状态。比如按钮的默认态、按下态、禁用态用图层复合分别记录导出时切换复合即可不用手动隐藏图层。图层复合在“窗口 → 图层复合”里新建每个复合记录当前图层的可见性、位置和样式。最后说一个我自己的习惯每做完一个界面把 PSD 另存一份为“_flat”版本把所有图层合并成一层。这份 flat 版本用来做视觉评审和标注原始分层版本用来改稿。这样既避免了改稿时误操作又方便快速导出预览图。希望帮到你。本文还有配套的精品资源点击获取