休闲娱乐生活服务其他类别
高PPI是误解：究竟什么才是Retina屏幕？苹果的RetinaDisplay（视网膜屏幕）从iPhone4发布会首次亮相以来，一直是苹果产品非常重要的特性之一，很多人也是首选带有Retina屏幕的苹果产品。从乔布斯提出Retina概念以来，究竟什么样的屏幕才能称得上是Retina屏幕，一直饱受争议。网上也有很多关于Retina屏幕的解释，但其中有不少错误的认识。笔者从苹果发布会及官网上搜集了一些资料，希望能够客观的为大家解释一下Retina屏幕。RetinaDisplay视网膜屏幕首先我们先说明三个事实。第一，高PPI不等于Retina屏幕，iPhone4的PPI为326，而TheNewiPad的PPI仅为264，但其屏幕仍然是Retina屏幕，其中的原因我们会在后面讲；第二，Retina屏幕不同于AMOLED、LCD、LED这些面板名词，它只是一个营销概念，不是技术名词；第三，苹果不生产屏幕，屏幕供应商能为苹果提供“Retina”屏幕，那其他厂商也能拿到。那Retina屏幕到底是什么，我们在解释之前不如先看看苹果官方给出的答案：“Retinadisplayshaveapixeldensitythat'ssohigh,youreyescan'tdiscernindividualpixelsatanormalviewingdistance.Thisgivescontentincredibledetailanddramaticallyimprovesyourviewingexperience.”软件翻译：“视网膜显示器具有如此高的像素密度，您的眼睛不能在正常观看距离辨别各个像素。这给内容令人难以置信的细节，并大大提高您的观看体验。”▲TheNewiPad的PPI仅为264这句话我们应该注意两点，1.看不到像素点；2.正常观看距离。也就是说，在一定视距下分辨不出像素点就是苹果定义的Retina屏幕。而当你使用不同苹果设备的时候，视距是不一样的，比如使用iPad时的视距要比iPhone要远，所以即使TheNewiPad的PPI仅为264，但依然是Retina屏幕。这里面视距非常重要。那不同设备的视距是如何定义的，苹果只是给出了一个经验值，iPhone4给出的视距是10英寸（25.4厘米），而iPad给出的视距是15英寸（38.1厘米）。综合视距和PPI来看，目前大家使用的大部分智能手机和电脑都可以称之为搭配了Retina屏幕。那为什么很多厂商不以此宣传，而且即使一些电脑搭载了4K屏幕，显示效果仍然没有MacBook好呢？这里面涉及到专利和系统的问题。“Retina”这个概念由于是苹果第一次提出的，其他厂商如果想通过这个词来宣传的话，其中的风险还是挺高的，因为苹果手里面有着大量与“Retina”有关的专利，其他厂商一旦使用，可能不小心就吃上官司了。当然也有厂商敢于尝试，但不是用在屏幕上，比如魅族的“RetinaSound”。▲Windows的DPI缩放机制当然这并不代表其他厂商产品的屏幕素质就不如苹果，只不过他们并没有着重去宣传，或者用其他名词宣传。而大家经常抱怨的Windows电脑显示不佳的很大一部分原因是Windows的DPI缩放机制。由于Windows所要适配的硬件众多，使得微软无法针对性的对某一硬件进行优化，屏幕也是如此。在高分辨率下，由于屏幕尺寸和分辨率种类太多，Windows直接选择将屏幕内容整体放大。这样做的好处是不用考虑硬件本身，能够适应绝大多数的内容，坏处就是很多win32应用适配不好，会出现内容发虚的情况。苹果优秀的显示效果是软硬件结合的结果苹果是这样处理的：选择在长宽比例不变的情况下，直接将分辨率扩大4倍，将以往1个像素的位置用4个像素渲染，同时将这种体系推广给开发者，由于开发者只需要将之前应用中的图片放大4倍即可，所以后期应用适配也非常快。优秀的软件解决方案加上优秀的硬件打造出了苹果系统优秀的体验。总结：苹果的Retina屏幕并非高高在上的屏幕技术，只不过是苹果在营销方面的胜利而已。当然，苹果产品本身的屏幕素质非常不错，但市面上仍有与其不相上下的产品。所以没有必要夸大苹果Retina屏幕的实力，更不要被别人毫无根据的意见所影响。
热门新闻更多
相关新闻热门视频
阅读下一篇视频推荐教育培训领先品牌
平面UI资讯>UI设计师培训―基础知识学起来！为设计师量身打造的DPI指南(一)
UI设计师培训―基础知识学起来！为设计师量身打造的DPI指南(一)
发布日期： 10:21:57 214
()本文是为&初学者&或者作为从一开始就想要学习更多跨DPI和跨平台设计知识的中级设计师准备的序言读物。 没有复杂的计算和不可分析的图表，只是按照划分直截了当地将内容呈献给读者，便于读者理解以及直接运用到设计过程中，非常实用且专业的知识，记得收藏唷。什么是DPI、PPI？DPI（Dots Per Inch）是()测量空间点密度的单位，最初应用于打印技术中，它表示每英寸能打印上的墨滴数量。较小的DPI会产生不清晰的图片。后来DPI的概念也被应用到了计算机屏幕上，计算机屏幕一般采用PPI（Pixels Per Inch）来表示一英寸屏幕上显示的像素点的数量，现在DPI也被引入。安装Windows操作系统的电脑屏幕PPI的初始值是96，Mac的初始值是72，虽然这个值从80年代起就不是很准确了。 一般来说，非retina桌面（包括Mac）的PPI的取值区间在72-120之间，因为这个取值区间能够确保你的作品在任何地方都能保持大致相同的比例。这里有一个应用实例： 27寸Mac影院显示屏的PPI是109，这表示()在每英寸的屏幕上显示了109个像素点。斜角长是25.7英寸（65cm），实际屏幕的宽度大概是23.5英寸，23.5109约等于2560，因此原始屏幕分辨率就是px。我知道23.5109不是恰好等于2560.实际上是23. 英寸。要是用每厘米的像素点计算，会更加准确，但是这里你知道就行。影响在屏幕上设计一个前面我们讨论过的109*109px的蓝色正方形。这个正方形在1*1英寸的()屏幕上有一个初始的物理尺寸，但是如果用户的PPI是72，蓝色正方形就会显得更大。因为PPI是72时，屏幕需要大约1英寸半的尺寸来展示109px的蓝色正方形。模拟效果如下图所示：附加： 不考虑颜色和分辨率差异，因为每个人看到的设计都是不同的。你应该力求达到平衡，满足大多数的用户的需求就可以了。不要期待用户拥有和你一样好的屏幕。屏幕分辨率（原始分辨率）()屏幕分辨率对用户如何理解设计有很大的影响。幸运的是，自从LCD显示器代替了CRT，现在的用户更趋向于使用原始分辨率，它保证了好的屏幕尺寸或者说PPI比例。分辨率定义了屏幕上显示的像素数量（比如：27寸的显示器分辨率是px，2560是宽，1440是高）。在了解了PPI之后，我们就知道它不是一个测量物理大小的单位。你可以有一个屏幕，它能跟墙一般大，也可以跟脑袋一般小。如今的LCD显示器有分辨率初始值或者原始分辨率来确定屏幕上展示像素点的数量。它和过去的CRT显示器稍有不同，这里就不赘述了。一个27寸的影院显示屏，()原始分辨率为px，PPI为109。如果减小分辨率，元素将会显示得更大，因为有23.5英寸的水平宽度需要数量远远不够的像素点来填满。如例子所示，()屏幕的原始分辨率是px。如果分辨率减小，像素点还是被展示在PPI为109的屏幕上。你的操作系统会自动拉伸所有元素来填补间隙，使得整个屏幕被填满。GPU/CPU会捕获所有像素点并且使用新的比例重新计算他们。如果想要设置27寸屏幕分辨率为（之前宽的一半，高的一半），GPU会让一个像素点变成原来的2倍大来填充屏幕，那么结果就是会变得模糊。在分辨率为原来一半的时候，因为有简单分频器的存在可能看着还算可以。但是如果使用原来的1/3或者3/4，最终会以小数点结束，就不能等分一个像素点了。我们来看下面的例子：&()思考后面的例子：在原始分辨率的屏幕上画一条1px的线，然后设置分辨率为50%。为了填满屏幕，CPU需要制造150%的视觉效果，所有像素点都要乘以1.5，1*1.5=1.5，但是因为不能有半个像素点，这就使得填充周围的像素点的颜色只有一部分，便产生了模糊。这就是为什么当你想要改变一台Retina Macbook Pro的分辨率的时候，系统会展示下面的窗口来让你知道（下面的屏幕截图）这个分辨率会&看着像&px，它采用用户的分辨率经验来表达尺寸比例。这些()描述带有浓重的主观色彩，因为它用像素分辨率作为衡量物理尺寸的单位，虽然不够严谨，但至少他们觉得是对的。附加：如果你希望你的设计精确到像素，那么最好不要改变原始分辨率。你也许觉得使用小的比例会更舒服，但是当涉及到像素点时，这样会影响精确性。有些时候，用户会把调整分辨率当作在控制屏幕（特别是桌面）美观程度的方式，这样虽然会让设计看起来不太好，但是可以满足用户对易读性的需求。什么是4K你也许听到过很多次4K，它在最近非常流行。在了解()它是什么之前，我们需要先弄明白&HD&的含义。需要事先声明的是，本文是简化版本，所以这里只考虑最常见的分辨率。HD有不同的类别。它适用于从px或720p开始的720水平的任何分辨率。一些地方也将这个分辨率SD叫做标清。全高清适用于px的屏幕。大多数的()TV以及越来越多的高端手机（Galaxy SIV，HTC one，Sony Xperia Z，Nexus5）都是这个分辨率。4K始于像素，它也叫做Quad HD，被称为UHD超高清。简而言之，你可以放4个1080p的像素点在4K的屏幕上。另外一个4K的分辨率是，这个稍微大一点，一般用在投影仪和大画幅相机上。如果我外接一个4k的显示器到电脑会发生什么呢？最新的OS不再参照4K的比例，这意味着()给Chromebook或者macbook外接一个4K显示器，将会使用最高的DPI。假如这样，200%或者@2x，按照正常比例展示就会看起来很好但是有点小。假设的例子：如果你外接一个12寸4k屏幕到12寸高清屏幕（2x）的电脑，所有东西都会显得小了两倍。附加:4k就是四倍全高清。如果现在的OS掌握了4k但是又不按照比例来，这说明现在还没有特定的4k资源。如今没有手机或者平板电脑使用4k.显示器赫兹稍微从PPI和()屏幕分辨率中休息一下，来看个小知识。你可能注意到在屏幕设置中靠近分辨率的地方有显示器的Hz值，它和PPI没什么关系，显示器赫兹或者刷新频率是显示器每秒展示固定图像或者帧的速度单位，比如一个60 Hz的显示器每秒可以显示60帧，同样，一个120 Hz的显示器每秒可以显示120帧。在UI环境中，显示器赫兹（Hz）决定了动画的流畅和精细程度，大多数的屏幕都是60Hz。而每秒显示的帧数依赖于设备处理图像的能力，像在Atari 2600使用120Hz屏幕就没有太大的用处。下面这个例子，可以帮助大家更好地理解()。T-rex同时在60Hz和120Hz的屏幕上以完全相等的步伐快速从A点到B点，60fps的屏幕上展示了9帧动画，而在相同时间内120fps的屏幕展示了2倍帧数，并且动画在120Hz屏幕上会显得更加流畅。附加: 也许有人会说，每秒显示60帧以上人眼是无法识别的，这是错误的。什么是视网膜显示屏&Retina（视网膜）显示屏&是Apple公司在发布iPhone 4时引入的。之所以叫做Retina是因为设备的PPI非常高以至于人的视网膜也不能在屏幕上分辨出像素点来。这个说法在现在的设备的屏幕范围内是正确的，但是随着屏幕越来越好，我们的眼睛也会被训练得足够感知像素点，特别是圆形的UI元素。从()技术的角度来讲，他们做的就是在完全相同的物理大小上展示比原来高和宽多一倍的像素点。iPhone 3G/S是3.5英寸的斜角，分辨率为480320px，PPI为163。 iPhone 4/S是3.5英寸的斜角，分辨率为960640px，PPI为326。事实证明正好是两倍的关系，同样的物理大小，屏幕上的元素却有两倍的清晰度，因为他们有两倍的像素点。1个标准的像素＝4个Retina像素，像素的四倍。()思考下面的例子，在复杂设计中如何直接应用：图注：在第三方设备上很难模拟出来自不同设备的()不同图片质量，如上图所示，Retina的音乐播放器虽然与iPhone 4的音乐播放器有相同的物理空间，但图片质量看上去比iPhone 4好了两倍并且更清晰。如果大家想在本地进行验证，我会提供免费的演示事例源码，供大家下载（）。因为&Retina&显示屏的命名归Apple公司所有，所以其他公司使用&HI-DPI&或者&超大像素sp33d显示器&（我将注册这个）或者其他的来表示。附加: 使用Apple的产品是熟悉DPI换算，理解分辨率、PPI、物理尺寸比例之间差异的极佳方式，因为你只需要考虑一个像素比。什么是像素比当你的()设计需要在不同PPI下转换时，像素比就是你的救星。当你知道像素比后，就不需要再考虑设备的详细规格了。以iPhone 3G和4为例，相同物理大小上iPhone4的像素点是3G两倍，因此像素比就是2，这表示只需要用你的资源乘以2，就可以兼容4G的分辨率了。让我们先创建一个44*44px的iOS上被推荐的touch按钮（我后面会介绍），定义为典型按钮&Jim&。 为了让Jim在iPhone 4上看起来更好，需要创建一个它两倍大小的版本。下面就是我们做的。很简单。现在的Jim，一个是标准PPI（iPhone 3）的Jim.png版本，一个是200%PPI（iPhone 4）的Jim@2x.png版本。现在你也许会问，&等等啊！我很确定还有其他的像素比，不止这两个。&有，这是一个噩梦。好吧，也许不是噩梦，但是我很肯定你宁愿花一天时间熨袜子也不想处理无数的像素比。幸好这也没有你想象的那么严重，我们后面再说。让我们先说说单位，因为现在比起像素，你更需要单位来规范()多DPI设计。这就是DP和PT起作用的地方。附加: 对于每一个你正在做的设计，像素比都是需要知道的。像素比把屏幕大小和PPI结合起来，让人们更理解它们。什么是DP、PT、SPDP或PT是测量单位，你可以用来规范你的各种设备和多DPI的app模型。 DP(Dip)表示独立于设备的像素点，PT表示点。DP用在Android上，PT用在Apple上，但是他们本质上是相同的。简而言之，它能定义独立于设备的()像素比的大小，这会包含在不同角色（如设计师和工程师）之间的讨论规则中。继续说前面&Jim&按钮的例子。 Jim在标准的非Retina屏幕上宽度为44px，在Retina屏幕上是88px。从技术上给Jim添加20px的padding，在Retina上padding是40px。但是，当你基于非Retina屏幕设计时计算Retina的像素值并没什么意义。因此我们需要做的就是以标准的100%非Retina比例作为一切设计的基础。在这种情况下，Jim的大小就是4444DP（PT），padding为20DP（PT）。你可以在任何PPI上执行你的规范，Jim仍然是4444dp/pt.Android和iOS会调整()自身大小适应屏幕并且使用正确的像素比来进行换算，这就是为什么我发现使用屏幕的原始的PPI设计会更简单。SP和DP、PT从用途上来讲是不同的，但是工作方式相同。SP表示与比例无关的像素，通常用来定义字体大小，SP受用户Android设备字体设置的影响。作为一个设计师，为任何事物定义SP就像定义DP，最好基于清晰的1x的比例（以16sp为例，它是非常便于阅读的字体大小）。附加: 始终使用分辨率或者非比例的值作为规范。屏幕尺寸、分辨率种类越多，它就越重要。本文来源：优设网/designers-guide-to-dpi。整理：UI设计师培训老师。如有侵权，请联系小编更正。(版权声明：推送文章我们都会注明作者和来源，除非确实无法确认。部分文章推送时未能与原作者取得联系，若涉及版权问题，烦请原作者联系我们。)
相关文章：手机号/邮箱:?
使用第三方登录：?
还可以输入 300 字符
请输入举报理由
选择收藏分类：
默认收藏夹
添加收藏分类：
原创/自译教程：为什么6plus会有两个尺寸(原创文章)
系统分类：
个人归类：
文章版权：
原创，如需商业用途或转载请与
联系，谢谢配合！
宁波 / 设计爱好者277天前发布
iOS的设计规范网上有很多资料，一粒君每次有疑惑的时候就会网上百度一下，不过过一段时间就会忘记。我想还是没有理解，而且网上的资源人云亦云各有各的说法。最近这两天也搜集了一些资料研究了一下，应该是这个道理，那今天一粒君就把自己所得写下来
& & & iOS的设计规范网上有很多资料，一粒君每次有疑惑的时候就会网上百度一下，不过过一段时间就会忘记。
我想还是没有理解，而且网上的资源人云亦云各有各的说法。最近这两天也搜集了一些资料研究了一下，应该是
这个道理，那今天一粒君就把自己所得写下来，若有问题希望大家可以指正。
首先先读明白这个表格吧，iPhone、iPod Touch一二三代他们不是视网膜屏，他们的ppi是163.
（那视网膜屏Retina的定义是什么？
& & & 以上史蒂夫·乔布斯（Steve Jobs）在iPhone 4发布会上介绍视网膜技术时的场景，乔布斯是这样阐述
的：“当你所拿的东西距离你10-12英寸（约25-30厘米）时，它的分辨率只要达到300ppi这个‘神奇数
字’（每英寸300个像素点）以上，你的视网膜就无法分辨出像素点了。”这也就是苹果对“视网膜屏幕”的最
初定义，也就是说Retina屏幕是一种具备超高像素密度的液晶屏，它可以将960×640的分辨率压缩到一个3.5英
寸的显示屏内。也就是说，该屏幕的像素密度达到326像素/英寸（ppi）。
那ppi是什么？&
& & & &ppi(Pixels Per Inch) 叫像素密度，所表示的是每英寸所拥有的像素数量。ppi数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高。
那ppi是怎么计算得到的？
& & &用ppi指数衡量屏幕清晰度比但看分辨率更为准确，计算方法非常简单，公式表达为 PPI=√（X^2+Y^2）/ Z&
（X：长度像素数；Y：宽度像素数；Z：屏幕大小）就是用手机分辨率的长的平方加上宽的平方和再开方，再除
以手机屏幕尺寸，即为ppi参数。（举例：苹果手机分辨率为960X640，ppi=√（960^2+640^2）/ 3.5 计算约
为330与官方的326差别不大）。
& & & &这样iPhone4、iPhone5～5s 5c及iPhone6都能看懂了。然后6p出现了三个数据，这也是一粒君有时候经
常搞不理解的地方。其实这里只有两个数据、.
& & & 最开始拿着6p，5.5寸 屏幕大小事,可是截图发现他怎么是px。那我要拿哪个尺寸设
计，肿么办！！！
& & & 1.为什么面板不是，非要px而降低采样分辨率(ppi),如果这样的话我们6p的ppi就是
462，那多清晰啊。
& & & 2.那为什么原始分辨率不是
我了解的应该是这样的原因：
& & & 苹果决定在它迄今为止最大的iPone上采用1242px×2208px的分辨率。这样一个屏幕尺寸足够展现比iPhone&5S&和&iphone6&都丰富的界面内容。然而实际上，它仅仅体现在软件方面。硬件方面，苹果只能使用低分辨率1080p的面板来显示成像。
是不是还有很多问题比如说：
& & & &1，为什么来一个这么尴尬的数字；2，为什么ppi是401。有木有！我个人觉得这两个问题都是归属一个问题，只是先后的问题。我们知道苹果只能使用1080p的面板，我们可以计算出401的ppi，那为啥是（好绕啊 哈哈哈）
其实是出于设计的考虑 &&
& & 之前的设计都是326，用@2x的素材。但是6+的实际ppi是401...理论上苹果应该用401/326 * @2x=@2.46x的
素材。但是这个奇葩的比例对开发者而言很难切图。所以苹果为方便开发者用的是@3x的素材，然后再缩放到
@2.46x上，实际上是缩放到2.46/3=83%。实际上苹果选取了一个接近比例的87%。这样算下来，物理分辨率和
虚拟分比率的比例是87%，也就是=/0.87=1242.好处就是开发者更方便，比如准备素材
时，字号可以直接调成3x的。对了对了。。。那6p的的尺寸是为了方便我们ui设计人员的一个虚拟尺
寸，并没有什么实际意义。
所以来一个设计流程吧（虽然我自己有时也不太规范，我想这次总结以后就不会有什么问题吧哈哈哈）
我设计稿出的是750x1334px(设计图都是矢量的)，在该尺寸上注释。再放大1.5倍px进行切图。
最后我采集知乎上的一个回答：
为什么选择iPhone 6作为基准尺寸？
& & & &当面对大中小三种屏幕需要适配的时候，很容易想到先做好一种屏幕，再去适配剩下两种屏幕。第一个决定
是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone 6（750px/375pt）作为基准，基
于几个原因：
& & & 1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差
不会太大。假设以414pt为基准做出很优雅的设计，到320pt可能元素之间比例就不是那么回事了，比如图片和
文字之间视觉比例可能失调。
& & & 2、iPhone 6 plus有两种显示模式，标准模式分辨率为，放大模式分辨率为（即
iPhone 6的1.5倍）。可见官方系统里iPhone 6和iPhone 6 plus分辨率之间就存在1.5倍的倍率关系。很多情况
下这两种尺寸可以用1.5倍直接等比适配。
& & & 3、这个奇葩的数值是苹果官方都不愿意公开宣传的一个分辨率，不便于记忆和计算栅格。
640×1136虽然是广泛应用的一个分辨率，但是大屏时代依然以小尺寸为设计基准显然不合时宜，设计师会停留
在小屏的视角做设计。
所以，iPhone6的750×1334是最适合基准尺寸。
宁波 / 设计爱好者277天前发布
同时推荐此文章
还可以输入2000 个字符
所有，如需商业用途或转载请与
联系，谢谢配合！iPhone 4 是 326 PPI，视网膜RetinaDisplay。小艾告诉你为什么New iPad才 264 PPI也是视网膜屏。
首先介绍PPI定义：PPI&= Pixels per inch，每英寸所拥有的像素。视网膜屏Retina Display定义：超越人眼所识别像素颗粒的屏。&iPhone 4 分辨率960*640 &3.5英寸 &PPI换算为326&New iPad（叫iPad3算了）分辨率&2048 * 英寸 &PPI换算为264记得学习Lens的时候，人眼最大分辨能力是530&PPI。而苹果介绍Retina Display是坑爹的？并不是，因为你绝对不会眼睛贴在手机屏上看，你超近看iPhone4 的屏幕也当然看得到颗粒。根...
分享这篇日志的人也喜欢
热门日志推荐
人人最热标签
分享这篇日志的人常去
北京千橡网景科技发展有限公司：
文网文[号··京公网安备号·甲测资字
文化部监督电子邮箱：wlwh@··
文明办网文明上网举报电话： 举报邮箱：&&&&&&&&&&&&
请输入手机号，完成注册
请输入验证码
密码必须由6-20个字符组成
下载人人客户端
品评校花校草，体验校园广场