• UID15
  • 登录2017-07-17
  • 粉丝48
  • 关注40
  • 发帖447
  • 主页
  • 金币1844枚
社区居民
喜欢达人
原创写手
janking 发布于2015-08-11 10:17
2/2052

ios分辨率

楼层直达
1 iOS设备的分辨率

iOS设备,目前最主要的有3种(Apple TV等不在此讨论),按分辨率分为两类

iPhone/iPod Touch

普屏分辨率    320像素 x 480像素
Retina分辨率 640像素 x 960像素

iPad,iPad2/New iPad

普屏        768像素 x 1024像素
Retina屏  1536像素 x 2048像素

2 iOS设计时用的点与分辨率的关系

尽管有上面列出的4种分辨率情况,不过细心的人会发现,对于Retina屏的分辨率始终保持为普屏的2倍,这对于iOS的设计还是开发的时候提供的
莫大的方便,自然可以想到对于界面设计而言,只需要设计一套,然后进行等比例放大缩小即可。实际进行设计与开发的时候,也确实是这样,Apple为了防止
在交流过程中(尤其对于编程实现)分辨率对思维的迷惑,统一使用点(Point)对界面元素的大小进行描述,例如:

iPhone/iPod Touch

界面描述    320点 x 480点

iPhone/iPad

界面描述    768点 x 1024点

换算关系

普屏       1点 = 1像素
Retina屏 1点 = 2像素
这样,不管我们是在为普屏还是Retina屏进行设计与开发,我们都可以清楚地,并且统一地使用点对界面元素的大小进行描述了。

3  iOS界面图片的命名

现在我们能够用统一的语言描述两种屏幕的界面元素的大小,但是我们如何针对不同屏幕设置不同分辨率的图片素材呢?难道说开发的时候我们要在每一个图
片加载的地方进行,添加判断当前设备是否是Retina屏的语句,然后加载对应的图片吗?当然可以这样做,但是iOS有一套更简便的方法进行自动加载,即
通过规范的文件名命名。例如下面这条加载图片的语句:
[UIImage imageNamed:@"pic.png"]]
在实际运行时,如果发现当前的设备是Retina屏,会自动寻找图片"pic@2x.png" ,自动加载针对Retina屏的图片素材,是不是很方便呢?
所以,我们在制作iOS设备时,可以仿照下面这样,对图片文件进行分类,对于640x960文件夹里的图片,文件命名添加"@2x"即可。

 

4  iOS应用常用图标的命名规范

可以参考下面两个文档:
Apple对此问题的Q&A
Apple的官方说明文档
请务必按照文档中描述的规范进行图标的命名!!
 
PS:一些额外的图标参考

•图标会自动添加高亮效果,如果不需要,可以在plist中明确指定UIPrerenderedIcon的键值去掉
•57像素的普屏的iPhone图标,图标圆角的半径为10像素
•114像素Retina屏的iPhone图标,图标圆角的半径为20像素
•512像素的用于iTunes/App Store的图标,在实际显示是会被缩放到175像素进行显示(但提交是不可以提交175像素)
•72像素的普屏iPad图标,图标圆角的半径为13像素
•144像素Retina屏iPad图标,图标圆角的半径为26像素
•50像素iPad的Spotlight搜索图标的最终视觉大小是48像素,原因是iOS会对图标的每个边去掉1个像素,添加阴影效果
•100像素Retina屏的Spotlight搜索图标的最终视觉大小是96像素,原因同上,这次是每边减2个像素

0人打赏
  • UID15
  • 登录2017-07-17
  • 粉丝48
  • 关注40
  • 发帖447
  • 主页
  • 金币1844枚
社区居民
喜欢达人
原创写手
janking 发布于2015-08-11 10:46
沙发F
  • UID7461
  • 登录2016-06-08
  • 粉丝1
  • 关注0
  • 发帖211
  • 主页
  • 金币191枚
社区居民
忠实会员
android_chao 发布于2016-03-07 14:30
板凳F
不错,
您需要登录后才可以回帖
发表回复
极贡献
技术问答
专题荟萃
程序人生
视觉设计
Android开发
iOS开发
编程语言
前端开发
后端开发
服务器架构
软件测试
运维方案
创业路上



最热文章墙

  • 72422/370   【精品推荐】200多种Android动画效果的强悍框架,太全了,不看这个,再有动画的问题,不理你了^@^

  • 41351/0   Python爬虫:常用浏览器的useragent

  • 41313/191   情人节福利,程序员表白的正确姿势:改几行代码就变成自己的表白了

  • 37809/259   【精品推荐】Android版产品级的音乐播放器源码,功能太强大了,最好的产品原型有木有?

  • 36409/145   省时省力的Android组件群来了,非常棒的原型参考

  • 28406/2   超全!整理常用的iOS第三方资源

  • 27850/71   原创表白APP,以程序员的姿势备战新年后的7夕,持续完善中!

  • 27705/142   2016抢红包软件及源码

  • 22053/30   麻省理工的一帮疯子,真的实现了随意操控万物!(绝对黑科技)

  • 21822/157   Android版类似UC浏览器:非常赞,产品级的源码

  • 21672/25   Android工程师面试题大全

  • 21505/27   2016程序员跳槽全攻略

  • 21341/9   GitHub上排名前50的iOS项目:总有一款你用得着

  • 20225/20   码魂:程序员的牛B漫画

  • 18426/10   2016年最全的Android面试考题+答案 精编版

  • 18175/3   吐槽那些程序员的搞笑牛逼注释

  • 17792/42   一个绚丽的loading动效分析与实现!

  • 17662/85   Android小而全的博客源码:非常适合全面掌握开发技巧

  • 17645/73   【持续更新中】Android福利贴(二):资料源码大放送

  • 17096/1   iOS 动画总结

  • 16570/45   惊艳的App引导页:背景图片切换加各个页面动画效果

  • 16281/23   个人收集的Android 各类功能源代码

  • 16075/81   仿京东商城客户端Android最新版,不错的原型和学习资料

  • 15936/10   女程序员的梦,众网友的神回复

  • 15810/5   新一代Android渠道打包工具:1000个渠道包只需要5秒

  • 15675/104   Android带弹幕的视频播放器源码,来自大名鼎鼎的Bilibili弹幕网站

  • 15624/11   年会上现场review代码是怎么样的体验!

  • 15493/21   Android福利第三波【Android电子书】

  • 15410/17   用JavaScript 来开发iOS和Android 原生应用:React Native开源框架中文版来啦

  • 15402/53   基于瀑布流的美女图片浏览App,有注释的源代码

  • 15231/23   珍藏多年的素材,灵感搜寻网站

  • 15016/79   【精品推荐】类似360安全卫士安Android源码:非常赞的产品原型

  • 14828/0   iOS中文版资源库,非常全

  • 14475/18   65条最常用正则表达式,你要的都在这里了

  • 14197/15   基于Android支付宝支付设计和开发方案

  • 13659/17   什么是真正的黑客:收获12200+Stars,人气远超微软开源VS

  • 13458/11   有木有这样一张酷图帮你集齐所有git命令超实用

  • 13003/7   一张图搞定iOS学习路线,非常全面

  • 12988/46   在线音乐播放器完整版(商用级的源码):非常赞,可听免费高品质专辑

  • 12922/7   用程序员的姿势抢过年的火车票

  • 12878/0   GitHub iOS 库和框架Top100 

  • 12625/10   成为Java顶尖程序员 ,看这11本书就够了

  • 12496/10   微信支付终于成功了(安卓,iOS),在此分享

  • 12437/18   一张图搞定Android学习路线,非常全面

  • 12270/61   【技巧一】搭配Android Studio,如何实现App远程真机debug?

  • 12115/3   基于Node.js的强大爬虫,能直接发布抓取的文章哦

  • 12049/29   【持续更新中】Android福利贴(一):资料源码

  • 11497/4   46 个非常有用的 PHP 代码片段

  • 11251/3   即时通信第三方库

  • 10872/8   流媒体视频直播方案

  • 10761/18   八个最优秀的Android Studio插件

  • 10722/9   B站建开源工作组:APP想支持炫酷弹幕的看过来

  • 10600/9   烧了5亿美金,这家神秘的公司即将颠覆人类未来!

  • 10448/2   【精品推荐】高质量PHP代码的50个实用技巧:非常值得收藏

  • 10390/10   中国黑客的隐秘江湖:攻守对立,顶尖高手月入千万美元

  • 9771/6   开箱即用!Android四款系统架构工具

  • 9579/10   十大技巧快速提升Android应用开发性能

  • 9519/3   10款GitHub上最火爆的国产开源项目——可以媲美西半球

  • 9447/3   一张图看清Linux 内核运行原理

  • 9338/1   Android性能优化视频,文档以及工具

  • 返回顶部