2x 3x切图 ios_ios 1x2x3x切图 - CSDN
精华内容
参与话题
  • iOS UI切图@1x、@2x、@3x的实际尺寸

    万次阅读 2015-07-27 16:16:14
    1x2x就是用于非Retain屏幕和Retain屏幕,3x现在用于iPhone6 Plus,在iPhone实际开发中,只有iPhone4 是非Retain屏幕,市场占有率很低,因此在切图时,只切@2x和@3x图片即可。以iphone 6做UI为例,如果图片大小为...

        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。这样程序在运行时就能根据不同设备自动调用不同图片,从而达到最佳效果。

    附一张原理图:


    展开全文
  • ios切图(一倍图+二倍图+三倍图)

    万次阅读 2018-11-23 16:28:09
    工作中,一直做移动端app(不包括ios和ipad),所以对...@2x,@3x),我开始以为只要图片够大,就不用整什么两倍图,三倍图的,只要图片能自适应各种屏幕就行了吧,但后来发现还是必须要有的,ios系统必须要这个bg...

    工作中,一直做移动端app(不包括ios和ipad),所以对一些手机端的比较熟悉,但没做过ipad端的,今天工作中正好有碰到一个ipad设计(效果图+切图),刚开始以为和手机端一样,但做的过程中发现还是有不一样的地方,比如常识性的切图(一倍图,@2x,@3x),我开始以为只要图片够大,就不用整什么两倍图,三倍图的,只要图片能自适应各种屏幕就行了吧,但后来发现还是必须要有的,ios系统必须要这个bg@2x.png和bg@3x.png,加上一倍图bg.png就是这三张图必须要有,不管你的原图多大,多高清,你设置的多自适应,这三张图你必须提供!呜呜呜..........常识性的东东.......

    这过程中找了一些资料,搜集整合,分享给一些有需要的伙伴们!

     

    一,ios开发为什么要弄@2x和@3x两套图 ?

    1.对不同size的屏幕会自动匹配不同的图片。代码中只要写前面的图片名就好了,系统会自动找到对应图片的。

    2.@2x 和 @3x 名字是一样的,系统会自动判断添加哪套图的

    3.@2x给Retina屏幕用的,@3x是给6plus用的

    例如:

    一个是30px*30px的PNG图片,用原名来命名即可,例如sample.png。

    一个是60px*60px的PNG图片,这个要用原名@2x来命名,例如sample@2x.png

    一个是90px*90px的PNG图片,这个要用原强调内容名@3x来命名,例如sample@3x.png

    这样把这三张图片导入进工程,你会神奇地发现,这三个文件居然会被iOS统一识别为sample.png

     

    二,应用场景

    (1) 1x的图标用于1:1的屏幕,非视网膜屏,例如iPhone 3GS、(/20140414DEL/ //早期iPhone 4)

    非视网膜屏的众多iPad等。

    (2) 2x的图标用于1:2的屏幕,大部分视网膜屏,机型如(/20140414ADD/ iPhone 4、)iPhone 4S

    、iPhone 5、iPhone 5s、iPhone 6、iPad with Retina及后续的视网膜屏iPad等。

    (3) 3x的图标目前应用于1:3的屏幕,即iPhone 6Plus

     

    展开全文
  • iOS界面设计切图小结

    万次阅读 2013-07-24 13:32:36
    iOS界面设计切图小结 APR 12TH, 2013 1.基本尺寸 (1)界面 实际设计时按: iPhone4、4s:640px*960px iPhone5: 640px*1136px iPad:1536px*2048px (2) 图标: 1024px*1024px 圆角...

    iOS界面设计切图小结

    APR 12TH, 2013

    1.基本尺寸

    (1)界面

    实际设计时按:

    • iPhone4、4s:640px*960px
    • iPhone5: 640px*1136px
    • iPad:1536px*2048px

    (2) 图标:

    • 1024px*1024px 圆角180px
    • 提交1024px*1024px 方角 png格式图片

    2.图形部件及字体

    (1) 为显示清晰

    • 所有图形部件尺寸必须为偶数
    • 样式中阴影、发光、描边的数值也必须为偶数

    (2) 为方便用户点击

    • 所有可点击的部件需大于88px*88px
    • 若图片本身不够,可在切图时补足空白像素 例如:

    (3)为减小程序体积

    建议尽量使用可平铺图案设计界面

    (4)苹果默认字体

    在pc上没有完全一样的字体,Hiragino Sans GB苹果丽黑最相近 一般做效果图时,用Hiragino Sans GB(包括中英文)代替即可,也可以用方正黑体代替

    • 所有字体使用偶数字号进行设计
    • 苹果丽黑有W3、W6两种粗细的字体

    附下载地址:苹果丽黑

    (5)系统可以做到如下字体效果

    即,向特定方向1px(做效果图时做2px的效果)投影,需给出字体颜色、阴影颜色。 一般不建议按钮上的文字做特殊效果。如果必要, 需将字体和按钮一起切图。

    (6)导航栏中的文字一般为40点W6

    3.切图提示

    (1)所有切图必须为偶数

    先根据Retina屏幕切图(即640960/6401136/1536*2048),后将切图缩为普通屏幕尺寸。 (有特殊图片需要单独制作)

    (2)可平铺部件切图时可如下图:

    带圆角按钮切图时可如下图

    同理

    并在效果图中标出具体大小

    标注软件推荐:dorado

    (3)导航栏和标签栏下的阴影程序可以自动生成,可不切,如图:

    若不满意默认阴影效果,可以单独切2px宽的阴影,如图:

    如有异形阴影如:

    需切整条阴影,并与攻城师说明。

    (4)所有按钮需有两种状态——正常状态和按下状态

    (6)一般情况下切图格式为png24

    • 若个别图片jpg比png小很多,可用jpg
    • 但欢迎页、icon必须为png,在不影响显示效果的前提下,可以考虑用png8

    4.命名

    (1)图片命名后缀

    • 根据Retina屏幕的切图文件名后加@2x,普通屏幕尺寸不用加。

    • 欢迎页、背景等需要对iPhone5另外切图的文件名后加-568h@2x

    (2)命名建议

    建议采用如下方法命名,如:

    1
    
    切图性质_功能相关描述_图片描述(可无)_状态说明(可无)@2x.png

    用例:

    • Retina屏幕切图
    1
    2
    3
    4
    5
    
    bg_booksnum_pressed@2x.png
    ico_arrow_blue@2x.png
    btn_blue_pressed@2x.png
    pic_books_blue@2x.png
    bg_main-568h@2x.png
    • 普通屏幕切图
    1
    2
    3
    4
    5
    
    ​bg_booksnum_pressed.png 
    ico_arrow_blue.png
    btn_blue_pressed.png
    pic_books_blue.png
    按下状态切图命名后加_pressed
    • 另外贴个建议命名备忘

    参考

     Apr 12th, 2013  UIiOS

    原创&整理的文章,版权声明:自由转载-非商用&衍生-保持署名 | Creative Commons BY-NC-ND 3.0

    展开全文
  • 如果你搭配上@1x @2x和@3x的话,你的理解就有问题啦! 首先我们看下我们切图的命名方式: 假设有两张图片名为:正确的命名方式应该是这样test_t@2x.png 、test_t@3x.png 这是对于ios 切图来说的。 iphone 4 5 6...

    现在很多APP设计师小白都会稀里糊涂的在解读这些缩放1倍,扩大2倍或者说扩大1.5倍 等等之类的言论。

    大家谈论的却是也没有错。如果你搭配上@1x @2x和@3x的话,你的理解就有问题啦!

    首先我们看下我们切图的命名方式:

    假设有两张图片名为:正确的命名方式应该是这样test_t@2x.png 、test_t@3x.png

    这是对于ios 切图来说的。

    iphone 4  5  6是采用test_t@2x.png 这个图,iphone 6 plus就采用test_t@3x.png

    但是对于iphone加载的顺序是

    在ipone4     ipone5 s、iphone6和iphone6 plus都是不需要带上@2x/@3x的图片后缀名,程序会优先加载 @2x 的图片 ,但如果需要加载 @3x 的图片,你需要写上 @3x ; 这个是IOS客户端做的,但是作为APP设计师必须了解。

     

    第一个:为解决ios分辨率而生

    iphone 分辨率指南

    之所以有@1x @2x和@3x的出现,也是苹果为了便于程序员的开发,不同分辨率的设备开发时统一为一个尺寸。例如iPad2 是768 x 1024,iPad Retina 是1536 x 2048,开发时都按 768 * 1024 操作。但实际上两者有一倍差异。为了达到最佳效果,使用的图片大小不一样。这时候就用同一个名称,但 Retina 的图加上 @2x 后缀。系统加载图片时,在 iPad2 上会加载 @1x 的图在 1536 * 2048 的设备上,会加载 @2x 的。@3x 现在用于 iPhone 6/6+ 上。

     

    第二个:@1x @2x和@3x也是xcode软件所需要的UI资源。你命好名称以后,ios会根据设备型号自动挑选合适的@1x,@2x或@3x尺寸来使用。

     

    第三个:mac电脑上的APP设计软件Sketch,他切图之后保存的图片格式也是带有@1x @2x和@3x。  在这里 可以解毒@1x @2x和@3x为图片格式,成为图片后缀名。跟我们安卓上的.9.png 类似的。

     

    第四个:苹果IOS程序开发不同分辨率的设备统一为一个尺寸而标记的。@3X就是@1X分辨率的3倍。@3x也是倍数的解读。

     

    所以,在这里 安卓到底有没有这样的@1x @2x和@3x的格式呢。25学堂的小编认为,肯定没有,@1x @2x和@3x严格来说是苹果公司的专利。

    适合安卓的切图命名规范最好的是.9.png图,当然目前.9.png应用在ios上也很多。

    附带一提:iOS8渲染操作中使用前缀带有@1x、@2x 和@3x 的测试图像,代码会优先载入3x 图像。@2x图像不被加载。

    展开全文
  • 蓝湖使用环境,需要在 PSCC2015以上版本使用,...选择当前设计稿的设计尺寸,一般情况下移动端手机设计稿是iPhone 6尺寸设计稿750*1334选择 Ios @2x ; 当前页面的切图,找到需要切图的图层部分标记一下,会出现一...
  • UI : 2020年iOS/Android UI设计规范(1)

    万次阅读 多人点赞 2020-02-17 09:43:28
    1.设计稿与切片稿 a.尺寸 设计稿:iPhone6 750*1334 【2倍】 切图稿:iPhone6 2208*1242【3倍】 Android 1920*1080 ... 设计稿选择750*1334 px的原因: IOS:向上和向下适配的时候界面调整...IOS切图——3份: ...
  • IOS切图直接作为Android切图使用

    千次阅读 2016-08-14 16:12:54
    跳槽到新公司之后,发现工作...,因为以前都是直接用android切图做的适配,所以第一次遇到这种情况时,自己也不知道该怎么办了,只好先把ios切图用起来,然后慢慢去填适配的坑了。其实,在了解互用关系后,将ios对应的
  • 1. 可以使用在线移动图标生成工具:图标工场https://icon.wuruihong.com/网站自动生成iOS所需的所有对应格式的图标,这样就不用我们一个个切图啦~当然也可以自己...2. 如果直接选择iOS,会自动生成iOS的AppIcon所需...
  • IOS 4,5,6,6+适配设计与切图

    千次阅读 2015-04-23 15:28:38
    内容是转自:http://www.mobileui.cn/a-draft-support-ios-app-design.html
  • 让Android和iOS共用一套切图?

    千次阅读 2018-01-30 13:41:41
    开发中,UI给出了图,但在iOS和Android命名...Android 图片命名不能出现 @ 和 大写字母 (a-z _)Android 中会出现 .9 文件iOS 使用 @2 @3 来区别 2x 3x 图 当前我想到的解决办法: 所有图片统一命名为 abcd_2x.png 
  • @3x为:for iPhone6 plusIOS各型号尺寸 类型 桌面图标 显示像素 需要倍数 切图尺寸 命名规范 iPhone6 plus 414*736 @3 1242×2208 5.5Retina HD iPhone6 375*667 @2 750×1334 4.7R
  • 公司的美工实习妹子,每次给的切图命名都好蛋疼有木有~自己整理一份命名规范,自己命名好了,自己动手,丰衣足食嘛! ////////////////////////////////////////////////////////////////////////////////////////...
  • IOS切图尺寸

    千次阅读 2016-02-23 10:24:48
    自从iPhone 6/6+出现后,iOS版上的APP界面设计尺寸又发生了翻天覆地的变化。让ios一下子跟安卓看齐了。进入了移动“杂屏”时代。 之前我们知道的,在移动app开发设计中,需要解决多种设备尺寸适配问题,过去只属于...
  • APP切图详细规范终极指南

    万次阅读 2016-07-14 11:12:20
    我们都知道一套完整的 App 通常会有很多张切图,不管是 iPhone 需要 1x2x3x 图档,Android 需要至少 3 种 hdpi、xhdpi、xxhdpi。在庞大的切图数量下如何让负责套图的 RD 快速找到所需图档,档名的命令方式就...
  • Android UI 切图命名规范、标注规范及单位描述很多UI设计师做APP切图都会有两套,一套是Android的,一套是IOS的。IOS我这边暂不作讲解,因为我本人也不是开发IOS。这里整理一下我在Android开发中总结的一些有利于...
  • 最终UI团队6人一致认为: 360x640 设计不可处理,原型稿以大缩小不会模糊,切图好处理,以小放大会模糊,切图不好处理。 所以最终的结果为:750x1334的作为原稿同时适配Android和IOS,都是16:9
  • 转载地址:http://www.25xt.com/appdesign/4256.html 安卓app设计规范整理和Android APP设计篇 http://www.25xt.com/appdesign/6536.html ... ...如何让APP设计,APP切图高效的与开发对接
  • APP UI设计及切图规范--2016

    万次阅读 2016-07-29 08:44:36
    1.概述 1.1 编写目的 该文档主要针对移动端...2.色值规范 系统采用统一色彩标注值,超出的需要进行登记管理。 色彩范围值:以通用字号C开头标识,在Android开发中对应相应的配置文件 参考:Android开发
  • 切图常说的@1X@2X@3X是什么意思?

    千次阅读 2015-09-08 16:33:23
    @3X就是@1X分辨率的3倍。 如图,iPad2 是768 x 1024,iPad Retina 是1536 x 2048,开发时都按 768 * 1024 操作。但实际上两者有一倍差异。为了达到最佳效果,使用的图片大小不一样。这时候就用同一个名称,但 ...
  • ps切图工具推荐

    千次阅读 2014-11-27 13:47:51
    解救射鸡湿的PS切图工具推荐。 我是懂点ps的,但是不专业,有时开发app需要一些素材,就要上网找,但是网上一般就是一个ios app页面的设计稿,psd格式的,我要将里面的各个元素导出来,如果直接用ps导出,就要先用...
1 2 3 4 5 ... 20
收藏数 1,818
精华内容 727
关键字:

2x 3x切图 ios