简介这份配套课件围绕《APP UI设计从入门到精通Photoshop篇》第1章展开适合初学移动界面设计、希望结合Photoshop规范掌握APP界面基础知识的读者。内容覆盖手机发展历史、屏幕分辨率与色阶、UI设计核心原则以及手机UI相较平面UI的适配限制同时包含色彩意向、色轮工具、调色板与配色对比方法等实用知识可作为系统学习与课堂复习的参考资料。压缩包共1个文件为PPT格式大小12.89MB课件页面结构清晰便于按章节浏览或直接用于备课。已有100人学习下载对想快速建立APP UI设计理论框架的初学者有直接帮助。通过本套课件读者可以清楚理解手机屏幕参数如何影响界面效果掌握UI控件三要素、设计一致性与可控性并能从色彩搭配角度为后续Photoshop实操打下基础。1. 这套Photoshop课件真正要教的不是PS而是APP UI设计的工程链路很多想转行做APP UI设计的同学拿到这套《APP-UI设计从入门到精通(Photoshop篇)》PPT课件第一反应是翻到有步骤图的那几页开始临摹。结果通常是教程里的按钮、搜索框都会画一落到完整页面上就卡住交付开发时更是讲不清参数。原因是这套课件表面在讲软件操作真正的主线是把界面设计拆成“图层结构 矢量样式 尺寸标注 切图导出”这条工程链路。软件只是载体设计落地才是目标。这篇文章就按这条主线走一遍先理清课件里最该学的三关再把Photoshop里的图层样式、字号参数、切图和标注逐个落到能直接上手操作的程度最后把新手翻车率最高的几个场景挑出来说透。适合刚转行的UI新人也适合拿这套课件带人的设计师做验收参考。2. 先回答一个前置问题这套课件里的“精通”到底指什么2.1 课件结构先拆开五阶段排序才是真正的入门地图很多PPT课件把内容按“Photoshop功能”来排第一章讲选区第二章讲图层第三章讲滤镜。这个排序对修图合适对APP UI设计不合适。界面设计要用到的PS功能高度集中真正重要的是“先认识屏幕再画控件再拼页面再切图交付”这条路径。一套对应《APP-UI设计从入门到精通(Photoshop篇)》的合理内容结构我一般会按下面五段推进阶段学习目标对应PS知识点阶段交付物一、界面基础理解手机屏幕尺寸、逻辑分辨率和倍率关系新建画布、文档颜色模式一台手机尺寸的空白画布二、控件绘制会画按钮、输入框、标签栏、图标矢量形状、图层样式、对齐与分布一套可复用的基础控件三、页面组装把控件按真实产品层级拼成完整页面图层分组、智能对象、透明度一个干净可修改的页面PSD四、适配与切图输出开发能直接用的素材画板、参考线、导出、批处理1x/2x/3x切图包五、交付与复盘标注、命名、规范文档标尺工具、颜色面板、样式库一套完整的设计交付物这个顺序的本质是让每一阶段都有正反馈。先画出一个按钮比先学钢笔抠图更容易建立信心拿到一套能交付的切图比背住十个面板快捷键更有成就感。用这套课件带人时我也始终坚持滤镜、钢笔、通道这些内容放到最后因为APP UI设计90%的工作量在矢量形状、图层样式、排版和导出上不在图像合成。2.2 入门第一道坎先把画布尺寸和倍率关系钉死新手拿到Photoshop第一步就晕——新建文档时一堆选项不知道填什么。APP UI设计里有一个很容易被忽略的主角逻辑分辨率。以iPhone为例UI设计中常说的375x812、393x852指的是点的数量而实际屏幕物理像素是它的2倍或3倍。新建画布时我建议设计阶段直接用逻辑分辨率比如375x812这样画控件时填写的数值就是“点”不需要设计过程中反复乘2乘3。要在Photoshop里建立这套认知最好的练习是新建三种文档375x812对应1x基准、750x1624对应2x、1179x2556对应3x。把同一个图标分别放进去观察它占屏幕的比例。这个练习做完再看课件里关于切图的章节会有完全不同的体感。这个阶段最容易栽的坑是把“像素”和“点”混着用设计稿里一会儿填24px一会儿填48px到开发那边开发只能统一按设计稿像素除以倍率处理一堆控件的尺寸就会对不上。我自己带新人的时候前两周只允许用逻辑分辨率画图切图导出阶段再放大处理这样数字永远是干净的。2.3 “用PS做UI设计”只需五组工具不是十几个面板打开Photoshop工具栏里几十个工具容易让人劝退。但做APP UI设计高频用的其实只有五组移动工具V拖动和换位配合方向键微调矩形/圆角矩形工具U画按钮、卡片、输入框、图标底直接选择工具A调圆角和控制锚点自由变换CtrlT缩放、旋转、调整尺寸文本工具T所有文字标注和排版至于修复画笔、仿制图章、3D面板、滤镜库在整套APP UI设计流程里基本碰不到。一个有效的前置动作是打开Photoshop后在“窗口 工作区”里选择“设计”预设然后手动关闭用不到的浮动面板只留图层、属性、字符、颜色、历史记录。这样界面上剩下的东西就是做UI设计真正需要的“工具箱”。基础工具练习不需要多跟着课件做一个按钮就能串起来。在画布上拉出一个圆角矩形命名“主要按钮_主色”用属性面板调圆角和填充色复制一层改透明度做成“按下态”再做一层描边做成“次级按钮”。这一个练习能覆盖移动、矩形、文本、样式、图层命名五件事比对着工具书逐个学高效得多。3. 控件和图层样式把PPT里那些“熟悉又陌生”的参数设明白3.1 一个按钮的四个关键参数尺寸、圆角、填充色和状态课件里通常会放很多精美的界面截图但真正要掌握的是如何从零画出一个控件。以登录页主按钮为例这几个参数直接决定最终观感和开发还原度参数推荐值说明宽度343pt以375宽的屏为例左右各留16pt边距高度48pt手机端可点击区域通常不低于44pt圆角半径12ptiOS风格常用渐变圆角近似值填充色从品牌色板取不要用“看着好看”的临时颜色具体操作在PS中选择圆角矩形工具在画布空白处单击弹出创建窗口直接输入343x48圆角半径12pt而不是用鼠标拖拽。为什么强调这一点因为用鼠标拖出来的形状尺寸是“大概”输入值可以保证像素级精确。选中形状图层后图层面板下方找到“fx”图标加填充色和描边。还需要建立“状态”概念。真实APP里的按钮不是一张静态图它有默认、按下、禁用三种状态。在Photoshop里我习惯把同一按钮复制三层默认态用纯色实底按下态用颜色加深10%禁用态用40%透明度并去掉投影。这样交付给开发时三种状态都有参数可查实现时就不会出现“我做不出来”的对话。3.2 投影样式不是玄学混合模式、角度、距离、扩展、大小逐个说投影是APP UI设计里最常用的图层样式也是新手最爱乱调的地方。一个卡片投影调不好就是一块灰、一条硬边或者一片脏色。先看Photoshop投影的六个参数分别管什么参数作用UI设计常用范围混合模式默认正片叠底让阴影变暗保持默认不要改不透明度控制阴影深浅20%到40%按背景明暗调整角度阴影方向和全局光一致固定120度不要到处改距离阴影离开实体的位移2px到4px小投影更有质感扩展阴影边缘的浓度越大越硬0到15%UI中多用小扩展大小阴影的柔和程度俗称模糊4px到12px值越大越飘把这些参数对应到开发端的实现会更明白。开发实现投影就是四件事颜色、透明度、偏移量x/y、模糊半径。比如我给卡片设置的值是“颜色#000000、透明度10%、x0、y4px、模糊8px”开发就能直接用代码写出来。如果PS里用了一堆默认的灰色阴影并叠了多层效果开发根本不知道该怎么还原。另外要注意“全局光源角度”。很多课件不会提PPT里复制多个投影效果后如果没勾选“使用全局光”每个阴影角度都不同放在同一画面里特别别扭。做法是双击“投影”打开图层样式勾选“使用全局光”统一角度。这个选项我每次画完一组卡片都要检查一遍几乎是肌肉记忆。3.3 UI文字参数字号梯队、字重、行高以及和字体设置的对应关系APP UI设计里的文字不是随便选个字号就行。一套合理的字号梯队能让界面看起来整齐且好用。参考这个表格用途字号(pt)字重场景示例页面大标题28-32Semibold/Bold首页一级标题列表标题16-17Medium设置项、列表主文字正文内容14-15Regular说明文案、消息内容辅助说明11-12Regular时间戳、副标题、角标底部标签10-12MediumTabBar图标下的文字在Photoshop里设置时字符面板里有两个容易混淆的概念字体Font和行距Leading。设计稿里的文字字体选择上尽量用目标系统自带的字体比如iOS端就标注“苹方/PingFang SC”Android端标注“Roboto”。不要用自己电脑上安装的付费字体做界面主文字开发环境没有还原出来必乱。行距的设置也要讲究。用14pt正文举例行距设为20pt到22pt阅读体验比较舒适。很多课件直接给“自动”但PS的自动行距在中文排列下常常偏小字与字之间挤成一团。如果你发现一行中文末尾的标点被裁切或者两行文字距离忽大忽小多半就是行距没固定。每次做完文字部分我会选中所有文本图层统一检查字符面板里的行距是否为数值而不是“自动”。3.4 三个提升界面质感的开关渐变、内阴影和智能对象界面最怕的不是“丑”而是“平”。新手交出来的稿子常见问题是所有元素都用纯色填充没有层级。要在Photoshop里快速提升质感先开三个开关。第一个是渐变叠加。但要注意量整个页面不要每个按钮都加渐变只给主按钮和顶部大卡片用。双击图层打开“渐变叠加”选“线性”从品牌深色到亮色方向从上到下不透明度80%。和投影配合主按钮瞬间有层级感。第二个是内阴影。输入框、搜索框这一类“凹陷”元素用内阴影模拟沉下去的质感非常有效。混合模式选正片叠底不透明度20%左右角度沿全局光120度距离2px大小4px。这一组参数能做出非常干净的凹陷效果不需要用“加深工具”一点一点涂抹。第三个是智能对象。把Banner、封面图、头像这类会频繁更换的素材做成智能对象双击进去替换内容所有引用处同步更新。这也是课件里容易跳过但实操价值极高的习惯。在做整套界面时把业务图标和内容图全部转成智能对象后面改版本能省大量重复劳动。这些都做完再补一个玩法提醒AI辅助生成素材在2026年已经非常成熟但如果要用把它当作“起点素材”而不是“最终交付物”回来检查尺寸、透明通道和边缘干净度用图层样式再处理一层。直接扔AI图给开发尺寸和对齐大概率要返工。4. 切图与标注从PSD到开发的最后一公里也是UI和前端的分界线4.1 切图前的图层秩序命名前缀、分组结构、背景分层开发拿到PSD第一眼看的不是设计得漂不漂亮而是图层目录能不能看懂。如果图层面板里全是“图层1”“图层2副本 3”开发第一步就懵了每一层都要来回尝试。切图前的规范我在每次项目开始前就定好所有图层名称使用英文前缀区分类型icon_、btn_、bg_、card_、img_同一页面的元素放进一个画板或组内组名以功能区域命名nav_bar、content_card、tab_bar背景单独分层命名为bg_white/bg_gray不要直接画在默认白色背景层上图标需要导出为透明背景时单独放在一个画板中关闭内容背景层这个规范的意义在切图时体现得最明显。一个页面如果图层整洁批量导出脚本可以直接按前缀识别如果没有规范你只能手动一个一个隐藏、显示、另存为光一个首页十几张图就能耗掉半小时。实际操作步骤先用“窗口 画板”创建画板把设计稿内容放进对应画板。然后在图层面板右上角菜单打开“面板选项”勾选“使用默认展开”把每个组内图层展开方便检查命名是否全部规范。切图前再执行一次“查找图层”输入“图层”二字搜出来的名字越少说明你的PSD越健康。4.2 用ExtendScript批量导出把一张张“另存为”变成一键执行Photoshop最耗时的操作不是设计是切图。一个界面十几个图标手动一个个“导出为”名字和尺寸容易搞错心情也容易崩。我的做法是写一个ExtendScript脚本按图层名前缀批量导出PNG这比手动导出一张张另存为靠谱得多。// 批量导出指定前缀的图层为透明背景PNGPhotoshop ExtendScript #target photoshop if (app.documents.length 0) { var doc app.activeDocument; var outFolder Folder.selectDialog(选择导出目录); if (outFolder) { for (var i 0; i doc.layers.length; i) { var layer doc.layers[i]; // 只导出图标层命名以 icon_ 开头且当前可见 if (layer.visible layer.name.indexOf(icon_) 0) { // 复制图层内容 layer.copy(true); // 按图层宽高新建临时文档 var w layer.bounds[2] - layer.bounds[0]; var h layer.bounds[3] - layer.bounds[1]; var tempDoc app.documents.add(w, h, 72, temp); app.activeDocument.paste(); // 导出PNG-24保留透明通道 var pngOpt new PNGSaveOptions(); pngOpt.compression 6; var f new File(outFolder / layer.name .png); tempDoc.exportFile(f, ExportType.PNG24, pngOpt); tempDoc.close(SaveOptions.DONOTSAVECHANGES); } } alert(导出完成 outFolder); } }逻辑说明脚本遍历当前PSD的所有顶层图层找到名字以“icon_”开头且可见的图层复制后用它的边界宽高新建一个临时文档粘贴并导出为PNG-24最后关闭临时文档。因为每个图标都单独导到透明底的新文档里所以不会有其他元素混进来。参数说明app.documents.add()里传的72是临时文档的PPI不影响实际像素尺寸切图尺寸由图层边界决定compression6是PNG压缩级别数值越大文件越小但导出越慢6是默认折衷值够用。实际切片时如果源文件画布本身就是2x尺寸导出的就是2x图如果要3x可以在脚本里把文档尺寸先乘以1.5再导出或者直接对当前文档执行“图像 图像大小”放大到目标尺寸后再跑一遍脚本。这种脚本的价值在改动频繁时最明显UI稿改了第三版之后只需要跑一次脚本所有图标全部更新开发不需要反复来问“这个图标的最新版在哪”。这是真正让人不返工的“后悔药”。4.3 标注开发只关心六个数字别让他们猜切图搞定之后下一步是标注。新手设计的通病是把所有想要表达的视觉信息都放在PSD里但前端同学看到的只是一个图层。前端和UI的区别就在这UI关心视觉结果前端关心可复现的参数。开发实现界面时其实只依赖几个数字维度标注内容示例尺寸控件宽高宽343pt高48pt间距元素之间的空隙左右边距16pt按钮间距12pt颜色填充色和描边色主色#6452FF辅助色#334155圆角圆角半径圆角8pt字体字体名、字号、字重、行高PingFangSC-Regular 14pt/20pt状态不同交互状态的差异值按下态不透明度80%标注不需要用专门的标注工具Photoshop自带的“信息面板 标尺工具”就够用。用“标尺工具”拉出两条参考线之间的距离直接读信息面板里的数值颜色用吸管在图层上取色结合十六进制即可。整套标注做完后导出为一份PDF或长图命名“标注稿_v1”和切图包一起交给开发。同时要注意区分交付语境如果这套课件还兼顾了Web UI设计那么标注时要把iOS、Android、Web三个平台的数值分开注释因为导航栏高度、底部安全区、按钮点击范围都不一样。混在一起标注是常见错误开发看到数字也不知道该按哪套实现。4.4 交付物三件套源文件、切图包、标注稿缺一不可一个UI交接阶段我习惯固定交付三类东西第一件是PSD源文件必须分层完整矢量形状保持可编辑。很多新手为了保持视觉效果把所有图层合并后再交付结果开发想微调一个圆角都做不到只能拿着截图来问。记住给开发源文件的目的不是让他们欣赏视觉而是在还原时能提取精确参数。第二件是切图包按平台和倍率组织好目录结构例如“切图/ios/2x/”“切图/android/xxhdpi/”。切图命名与PSD图层名保持一致比如icon_back.png、btn_confirm.png。开发拿到手不需要问“这个照片是哪张图”。第三件是标注稿可以是PDF、长图或者是带标注的网页版本。标注稿上不需要展示全部视觉细节但颜色、间距、圆角、字号、状态变化必须全部出现。开发实现时参考这份标注稿PSD只在拿不准时再打开。交付后的一个实用习惯是保留“历史版本”文件夹。之前有个项目我在交付后第七天收到需求“按钮换成绿色”结果开发已经照着旧标注做到了联调阶段。如果早期版本的文件都完整保留在“versions”文件夹里双方比对成本就非常低。这个习惯帮我避过好几次灾难。5. 避坑章节Photoshop做APP UI最容易翻车的五个现场5.1 现象PS里看着丝滑开发实现后边缘发虚、糊成一片这个问题几乎每个新手都会遇到一回。原因之一是画布上的图形没有对齐像素网格一个宽度为奇数像素的图形在2x的设计稿里看上去并无异样但开发在真机上按实际像素渲染时边缘就会落在半像素位置出现模糊边。另一个原因是自由变换时连续缩放矢量形状光栅化后边缘被重新取样。解决思路分两步。先检查对齐打开“视图 显示 像素网格”放大到200%以上检查形状边缘。图层属性面板中勾选“对齐边缘”并确保图形的宽高为整数没有出现0.5或0.33这类小数。再检查是否重复缩放如果一个图标从一开始画好之后被CtrlT放大过两次建议重新绘制或直接改为矢量形状叠加不要继续拉伸。这个习惯我现在已经内化凡是关键图标只允许一次变换之后要变就回原始图层改参数。5.2 现象切出来的图标边缘有白边或者黑边切图时经常出现这种情况图标在PS里看着干净导出后边缘围绕一圈细小的白色或黑色杂边。尤其是深色图标配浅色背景导出后黑边格外明显。这通常不是图标本身的问题而是图层边缘带了羽化、投影或半透明的像素导出时这些像素被PNG的透明通道保留下来在深色/浅色背景下就显出轮廓。解决方法是导出前做一个快速检查在图层面板里选中图标所在图层执行“选择 载入选区”然后执行“选择 修改 收缩”1像素给图层添加蒙版把缩掉的边缘去掉。这个操作能切掉大部分灰色杂边。如果是投影层带着透明渐变边缘的导出时要确认自己导的是“元素本身”而不是“投影层元素层”的合并结果。切图前把投影隐藏切业务元素和带投影状态分别导出两套这是规范操作。5.3 现象用Photoshop里的滤镜和特效做的质感开发说“做不出来”很多新手喜欢用内外发光、光泽、图案叠加来给按钮加质感效果在PS里确实漂亮但开发还原时非常被动代码里的发光和高光渲染机制与PS完全不同调成一样的数值效果也有明显差异。这就导致设计稿里最出彩的“轻质感”部分最后总是被降级或者直接去掉。遇到这种情况我的处理原则是如果某个效果不能在开发环境用参数复现就把它做成图片素材。具体操作把带发光或光泽的按钮图层用“智能对象”单独包装导出为大尺寸PNG图片放到切图包中。开发用图片直接替代虽然减少了一点灵活性但视觉一致性保住了。反过来如果这个效果需要跟随交互状态变化比如按下去发光消失那就要考虑去掉发光改用纯色透明度变化保证开发能够实现。5.4 现象交付后文字全部被替换排版全乱这是设计交付中最容易忽略的坑。PSD里用了一种字体开发环境没有系统自动用了一种接近的字体替代结果字重、字距全变整个页面的排版看起来像另外一个设计。原因当然不是开发不负责任而是交付时字体信息没有说清楚。解决办法正文和标题等系统级文字统一用目标平台的系统字体并在标注稿中明确写出字体族iOS端写“PingFang SC”Android端写“Roboto”。如果你在PSD里用了非系统字体那只能用于营销视觉图不能用在常规界面文字里。另外行距必须给固定值不能留“自动”。开发环境解释行高的方式和PS不同自动行距到两端表现差异很大。我在交付检查清单里会专门有一项全文档搜索文本图层逐个确认行距为数值且字体为系统字体。5.5 现象开发问“这个蓝色用的是哪个”结果PS里改了五个版本同一个颜色在设计稿里出现了五种相近但不同的色值通常是因为每做一张页面都用吸管随便取色色板不统一导致。开发从PSD里提取颜色时每个控件取到不同色值界面整体显花。这个问题的根源不是Photoshop操作不熟练而是缺少“颜色规范”。解决方式把项目品牌色和功能色统一存进Photoshop的色板面板。操作路径是“窗口 色板”打开后点击右上角菜单选择“新建颜色组”把主色、辅助色、成功、警告、错误、文字主色、文字次色依次添加进去。后续所有控件填充直接吸取色板中的同一种颜色不再手动输入色号。交付时把色板导出一份给开发前端可以把它直接转成设计变量。这样一来即便界面改版颜色还是那几管颜色不会出现色差失控。6. 进阶用法把课件里练熟的套路沉淀成你自己的UI Kit6.1 把常用控件存成PS库元素新页面直接从库里拖前面练熟的按钮、输入框、导航栏、卡片如果不沉淀下一套设计稿还是从头画一遍。Photoshop的“库”功能可以解决这个重复劳动选中画好的控件图层按组在“窗口 库”面板中点击“添加到库”命名时带上前缀比如“基础_主按钮”“基础_搜索框”“品牌_引导卡”。库里存的不是普通图层而是带样式参数的组件。下次新建页面时直接拖进画布修改文字和颜色就能用。这个操作的意义在于组件是统一的不会因为每次重新绘制而出现圆角不一致、阴影参数漂移。时间久了你的库就成了自己的设计系统比任何模板都贴合项目需求。6.2 用验收清单代替肉眼盯梢稿子能不能交付量化说了算每次页面做完我会用一张固定清单自检逐项打勾后再交付。这比“我觉得还行”可靠得多。清单可以贴在办公桌边上也可以存在备忘录里检查维度验收标准结果像素对齐打开像素网格图形宽高无小数通过 / 不通过倍率关系标注中已明确1x/2x/3x对应数值通过 / 不通过字体规范系统字体、行距为固定数值通过 / 不通过状态齐全按钮有默认、按下、禁用三态通过 / 不通过标注完整颜色、字号、间距、圆角均有数值通过 / 不通过图层整洁命名规范无“图层1 副本”残留通过 / 不通过这套清单看起来简单但每条背后都是血泪教训。尤其是“图层整洁”这一项曾因图层命名混乱导致开发拿错切图整个联调周期多花了两天。现在任何人交到我手上的PSD我第一件事就是打开“图层”面板查一遍命名前缀再开像素网格查一遍边缘这两个动作几乎成了条件反射。希望这套从课件里跑通的方法能帮你把APP UI设计从“画得好看”推进到“交付得干净”中间省掉那些本可避免的返工和扯皮。希望帮到你。本文还有配套的精品资源点击获取 Photoshop做APP UI设计：从图层样式到切图标注的工程链路
简介这份配套课件围绕《APP UI设计从入门到精通Photoshop篇》第1章展开适合初学移动界面设计、希望结合Photoshop规范掌握APP界面基础知识的读者。内容覆盖手机发展历史、屏幕分辨率与色阶、UI设计核心原则以及手机UI相较平面UI的适配限制同时包含色彩意向、色轮工具、调色板与配色对比方法等实用知识可作为系统学习与课堂复习的参考资料。压缩包共1个文件为PPT格式大小12.89MB课件页面结构清晰便于按章节浏览或直接用于备课。已有100人学习下载对想快速建立APP UI设计理论框架的初学者有直接帮助。通过本套课件读者可以清楚理解手机屏幕参数如何影响界面效果掌握UI控件三要素、设计一致性与可控性并能从色彩搭配角度为后续Photoshop实操打下基础。1. 这套Photoshop课件真正要教的不是PS而是APP UI设计的工程链路很多想转行做APP UI设计的同学拿到这套《APP-UI设计从入门到精通(Photoshop篇)》PPT课件第一反应是翻到有步骤图的那几页开始临摹。结果通常是教程里的按钮、搜索框都会画一落到完整页面上就卡住交付开发时更是讲不清参数。原因是这套课件表面在讲软件操作真正的主线是把界面设计拆成“图层结构 矢量样式 尺寸标注 切图导出”这条工程链路。软件只是载体设计落地才是目标。这篇文章就按这条主线走一遍先理清课件里最该学的三关再把Photoshop里的图层样式、字号参数、切图和标注逐个落到能直接上手操作的程度最后把新手翻车率最高的几个场景挑出来说透。适合刚转行的UI新人也适合拿这套课件带人的设计师做验收参考。2. 先回答一个前置问题这套课件里的“精通”到底指什么2.1 课件结构先拆开五阶段排序才是真正的入门地图很多PPT课件把内容按“Photoshop功能”来排第一章讲选区第二章讲图层第三章讲滤镜。这个排序对修图合适对APP UI设计不合适。界面设计要用到的PS功能高度集中真正重要的是“先认识屏幕再画控件再拼页面再切图交付”这条路径。一套对应《APP-UI设计从入门到精通(Photoshop篇)》的合理内容结构我一般会按下面五段推进阶段学习目标对应PS知识点阶段交付物一、界面基础理解手机屏幕尺寸、逻辑分辨率和倍率关系新建画布、文档颜色模式一台手机尺寸的空白画布二、控件绘制会画按钮、输入框、标签栏、图标矢量形状、图层样式、对齐与分布一套可复用的基础控件三、页面组装把控件按真实产品层级拼成完整页面图层分组、智能对象、透明度一个干净可修改的页面PSD四、适配与切图输出开发能直接用的素材画板、参考线、导出、批处理1x/2x/3x切图包五、交付与复盘标注、命名、规范文档标尺工具、颜色面板、样式库一套完整的设计交付物这个顺序的本质是让每一阶段都有正反馈。先画出一个按钮比先学钢笔抠图更容易建立信心拿到一套能交付的切图比背住十个面板快捷键更有成就感。用这套课件带人时我也始终坚持滤镜、钢笔、通道这些内容放到最后因为APP UI设计90%的工作量在矢量形状、图层样式、排版和导出上不在图像合成。2.2 入门第一道坎先把画布尺寸和倍率关系钉死新手拿到Photoshop第一步就晕——新建文档时一堆选项不知道填什么。APP UI设计里有一个很容易被忽略的主角逻辑分辨率。以iPhone为例UI设计中常说的375x812、393x852指的是点的数量而实际屏幕物理像素是它的2倍或3倍。新建画布时我建议设计阶段直接用逻辑分辨率比如375x812这样画控件时填写的数值就是“点”不需要设计过程中反复乘2乘3。要在Photoshop里建立这套认知最好的练习是新建三种文档375x812对应1x基准、750x1624对应2x、1179x2556对应3x。把同一个图标分别放进去观察它占屏幕的比例。这个练习做完再看课件里关于切图的章节会有完全不同的体感。这个阶段最容易栽的坑是把“像素”和“点”混着用设计稿里一会儿填24px一会儿填48px到开发那边开发只能统一按设计稿像素除以倍率处理一堆控件的尺寸就会对不上。我自己带新人的时候前两周只允许用逻辑分辨率画图切图导出阶段再放大处理这样数字永远是干净的。2.3 “用PS做UI设计”只需五组工具不是十几个面板打开Photoshop工具栏里几十个工具容易让人劝退。但做APP UI设计高频用的其实只有五组移动工具V拖动和换位配合方向键微调矩形/圆角矩形工具U画按钮、卡片、输入框、图标底直接选择工具A调圆角和控制锚点自由变换CtrlT缩放、旋转、调整尺寸文本工具T所有文字标注和排版至于修复画笔、仿制图章、3D面板、滤镜库在整套APP UI设计流程里基本碰不到。一个有效的前置动作是打开Photoshop后在“窗口 工作区”里选择“设计”预设然后手动关闭用不到的浮动面板只留图层、属性、字符、颜色、历史记录。这样界面上剩下的东西就是做UI设计真正需要的“工具箱”。基础工具练习不需要多跟着课件做一个按钮就能串起来。在画布上拉出一个圆角矩形命名“主要按钮_主色”用属性面板调圆角和填充色复制一层改透明度做成“按下态”再做一层描边做成“次级按钮”。这一个练习能覆盖移动、矩形、文本、样式、图层命名五件事比对着工具书逐个学高效得多。3. 控件和图层样式把PPT里那些“熟悉又陌生”的参数设明白3.1 一个按钮的四个关键参数尺寸、圆角、填充色和状态课件里通常会放很多精美的界面截图但真正要掌握的是如何从零画出一个控件。以登录页主按钮为例这几个参数直接决定最终观感和开发还原度参数推荐值说明宽度343pt以375宽的屏为例左右各留16pt边距高度48pt手机端可点击区域通常不低于44pt圆角半径12ptiOS风格常用渐变圆角近似值填充色从品牌色板取不要用“看着好看”的临时颜色具体操作在PS中选择圆角矩形工具在画布空白处单击弹出创建窗口直接输入343x48圆角半径12pt而不是用鼠标拖拽。为什么强调这一点因为用鼠标拖出来的形状尺寸是“大概”输入值可以保证像素级精确。选中形状图层后图层面板下方找到“fx”图标加填充色和描边。还需要建立“状态”概念。真实APP里的按钮不是一张静态图它有默认、按下、禁用三种状态。在Photoshop里我习惯把同一按钮复制三层默认态用纯色实底按下态用颜色加深10%禁用态用40%透明度并去掉投影。这样交付给开发时三种状态都有参数可查实现时就不会出现“我做不出来”的对话。3.2 投影样式不是玄学混合模式、角度、距离、扩展、大小逐个说投影是APP UI设计里最常用的图层样式也是新手最爱乱调的地方。一个卡片投影调不好就是一块灰、一条硬边或者一片脏色。先看Photoshop投影的六个参数分别管什么参数作用UI设计常用范围混合模式默认正片叠底让阴影变暗保持默认不要改不透明度控制阴影深浅20%到40%按背景明暗调整角度阴影方向和全局光一致固定120度不要到处改距离阴影离开实体的位移2px到4px小投影更有质感扩展阴影边缘的浓度越大越硬0到15%UI中多用小扩展大小阴影的柔和程度俗称模糊4px到12px值越大越飘把这些参数对应到开发端的实现会更明白。开发实现投影就是四件事颜色、透明度、偏移量x/y、模糊半径。比如我给卡片设置的值是“颜色#000000、透明度10%、x0、y4px、模糊8px”开发就能直接用代码写出来。如果PS里用了一堆默认的灰色阴影并叠了多层效果开发根本不知道该怎么还原。另外要注意“全局光源角度”。很多课件不会提PPT里复制多个投影效果后如果没勾选“使用全局光”每个阴影角度都不同放在同一画面里特别别扭。做法是双击“投影”打开图层样式勾选“使用全局光”统一角度。这个选项我每次画完一组卡片都要检查一遍几乎是肌肉记忆。3.3 UI文字参数字号梯队、字重、行高以及和字体设置的对应关系APP UI设计里的文字不是随便选个字号就行。一套合理的字号梯队能让界面看起来整齐且好用。参考这个表格用途字号(pt)字重场景示例页面大标题28-32Semibold/Bold首页一级标题列表标题16-17Medium设置项、列表主文字正文内容14-15Regular说明文案、消息内容辅助说明11-12Regular时间戳、副标题、角标底部标签10-12MediumTabBar图标下的文字在Photoshop里设置时字符面板里有两个容易混淆的概念字体Font和行距Leading。设计稿里的文字字体选择上尽量用目标系统自带的字体比如iOS端就标注“苹方/PingFang SC”Android端标注“Roboto”。不要用自己电脑上安装的付费字体做界面主文字开发环境没有还原出来必乱。行距的设置也要讲究。用14pt正文举例行距设为20pt到22pt阅读体验比较舒适。很多课件直接给“自动”但PS的自动行距在中文排列下常常偏小字与字之间挤成一团。如果你发现一行中文末尾的标点被裁切或者两行文字距离忽大忽小多半就是行距没固定。每次做完文字部分我会选中所有文本图层统一检查字符面板里的行距是否为数值而不是“自动”。3.4 三个提升界面质感的开关渐变、内阴影和智能对象界面最怕的不是“丑”而是“平”。新手交出来的稿子常见问题是所有元素都用纯色填充没有层级。要在Photoshop里快速提升质感先开三个开关。第一个是渐变叠加。但要注意量整个页面不要每个按钮都加渐变只给主按钮和顶部大卡片用。双击图层打开“渐变叠加”选“线性”从品牌深色到亮色方向从上到下不透明度80%。和投影配合主按钮瞬间有层级感。第二个是内阴影。输入框、搜索框这一类“凹陷”元素用内阴影模拟沉下去的质感非常有效。混合模式选正片叠底不透明度20%左右角度沿全局光120度距离2px大小4px。这一组参数能做出非常干净的凹陷效果不需要用“加深工具”一点一点涂抹。第三个是智能对象。把Banner、封面图、头像这类会频繁更换的素材做成智能对象双击进去替换内容所有引用处同步更新。这也是课件里容易跳过但实操价值极高的习惯。在做整套界面时把业务图标和内容图全部转成智能对象后面改版本能省大量重复劳动。这些都做完再补一个玩法提醒AI辅助生成素材在2026年已经非常成熟但如果要用把它当作“起点素材”而不是“最终交付物”回来检查尺寸、透明通道和边缘干净度用图层样式再处理一层。直接扔AI图给开发尺寸和对齐大概率要返工。4. 切图与标注从PSD到开发的最后一公里也是UI和前端的分界线4.1 切图前的图层秩序命名前缀、分组结构、背景分层开发拿到PSD第一眼看的不是设计得漂不漂亮而是图层目录能不能看懂。如果图层面板里全是“图层1”“图层2副本 3”开发第一步就懵了每一层都要来回尝试。切图前的规范我在每次项目开始前就定好所有图层名称使用英文前缀区分类型icon_、btn_、bg_、card_、img_同一页面的元素放进一个画板或组内组名以功能区域命名nav_bar、content_card、tab_bar背景单独分层命名为bg_white/bg_gray不要直接画在默认白色背景层上图标需要导出为透明背景时单独放在一个画板中关闭内容背景层这个规范的意义在切图时体现得最明显。一个页面如果图层整洁批量导出脚本可以直接按前缀识别如果没有规范你只能手动一个一个隐藏、显示、另存为光一个首页十几张图就能耗掉半小时。实际操作步骤先用“窗口 画板”创建画板把设计稿内容放进对应画板。然后在图层面板右上角菜单打开“面板选项”勾选“使用默认展开”把每个组内图层展开方便检查命名是否全部规范。切图前再执行一次“查找图层”输入“图层”二字搜出来的名字越少说明你的PSD越健康。4.2 用ExtendScript批量导出把一张张“另存为”变成一键执行Photoshop最耗时的操作不是设计是切图。一个界面十几个图标手动一个个“导出为”名字和尺寸容易搞错心情也容易崩。我的做法是写一个ExtendScript脚本按图层名前缀批量导出PNG这比手动导出一张张另存为靠谱得多。// 批量导出指定前缀的图层为透明背景PNGPhotoshop ExtendScript #target photoshop if (app.documents.length 0) { var doc app.activeDocument; var outFolder Folder.selectDialog(选择导出目录); if (outFolder) { for (var i 0; i doc.layers.length; i) { var layer doc.layers[i]; // 只导出图标层命名以 icon_ 开头且当前可见 if (layer.visible layer.name.indexOf(icon_) 0) { // 复制图层内容 layer.copy(true); // 按图层宽高新建临时文档 var w layer.bounds[2] - layer.bounds[0]; var h layer.bounds[3] - layer.bounds[1]; var tempDoc app.documents.add(w, h, 72, temp); app.activeDocument.paste(); // 导出PNG-24保留透明通道 var pngOpt new PNGSaveOptions(); pngOpt.compression 6; var f new File(outFolder / layer.name .png); tempDoc.exportFile(f, ExportType.PNG24, pngOpt); tempDoc.close(SaveOptions.DONOTSAVECHANGES); } } alert(导出完成 outFolder); } }逻辑说明脚本遍历当前PSD的所有顶层图层找到名字以“icon_”开头且可见的图层复制后用它的边界宽高新建一个临时文档粘贴并导出为PNG-24最后关闭临时文档。因为每个图标都单独导到透明底的新文档里所以不会有其他元素混进来。参数说明app.documents.add()里传的72是临时文档的PPI不影响实际像素尺寸切图尺寸由图层边界决定compression6是PNG压缩级别数值越大文件越小但导出越慢6是默认折衷值够用。实际切片时如果源文件画布本身就是2x尺寸导出的就是2x图如果要3x可以在脚本里把文档尺寸先乘以1.5再导出或者直接对当前文档执行“图像 图像大小”放大到目标尺寸后再跑一遍脚本。这种脚本的价值在改动频繁时最明显UI稿改了第三版之后只需要跑一次脚本所有图标全部更新开发不需要反复来问“这个图标的最新版在哪”。这是真正让人不返工的“后悔药”。4.3 标注开发只关心六个数字别让他们猜切图搞定之后下一步是标注。新手设计的通病是把所有想要表达的视觉信息都放在PSD里但前端同学看到的只是一个图层。前端和UI的区别就在这UI关心视觉结果前端关心可复现的参数。开发实现界面时其实只依赖几个数字维度标注内容示例尺寸控件宽高宽343pt高48pt间距元素之间的空隙左右边距16pt按钮间距12pt颜色填充色和描边色主色#6452FF辅助色#334155圆角圆角半径圆角8pt字体字体名、字号、字重、行高PingFangSC-Regular 14pt/20pt状态不同交互状态的差异值按下态不透明度80%标注不需要用专门的标注工具Photoshop自带的“信息面板 标尺工具”就够用。用“标尺工具”拉出两条参考线之间的距离直接读信息面板里的数值颜色用吸管在图层上取色结合十六进制即可。整套标注做完后导出为一份PDF或长图命名“标注稿_v1”和切图包一起交给开发。同时要注意区分交付语境如果这套课件还兼顾了Web UI设计那么标注时要把iOS、Android、Web三个平台的数值分开注释因为导航栏高度、底部安全区、按钮点击范围都不一样。混在一起标注是常见错误开发看到数字也不知道该按哪套实现。4.4 交付物三件套源文件、切图包、标注稿缺一不可一个UI交接阶段我习惯固定交付三类东西第一件是PSD源文件必须分层完整矢量形状保持可编辑。很多新手为了保持视觉效果把所有图层合并后再交付结果开发想微调一个圆角都做不到只能拿着截图来问。记住给开发源文件的目的不是让他们欣赏视觉而是在还原时能提取精确参数。第二件是切图包按平台和倍率组织好目录结构例如“切图/ios/2x/”“切图/android/xxhdpi/”。切图命名与PSD图层名保持一致比如icon_back.png、btn_confirm.png。开发拿到手不需要问“这个照片是哪张图”。第三件是标注稿可以是PDF、长图或者是带标注的网页版本。标注稿上不需要展示全部视觉细节但颜色、间距、圆角、字号、状态变化必须全部出现。开发实现时参考这份标注稿PSD只在拿不准时再打开。交付后的一个实用习惯是保留“历史版本”文件夹。之前有个项目我在交付后第七天收到需求“按钮换成绿色”结果开发已经照着旧标注做到了联调阶段。如果早期版本的文件都完整保留在“versions”文件夹里双方比对成本就非常低。这个习惯帮我避过好几次灾难。5. 避坑章节Photoshop做APP UI最容易翻车的五个现场5.1 现象PS里看着丝滑开发实现后边缘发虚、糊成一片这个问题几乎每个新手都会遇到一回。原因之一是画布上的图形没有对齐像素网格一个宽度为奇数像素的图形在2x的设计稿里看上去并无异样但开发在真机上按实际像素渲染时边缘就会落在半像素位置出现模糊边。另一个原因是自由变换时连续缩放矢量形状光栅化后边缘被重新取样。解决思路分两步。先检查对齐打开“视图 显示 像素网格”放大到200%以上检查形状边缘。图层属性面板中勾选“对齐边缘”并确保图形的宽高为整数没有出现0.5或0.33这类小数。再检查是否重复缩放如果一个图标从一开始画好之后被CtrlT放大过两次建议重新绘制或直接改为矢量形状叠加不要继续拉伸。这个习惯我现在已经内化凡是关键图标只允许一次变换之后要变就回原始图层改参数。5.2 现象切出来的图标边缘有白边或者黑边切图时经常出现这种情况图标在PS里看着干净导出后边缘围绕一圈细小的白色或黑色杂边。尤其是深色图标配浅色背景导出后黑边格外明显。这通常不是图标本身的问题而是图层边缘带了羽化、投影或半透明的像素导出时这些像素被PNG的透明通道保留下来在深色/浅色背景下就显出轮廓。解决方法是导出前做一个快速检查在图层面板里选中图标所在图层执行“选择 载入选区”然后执行“选择 修改 收缩”1像素给图层添加蒙版把缩掉的边缘去掉。这个操作能切掉大部分灰色杂边。如果是投影层带着透明渐变边缘的导出时要确认自己导的是“元素本身”而不是“投影层元素层”的合并结果。切图前把投影隐藏切业务元素和带投影状态分别导出两套这是规范操作。5.3 现象用Photoshop里的滤镜和特效做的质感开发说“做不出来”很多新手喜欢用内外发光、光泽、图案叠加来给按钮加质感效果在PS里确实漂亮但开发还原时非常被动代码里的发光和高光渲染机制与PS完全不同调成一样的数值效果也有明显差异。这就导致设计稿里最出彩的“轻质感”部分最后总是被降级或者直接去掉。遇到这种情况我的处理原则是如果某个效果不能在开发环境用参数复现就把它做成图片素材。具体操作把带发光或光泽的按钮图层用“智能对象”单独包装导出为大尺寸PNG图片放到切图包中。开发用图片直接替代虽然减少了一点灵活性但视觉一致性保住了。反过来如果这个效果需要跟随交互状态变化比如按下去发光消失那就要考虑去掉发光改用纯色透明度变化保证开发能够实现。5.4 现象交付后文字全部被替换排版全乱这是设计交付中最容易忽略的坑。PSD里用了一种字体开发环境没有系统自动用了一种接近的字体替代结果字重、字距全变整个页面的排版看起来像另外一个设计。原因当然不是开发不负责任而是交付时字体信息没有说清楚。解决办法正文和标题等系统级文字统一用目标平台的系统字体并在标注稿中明确写出字体族iOS端写“PingFang SC”Android端写“Roboto”。如果你在PSD里用了非系统字体那只能用于营销视觉图不能用在常规界面文字里。另外行距必须给固定值不能留“自动”。开发环境解释行高的方式和PS不同自动行距到两端表现差异很大。我在交付检查清单里会专门有一项全文档搜索文本图层逐个确认行距为数值且字体为系统字体。5.5 现象开发问“这个蓝色用的是哪个”结果PS里改了五个版本同一个颜色在设计稿里出现了五种相近但不同的色值通常是因为每做一张页面都用吸管随便取色色板不统一导致。开发从PSD里提取颜色时每个控件取到不同色值界面整体显花。这个问题的根源不是Photoshop操作不熟练而是缺少“颜色规范”。解决方式把项目品牌色和功能色统一存进Photoshop的色板面板。操作路径是“窗口 色板”打开后点击右上角菜单选择“新建颜色组”把主色、辅助色、成功、警告、错误、文字主色、文字次色依次添加进去。后续所有控件填充直接吸取色板中的同一种颜色不再手动输入色号。交付时把色板导出一份给开发前端可以把它直接转成设计变量。这样一来即便界面改版颜色还是那几管颜色不会出现色差失控。6. 进阶用法把课件里练熟的套路沉淀成你自己的UI Kit6.1 把常用控件存成PS库元素新页面直接从库里拖前面练熟的按钮、输入框、导航栏、卡片如果不沉淀下一套设计稿还是从头画一遍。Photoshop的“库”功能可以解决这个重复劳动选中画好的控件图层按组在“窗口 库”面板中点击“添加到库”命名时带上前缀比如“基础_主按钮”“基础_搜索框”“品牌_引导卡”。库里存的不是普通图层而是带样式参数的组件。下次新建页面时直接拖进画布修改文字和颜色就能用。这个操作的意义在于组件是统一的不会因为每次重新绘制而出现圆角不一致、阴影参数漂移。时间久了你的库就成了自己的设计系统比任何模板都贴合项目需求。6.2 用验收清单代替肉眼盯梢稿子能不能交付量化说了算每次页面做完我会用一张固定清单自检逐项打勾后再交付。这比“我觉得还行”可靠得多。清单可以贴在办公桌边上也可以存在备忘录里检查维度验收标准结果像素对齐打开像素网格图形宽高无小数通过 / 不通过倍率关系标注中已明确1x/2x/3x对应数值通过 / 不通过字体规范系统字体、行距为固定数值通过 / 不通过状态齐全按钮有默认、按下、禁用三态通过 / 不通过标注完整颜色、字号、间距、圆角均有数值通过 / 不通过图层整洁命名规范无“图层1 副本”残留通过 / 不通过这套清单看起来简单但每条背后都是血泪教训。尤其是“图层整洁”这一项曾因图层命名混乱导致开发拿错切图整个联调周期多花了两天。现在任何人交到我手上的PSD我第一件事就是打开“图层”面板查一遍命名前缀再开像素网格查一遍边缘这两个动作几乎成了条件反射。希望这套从课件里跑通的方法能帮你把APP UI设计从“画得好看”推进到“交付得干净”中间省掉那些本可避免的返工和扯皮。希望帮到你。本文还有配套的精品资源点击获取