美文网首页交互设计
iOS最新设计规范

iOS最新设计规范

作者: 程序猿的产品狗进化史 | 来源:发表于2017-11-03 15:14 被阅读861次

    苹果iOS11.1正式版在11月1号凌晨开始推送给iPhone、iPad用户,随着iOS11正式版的推送,苹果也正式终止了对iPhone5、iPhone5c、iPad4的系统升级计划。关于最新的设计规范也需要及时了解并运用到产品设计中,所以稍微整理了下相关资料。

    1、iPhone 设备分辨率、显示屏规格

    设备 资源分辨率 设计分辨率 状态栏(设计高度) 导航栏(设计高度) 底部Tabar(设计高度) 倍图
    iPhone4 640x960 320x480 20px 44px 49px @2x
    iPhone4s 640x960 320x480 20px 44px 49px @2x
    iPhone5 640x1136 320x568 20px 44px 49px @2x
    iPhone5c 640x1136 320x568 20px 44px 49px @2x
    iPhone5s 640x1136 320x568 20px 44px 49px @2x
    iPhone6 750x1334 375x667 20px 44px 49px @2x
    iPhone6 plus(设计版) 1242x2208 414x768 20px 44px 49px @3x
    iPhone7 750x1334 375x667 20px 44px 49px @2x
    iPhone7 plus 1242x2208 414x768 20px 44px 49px @3x
    iPhone8 750x1334 375x667 20px 44px 49px @2x
    iPhone8 plus 1242x2208 414x768 20px 44px 49px @3x
    iPhone X 1125x2436 375x812 20px 44px 49px @3x
    iPhone尺寸图集合.png
    iPhoneX尺寸图.png

    2、系统Icon、LanuchImage(启动图)

    (1)系统icon

    iPhone系统图标有通知、设置、搜索、App应用、商店图标几种类型,不同系统、不同分辨率大小需要适配对应大小的icon。

    注:10月发布iPhoneX后,iOS系统更新到了11,App图标与之前变化不大,唯一变化的就是忽略了对iOS5,6的图标兼容。
    最新App图标标准.png 之前的App图标标准.png
    最新的App图标对应关系如下:
    Icon类型 iOS系统 @1x @2x @3x
    App桌面图标 iOS5,6(已不支持) 57x57 114x114 -
    iOS7-10 - 120x120 180x180
    设置图标 iOS5-10 29x29 58x58 87x87
    Spotlights搜索结果图标 iOS5,6 29x29 58x58 87x87
    iOS7-10 - 80x80 120x120
    通知图标 iOS7-10 - 40x40 60x60
    App商店图标 iOS 1024x1024
    (2)LanuchImage
    注:LanuchImage与之前相比多了两个针对iPhoneX的竖屏和横屏启动图
    最新的iPhone启动图标准.png 之前的启动图标准.png
    最新的启动图对应关系如下:
    系统和尺寸类型 分辨率 对应机型 倍图
    iPhone Portrait iOS 5,6-1x 320×480 iPhone1/2/3 @1x
    iPhone Portrait iOS 5,6-2x 640×960 iPhone4/4s @2x
    iPhone Portrait iOS 5,6-Retina4 640×1136 iPhone5/5s/5c @2x
    iPhone Portrait iOS 8,9-Retina HD 5.5 1242×2208 iPhone6 plus/7 plus/8 plus @3x
    iPhone Portrait iOS 8,9-Retina HD 4.7 750×1334 iPhone6/7/8 @2x
    iPhone Landscape iOS 8,9-Retina HD 5.5 2208×1242 iPhone6 plus/7 plus/8 plus @3x
    iPhone Portrait iOS 7,9-2x 640×960 iPhone4/4s @2x
    iPhone Portrait iOS 7,9-Retina 4 640×1136 iPhone5/5s/5c @2x
    iPhoneX Portrait iOS 11+ 1125x2436 iPhoneX @3x
    iPhoneX Landscape iOS 11+ 2436x1125 iPhoneX @3x

    会持续更新最新的iOS设计规范,欢迎指正!

    相关文章

      网友评论

        本文标题:iOS最新设计规范

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