美文网首页
iPhone11及其他各个机型适配

iPhone11及其他各个机型适配

作者: 笑看人生_44e2 | 来源:发表于2020-05-09 17:04 被阅读0次

    此文来自https://www.zcool.com.cn/article/ZMTAzNjYyMA==.html

    iPhone11并没有出现新的设计尺寸,设计师作图时可以跟往常一样不变,依然提供@2x、@3x两套切图就可以。

    iPhone11并没有出现新的设计尺寸,设计师作图时可以跟往常一样不变,依然只需要提供@2x、@3x两套切图就可以。****

    1、iPhone11是6.1英寸,与现有的iPhoneXR一致;

    2、iPhone11 Pro、iPhone11 Pro Max分别是5.8英寸和6.5英寸,与现有的iPhoneX、iPhone XS Max一致

    下面我们来回忆下iPhone的发展历史,不同版本的设计尺寸是设计及开发都不得不关心的硬知识。

    自从2007年史蒂夫·乔布斯为全世界带来第一代革命性的iPhone,距今已有13个年头。苹果的每一代产品都会有很多的更新变化,但不变的是流畅的体验和人性化的设计,这也让iPhone每一年都成为我们关注的焦点。

    【2007~2009】 iPhone、iPhone 3G、iPhone 3GS

    初代iPhone被很多人认为是真正开启智能手机时代的代表,为什么与众不同呢?是因为它让人耳目一新的外观设计、流畅的交互体验,不再是那些臃肿的按键,只有触摸屏和一个圆形Home键,并且支持多点触控,这种丝滑的新颖交互方式,当时乔布斯在发布会上可是好好地吹了一波~

    初代iPhone搭载的系统也是iOS系统的开端,即便那时的系统命名是iPhone OS。从iPhone 3G开始搭载的iPhone OS 2.0支持了APP Store,这让开发者们能够为iPhone提供更多的APP,对整个苹果的移动生态建设有了里程碑式的意义。最开始iPhone的UI图标和界面设计都是写实拟物化风格,这是为了让用户在最开始接触的时候就能有一个代入感,并且能够快速投入使用。同时为了规范化图标,苹果将所有的图标都放在了圆角矩形里,看起来非常规整统一,在那个用户体验意识还没有成熟的时代,苹果就很重视使用者的体验感受了,也许在那时iPhone就已经和其它厂商慢慢地拉开差距了。

    这三款手机,屏幕尺寸均是3.5英寸,分辨率为320*480,那时设计师在做设计的时候,使用的切图是@1x。在这里我们需要明白几个概念:
    物理像素(px):是位图图像中的最小单位,也是设计师在PS作图使用的单位;
    逻辑像素(pt):开发使用的单位;

    倍率:物理像素/逻辑像素,也就是我们常说的切图@1x、@2x、@3x; image

    【2010~2011】 iPhone 4、iPhone 4s

    2010年,苹果发布了这款果粉心目中最经典的机型iPhone 4,也正是从这代手机开始,系统正式更名为iOS,iPhone逐渐走到大众的面前。iPhone 4是首款配备了Retina视网膜显示屏的iPhone,虽然屏幕尺寸依然是3.5英寸,但是分辨率达到了640*960,是之前手机的2倍分辨率大小。早些年我们将手机放在离眼睛很近的地方,肉眼是能看到屏幕上的像素格的,因为普通的屏幕,显示效果不细腻。“Retina”是一种显示技术,可以把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度,这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的像素格。

    由于iPhone 4像素密度是之前的2倍,考虑到不同手机视觉显示正常,设计师除了@1x的切图之外,还需要提供@2x的切图,这个时期,设计师的设计稿尺寸变成了640*960。

    image

    【2012~2013】iPhone 5、iPhone 5c、iPhone 5s

    在乔布斯逝世之后,苹果进入了“库克时代”。iPhone 5系列与之前手机相比高度增加了,屏幕尺寸由3.5英寸变成了4英寸。除了外观上的变化,更被人熟知的是iPhone 5s加入了“杀手级”的功能——Touch ID,这是苹果公司的一种指纹识别技术。在UI上最直接的变化,就是iOS7开始采用扁平化的UI风格,与原来的系统风格相比,简直是天翻地覆的变化,这种风格慢慢席卷了整个UI设计行业。

    出现了新的手机尺寸,UI设计师又要开始忙活了,设计稿尺寸变成了640*1136。不过还好,只是高度增加了,垂直方向上显示的内容比4系列多了一些,5系列提供的切图还是同样的@2x。只不过在制作全屏界面如启动页之类的,需要考虑单独设计。

    image

    【2014~2017】iPhone 6/7/8、iPhone 6/7/8 Plus、iPhone SE

    这段时期苹果发布了两款新的大尺寸iPhone,4.7英寸的iPhone 6/7/8(分辨率7501334,@2x)和5.5英寸的iPhone 6/7/8 Plus(分辨率12422208,@3x)。从iPhone 6s开始,屏幕上加入了Z轴深度的交互方式3D Touch,带来了立体感的操作感受。而在2016年3月份亮相的iPhone SE,与iPhone 5系列屏幕尺寸完全相同,分辨率也是640*1136,只不过用户的反响平平。

    在这个用户越来越喜欢大屏手机的背景下,我们在适配的时候已经不再考虑@1x的手机了,提供的切图变成了@2x和@3x两种。设计师的作图尺寸再次发生了变化,主流设计稿尺寸为iPhone 6/7/8的750*1334。

    image image

    【2017~2018】iPhone X/XS、iPhone XS Max、iPhone XR

    2017年9月发布的iPhone X是苹果首款全面屏设计的产品,标志性的特征就是它的“齐刘海”。从这一代iPhone开始取消了Touch ID指纹识别,取而代之的是Face ID面部识别系统。
    iPhone X/XS的屏幕尺寸为5.8英寸,分辨率是11252436,切图为@3x。
    iPhone XS Max的屏幕尺寸为6.5英寸,分辨率是1242
    2688,切图为@3x。
    iPhone XR的屏幕尺寸为6.1英寸,分辨率是828*1792,切图为@2x。

    虽然又是三个新尺寸,但是别慌!我们通过Sketch作图会发现,iPhone X/XS的设计尺寸是375812pt,仅仅是比iPhone 6/7/8(375667pt)高了一些而已,如果要做X的设计稿,只需要在Sketch中将界面的头部和尾部替换成X的控件就可以了。同理,iPhone XS Max和iPhone XR设计尺寸是414896pt,仅比iPhone 6/7/8 Plus(414736pt)高了一些。当然了,目前设计师作图的基准尺寸还是iPhone 6/7/8,适配的时候,提供的切图为@2x和@3x两种。

    image image image

    【2019】iPhone 11、iPhone 11 Pro、iPhone 11 Pro Max

    今年新发布了三款手机,分别是6.1英寸的iPhone11、5.8英寸的iPhone11 Pro和6.5英寸的iPhone11 Pro Max。新品iPhone全系搭载A13处理器,后置摄像头变成了“浴霸”造型,这次发布会也花了很多篇幅讲解了新摄像头的强大,emm,肯定会有很多人吐槽外观很丑,但是骂完直接掏钱买去了。

    相信设计师朋友们看到这三款手机的屏幕尺寸之后,心中暗暗松了口气,这次不用考虑新的尺寸适配工作了。
    iPhone 11与iPhone XR一样,分辨率为8281792,切图为@2x。
    iPhone 11 Pro与iPhone X一样,分辨率为1125
    2436,切图为@3x。
    iPhone 11 Pro Max与iPhone XS Max一样,分辨率为12422688,切图为@3x。
    当前设计师做效果图主流尺寸依然是750
    1334,适配时提供的切图为@2x和@3x两种。

    image image image

    【尺寸汇总】如下

    以下图表位当前iOS主流适配所用到的切图及对应机型,不过目前我们在作图的时候仍然以iPhone 6/7/8(750*1334px)为基准进行设计。

    image

    【iOS 13的深色模式】

    iOS 13一经亮相就成为设计师关注的焦点,苹果首次在iPhone推出深色模式(Dark Mode),带来了全新的视觉风格。

    说到深色模式就能想到去年发布的macOS Mojave,当时着实惊艳了一把。深色模式对OLED的屏幕来说更省电,有人认为深色模式很酷,也有人认为浏览屏幕的时候能保护眼睛,因为深色模式降低了屏幕发光的亮度,同时将色彩对比度降低,能帮助改善人的视觉感受,减少眼睛的疲劳感。

    深色模式使用颜色的原则:深色模式并不是只把当前的界面背景色简单地变成深色,背景之外的其它色彩元素也需要进行调整以适应深色版本。我们在设计时背景要使用深灰色,避免使用纯黑,其它色彩元素也应该降低饱和度,这是为了增加深色模式下的可读性,同时有效减少视觉疲劳。

    深色模式下的文字颜色也需要进行简单的处理,若直接使用纯白#FFF太亮了,与背景的对比度过于强烈容易造成视觉不适感。我们通常会在深色模式将文字颜色进行半透明弱化处理,比如Material Design中的重要级文字采用了87%纯白。

    相关文章

      网友评论

          本文标题:iPhone11及其他各个机型适配

          本文链接:https://www.haomeiwen.com/subject/elzknhtx.html