- 浏览: 13624888 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
注意: 最新的图标尺寸和文件名规格以Apple的文档为准:Technical Q&A QA1686: App Icons on iPad and iPhone 。其中要注意,iTunesArtWork这项不用 写入Info.plist的Icon files。这点Apple的文档加粗说明了。
图标的圆角和光晕效果
圆角效果。 图标的圆角效果是系统自动加上的,我们不能控制。这也是为什么我们看到的每个图标,其圆角效果是完全相同的。
光晕效果。 光晕效果也是系统加上的,和“圆角”不同的是,光晕效果是一个可选项。我们可以通过设置app的光晕参数(UIPrerenderedIcon),告诉系统是否要为我们的图标打上光晕效果。
总结:1)设计图标时请记得,图标的圆角效果是系统自动加上的,且是我们无法控制的。 2)设计图标前先决定,是否要使用系统内建的“光晕效果”。
每个图标都有相同的圆角。左边的两个图标有光晕效果,右边的两个没有。
启动画面
我们可以为app设置启动画面,以便在app启动的时候显示。苹果在其开发文档中,很明确地表示:启动画面的作用是给使用者一种错觉,一种app启 动很快速的错觉。即,启动画面的初衷不是为了给用户某种“视觉上的冲击”。所以,苹果建议开发者使用app的“空白”界面作为启动画面。苹果自己的app 就是这样做的。如果我们无视这种约定,而是使用和app界面完全无关的“插画”作为启动画面(很多app都是这样),那么一般情况下,会有“地摊货”的嫌 疑。虽然大多数的普通用户不清楚启动画面“应该”是什么样子:或许用户会喜欢有“视觉冲击力的”插画;或许用户会奇怪为何到了4月,启动画面却仍旧是春节 的主题;又或许用户什么感觉也没有。如果一定要使用插画,那么不妨先回答这样一个问题:考虑到苹果开发的app,其启动画面使用的都是朴素的“空白”界, 那么我们的app是否有足够充分的理由,来支持使用插画呢?
如果要让启动画面漂亮,我们可以先让app的界面漂亮;App的界面漂亮,那app的“空白”界面也就漂亮;App的“空白”界面漂亮,启动画面也就漂亮了。
系统自带的“时钟”app。第一张是启动画面:使用的是app的“空白”界面。第二张是app运行时的截图。
App的界面漂亮 = App的“空白”界面漂亮,启动画面也就自然漂亮。比如,Tweetbot的启动画面。
Retina
iPhone 4和iPod Touch 4有一个新的特性:在屏幕尺寸不变的前提下,分辨率提升一倍(320 x 480 => 640 x 960)。苹果将这个特性命名为Retina。
用苹果的话讲:
Retina显示屏的超高像素密度已超过人眼能分辨的范围。
Retina对图像设计(图标、启动画面和其它所有像素有关的东西)有什么影响呢?如果我们的app要支持Retina,就要提供高分辨率的(宽x2,高x2)的图片。同时,为了支持没有Retina的设备,仍旧要准备低分辨率的版本。换言之,我们要准备两套图。
针对不同分辨率的图片,苹果规定了一个命名规范:假如一个普通分辨率的图片,文件名是“abc.png”,那么与其对应的高分辨率的文件名就应该是“abc@2x.png”,多了“@2x”。
举一个例子:
这里需要注意的是,虽然在浏览器中,第二张图片的面积是第一张的4倍,但是在支持Retina的iPhone中,显示的大小是一样的。
格式和尺寸
图标和启动画面的格式:推荐使用PNG格式,可以是标准的24位颜色(红、绿和蓝各用8位),外加alpha通道的8位。不要在app图标上使用透明色。
图标的尺寸:苹果有一份完整的文档,列出了app所需的全部图标尺寸,和其各自的使用环境。
Technical Q&A QA1686: App Icons on iPad and iPhone
- App程序包必须包含以下标记为“必须”的图标。
- 图片尺寸的单位是px。
表格一:只支持iPhone的app图标要求。
512×512 | iTunesArtwork | Ad Hoc iTunes | 可选,但建议加入 | 文件应该是PNG格式,但文件名不要使用.png后缀。 |
57×57 | Icon.png | iPhone/iPod touch的App Store和主屏幕(Home screen) | 必须 | 无 |
114×114 | Icon@2x.png | 高分辨率的iPhone 4主屏幕 | 可选,但建议加入 | 无 |
72×72 | Icon-72.png | 主屏幕,为了兼容iPad | 可选,但建议加入 | 无 |
29×29 | Icon-Small.png | Spotlight和设置app | 可选,但建议加入 | 无 |
50×50 | Icon-Small-50.png | Spotlight,为了兼容iPad | 如果app有设置程序包,那么建议加入。否则可选,但建议加入。 | 无 |
58×58 | Icon-Small@2x.png | 高分辨率的iPhone 4的Spotlight和设置app | 如果app有设置程序包,那么建议加入。否则可选,但建议加入。 | 无 |
表格二:只支持iPad的app图标要求。
512×512 | iTunesArtwork | Ad Hoc iTunes | 可选,但建议加入 | 文件应该是PNG格式,但文件名不要使用.png后缀。 |
72×72 | Icon-72.png | iPad的App Store和主屏幕 | 必须 | 无 |
50×50 | Icon-Small-50.png | iPad的Spotlight | 可选,但建议加入。 | 无 |
29×29 | Icon-Small.png | iPad的设置app | 如果app有设置程序包,那么建议加入。否则可选,但建议加入。 | 无 |
表格三:Universal的app图标要求。
512×512 | iTunesArtwork | Ad Hoc iTunes | 可选,但建议加入 | 文件应该是PNG格式,但文件名不要使用.png后缀。 |
57×57 | Icon.png | iPhone/iPod touch的App Store和主屏幕(Home screen) | 必须 | 无 |
114×114 | Icon@2x.png | 高分辨率的iPhone 4主屏幕 | 可选,但建议加入 | 无 |
72×72 | Icon-72.png | iPad的App Store和主屏幕 | 必须 | 无 |
29×29 | Icon-Small.png | iPad和iPhone的设置app,iPhone的Spotlight | 如果app有设置程序包,那么建议加入。否则可选,但建议加入。 | 无 |
50×50 | Icon-Small-50.png | iPad的Spotlight | 可选,但建议加入。 | 无 |
58×58 | Icon-Small@2x.png | 高分辨率的iPhone 4的Spotlight和设置app | 如果app有设置程序包,那么建议加入。否则可选,但建议加入。 | 无 |
- 尺寸单位是px,宽x高。
- iPhone/iPod Touch的启动画面是全尺寸,iPad的则要去掉“状态栏”(Status bar)的高度(20px)。
- iPad的启动画面是分模式的:竖排(portrait)和横排模式(landscape)。
320 x 480 | 低分辨率iPhone/iPod Touch | 竖排和横排 |
640 x 960 | 高分辨率iPhone/iPod Touch | 竖排和横排 |
768 x 1004 | iPad | 竖排 |
1024 x 748 | iPad | 横排 |
来源:http://www.xiaweipin.com/archives/28
发表评论
-
手机firebug查看网页代码 How to View Website Source Codes on iPad / iPhone
2016-04-26 02:41 1117You’re using your iPad to br ... -
Android模拟器genymotion的安装和使用
2016-03-18 01:16 2469Genymotion概述 Genymotion是一套完整的 ... -
编码之道:取个好名字很重要
2015-10-14 05:19 1115代码就是程序员的孩子,给“孩子”取个好听的名字很重 ... -
Genymotion - 强大好用高性能的 Android 模拟器 (在电脑流畅运行APK安卓软件游戏的利器)
2015-06-05 13:34 7316随着 Android 系统的应用和游戏越来越丰富,甚至有 ... -
收集几个移动平台浏览器的User-Agent
2014-07-23 02:33 2969List of all Mobile Browsers ... -
常用浏览器修改User-Agent的方法
2014-06-28 02:58 10896之前有介绍收集的几个移动平台浏览器的User-Agent,以 ... -
更简洁的方式修改Chrome的User Agent,轻松体验移动版网络
2014-06-28 02:53 6863国庆节在家宅着,使用3g上网卡上网,和在公司上网不一样的是 ... -
3个检测浏览器User-Agent信息的网站
2014-06-28 02:52 2492刚刚在收集各个移动平台浏览器的User-Agent(参见这 ... -
根据移动设备屏幕像素密度,给予不同分辨率的图片
2014-06-26 00:52 2902在出现iphone4之前的相当长的时间内,网站开发人员 ... -
视网膜New iPad与普通分辨率iPad页面的兼容处理
2014-06-26 00:44 1267一、这是篇经验分享 ... -
iOS8开发-Swift编程
2014-06-25 00:45 1824课时列表 章节1:第一个Swift应用 ... -
Swift中文教程(二十三) 高级运算符
2014-06-25 00:43 779除了基本操作符中所讲的运算符,Swift还有许多复杂的高级 ... -
Swift中文教程(二十二) 泛型
2014-06-25 00:35 999泛型代码可以让你写出根据自我需求定义、适用于任何类型的,灵 ... -
Swift中文教程(二十一) 协议
2014-06-24 05:25 982Protocol(协议)用于统一方法和属性的名称,而不实现任 ... -
Swift中文教程(二十) 扩展
2014-06-24 00:47 681扩展就是向一个已有的类、结构体或枚举类型添加新功能(fun ... -
Swift中文教程(十九) 类型嵌套
2014-06-24 00:44 879枚举类型常被用于实现特定类或结构体的功能。也能够在有多种变量 ... -
Swift中文教程(十八) 类型检查
2014-06-24 00:41 721类型检查是一种检查类实例的方式,并且或者也是让实例作为它的 ... -
Swift中文教程(十七) 可选链
2014-06-17 05:11 861可选链(Optional Chaining)是一种可以请求 ... -
Swift中文教程(十六) 自动引用计数
2014-06-17 05:05 1240Swift使用自动引用计数(ARC)来管理应用程序的内存使 ... -
Swift中文教程(十五) 析构
2014-06-17 04:57 994在一个类的实例被释放之前,析构函数会被调用。用关键字dei ...
相关推荐
iOS App图标和启动画面尺寸 注意:iOS所有图标的圆角效果由系统生成,给到的图标本身不能是圆角的。 1. 桌面图标 (app icon) for iPhone6 plus(@3x) : 180 x 180 for iPhone 6/5s/5/4s/4(@2x) : 120 x ...
制定APP图标与启动图 只需要填写域名即可通过控制端控制APP 通过后台设置启动图 APP颜色 引导画面 顶部导航图标 菜单项目 底部菜单 页面列菜单 浮动按钮 关于信息 分享内容 通过控制端修改的内容,APP重启后就可以...
iOS应用开发框架,模板,含App第一次启动的引导页面,基视图控制器为App应用常用UITabBarController(分页栏),App图标,启动画面均有设置,采用ARC模式
第八部分:如何在iOS App中添加启动画面? 第九部分:从UITableView中删除一行和Model-View-Controller 第十部分:使用Storyboards创建导航控制器和表视图 第十一部分:Storyboard 联线教程-在视图控制器间传递数据 ...
:Quasar Framework图标精灵一个Quasar工具,用于生成所有Quasar App的图标和启动画面什么是Icon Genie 该节点模块从原始的1240x1240正方形图标输出一组SQUARE图标,web图标,pwa图标和电子图标,以及iOS,Windows...
这份文档总结了100个iOS开发/...考察面试者对iOS应用图标、启动画面、自动布局、动画、交互反馈、原型设计等设计元素的理解程度。 6. App Store相关 检验面试者对App发布流程、内购、签名证书、TestFlight、广告等
第八部分:如何在iOS App中添加启动画面? 第九部分:从UITableView中删除一行和Model-View-Controller 第十部分:使用Storyboards创建导航控制器和表视图 第十一部分:Storyboard 联线教程-在视图控制器间传递数据 ...
7、没有设置default页,启动画面为黑屏,有一定概率被拒绝。 8、一个应用在线,但你想在发一个豪华版之类的,再开一个应用也会被拒绝。 9、用了著名游戏的关键字,比如说“愤怒的小鸟”之类的。 10、iPhone版不支持...
功能生成不同移动平台(iOS / Android / Web App / Cordova / ...)的应用图标,一键生成,快捷导入App启动图(启动图片/启动画面)生成工具,支持iOS / Android技术栈Laravel 5.6 角度1 +材质设计Vue /类星体框架去...
功能生成不同移动平台(iOS / Android / Web App / Cordova / ...)的应用图标,一键生成,快捷导入App启动图(启动图片/启动画面)生成工具,支持iOS / Android技术栈Laravel 5.6 角度1 +材质设计Vue /类星体框架去...
•启动画面•图标•横幅•顶部栏,背景和按钮颜色•商店徽标•AppStore和PlayStore描述•PlayStore横幅•PlayStore促销视频 行动应用程式发布 完成移动应用程序的配置后,您可以在GooglePlay(Android)和AppStore...
Nuxt.js + Capacitor.js + Ionic.js模板 用于启动使用Nuxt.js和Capacitor.js跨平台框架开发的跨平台应用程序的模板代码。 产品特点 文档模块 ... 添加大小为(2732x2732)px的启动画面。 运行生成
Appstore便捷获取客户端软件 无线远程操作 客户端触摸板远程模拟鼠标操作PC 远程打开PC端PPT进行播放、上下翻页、退出操作 远程将文件快速传输到PC上,并打开演示 通过移动终端实物拍照,并快速上传到PC端展示 ...
用户应看到启动画面 用户在显示答案时应看到动画翻转 用户在转到下一个抽认卡时应看到幻灯片动画 用户转到上一个抽认卡时应看到幻灯片动画 选修的 初次显示时,用户应该看到一个带有圆角,阴影和动画的更好的...