iOS UI切图@1x、@2x、@3x的实际尺寸

最新推荐文章于 2025-11-01 09:27:51 发布
原创 最新推荐文章于 2025-11-01 09:27:51 发布 · 3.2w 阅读 · 8 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#iOS开发 切图
本文详细介绍了在iOS设备开发中如何通过切制@2x和@3x图片来适应不同分辨率的设备，以确保应用在iPhone4到iPhone6Plus等不同设备上都能呈现最佳视觉效果。通过举例说明，读者可以掌握如何根据设备需求调整图片尺寸，实现资源优化。

    1x，2x就是用于非Retain屏幕和Retain屏幕，3x现在用于iPhone6 Plus，在iPhone实际开发中，只有iPhone4 是非Retain屏幕，市场占有率很低，因此在切图时，只切@2x和@3x图片即可。以iphone 6做UI为例，如果图片大小为200*200px，例如图片命名为test_a@2x.png，那么还应切一张命名为test_a@3x.png的300*300px的图片来适配iPhone 6Plus。这样程序在运行时就能根据不同设备自动调用不同图片，从而达到最佳效果。

附一张原理图：


前端中的@2x，@3x 图片
weixin_42028153的博客
08-10 3328
虽然高分辨率屏幕在移动设备上更为普遍，但在其他设备上也存在高分辨率显示需求，例如Android手机、平板电脑、电视等。一倍图适用于低分辨率屏幕，二倍图适用于中等分辨率屏幕，而三倍图适用于高分辨率屏幕。在美工提供给我们的切图中经常会看到一个图片有很多个尺寸，之前都是在网站中默认使用的1倍图，也就是默认尺寸的图片，其他的2倍图3倍图压根就没用过，今天又看到相关知识，深入探索了一把。一般普通图在的1920*1080，是很正常的，但是如果放在的2k或者4K屏幕里面，背景图就是模糊掉，为什么呢？
iOS开发：图片加载@2x与@3x
gongwutianya的博客
08-07 1万+
一、图片格式@2x与@3x 应对非视网膜和视网膜屏，APP有时会提供不同大小的图片，1倍图和2倍图和3倍图，它们的像素与1倍数图相比相差2倍或者3倍。 命名规则：2倍图在1倍图的名字后加 @2x 普通：sample.png  2倍：sample@2x.png 3倍：sample@3x.png  系统用“sample”寻找图片的时候，会自动根据设备屏幕取对应的图片
iOS中图片@1x @2x @3x的意思
jyo2206208的专栏
07-03 8074
在xcode的images.xcassets中丢入图片后，这些图片会被默认划分为三种尺寸。 假设图片名为bdlogo.png 则这张图片会被自动填充到1x的位置 假设图片名为bdlogo@2x.png 则这张图片会被自动填充到2x的位置 假设图片名为bdlogo@3x.png 则这张图片会被自动填充到2x的位置 下面是这三种标示符的说明。 @1x 为非retin
iOS @2x 与@3x 图的详解
say__ever的专栏
11-04 2244
初代iPhone 2007年，初代iPhone发布，屏幕的宽高是 320 x 480 像素。下文也是按照宽度，高度的顺序排列。这个分辨率一直到iPhone 3GS也保持不变。 那时编写iOS的App(应用程序)，只支持绝对定位。比如一个按钮(x, y, width, height) = (20, 30, 40, 50)，就表示它的宽度是40像素，高度是50像素，放在
iphone各个型号屏幕分辨率
zhaoyya的专栏
09-12 7375
iPhone5在@2x屏幕尺寸是，640x1136px；对应的@1x，屏幕尺寸就是320x568px； iPhone6在@2x屏幕尺寸是：750x1334px；对应的@1x，屏幕尺寸就是375x667px； iPhone6Plus在@3x屏幕尺寸是：750x1334px；对应的@1x，屏幕尺寸就是414x736px
UI ： 2022年iOS/Android UI设计规范（1）
热门推荐
Siimple的博客
03-27 6万+
1.设计稿与切片稿 a.尺寸 设计稿：iPhone6 750*1334 【2倍】 切图稿：iPhone6 2208*1242【3倍】 Android 1920*1080 设计稿选择750*1334 px的原因： IOS：向上和向下适配的时候界面调整的幅度最小，最方便适配 Android：设计时只需做最小的设计调整，提升设计效率 b.切图 IOS切图——3份： .........
还在“手动切图”？Illustrator“资源导出”的“自动化”管线，1分钟交付100个UI图标（SVG, @2x, @3x）
最新发布
海外设计界工作十余年的设计师
11-01 1237
我将深入介绍一套基于 Adobe Illustrator 的“工业级”自动化交付管线，其核心就是那个常被你忽视的“神器”——“资源导出（Asset Export）”面板。通过本指南，你将学会如何“一次设置，一键导出”你所需要的所有格式、所有尺寸的图标，将你从“切图地狱”中彻底解放。
UI设计切图规范
织网的博客
03-22 3275
移动UI设计切图是UI设计师最重要的设计输出物，切图资源输出是否规范直接影响到工程师对设计效果的还原度。设计师的切图输出物是是体现一个设计师专业水准的重要标准，同时也是设计师表达自己对设计态度的最有力的语言。合适、精准的切图可以最大限度的还原设计图，起到事半功倍的效果。如何输出具有全局把控和细节专注的高段位切图，应该是所有设计师一直需要追求的能力。
iOS - 如何切图适配各种机型
gongyuhonglou的博客
05-31 5241
关于iPhone6/6+适配问题一直有争议，今天小编专门为大家整理了相关的有效方案，希望对大伙儿有帮助！   移动app开发中多种设备尺寸适配问题，过去只属于Android阵营的头疼事儿，只是很多设计师选择性地忽视android适配问题，只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6，iOS平台尺寸适配问题终于还是来了，移动设计全面进入“杂屏”时代。看看下面三款iPhon
移动端切图内容包括什么_移动APP切图术语解读：什么是@1x @2x和@3x
weixin_39622562的博客
12-22 530
现在很多APP设计师小白都会稀里糊涂的在解读这些缩放1倍，扩大2倍或者说扩大1.5倍 等等之类的言论。大家谈论的却是也没有错。如果你搭配上@1x @2x和@3x的话，你的理解就有问题啦！首先我们看下我们切图的命名方式：假设有两张图片名为：正确的命名方式应该是这样test_t@2x.png 、test_t@3x.png这是对于ios 切图来说的。iphone 4 5 6是采用test_t@2x....
android app ui如何切图,APP切图详细规范终极指南
weixin_42395725的博客
05-27 2043
我们都知道一套完整的 App 通常会有很多张切图，不管是 iPhone 需要 1x、2x、3x 图档，Android 需要至少 3 种 hdpi、xhdpi、xxhdpi。在庞大的切图数量下如何让负责套图的 RD 快速找到所需图档，档名的命令方式就需要双方统一格式方便大家作业。所以，制定一套非常有效而方便的APP切图命名规范非常有用的。下面就跟随小编来详细了解APP切图命名的流程和命名规范。ios...
android 1x 2x,dpi、ppi、dp、px、分辨率、@1x、@2x、@3x
weixin_32421193的博客
05-28 3260
px：像素分辨率：屏幕水平方向上的像素 × 垂直方向上的像素，单位为px；例：iphone5的分辨率为：640 × 1136 pxppi：Pixel per inch，每英寸像素数，为像素密度，单位：像素/每英寸针对显示器设计时，ppi=dpidpi：dots per inch，每英寸像素点，为像素密度，单位：像素/每英寸；dpi=√ (屏幕水平像素^2 + 屏幕垂直像素^2) / 屏幕英寸数dp...
UI稿切图
yzpbright的博客
03-31 1838
iPhone 6 Plus 采用标准的 1920×1080分辨率屏幕。 iPhone7的分辨率是1334x750像素。 iOS 11支持2436 × 1125 iPhone屏幕。
ios设计尺寸规范_苹果13代产品及iOS设计规范
weixin_39615741的博客
12-01 5855
苹果自07年1月9日正式发布iPhone到目前为止的iPhone11Pro Max，已经历了十三代产品。19年9月11日推出的11、11Pro、11Pro Max并没有新增尺寸，所以对设计师而言也就没有额外新增工作量了，还是按照以前的做法：750*1334px(@2x)或(375*667pt，@1x)做设计稿，再提供@2x、@3x切图。以下为苹果手机历代产品明细(话说你拥有过那几代产品，欢迎留言交...
IOS图片生成工具(@1X,@2X,@3X)
chuanyue11的博客
11-13 1892
IOS图片生成工具(@1X,@2X,@3X) 在进行IOS开发过程中，经常需要为了适配不同分辨率的设备而准备不同尺寸的图片。由于本人长期从事后台研发工作，对前端及UI常用工具（比如PS）并不熟悉，于是开发了下面这个工具对一个大尺寸的图片进行裁剪，生成1倍、2倍、3倍尺寸的图片，方便进行IOS开发。 工具介绍 该工具接受两个参数，分别为源图片文件或目录和目标图片存放文件夹。源图片为分辨率高于所有裁剪...
android切图尺寸_iOS、Android 开发单位换算及 UI 切图要求
weixin_35487052的博客
01-26 945
一、常用单位1. px (像素)px 即 pixel，像素点，电子屏幕上组成图像的最基本单位，在描述屏幕分辨率时也会使用该单位。1px 表示一个像素，例如 iPhone 8 的尺寸为 750px × 1334px，表示在该手机屏幕上，水平方向每行有 750 个像素点，垂直方向每列有 1334 个像素点。2. pt (磅)pt 即 point，有两个含义：一是印刷行业常用单位，是一个标准长度单位，绝...
android与ios ui切图关系,iOS、Android 开发单位换算及 UI 切图要求
weixin_34540951的博客
05-26 817
在移动端 UI 设计中，经常会用到的单位有 4 种：px、pt、dp 和 sp，很多人分辨不清这几种单位及其换算关系，以及 iOS 和 Android 的切图要求，我在这里做下简单的介绍，希望大家读完后能有所收获(如有错误，欢迎纠正)。一、常用单位1. px (像素)px 即 pixel，像素点，电子屏幕上组成图像的最基本单位，在描述屏幕分辨率时也会使用该单位。1px 表示一个像素，例如 iPho...
UI设计师高效切图6大步骤
qq_32506555的博客
09-15 7367
做为UI设计师，需要标注设计稿和切图，本文和大家分享的就是高效切图的一些步骤，一起来看看吧，希望对大家ui设计有所帮助。 　　不用在意那么多设备 　　不管iOS和Android手机型号有多少，只要我们了解它的屏幕分辨率之后就好办了。 　有人会发现一个问题，6S、6S plus的尺寸呢？因为他们的分辨率和6、6 plus尺寸一致的。 从上图可以
移动APP切图术语解读：什么是@1x @2x和@3x
ihoudf
11-27 1万+
现在很多APP设计师小白都会稀里糊涂的在解读这些缩放1倍，扩大2倍或者说扩大1.5倍 等等之类的言论。 大家谈论的却是也没有错。如果你搭配上@1x @2x和@3x的话，你的理解就有问题啦！ 首先我们看下我们切图的命名方式： 假设有两张图片名为：正确的命名方式应该是这样test_t@2x.png 、test_t@3x.png 这是对于ios 切图来说的。 iphone 4  5  6是采用
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值