尧图网页设计 
简介《APP UI设计从入门到精通(Photoshop篇)》配套课件以PPT形式系统讲解移动APP界面设计的基础知识适合UI设计初学者、移动端产品设计师及使用Photoshop进行APP设计的读者参考学习。内容从手机发展历程讲起涵盖1902年无线电话装置、1938年贝尔实验室军用移动电话到现代智能手机的演进重点解析屏幕分辨率QVGA、HVGA、WVGA等与色阶指数从单色、256色到1600万色对显示效果的影响同时深入介绍UI设计概念、主要性能与核心控件说明手机UI设计在小屏幕限制、交互流程简化、系统兼容性与屏幕比例自适应等方面的特殊性并给出“一目了然、输入便捷、屏幕旋转适应”等六大设计技巧。此外还讲述色彩搭配方法、调色板使用与对比原则帮助建立完整的APP界面设计规范意识。课件共1个文件为PPT格式压缩包大小12.89MB目前已有100人学习下载便于系统学习或课堂展示能帮助读者从理论到实践快速入门移动端界面设计。1. 这套 APP UI 设计课件到底在讲什么从屏幕参数到设计规范的完整链路拿到一个 APP UI 设计任务很多人的第一反应是打开 Photoshop 找素材、拖图层结果做完一套界面放到真机上不是图标发虚就是颜色失真甚至在不同手机上布局直接错位。问题通常不在操作熟练度而在于对底层参数没有概念。这套《APP UI设计从入门到精通(Photoshop篇)》配套课件恰好把 UI 设计前的那些“硬知识”一次性补齐了——从手机的分辨率体系、色阶指数到 UI 设计原则、色彩搭配、图标格式再到 Photoshop 和 Illustrator 的定位分工。它不是教你怎么画一个按钮好看而是告诉你按钮画多大、用什么格式、在什么屏幕上显示才不出问题。适合两类人刚入门的设计师以及常年做平面设计想往移动端转的设计师。前者缺系统认知后者缺约束意识。2. 屏幕分辨率与 PPI设计稿尺寸背后的换算逻辑2.1 六种常见分辨率QVGA 到 WXGA 的像素意义移动端 UI 设计绕不开分辨率。课件里提到的 QVGA、HVGA、WVGA、QCIF、SVGA、WXGA 这六种规格本质上描述的是同一件事屏幕上横向和纵向各有多少像素点。拿 QVGA 来说它是 320×240意思是横向每行 320 个点、纵向每列 240 个点整块屏幕一共 76800 个像素。而 WXGA 常见为 1280×800像素总量到了 1024000是 QVGA 的十几倍。分辨率规格典型像素尺寸常见用途QCIF176×144早期功能机、视频通话小窗口QVGA320×240早期安卓机、低端功能机HVGA480×320早期 iPhone、部分安卓机WVGA800×480中端安卓机主流之一SVGA800×600部分平板早期规格WXGA1280×800平板、高清手机早期规格设计时不能只盯着一台真机。我一般会先确认目标用户的主力机型落在哪个分辨率区间再决定设计稿的基准尺寸。如果只做一套稿子就按该区间最高的分辨率做向下兼容。注意这里有个细节分辨率规格只管像素数量不管屏幕物理尺寸所以下面要引入 DPI 和 PPI。2.2 DPI 与 PPI300PPI 是颗粒感的分界线课件把 DPI 解释为每英寸像素点数量即网点密度把 PPI 定义为图像分辨率单位屏幕密度越高画面越精细。两者常被混用但严格说DPI 偏向打印输出PPI 偏向屏幕显示。移动端设计里我们更多讨论 PPI——每英寸屏幕上的物理像素数。课件提到一个关键阈值PPI 低于 240人眼能明显感知颗粒感高于 300肉眼几乎分辨不出像素点。所以 300PPI 成为行业惯例上的“视网膜屏”标准后来的 Retina 屏就是把 PPI 做过了这条线。这个数字不是玄学而是人眼视角分辨率的物理极限——正常视距下每英寸 300 个点已经超过了视网膜能解析的密度。实际工作中我经常用这个公式手动估算 PPI[ PPI \frac{\sqrt{宽度像素^2 高度像素^2}}{屏幕对角线英寸数} ]以课件里三星 S6 为例分辨率 2560×1440、屏幕 5.1 英寸计算下来大约 576PPI远超 300 的边界而三星 S5 是 1920×1080、同样 5.1 英寸PPI 约 432虽然也够清晰但细腻度明显低于 S6。设计稿里图标和文字的尺寸就是按这个密度逻辑来定的。2.3 从物理像素到逻辑像素一套稿怎么适配多屏物理像素是屏幕真实存在的点逻辑像素是设计时使用的抽象单位。iOS 的 pt 和安卓的 dp 都属于逻辑像素。同样的 UI 元素在不同 PPI 屏幕上占用的物理像素数不同但视觉大小要保持一致这就需要把设计稿按倍数换算。常见做法是iOS 以 750×13342x为设计稿基准安卓以 1080×1920xxhdpi为基准。课件虽然没有直接讲这套换算但它强调“不同型号手机屏幕比例不一致设计时要考虑图片自适应”指的就是这个问题。做切图时iOS 要输出 1x、2x、3x 三套安卓要按 mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi 五档输出每档是上一个的 1.5 倍或 2 倍。这些换算关系建议在项目开始前就写进规范文档。3. UI 设计原则与手机端约束平面设计师最容易翻车的地方3.1 UI 控件的三要素绘制、数据与控制课件对 UI 控件的剖析很务实拆成绘制、数据、控制三部分。绘制是控件长什么样按钮的圆角、阴影、渐变都属于这一层数据是控件承载的信息一个开关按钮必须有“开/关”两种状态值否则它只是个装饰图控制则是交互逻辑最常见的例子就是 Button——用户点击后要触发动作这部分直接决定控件是否可用。很多设计师只盯着绘制层做完一个精美的按钮却忘了定义它的状态切换和点击反馈。这就是为什么课件强调“首先需要保证设计目标一致、元素外观一致、交互行为一致”。落到 Photoshop 层面意味着同一个控件要输出多个状态图层正常、按下、禁用、选中每个状态一套样式。图层命名里我会用btn_primary_normal、btn_primary_pressed这样的格式方便开发切图后对应状态。3.2 手机 UI 的四个限制条件小屏、有限色彩、格式差异、比例不一课件总结了手机 UI 的四个特征每一条都是对设计方案的硬约束第一交互过程不能复杂步骤要少。手机上用户的操作路径必须短一个任务超过三到四步就很容易流失。第二屏幕小、色彩支持有限色彩过渡丰富的图像可能无法正常显示。这直接否定了“平面设计那套细腻渐变照样搬”的思路。第三不同系统支持的图像、音频、动画格式不一样。安卓原生支持 WebPiOS 对某些格式兼容性差设计时必须查平台规范。第四屏幕比例不一致图片自适应和布局要考虑。这四条里第二条最常被忽视。很多设计师在 PS 里做出平滑的 256 级渐变放到低端安卓机上出现明显色阶断层。原因就是屏幕色阶指数不够无法平滑显示过渡。后面第四部分会具体展开色阶。3.3 手机 UI 与平面 UI审美的迁移与落差课件明确指出很多设计师的问题在于“不能合理转化网站设计架构理念到手机界面”。平面 UI 的创作空间大排版自由度高而手机界面限制多于是觉得创意被压制。实际上限制不等于死板空间变小更需要用布局和细节来表达。我的经验是做手机 UI 时先确认系统再谈风格。iOS 和安卓的交互范式、控件样式、导航模式都不一样——iOS 有 Tab Bar安卓有 Bottom Navigation 但规范不同iOS 的返回手势是边缘滑动安卓是系统级返回键。设计方案不从系统规范出发后续开发和产品评审都会扯皮。课件里“手机 UI 设计受到手机系统限制要先确认适用系统”这句话是所有移动端项目的第一条军规。4. 色彩搭配与色阶陷阱从色轮到调色板的选色逻辑4.1 色阶指数为什么渐变会断层屏幕显示的色彩丰富度由色阶指数决定。课件列出了从低到高的序列单色、256 色、4096 色、65536 色、26 万色、1600 万色。换算关系是256 色等于 2 的 8 次方即 8 位彩色4096 色等于 2 的 12 次方65536 色是 2 的 16 次方即常说的 16 位真彩色26 万色是 2 的 18 次方即 18 位真彩。按这个规律1600 万色对应 2 的 24 次方也就是 24 位真彩色这是目前主流手机屏幕的标准。理解这个数列的意义在于当你在 Photoshop 里做一条从深蓝到浅蓝的渐变8 位屏幕只能显示 256 种颜色中间过渡只能靠插值同色区域就会形成肉眼可见的条纹俗称“渐变断层”。提示如果你的设计稿在 PS 里看着平滑真机上出现色阶断层优先检查目标机型的最低色阶支持而不是怀疑自己的渐变参数。现在新手机基本都是 24 位色断层问题主要存在于低端机型或老旧系统。兼容做法是渐变范围不要拉太长或给渐变加一点细微的噪点纹理dithering 思路打断同色带。4.2 标准色三级规范与调色板三个色度加一个强调色课件里提到手机 APP 标准色分为重要、一般、弱三种使用规范对应重要标准色、一般标准色、较弱标准色。这套分级本质上是在规定色彩的使用频率和面积占比重要标准色用于主按钮、关键文字、当前状态一般标准色用于次级元素、辅助信息较弱标准色用于背景、分割线、弱化内容。调色板部分课件提到“以基础色为基准通过填充光谱为 Android、Web 和 iOS 环境提供完整可用的颜色”并要求限制颜色数量从众多基础色里选 3 个色度加 1 个强调色。这是非常实用的约束策略。很多新手在配色时恨不得每种功能用一个颜色结果界面花成调色盘。正确做法是主色一个辅助色一个中性色一个灰阶再加一个强调色用于限量的高亮操作。强调色课件原话是“可有可无”但既然选了就只用在关键路径上比如结算按钮、未读红点。4.3 对比原则与色盲色弱色彩方案必须过的一道关课件列出的色彩运用原理里包括设计色调统一、有重点色、考虑色盲色弱用户、颜色方案测试、遵循对比原则、控制色彩类别。其中色盲色弱这点的现实意义很强红绿色盲是最大人群如果界面的错误提示和成功提示只靠红绿区分这部分用户就无法辨认。常见做法是在颜色之外叠加图标或文字符号比如错误状态加一个感叹号图标、成功状态加一个对勾而不是只换颜色。深浅搭配的问题上课件给出了一个直观结论浅色和深色混合时浅色显得更浅、深色显得更深。这也是为什么深色模式界面通常搭配亮色文字——对比反差越大可读性越好。实际配色时我会用 HSB 模式而不是 RGB 模式来微调颜色因为 H色相、S饱和度、B明度三个维度更符合人的感知逻辑调色效率比 RGB 高得多。5. 图标格式避坑指南JPEG、PNG、GIF 什么时候用错了5.1 JPEG 的压缩边界从 10:1 到 40:1 的取舍JPEG 是目前网络上最流行的压缩图像格式压缩比率通常在 10:1 到 40:1 之间。它的压缩原理是丢弃高频信息也就是人眼不敏感的色彩细节所以压缩比越大文件越小画质损失越明显。优点是支持 24 位真彩色色彩保留好适合连续色调图像比如照片、渐变背景缺点是有损压缩边缘会有振铃效应透明不支持。实际项目中JPEG 只用于界面里的照片位图区域比如 banner 图、用户头像的原始图片。图标、按钮、logo 一律不能用 JPEG。原因有两点一是 JPEG 不支持透明通道圆角图标存成 JPEG 会出现白底或黑底二是有损压缩会腐蚀图标边缘的锐利线条小尺寸下尤其明显。如果实在要用 JPEG 做背景图Photoshop 导出时压缩级别建议选 8 到 10不要拉满。5.2 PNG 的透明通道为什么它是切图主力PNG 被课件称为“被网络接受的最新图像文件格式”支持高级别无损耗压缩、Alpha 通道透明度和伽马校正同时提供 24 位和 48 位真彩色支持。相比 JPEGPNG 不丢细节边缘可以保持锐利还能保留半透明效果所以移动端界面里的图标、按钮、切图素材全部以 PNG 为主。Alpha 通道是这里的关键。它不只是“透明/不透明”的开关而是 256 级灰度透明信息所以 PNG 能表现柔和阴影、抗锯齿边缘、半透明蒙层。Photoshop 里导出 PNG 时我习惯勾选“交错”关闭文件能小一点网络加载更快。注意PNG 非常适合 UI 图形但不太适合照片因为无损压缩对连续色调的压缩效率远低于 JPEG同样的照片用 PNG 存储体积可能大 5 到 10 倍。5.3 GIF 与 LZW 压缩动画图标的兼容选择GIF 是基于 LZW 算法的无损压缩格式压缩率在 50% 左右历史很老几乎所有软件都支持。它的最大短板是只支持 256 色色彩丰富的界面元素用 GIF 存储会出现严重色偏和色斑。所以 GIF 用在移动端 UI 里主要只有两个场景小尺寸的简单动画图标、加载动效。做 GIF 动画时在 Photoshop 里要先把图层整理成逐帧动画导出时注意颜色抖动dithering设置。256 色限制下如果原图渐变过多导出后一定会有条纹这时候把“仿色”开到 100% 能小幅缓解。但根本解法是动效素材优先输出序列帧 PNG 或直接交给开发用代码实现LottieGIF 只做低保真预览。5.4 四个常见踩坑记录现象、原因与解决踩坑一圆角图标导出后出现白边。现象PNG 图标放到深色背景上边缘有一圈发白的虚边。原因Photoshop 里图标画在白色图层上直接导出没做去底处理边缘像素保留了白色信息。解决导出前删掉背景层或者用“图层样式-描边”做内阴影处理关闭“透明形状图层”选项后重新导出。踩坑二同样一个图标安卓和 iOS 显示模糊。现象一套切图两个平台通用细看发虚。原因安卓的 mdpi、hdpi、xhdpi 等多密度适配要求多种尺寸iOS 也分 1x/2x/3x一套尺寸不可能通吃。解决做切图前确认目标系统按倍数批量导出。Photoshop 里可以用“导出-导出为”面板一次生成多套尺寸不要手动缩放。踩坑三JPEG 压缩过狠banner 出现色块。现象背景图在 PS 里看正常导出后在手机上出现局部色块和噪声。原因压缩比率拉太高高频信息丢失过多深色渐变色带被切开。解决导出 JPEG 时质量级别不低于 8渐变背景优先用 PNG或者改用 WebP 格式。踩坑四切图命名混乱开发对接时状态对应不上。现象开发问“按下的按钮是哪一张”设计师翻半天图层。原因没有按控件-状态-倍率的规范命名。解决从设计阶段就统一命名例如btn_primary_pressed_2x.png每一层状态图都单独管理这套习惯能省掉大量沟通成本。6. Photoshop 落地练习从新建文档到切图验证的全流程6.1 新建移动端画布参数怎么定课件讲解了分辨率和尺寸的概念但没有直接给出新建文档的参数。常见做法是iOS 设计稿用 750×1334 像素、PPI 设 72安卓高清单张用 1080×1920 像素。这里有个容易混淆的点——PS 里的 PPI 参数只影响打印输出和文档内“实际大小”显示不影响移动端屏幕上最终效果所以不必纠结设为 72 还是 326。下面这串 ExtendScript 可以直接在 Photoshop 里跑一键生成 iOS 基准画布// 新建 750x1334 iOS 设计稿画布分辨率 72RGB 模式 var doc app.documents.add(750, 1334, 72, iOS_Design, NewDocumentMode.RGB, DocumentFill.WHITE); // 新建参考线左右各 24px 安全边距 doc.guides.add(Direction.VERTICAL, 24); doc.guides.add(Direction.VERTICAL, 750 - 24); // 顶部状态栏参考线高度 44px doc.guides.add(Direction.HORIZONTAL, 44);这段脚本创建了 750×1334 的文档并添加了安全区参考线。逻辑说明750 是 iPhone 6/7/8 系列的逻辑像素宽度1334 是高度两倍于 375×667 的逻辑尺寸。参考线的作用是约束内容不要贴边左右 24px 是移动端常见安全边距。参数可按需要改安卓项目把宽高换成 1080×1920全面屏项目把高度换成 1624 或更高。6.2 按双平台规范做自适配设计阶段就该查的清单一套设计稿交付前我习惯走一遍下面这个核对单全部通过才发给开发检查项iOS 要求安卓要求设计稿尺寸750×1334 或 750×16241080×1920 或 1440×2560切图倍率1x、2x、3xmdpi 到 xxxhdpi 五档导航栏高度44pt 以上56dp 到 64dp列表点击反馈高亮态、选中态、禁用态涟漪效果Ripple由代码实现图标格式PNG、PDF 矢量可选PNG、VectorDrawable 可选这个表格不是让你背数值而是用来提醒每个平台都有自己的控件尺寸和状态规范设计前先查官方视觉规范文档不要凭空想象。字体方面iOS 用 SF Pro 和苹方安卓用 Roboto 和思源黑体混用会导致字号和行距表现不一致。6.3 用课件里的知识做验收三个必须验证的参数交付前做一轮“参数回归”每次都从三个角度检查。第一分辨率适配把你的设计稿在 PS 里等比缩放到目标低端机分辨率肉眼观察图标和文字是否仍然清晰。第二格式验证把切图放大到 400%检查边缘是否锯齿透明区域是否有意外白边确认导出格式是 PNG。第三色彩检查把界面截图丢进 PS用吸管工具取主色和辅助色确认饱和度没有在压缩过程中偏移。配色方案做不出来的情况我也常遇到这时候会回到 HSV 模式下重新调整明度饱和而不是在 RGB 里数值试错。从那以后我每做一个移动端项目都会先花十分钟把目标平台的屏幕参数和格式规范列成一张表贴在 PS 画板旁边做完一个界面就核对一次。这套从课件里提炼出来的流程帮我挡掉了大量返工。希望帮到你。本文还有配套的精品资源点击获取 APP UI设计必修课：从分辨率到图标格式的Photoshop实战指南
简介《APP UI设计从入门到精通(Photoshop篇)》配套课件以PPT形式系统讲解移动APP界面设计的基础知识适合UI设计初学者、移动端产品设计师及使用Photoshop进行APP设计的读者参考学习。内容从手机发展历程讲起涵盖1902年无线电话装置、1938年贝尔实验室军用移动电话到现代智能手机的演进重点解析屏幕分辨率QVGA、HVGA、WVGA等与色阶指数从单色、256色到1600万色对显示效果的影响同时深入介绍UI设计概念、主要性能与核心控件说明手机UI设计在小屏幕限制、交互流程简化、系统兼容性与屏幕比例自适应等方面的特殊性并给出“一目了然、输入便捷、屏幕旋转适应”等六大设计技巧。此外还讲述色彩搭配方法、调色板使用与对比原则帮助建立完整的APP界面设计规范意识。课件共1个文件为PPT格式压缩包大小12.89MB目前已有100人学习下载便于系统学习或课堂展示能帮助读者从理论到实践快速入门移动端界面设计。1. 这套 APP UI 设计课件到底在讲什么从屏幕参数到设计规范的完整链路拿到一个 APP UI 设计任务很多人的第一反应是打开 Photoshop 找素材、拖图层结果做完一套界面放到真机上不是图标发虚就是颜色失真甚至在不同手机上布局直接错位。问题通常不在操作熟练度而在于对底层参数没有概念。这套《APP UI设计从入门到精通(Photoshop篇)》配套课件恰好把 UI 设计前的那些“硬知识”一次性补齐了——从手机的分辨率体系、色阶指数到 UI 设计原则、色彩搭配、图标格式再到 Photoshop 和 Illustrator 的定位分工。它不是教你怎么画一个按钮好看而是告诉你按钮画多大、用什么格式、在什么屏幕上显示才不出问题。适合两类人刚入门的设计师以及常年做平面设计想往移动端转的设计师。前者缺系统认知后者缺约束意识。2. 屏幕分辨率与 PPI设计稿尺寸背后的换算逻辑2.1 六种常见分辨率QVGA 到 WXGA 的像素意义移动端 UI 设计绕不开分辨率。课件里提到的 QVGA、HVGA、WVGA、QCIF、SVGA、WXGA 这六种规格本质上描述的是同一件事屏幕上横向和纵向各有多少像素点。拿 QVGA 来说它是 320×240意思是横向每行 320 个点、纵向每列 240 个点整块屏幕一共 76800 个像素。而 WXGA 常见为 1280×800像素总量到了 1024000是 QVGA 的十几倍。分辨率规格典型像素尺寸常见用途QCIF176×144早期功能机、视频通话小窗口QVGA320×240早期安卓机、低端功能机HVGA480×320早期 iPhone、部分安卓机WVGA800×480中端安卓机主流之一SVGA800×600部分平板早期规格WXGA1280×800平板、高清手机早期规格设计时不能只盯着一台真机。我一般会先确认目标用户的主力机型落在哪个分辨率区间再决定设计稿的基准尺寸。如果只做一套稿子就按该区间最高的分辨率做向下兼容。注意这里有个细节分辨率规格只管像素数量不管屏幕物理尺寸所以下面要引入 DPI 和 PPI。2.2 DPI 与 PPI300PPI 是颗粒感的分界线课件把 DPI 解释为每英寸像素点数量即网点密度把 PPI 定义为图像分辨率单位屏幕密度越高画面越精细。两者常被混用但严格说DPI 偏向打印输出PPI 偏向屏幕显示。移动端设计里我们更多讨论 PPI——每英寸屏幕上的物理像素数。课件提到一个关键阈值PPI 低于 240人眼能明显感知颗粒感高于 300肉眼几乎分辨不出像素点。所以 300PPI 成为行业惯例上的“视网膜屏”标准后来的 Retina 屏就是把 PPI 做过了这条线。这个数字不是玄学而是人眼视角分辨率的物理极限——正常视距下每英寸 300 个点已经超过了视网膜能解析的密度。实际工作中我经常用这个公式手动估算 PPI[ PPI \frac{\sqrt{宽度像素^2 高度像素^2}}{屏幕对角线英寸数} ]以课件里三星 S6 为例分辨率 2560×1440、屏幕 5.1 英寸计算下来大约 576PPI远超 300 的边界而三星 S5 是 1920×1080、同样 5.1 英寸PPI 约 432虽然也够清晰但细腻度明显低于 S6。设计稿里图标和文字的尺寸就是按这个密度逻辑来定的。2.3 从物理像素到逻辑像素一套稿怎么适配多屏物理像素是屏幕真实存在的点逻辑像素是设计时使用的抽象单位。iOS 的 pt 和安卓的 dp 都属于逻辑像素。同样的 UI 元素在不同 PPI 屏幕上占用的物理像素数不同但视觉大小要保持一致这就需要把设计稿按倍数换算。常见做法是iOS 以 750×13342x为设计稿基准安卓以 1080×1920xxhdpi为基准。课件虽然没有直接讲这套换算但它强调“不同型号手机屏幕比例不一致设计时要考虑图片自适应”指的就是这个问题。做切图时iOS 要输出 1x、2x、3x 三套安卓要按 mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi 五档输出每档是上一个的 1.5 倍或 2 倍。这些换算关系建议在项目开始前就写进规范文档。3. UI 设计原则与手机端约束平面设计师最容易翻车的地方3.1 UI 控件的三要素绘制、数据与控制课件对 UI 控件的剖析很务实拆成绘制、数据、控制三部分。绘制是控件长什么样按钮的圆角、阴影、渐变都属于这一层数据是控件承载的信息一个开关按钮必须有“开/关”两种状态值否则它只是个装饰图控制则是交互逻辑最常见的例子就是 Button——用户点击后要触发动作这部分直接决定控件是否可用。很多设计师只盯着绘制层做完一个精美的按钮却忘了定义它的状态切换和点击反馈。这就是为什么课件强调“首先需要保证设计目标一致、元素外观一致、交互行为一致”。落到 Photoshop 层面意味着同一个控件要输出多个状态图层正常、按下、禁用、选中每个状态一套样式。图层命名里我会用btn_primary_normal、btn_primary_pressed这样的格式方便开发切图后对应状态。3.2 手机 UI 的四个限制条件小屏、有限色彩、格式差异、比例不一课件总结了手机 UI 的四个特征每一条都是对设计方案的硬约束第一交互过程不能复杂步骤要少。手机上用户的操作路径必须短一个任务超过三到四步就很容易流失。第二屏幕小、色彩支持有限色彩过渡丰富的图像可能无法正常显示。这直接否定了“平面设计那套细腻渐变照样搬”的思路。第三不同系统支持的图像、音频、动画格式不一样。安卓原生支持 WebPiOS 对某些格式兼容性差设计时必须查平台规范。第四屏幕比例不一致图片自适应和布局要考虑。这四条里第二条最常被忽视。很多设计师在 PS 里做出平滑的 256 级渐变放到低端安卓机上出现明显色阶断层。原因就是屏幕色阶指数不够无法平滑显示过渡。后面第四部分会具体展开色阶。3.3 手机 UI 与平面 UI审美的迁移与落差课件明确指出很多设计师的问题在于“不能合理转化网站设计架构理念到手机界面”。平面 UI 的创作空间大排版自由度高而手机界面限制多于是觉得创意被压制。实际上限制不等于死板空间变小更需要用布局和细节来表达。我的经验是做手机 UI 时先确认系统再谈风格。iOS 和安卓的交互范式、控件样式、导航模式都不一样——iOS 有 Tab Bar安卓有 Bottom Navigation 但规范不同iOS 的返回手势是边缘滑动安卓是系统级返回键。设计方案不从系统规范出发后续开发和产品评审都会扯皮。课件里“手机 UI 设计受到手机系统限制要先确认适用系统”这句话是所有移动端项目的第一条军规。4. 色彩搭配与色阶陷阱从色轮到调色板的选色逻辑4.1 色阶指数为什么渐变会断层屏幕显示的色彩丰富度由色阶指数决定。课件列出了从低到高的序列单色、256 色、4096 色、65536 色、26 万色、1600 万色。换算关系是256 色等于 2 的 8 次方即 8 位彩色4096 色等于 2 的 12 次方65536 色是 2 的 16 次方即常说的 16 位真彩色26 万色是 2 的 18 次方即 18 位真彩。按这个规律1600 万色对应 2 的 24 次方也就是 24 位真彩色这是目前主流手机屏幕的标准。理解这个数列的意义在于当你在 Photoshop 里做一条从深蓝到浅蓝的渐变8 位屏幕只能显示 256 种颜色中间过渡只能靠插值同色区域就会形成肉眼可见的条纹俗称“渐变断层”。提示如果你的设计稿在 PS 里看着平滑真机上出现色阶断层优先检查目标机型的最低色阶支持而不是怀疑自己的渐变参数。现在新手机基本都是 24 位色断层问题主要存在于低端机型或老旧系统。兼容做法是渐变范围不要拉太长或给渐变加一点细微的噪点纹理dithering 思路打断同色带。4.2 标准色三级规范与调色板三个色度加一个强调色课件里提到手机 APP 标准色分为重要、一般、弱三种使用规范对应重要标准色、一般标准色、较弱标准色。这套分级本质上是在规定色彩的使用频率和面积占比重要标准色用于主按钮、关键文字、当前状态一般标准色用于次级元素、辅助信息较弱标准色用于背景、分割线、弱化内容。调色板部分课件提到“以基础色为基准通过填充光谱为 Android、Web 和 iOS 环境提供完整可用的颜色”并要求限制颜色数量从众多基础色里选 3 个色度加 1 个强调色。这是非常实用的约束策略。很多新手在配色时恨不得每种功能用一个颜色结果界面花成调色盘。正确做法是主色一个辅助色一个中性色一个灰阶再加一个强调色用于限量的高亮操作。强调色课件原话是“可有可无”但既然选了就只用在关键路径上比如结算按钮、未读红点。4.3 对比原则与色盲色弱色彩方案必须过的一道关课件列出的色彩运用原理里包括设计色调统一、有重点色、考虑色盲色弱用户、颜色方案测试、遵循对比原则、控制色彩类别。其中色盲色弱这点的现实意义很强红绿色盲是最大人群如果界面的错误提示和成功提示只靠红绿区分这部分用户就无法辨认。常见做法是在颜色之外叠加图标或文字符号比如错误状态加一个感叹号图标、成功状态加一个对勾而不是只换颜色。深浅搭配的问题上课件给出了一个直观结论浅色和深色混合时浅色显得更浅、深色显得更深。这也是为什么深色模式界面通常搭配亮色文字——对比反差越大可读性越好。实际配色时我会用 HSB 模式而不是 RGB 模式来微调颜色因为 H色相、S饱和度、B明度三个维度更符合人的感知逻辑调色效率比 RGB 高得多。5. 图标格式避坑指南JPEG、PNG、GIF 什么时候用错了5.1 JPEG 的压缩边界从 10:1 到 40:1 的取舍JPEG 是目前网络上最流行的压缩图像格式压缩比率通常在 10:1 到 40:1 之间。它的压缩原理是丢弃高频信息也就是人眼不敏感的色彩细节所以压缩比越大文件越小画质损失越明显。优点是支持 24 位真彩色色彩保留好适合连续色调图像比如照片、渐变背景缺点是有损压缩边缘会有振铃效应透明不支持。实际项目中JPEG 只用于界面里的照片位图区域比如 banner 图、用户头像的原始图片。图标、按钮、logo 一律不能用 JPEG。原因有两点一是 JPEG 不支持透明通道圆角图标存成 JPEG 会出现白底或黑底二是有损压缩会腐蚀图标边缘的锐利线条小尺寸下尤其明显。如果实在要用 JPEG 做背景图Photoshop 导出时压缩级别建议选 8 到 10不要拉满。5.2 PNG 的透明通道为什么它是切图主力PNG 被课件称为“被网络接受的最新图像文件格式”支持高级别无损耗压缩、Alpha 通道透明度和伽马校正同时提供 24 位和 48 位真彩色支持。相比 JPEGPNG 不丢细节边缘可以保持锐利还能保留半透明效果所以移动端界面里的图标、按钮、切图素材全部以 PNG 为主。Alpha 通道是这里的关键。它不只是“透明/不透明”的开关而是 256 级灰度透明信息所以 PNG 能表现柔和阴影、抗锯齿边缘、半透明蒙层。Photoshop 里导出 PNG 时我习惯勾选“交错”关闭文件能小一点网络加载更快。注意PNG 非常适合 UI 图形但不太适合照片因为无损压缩对连续色调的压缩效率远低于 JPEG同样的照片用 PNG 存储体积可能大 5 到 10 倍。5.3 GIF 与 LZW 压缩动画图标的兼容选择GIF 是基于 LZW 算法的无损压缩格式压缩率在 50% 左右历史很老几乎所有软件都支持。它的最大短板是只支持 256 色色彩丰富的界面元素用 GIF 存储会出现严重色偏和色斑。所以 GIF 用在移动端 UI 里主要只有两个场景小尺寸的简单动画图标、加载动效。做 GIF 动画时在 Photoshop 里要先把图层整理成逐帧动画导出时注意颜色抖动dithering设置。256 色限制下如果原图渐变过多导出后一定会有条纹这时候把“仿色”开到 100% 能小幅缓解。但根本解法是动效素材优先输出序列帧 PNG 或直接交给开发用代码实现LottieGIF 只做低保真预览。5.4 四个常见踩坑记录现象、原因与解决踩坑一圆角图标导出后出现白边。现象PNG 图标放到深色背景上边缘有一圈发白的虚边。原因Photoshop 里图标画在白色图层上直接导出没做去底处理边缘像素保留了白色信息。解决导出前删掉背景层或者用“图层样式-描边”做内阴影处理关闭“透明形状图层”选项后重新导出。踩坑二同样一个图标安卓和 iOS 显示模糊。现象一套切图两个平台通用细看发虚。原因安卓的 mdpi、hdpi、xhdpi 等多密度适配要求多种尺寸iOS 也分 1x/2x/3x一套尺寸不可能通吃。解决做切图前确认目标系统按倍数批量导出。Photoshop 里可以用“导出-导出为”面板一次生成多套尺寸不要手动缩放。踩坑三JPEG 压缩过狠banner 出现色块。现象背景图在 PS 里看正常导出后在手机上出现局部色块和噪声。原因压缩比率拉太高高频信息丢失过多深色渐变色带被切开。解决导出 JPEG 时质量级别不低于 8渐变背景优先用 PNG或者改用 WebP 格式。踩坑四切图命名混乱开发对接时状态对应不上。现象开发问“按下的按钮是哪一张”设计师翻半天图层。原因没有按控件-状态-倍率的规范命名。解决从设计阶段就统一命名例如btn_primary_pressed_2x.png每一层状态图都单独管理这套习惯能省掉大量沟通成本。6. Photoshop 落地练习从新建文档到切图验证的全流程6.1 新建移动端画布参数怎么定课件讲解了分辨率和尺寸的概念但没有直接给出新建文档的参数。常见做法是iOS 设计稿用 750×1334 像素、PPI 设 72安卓高清单张用 1080×1920 像素。这里有个容易混淆的点——PS 里的 PPI 参数只影响打印输出和文档内“实际大小”显示不影响移动端屏幕上最终效果所以不必纠结设为 72 还是 326。下面这串 ExtendScript 可以直接在 Photoshop 里跑一键生成 iOS 基准画布// 新建 750x1334 iOS 设计稿画布分辨率 72RGB 模式 var doc app.documents.add(750, 1334, 72, iOS_Design, NewDocumentMode.RGB, DocumentFill.WHITE); // 新建参考线左右各 24px 安全边距 doc.guides.add(Direction.VERTICAL, 24); doc.guides.add(Direction.VERTICAL, 750 - 24); // 顶部状态栏参考线高度 44px doc.guides.add(Direction.HORIZONTAL, 44);这段脚本创建了 750×1334 的文档并添加了安全区参考线。逻辑说明750 是 iPhone 6/7/8 系列的逻辑像素宽度1334 是高度两倍于 375×667 的逻辑尺寸。参考线的作用是约束内容不要贴边左右 24px 是移动端常见安全边距。参数可按需要改安卓项目把宽高换成 1080×1920全面屏项目把高度换成 1624 或更高。6.2 按双平台规范做自适配设计阶段就该查的清单一套设计稿交付前我习惯走一遍下面这个核对单全部通过才发给开发检查项iOS 要求安卓要求设计稿尺寸750×1334 或 750×16241080×1920 或 1440×2560切图倍率1x、2x、3xmdpi 到 xxxhdpi 五档导航栏高度44pt 以上56dp 到 64dp列表点击反馈高亮态、选中态、禁用态涟漪效果Ripple由代码实现图标格式PNG、PDF 矢量可选PNG、VectorDrawable 可选这个表格不是让你背数值而是用来提醒每个平台都有自己的控件尺寸和状态规范设计前先查官方视觉规范文档不要凭空想象。字体方面iOS 用 SF Pro 和苹方安卓用 Roboto 和思源黑体混用会导致字号和行距表现不一致。6.3 用课件里的知识做验收三个必须验证的参数交付前做一轮“参数回归”每次都从三个角度检查。第一分辨率适配把你的设计稿在 PS 里等比缩放到目标低端机分辨率肉眼观察图标和文字是否仍然清晰。第二格式验证把切图放大到 400%检查边缘是否锯齿透明区域是否有意外白边确认导出格式是 PNG。第三色彩检查把界面截图丢进 PS用吸管工具取主色和辅助色确认饱和度没有在压缩过程中偏移。配色方案做不出来的情况我也常遇到这时候会回到 HSV 模式下重新调整明度饱和而不是在 RGB 里数值试错。从那以后我每做一个移动端项目都会先花十分钟把目标平台的屏幕参数和格式规范列成一张表贴在 PS 画板旁边做完一个界面就核对一次。这套从课件里提炼出来的流程帮我挡掉了大量返工。希望帮到你。本文还有配套的精品资源点击获取