干货：屏幕分辨率那些事儿.pdf

干货 屏幕分辨率那些事儿 小编推荐 你是否遇到过显示分辨率的问题 是否搞不清楚那些DPI PPI 4K px HD 等各类 名词的区别 是不是每次还在纠结各类屏幕间的关系 作为一个时常被抓去做设计的壮丁 小编一听分辨率兼容就头疼 本文图文结合并且轻松愉快的讲解了有关分辨率 显示屏的专 有名词 妈妈再也不用担心我的界面不兼容了 yeah DPI和PPI DPI Dots Per Inch 最初用于衡量打印物上每英寸的点数密度 就是说你的打印机可以在一英寸 内打多少个点 DPI值越小图片越不精细 当DPI的概念用在计算机屏幕上时 就应称之为PPI Pixels Per Inch 同理 PPI就是计算机屏 幕上每英寸可以显示的像素点的数量 你说 DPI大伙也能理解 Windows系统默认PPI 为96 Mac OS系统默认PPI 为72 一般非视网膜屏幕的桌面电脑的 PPI在72 到120之间 使用 72到120 之间的PPI进行设计基本可以 保证你的作品尺寸在大多数情况下看起来都差不多 举个栗子 27 Mac的PPI是109 意思是每英寸有109个像素 显示器宽度 含边框 为25 7英寸 屏幕纯宽度 差不多23 5英寸 所以23 5 109 2560 由此可知屏幕的分辨率为2560 1440px 我知道23 5 109不等于2560 实际上应该是23 486238532 英寸 用像素 厘米能更精确点 我就 是举个栗子 你懂的 PPI在设计中的影响 假设你设计了一个109 109px的蓝色方块 并且这个方块的物理尺寸为1 1英寸 如果你的屏幕 是72PPI的 那这个方块看起来就要比实际的物理尺寸更大点 因为72PPI的屏幕要显示109px差不 多需要1 5英寸才行 屏幕分辨率 屏幕分辨率对用户感知你的设计影响老大了 幸好CRT显示基本已经被淘汰了 用户使用液晶显示 器时基本都使用显示器的原生分辨率 这样看起来更舒服嘛 分辨率就是屏幕上的像素数 例如2560 1440px的屏幕 屏幕横向有2560个像素 纵向有1440个 像素 结合PPI的含义 你应该明白分辨率不是物理尺寸的定义 你可以有一个像你们家一面墙那 么大的屏幕或者像你的脚趾盖那么大的一块屏幕 它们的分辨率都是可以是2560 1440px 现在的液晶显示器都是有原生固定分辨率的 译者 我一般称为点对点分辨率 这根CRT显示器 的原理不同 在这就不细掰扯了 咱的27 Mac显示器有2560 1440px的点对点分辨率 109PPI 如果把屏幕分辨率调低 你就会发 现屏幕上的窗口啊 icon啊啥的东西都变大了 因为23 5英寸上的像素变少了 其实像素还是那么多像素 PPI还是那个PPI 它们就在那里不多不少 我说像素变少了的意思是当 你把屏幕分辨率调低时 操作系统会通过拉伸来填充屏幕 这个时候CPU GPU会用点对点的像素 计算出来一套新的分辨率 如果你想把27 Mac的分辨率设为1280 720px GPU就会把4个像素当成1个像素用 2 2 这能 咋的 当然是变糊了 这还算好的呢 毕竟是可以整除的像素 如果你弄什么三分之一 四分之三 这种幺蛾子 换算出来就有小数 那就更糊 不信你看下面的图 例如下面这个例子 在点对点屏幕上拉一条1px的线 然后把屏幕分辨率降低一半 为填充 屏幕 CPU必须以150 的形式展示视觉效果 相当于所有元素都变为之前的1 5倍 但是又没有半 个像素 所以只能通过减低填充像素颜色的纯度达到目的 这就是为啥在你用retina屏的Macbook Pro时如果要更改分辨率 系统会提示你此分辨率下的视觉 效果 如下图 用户可以直观的感受到分辨率的变化 用像素代表物理尺寸是非常主观的表现 但他们觉得这不算忽悠 记住 如果你想在查看设计时尽可能保持像素完美 一定要将屏幕分辨率设置为显示器的点对点原 生分辨率 虽然你可能觉得使用低分辨率更舒服些 但在像素层面查看设计时必须要尽可能精确 悲剧的是 有的人为了看的更清楚会使用辅助功能 这会让你的作品看起来丑的要死 好在这时候 用户是为了看的更仔细而不是为了扣细节 4K是啥 最近你可能经常听到有人说4K 4K现在老时髦了 唠4K之前 咱们还是先说说HD 高清 是啥吧 注意 HD其实是个很宽泛的简称 咱们只说说常见的分辨率 HD没有固定标准 基本上宽度 为720px的都算是HD 有的分辨率也成为标准定义简称SD full HD 全高清 指的是1920 1080px分辨率的屏幕 大多数的电视和越来越多的高端手机都使 用full HD分辨率 例如 此处无品牌赞助商 4K标准的最小分辨率是3840 2160px 4K也叫做QHD或者UHD 超高清 简单的说 一块4K 屏幕可以摆下4个1080P的屏幕 4K的另一个常见分辨率是4096 2160px 一般用在投影仪或者专业相机上 如果我的电脑用了4K显示器会咋的 目前的操作系统都不支持4K 如果你在一个Chromebook或者macbook上用4K屏幕 它们会使用 最高DPI模式 这样会以2倍的比例显示元素 原文 it will use the highest DPI asset in this case the 200 or 2x ones and display them at normal ratio不知翻译的是否正确 虽然看起来不错 但是特别的小 请脑补 如果你把一个12寸的4K屏幕放在一个有12寸高分辨率屏幕的电脑上 所有元素看起来都 会比以前小2倍 4K就是4倍全高清 If current OS handles 4K but do not scale it Meaning no 4K specific assets yet 不知道如何翻 译更通顺 目前还没有4K分辨率的手机或平板电脑 显示器的刷新频率 此章节可能在理论上存在一些疑问 仅供参考和娱乐 咱们先从PPI和屏幕分辨率的话题跳出来说点别的 你可能注意过在屏幕分辨率设置附近还有个刷新 率的设置 它跟PPI没关系 它指的是屏幕每秒显示的图像的帧数 60Hz的刷新率就是每秒显 示60帧 120Hz就是每秒显示120帧 以此类推 在UI设计中 刷新率决定了你所做的动画看起来是否平滑且细致 注意 刷新率是由处理图形的设 备决定的 就算你把一个120Hz的显示器接在小霸王游戏机上 它也不可能达到120Hz 这还理解不了的话就看看下面的栗子吧 一个非常努力的霸王龙小明从A点跑到B点 在60Hz的屏 幕上可以显示9帧 在120Hz的屏幕上可以显示18帧 当然在120Hz的屏幕上霸王龙小明看起来跑 的更优雅更努力了 注意 有人说超过60Hz人眼是无法察觉出区别的 放屁 别听他不懂装懂 一定要尽情鄙视他 凸 凸 啥是视网膜屏幕 视网膜屏幕是在iPhone4发布时进入大众视野的 叫视网膜是因为屏幕的PPI高到人的肉眼完全无法 看到像素点 在iPhone4刚出来那时候这个说法是合理的 但随着屏幕做的越来越好 我们的眼神被炼的已经能 看到屏幕上的像素了 尤其界面上的圆形元素更容易看到 从技术上讲就是他们在物理尺寸与上一代相同的屏幕上塞了2倍的像素 哇塞 不缩小元素的大小 相同尺寸屏幕上的元素精度提高了2倍 原来1个像素的空间现在有4个 像素 像素数是原来的4倍 再举个栗子 图注 再其他的设备上很难表达出图上界面在iPhone 3GS和在iPhone 4上的区别 如果你想仔细 对比 可以下载我这个demo放在两个手机里对比查看 Retina 是苹果公司的专有名词 其他公司只能用 HI DPI 或者 超级劲爆极限像素显示屏 之类的词 或者完全不说这样的蠢话 只在你读设备说明的时候告诉你屏幕的尺寸和DPI 注意 Apple产品的DPI转换和分辨率的差异非常好理解 因为只有一种倍数 转换系数又是个啥 当你的设计要在不同PPI的屏幕上展示时 转换系数简直就是葵花宝典 当你掌握了葵花宝典后 完全可以忽略设备的具体参数 也别完全忽略 毕竟大家都不是原作者这样的东方不败 咱们还是再把iPhone 3GS和iPhone 4请出来举举栗子 物理尺寸一样的屏幕长宽各塞进去2倍数量 的像素 那这个转换系数就是2 就是说你的原件容纳了之前4倍数量的像素 所以你要把它的尺寸 的长宽都扩大2倍 这哥们车轱辘话真多啊 真的不是凑字骗稿费 假设你画了一个44 44px的iOS图标 然后给它赋予一个有生命力的名字 例如 赵四 为了让 赵四 在iPhone 4上看起来也很 赵四 你要再画一个2倍大的 如下图 是不是简单死了 现在 赵四 png 有两个版本的了 一个普通PPI下供3GS使用的 一个2倍大 给iPhone 4使用的 你可能会纳闷 肯定不止只有这一种转换比例 有啊 必须必的有啊 而且有多少比例就有多少 噩梦 好了啦 不吓你们了 我确定一定以及肯定你们宁愿花一天时间洗袜子洗裤衩也不愿意去换 算系数 幸好你们遇到了哥 有哥在就不用担心了 才怪 在谈跨DPI设计的规范前 要先说一下单位 讲一讲DP和PT的身世 注意 不知道转换系数还好意思说自己是射基湿 转换系数是混乱的屏幕尺寸和PPI世界的灯塔 当我们谈3P时在谈些什么 DP PT和SP DP和PT是用来定义应用在不同设备 不同DPI下的标准单位 DP 叫DiP也行 就是Device independent Pixel 设备独立像素 的缩写 PT就是point PT 是apple家的东西 DP是android家的东西 其实就是一个人有两个名字 总而言之言而总之 它能决定一个设备的转换系数 这在射基湿和程序猿讨 zheng 论 lun 设 计标准时大有帮助 我们再把之前做的按钮 赵四 请出来 44px的 赵四 用在3GS上 88px的 赵四 用在retina屏上 在3GS上我们给 赵四 做一个20px的内 边距 让它的地盘大一点 那么在retina屏上就要给出40px的内边距 在只做非retina屏幕设计时就 不用算计retina屏幕应该用多少像素了 所以我们先以非retina屏幕的按钮当成DP PT的标准参照 在上图中 赵四 的大小是44DP 内边距是20DP 在任何PPI的屏幕上 赵四 都是44DP Android和iOS都会通过转换系数让控件适应屏幕的尺寸 这就是为啥使用你屏幕默认的PPI做设计 会更好 如果不是我翻译的错误 完全没有感受到这两句话的因果关系 SP跟DP不一样 但用法基本一样 SP是用来专门定义文字大小的 SP受用户android设备字体设 置的影响 作为射基湿定义SP跟定义DP一样 把清晰易读的大小作为标准 例如16SP的字号易读 性就非常强 分辨率的花样越多 DP SP就越凸显出其价值 关于PPI的设置 之前已经介绍过了PPI retina和转换系数 现在必须要谈谈你们这些小调皮们经常会问的问题 如 果我改变了设计工具里的PPI 会发生什么 如果你以前就考虑过这个问题 那说明你对你的设计工具还挺熟悉的 我非了挺大劲才理解了这里 面一些非常重要的东西 所有非打印用像素的初始PPI配置 软件中的PPI配置是从印刷品时代继承而来 如果你只做Web设计 那PPI对你的设计基本没什么 影响 软件会把你的设计通过转换系数转换为合适的像素 这就是为什么我们使用转换系数而不是直接使 用PPI的具体数值 再举个栗子 你可以在Photoshop中画一个80px的方块 旁边放一行16PT大小的字 一张72PPI 一张144PPI 你看 144PPI的画布上字比72PPI上大了1倍 但方块的大小基本没变化 因为Photoshop中PT的 显示会根据PPI的值来决定 在2倍的PPI上就有2倍大的文本 那什么情况是以像素作为定义标准呢 看那个蓝色方块 它的大小就没变 一个像素就是一个像素 无论在什么PPI配置下 一个像素 还是一个像素 它只受屏幕点对点像素PPI的影响 以下内容很重要 在进行数字设计时 PPI只会作用在你思考你的设计时 你的工作过程中和在使 用PT这种单位时例如字体 如果你的设计源文件中包含了各种不同PPI的配置 项目中会包含各种 根据不同PPI转换出来的文件 这是个很大的麻烦 怎么搞 坚定的使用一种PPI作为设计标准 建议在72 120PPI为1x 我个人用