热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

ios开发图标尺寸,iOS图标尺寸

iOSAPP图标尺寸、启动页尺寸及iPhone手机尺寸640x960640x1136750x13341242x22081125 × 2436(iPhoneX)2688×1242  

iOS APP图标尺寸、启动页尺寸及iPhone手机尺寸

640 x 960

640 x 1136

750 x 1334

1242 x 2208

1125 × 2436 (iPhone X)

2688×1242    (iPhone XS Max)

1792×828      (iPhone XR)

40x40px

58x58px

60x60px

80x80px

87x87px

120x120px

180x180px

1024x1024px

iPhone6.5 英寸显示屏     1242 x 2688 像素(竖屏)

iPhone5.8 英寸显示屏     1125 x 2436 像素(竖屏)

iPhone5.5 英寸显示屏     1242 x 2208 像素(竖屏

iPad Pro 12.9 英寸显示屏  2048 x 2732 像素(竖屏)

iPad(第 8 代、第 7 代)10.5 英寸显示屏  1668 x 2224 像素(竖屏)

750 x 1334

- iPhone4

开发尺寸:320x480 pt,像素尺寸:640x960 px

- iPhone5

开发尺寸:320x568 pt,像素尺寸:640x1136 px

- iPhone6/7/8

开发尺寸:375x667 pt,像素尺寸:750x1334 px

- iPhone6/7/8Plus

开发尺寸:414x736 pt,像素尺寸:1242x2208 px

- iPhone X/iPhone XS

开发尺寸:375×812 pt,像素尺寸:1125×2436 px

- iPhone XS Max

开发尺寸:414x896 pt,像素尺寸:2688×1242 px

- iPhone XR

开发尺寸:414x896 pt,像素尺寸:1792×828 px

Android和IOS开发图标、启动页尺寸

最近项目在做android和ios的项目,设计师让我给出图标的尺寸,于是查了一下尺寸。

第一步:产品经理和UI设计师制定好UI规范,然后开始做图标做颜色做尺寸等一系列和APP界面强相关的工作,以最常见的“back”按钮为例,UI设计师从无到有的具体实现步骤:

①在coreldraw或者Sketch中制作好“矢量图标“—返回,此时的长宽单位是毫米;

②保存输出为“PNG位图图片”—返回,此时的长宽单位是px(像素);

③指定好此图标的内外边距,此时的边距单位是px(像素);

④最终此图标图片交到开发者手中,做好图片的放置和内外边距的实现。开发这在这个过程中会遇到一个问题:内外边距是由px为单位的距离,但是在实际开发中“dp”做为单位的更加常见,所以就会涉及到“px”“dp”互转的封装类,专门用来实现这个过程,同时还要注意不同分辨率屏幕的适配。

(1)px,平常我们所说的手机的分辨率是1920×1080,这就是像素数量,也就是1920px×1080px,代表手机高度上有1920个像素点,宽度上有1080个像素点,每个像素点的单位是px。

(2)dp,dp是为了开发者便于做不同屏幕的适配而引入的开发单位,具体来说就是为了使得开发者设置的长度能够根据不同屏幕(分辨率/尺寸也就是dpi)获得不同的像素(px)数量。比如:我将一个控件设置长度为1dp,那么在160dpi上该控件长度为1px,在240dpi的屏幕上该控件的长度为1 240/160=1.5个px。也就是dp会随着不同屏幕而改变控件长度的像素数量。

(3)DPI,用户实际判别手机屏幕的显示好坏,除了分辨率还要考虑屏幕的宽高(英寸),也就是用dpi,即每英寸多少像素来评价屏幕的显示效果。(不然假如手机分辨率是1920×1080,但是屏幕是几十寸的,那显示效果将不会很好,甚至你有可能看到小的像素块,那将更影响视觉效果。)

三、Android开发中图标尺寸总结(务必掌握):

(1)dpi、分辨率与图标尺寸的关系L DPI ( 120 DPI )—分辨率240 320px,其启动图标大小为 36 x 36 pxM DPI (160 DPI )—分辨率320 480px,其启动图标大小为 48 x 48 pxH DPI ( 240 DPI )—分辨率480 800px,其启动图标大小为 72 x 72 pxXH DPI ( 320 DPI )—分辨率1280 720px,其启动图标大小为 96 x 96 pxXXH DPI( 480 DPI )—分辨率1920 1080px,其启动图标大小为144 x 144 pxXXXH DPI( 640 DPI )—分辨率3840*2160px,其启动图标大小为192 x 192 px

(2)开发中“px”到“dp”从 px 换算成 dp 要知道它是以什么 dpi 标准来设计的,换句话说,就是要根据不用分辨率的屏幕,根据换算关系表得到相应的 dp 。 例如: 以 xxhdpi 标准设计的 UI,其中一个切图的分辨率是 600 px * 360 px ,根据换算关系表可知,在 xxhdpi 标准下,1 dp = 3 px ,则其对应的 dp 是 200 dp * 120 dp 。换算关系表如下:(两次标红 请重点关注)

36 x 36 48 x 48 64 x 64 72 x 72 96 x 96 144 x 144 192 x 192

具体的图标尺寸可以打开xcode ,在项目目录下找到Assets.xcassets文件,这个文件里面标识出了所需要的图标尺寸,下面标识的是基本尺寸,2x就是底部尺寸x2 ,即下面的尺寸为80pt和120pt

看了一下新的苹果开发文档和Xcode给的AppIcon坑,发现又新增了一些尺寸的图标。在这里整理一下最新的最全的icon尺寸。

itunes中使用的icon

1024 * 1024

iPhone: iOS7-10桌面图标

60 * 60

120 * 120 @2x

180 * 180 @3x

iPhone: iOS5-6桌面App图标

57 * 57

114 * 114 @2x

iPad: iOS7-10桌面图标

76 * 76

152 * 152 @2x

iPad: iOS5-6桌面图标

72 * 72

144 * 144 @2x

iPhone: iOS5-6的搜索 iOS5-10的设置

iPad: iOS5-10的设置

29 * 29

58 * 58 @2x

87 * 87 @3x

iPad: iOS5-6系统搜索图标

50 * 50

100 * 100 @2x

iPhone、iPad: iOS7-10系统搜索图标

40 * 40

80 * 80 @2x

120 * 120 @3x

iPhone、iPad: iOS7-10通知栏图标

20 * 20

40 * 40 @2x

80 * 80 @3x

iPad Pro: App桌面图标

167 * 167 @2x

iPhone汇总:

1024 * 1024

120 * 120

180 * 180

20 * 20

40 * 40

80 * 80

29 * 29

58 * 58

87 * 87

57 * 57 (iOS5-6)

114 * 114 (iOS5-6)

iPad汇总:

1024 * 1024

76 * 76

152 * 152

20 * 20

40 * 40

80 * 80

120 * 120

29 * 29

58 * 58

72 * 72 (iOS5-6)

144 * 144 (iOS5-6)

50 * 50 (iOS5-6)

100 * 100 (iOS5-6)

167 * 167 (iPad Pro)

APP启动页,即LaunchImages,需要五张不同尺寸大小的图,切记一定要选择png格式,否则打包时报错,导致APP适配失败。

五张图的大小即:320 480、640 960、640 1136、750 1334、1242 2208 828 1792 1125 2436 1242 2688

分别对应的iphone屏幕尺寸:iphone 3GS、iphone4(s)、iphone5(c、s)、iphone6(s)、iphone 6(s) plus 、iphoneX(S)、iphoneXR、iphoneXs Max.

具体步骤:

第一步:

1.点击工程目录中的Images.xcassets,点击左侧边栏的LaunchImages(如果没有,在空白处右击创建一个)

2.然后在xcode最右侧的边栏处选择你的APP是否要对ipad、横竖屏、以及低版本的iOS系统做支持。

第二步:

将填好的图片配置到工程中的启动页选项中

点击项目目录的工程 - target - General - App Icons And Launch Images

将Launch Images Source的选项设置为LaunchImages,切记当APP不是用LaunchScreen.xib来配置启动页时,LaunchScreen File的选择状态一定为空!否则编译无法通过

如果此时还没有显示的话,那么你先删除app,然后再运行一下项目看看

参考网站:

iOS 常用Appicon图标 尺寸大小总结

注意:以下尺寸归纳都是按照1PX的像素单位总结,方便在iOS APP设计中使用。

  在iOS app设计中,我们总是需要去规范地设计所需图片的大小,下面是本人在学习iOS app制作设计中所总结的一些常用尺寸,整理出来,仅供参考,不足之处,会在以后学习工作过程中补全。

总的来说,iOS设计中会使用到如下尺寸:

图标尺寸输出列表:

180x180     120x120     87x87     80x80     58x58     57x57     29x29

启动图片尺寸输出列表:

640x960    640x1136    750x1334    1242x2208(设计版)1080×1920(物理版)

桌面图标 (app icon)

 iPhone7/6 plus(@3x) : 180 x 180                       iPhone 7/6/5s/5/4s/4(@2x) : 120 x 120

搜索框图标 (Spotlight )

 iPhone7/6 plus(@3x) : 120 x 120                       iPhone7/6/5s/5/4s/4(@2x) : 80 x 80

设置图标 (Settings icon)

 iPhone7/6 plus(@3x) : 87 x 87                           iPhone7/6//5s/5/4s/4(@2x) : 58 x 58

启动图片 (launch image)

 iPhoen5s/5(@2x) : 640 x 1136                           iPhoen4s/4(@2x) : 640 x 960

如果是iPhone7/6 或者iPhone7/6 plus 还是建议使用 launch file 或 故事板文件storyboard 

如果使用图片,则尺寸数值为:

iPhone 7/6(@2x) : 750 x 1334                      iPhone 7/6 plus (@3x) : 1242x2208(设计版)1080×1920(物理版)

根据iOS系统可简单划分为以下几种

Spotlight

iOS 5,6

base: 29pt, @2x, @3x,get: 58 x 58, 87 x 87

iOS 7,8

base: 40pt, @2x, @3x,get:80 x 80, 120 x 120

Settings

iOS 5,6,7,8

base: 29pt, @1x,@2x,@3x,get:29 x 29, 58x58, 87x87

iPhone App

iOS 7,8

base: 60pt, @2x, @3x,get:120 x 120, 180 x 180

//

//Created by weil on 16/12/2.

//Copyright © 2016年 weil. All rights reserved.

//


推荐阅读
  • 本文探讨了如何通过一系列技术手段提升Spring Boot项目的并发处理能力,解决生产环境中因慢请求导致的系统性能下降问题。 ... [详细]
  • 2017年苹果全球开发者大会即将开幕,预计iOS将迎来重大更新,同时Siri智能音箱有望首次亮相,AI技术成为大会焦点。 ... [详细]
  • Python自动化处理:从Word文档提取内容并生成带水印的PDF
    本文介绍如何利用Python实现从特定网站下载Word文档,去除水印并添加自定义水印,最终将文档转换为PDF格式。该方法适用于批量处理和自动化需求。 ... [详细]
  • 苹果新专利或将引领无边框手机时代
    苹果公司最近公布了一项新的专利技术,该技术能够在设备屏幕中嵌入光线传感器,这标志着苹果在实现无边框手机设计上迈出了重要一步。这一创新将极大提升手机的屏占比,并可能为未来的iPhone带来革命性的变化。 ... [详细]
  • 网络运维工程师负责确保企业IT基础设施的稳定运行,保障业务连续性和数据安全。他们需要具备多种技能,包括搭建和维护网络环境、监控系统性能、处理突发事件等。本文将探讨网络运维工程师的职业前景及其平均薪酬水平。 ... [详细]
  • 并发编程:深入理解设计原理与优化
    本文探讨了并发编程中的关键设计原则,特别是Java内存模型(JMM)的happens-before规则及其对多线程编程的影响。文章详细介绍了DCL双重检查锁定模式的问题及解决方案,并总结了不同处理器和内存模型之间的关系,旨在为程序员提供更深入的理解和最佳实践。 ... [详细]
  • 本文旨在提供一套高效的面试方法,帮助企业在短时间内找到合适的产品经理。虽然观点较为直接,但其方法已被实践证明有效,尤其适用于初创公司和新项目的需求。 ... [详细]
  • Ulysses Mac v29:革新文本编辑与写作体验
    探索Ulysses Mac v29,这款先进的纯文本编辑器为Mac用户带来了全新的写作和编辑环境。它不仅具备简洁直观的界面,还融合了Markdown等标记语言的最佳特性,支持多种格式导出,并提供强大的组织和同步功能。 ... [详细]
  • thereissomethingstrangeinmycode.Imsuretoforgetsomethingbutidontknowwhat.Itryto ... [详细]
  • 本文将带您了解Cocos家族的不同版本和分支,特别是Cocos Creator的发展历程及其核心特性,帮助初学者快速入门。 ... [详细]
  • 随着iTunes界面的更新,用户发现通过该平台安装IPA文件变得不再可能。面对这一变化,除了苹果官方推荐的TestFlight外,还有哪些高效便捷的方法呢?本文将为您详细介绍几种替代方案。 ... [详细]
  • 智慧城市建设现状及未来趋势
    随着新基建政策的推进及‘十四五’规划的实施,我国正步入以5G、人工智能等先进技术引领的智慧经济新时代。规划强调加速数字化转型,促进数字政府建设,新基建政策亦倡导城市基础设施的全面数字化。本文探讨了智慧城市的发展背景、全球及国内进展、市场规模、架构设计,以及百度、阿里、腾讯、华为等领军企业在该领域的布局策略。 ... [详细]
  • 力扣93:复原IP地址问题解析(Golang实现)
    本文探讨了力扣平台上的第93号问题——复原IP地址。该问题要求从给定的纯数字字符串中,通过添加分隔符‘.’来构建所有可能的有效IP地址。有效IP地址由四个介于0至255之间的整数组成,不允许出现前导零。 ... [详细]
  • 本文介绍了两种在Android设备上获取MAC地址的有效方法,包括通过Wi-Fi连接和使用移动数据流量的情况。第一种方法依赖于Wi-Fi连接来获取MAC地址,而第二种方法则无需Wi-Fi,直接通过网络接口获取。 ... [详细]
  • Web App vs Native App:未来的移动应用趋势
    随着移动互联网的发展,Web App和Native App之间的竞争日益激烈。对于开发者而言,选择哪一种技术路径更为明智?本文将深入探讨两种应用模式的特点及未来趋势。 ... [详细]
author-avatar
苗淑香哈哈_405_408
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有