Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 760|回复: 0

[默认分类] IOS和安卓ui设计常用尺寸及基本知识

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2018-6-2 11:21:14 | 显示全部楼层 |阅读模式


      http://www.miued.com/917/
      iOS app 图标的圆角半径是多少?
      (注:现在IOS图标是不需要再画圆角了,直接方形就OK)
      括弧里面是对应的半径大小
      App store(Retina屏) ─────────────1024px(160px)
      iTunes Artwork icon ─────────────512px (90px)
      App icon(iPhone4s) ──────────────────114px (20px)
      App icon(iPhone5s) ──────────────────120px(22px)
      App icon(iPad) ────────────────────72px (12px)
      App icon(iPhone 3G/3GS) ───────────────57px(10px)
      Spotlight/Settings icon icon(iPhone4) ──────────58px (10px)
      Spotlight/Settings icon icon(iPhone 3G/3GS/iPad) ──── 29px (9px)
       
      iPhone、iPad、Android UI常用设计尺寸
       
      iPhone:

       —————————————————————–
      
      APPLE APP STORE ICON:512 x 512 PX  (圆角弧度80px)
      iPhone 5 App Icon:120 x 120 PX   (圆角弧度22px)
      iPhone 4 App Icon:114 x 114 PX  (圆角弧度20px)
      iPhone 3GS App Icon:57 x 57 PX  (圆角弧度22px)
      iPhone 5 326ppi 4英寸1136*640PX
      iPhone 4 App UI:960 x 640PX (设计时,高度还需要减去状态栏40PX)
      iPhone 3GS App UI:480x 320PX
      
      
      
       iPhone的设计尺寸(ios尺寸)
       iPhone界面尺寸:
       
       
       
         
          设备
          分辨率
          状态栏高度
          导航栏高度
          标签栏(工具栏)高度
         
         
           iPhone6 plus设计版
          1242 × 2208
          60px
          132px
          146px
         
         
           iOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程
         
         
           iPhone6 plus物理版
          1080 × 1920
          54px
          132px
          146px
         
         
           iOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程
         
         
           iPhone6
          750 × 1334
          40px
          88px
          98px(88px)
         
         
           iPhone5s
          640 × 1136
          40px
          88px
          98px(88px)
         
         
           iPhone5c
          640 × 1136
          40px
          88px
          98px(88px)
         
         
           iPhone5
          640 × 1136
          40px
          88px
          98px(88px)
         
         
           iPhone4s
          640 × 960
          40px
          88px
          98px(88px)
         
         
           iPhone4
          640 × 960
          40px
          88px
          98px(88px)
         
       
       
       
      
      
       
       
         
       iPhone图标尺寸:
       
       
       
         
          系统
          分辨率
          圆角大小
         
         
           iOS 6-
          90px – 1024px
          约为图标宽度 × 0.175
         
         
           iOS 7+
          90px – 1024px
          约为图标宽度 × 0.225
         
       
       
       
         
       
       
       
         
          Asset
           iPhone 6 Plus (@3x)
           iPhone 6 and iPhone 5 (@2x)
           iPhone 4s (@2x)
           iPad and iPad mini (@2x)
           iPad 2 and iPad mini (@1x)
         
         
           App icon
    (required for all apps)
          180 × 180
          120 × 120
          120 × 120
          152 × 152
          76 × 76
         
         
           App icon for the App Store
    (required for all apps)
          1024 × 1024
          1024 × 1024
          1024 × 1024
          1024 × 1024
          1024 × 1024
         
         
           Launch file or image
    (required for all apps)
          Use a launch file
    (see Launch Images)
          For iPhone 6, use a launch file
    (see Launch Images)
    For iPhone 5, 640 × 1136
          640 × 960
          1536 × 2048 (portrait)
    2048 × 1536 (landscape)
          768 × 1024 (portrait)
    1024 × 768 (landscape)
         
         
           Spotlight search results icon
    (recommended)
          120 × 120
          80 × 80
          80 × 80
          80 × 80
          40 × 40
         
         
           Settings icon
    (recommended)
          87 × 87
          58 × 58
          58 × 58
          58 × 58
          29 × 29
         
         
           Toolbar and navigation bar icon
    (optional)
          About 66 × 66
          About 44 × 44
          About 44 × 44
          About 44 × 44
          About 22 × 22
         
         
           Tab bar icon
    (optional)
          About 75 × 75
    (maximum: 144 × 96)
          About 50 × 50
    (maximum: 96 × 64)
          About 50 × 50
    (maximum: 96 × 64)
          About 50 × 50
    (maximum: 96 × 64)
          About 25 × 25
    (maximum: 48 × 32)
         
         
           Default Newsstand cover icon for the App Store
    (required for Newsstand apps)
          At least 1024 pixels on the longest edge
          At least 1024 pixels on the longest edge
          At least 1024 pixels on the longest edge
          At least 1024 pixels on the longest edge
          At least 512 pixels on the longest edge
         
         
           Web clip icon
    (recommended for web apps and websites)
          180 × 180
          120 × 120
          120 × 120
          152 × 152
          76 × 76
         
       
       
       
         
       
         
       iPad的设计尺寸
       iPad界面尺寸:
       
       
       
         
          设备
          分辨率
          状态栏高度
          导航栏高度
          标签栏高度
         
         
           iPad6/iPad Air2
          2048 × 1536
          40px
          88px
          98px
         
         
           iPad5/iPad Air/ipad mini 2
          2048 × 1536
          40px
          88px
          98px
         
         
           iPad4/ipad mini
          2048 × 1536
          40px
          88px
          98px
         
         
           iPad3/the new iPad
          2048 × 1536
          40px
          88px
          98px
         
         
           iPad2
          1024 × 768
          20px
          44px
          49px
         
         
           iPad1
          1024 × 768
          20px
          44px
          49px
         
         
           iPad Mini
          1024 × 768
          20px
          44px
          49px
         
       
       
       
       
         
       iPad图标尺寸:
       
       
       
         
          系统
          分辨率
          圆角大小
         
         
           iOS 6-
          90px – 1024px
          约为图标宽度 × 0.175
         
         
           iOS 7+
          90px – 1024px
          约为图标宽度 × 0.225
         
       
       
       
       
       
       
         
          Asset
           iPhone 6 Plus (@3x)
           iPhone 6 and iPhone 5 (@2x)
           iPhone 4s (@2x)
           iPad and iPad mini (@2x)
           iPad 2 and iPad mini (@1x)
         
         
           App icon
    (required for all apps)
          180 × 180
          120 × 120
          120 × 120
          152 × 152
          76 × 76
         
         
           App icon for the App Store
    (required for all apps)
          1024 × 1024
          1024 × 1024
          1024 × 1024
          1024 × 1024
          1024 × 1024
         
         
           Launch file or image
    (required for all apps)
          Use a launch file
    (see Launch Images)
          For iPhone 6, use a launch file
    (see Launch Images)
    For iPhone 5, 640 × 1136
          640 × 960
          1536 × 2048 (portrait)
    2048 × 1536 (landscape)
          768 × 1024 (portrait)
    1024 × 768 (landscape)
         
         
           Spotlight search results icon
    (recommended)
          120 × 120
          80 × 80
          80 × 80
          80 × 80
          40 × 40
         
         
           Settings icon
    (recommended)
          87 × 87
          58 × 58
          58 × 58
          58 × 58
          29 × 29
         
         
           Toolbar and navigation bar icon
    (optional)
          About 66 × 66
          About 44 × 44
          About 44 × 44
          About 44 × 44
          About 22 × 22
         
         
           Tab bar icon
    (optional)
          About 75 × 75
    (maximum: 144 × 96)
          About 50 × 50
    (maximum: 96 × 64)
          About 50 × 50
    (maximum: 96 × 64)
          About 50 × 50
    (maximum: 96 × 64)
          About 25 × 25
    (maximum: 48 × 32)
         
         
           Default Newsstand cover icon for the App Store
    (required for Newsstand apps)
          At least 1024 pixels on the longest edge
          At least 1024 pixels on the longest edge
          At least 1024 pixels on the longest edge
          At least 1024 pixels on the longest edge
          At least 512 pixels on the longest edge
         
         
           Web clip icon
    (recommended for web apps and websites)
          180 × 180
          120 × 120
          120 × 120
          152 × 152
          76 × 76
         
       
       
       
       
         
       
         
       
        Android的设计尺寸:
        屏幕尺寸
        指实际的物理尺寸,为屏幕对角线的测量。
    为了简单起见,Android把实际屏幕尺寸分为四个广义的大小:小,正常,大,特大。
        像素(PX)
        代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。
        屏幕密度
        为解决Android设备碎片化,引入一个概念DP,也就是密度。指在一定尺寸的物理屏幕上显示像素的数量,通常指分辨率。 为了简单起见,Android把屏幕密度分为了四个广义的大小:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi) 像素= DP * ( DPI / 160 ) 例如,在一个240dpi的屏幕里,1DP等于1.5PX。
    于设计来说,选取一个合适的尺寸作为正常大小和中等屏幕密度(尺寸的选取依据打算适配的硬件,建议参考现主流硬件分辨率),然后向下和向上 做小、大、特大和低、高、超高的尺寸与密度。
        典型的设计尺寸
        • 320dp:一个普通的手机屏幕(240X320,320×480,480X800)
    • 480dp:一个中间平板电脑像(480×800)
    • 600dp:7寸平板电脑(600×1024)
    • 720dp:10寸平板电脑(720×1280,800×1280)
          
        对于分辨率繁多的android设备,为了方便原生应用的界面适配,Google按照dpi大小将它们分成了4中模式(MDPI、HDPI、XHDPI和XXHDPI,现在 Android 4.3 已经有了XXXHDPI):
       
       屏幕DIP类型:      xxhdpi         xhdpi        hdpi          mdpi           ldpi
       ICON尺寸:     144*144         96*96         72*72      48*48       36*36
         
       随便说一下现在安卓设计稿尺寸设定:
      
       一般PS新建 1080 x 1920的尺寸,也就是对应该安卓的xxhdpi ,所以切图也是放入程序中的xxhdpi文件夹 下。所以基本上一套图就可以了,如果时间充足,做多套尺寸的图自然没什么坏处。虽然只出大尺寸的图,但设计时一定好考虑好小屏幕适配问题,还要对部分切图进行调整重切,因为有些图等比缩小时会出现糊,或不好看的现象。
       
       
       
       
      
       安卓的点九图 点9切法 查看这篇文章:
       http://www.miued.com/2074/
       
      
      
      
      Android安卓系统dp/sp/px换算表
      
      
       
       
         名称
          分辨率
          比率 rate (针对320px)
          比率 rate (针对640px)
          比率 rate (针对750px)
       
       
         idpi
         240 × 320
         0.75
         0.375
         0.32
       
       
         mdpi
         320 × 480
         1
         0.5
         0.4267
       
       
         hdpi
         480 × 800
         1.5
         0.75
         0.64
       
       
         xhdpi
         720 × 1280
         2.25
         1.125
         1.042
       
       
         xxhdpi
         1080 × 1920
         3.375
         1.6875
         1.5
       
       
      
      
      主流Android手机分辨率和尺寸
      
      
       
       
         设备
         分辨率
         尺寸
         设备
         分辨率
         尺寸
       
       
         三星Galaxy S3
         4.8英寸
         720 × 1280
         三星Galaxy S4
         5英寸
         1080 × 1920
       
       
         三星Galaxy S5
         5.1英寸
         1080 × 1920
         三星Galaxy S6
         4.5英寸
         1200 × 1920
       
       
         小米1
         4英寸
         480 × 854
         小米1s
         4英寸
         480 × 854
       
       
         小米2
         4.3英寸
         720 × 1280
         小米2s
         4.3英寸
         720 × 1280
       
       
         小米3
         5英寸
         1080 × 1920
         小米3s(概念)
         5英寸
         1080 × 1920
       
       
         小米4
         5英寸
         1080 × 1920
         红米
         4.7英寸
         720 × 1280
       
       
         红米Note
         5.5英寸
         720 × 1280
          
          
          
       
       
         OPPO Find 7
         5.5英寸
         1440 × 2560
         OPPO Find 7 轻装版
         5.5英寸
         1080 × 1920
       
       
         OPPO N1 mini
         5英寸
         720 × 1280
         OPPO R3
         5英寸
         720 × 1280
       
       
         OPPO R1S
         5英寸
         720 × 1280
          
          
          
       
       
         锤子 Smartisan T1
         4.95英寸
         1080 × 1920
          
          
          
       
       
         华为 Ascend P7
         5英寸
         1080 × 1920
         华为 Ascend Mate7
         6英寸
         1080 × 1920
       
       
         华为 荣耀6
         5英寸
         1080 × 1920
         华为 Ascend Mate2
         6.1英寸
         720 × 1280
       
       
         华为 C199
         5.5英寸
         720 × 1280
          
          
          
       
       
         HTC One (M8)
         5英寸
         1080 × 1920
         HTC Desire 820
         5.5英寸
         720 × 1280
       
       
         魅族 MEIZU MX4
         5.36英寸
         1152 × 1920
         魅族 MEIZU MX3
         5.1英寸
         1080 × 1800
       
       
      
      
       
      相关文章:
      移动设备的界面设计尺寸-ios与Android
      IOS7 UI设计的十大准则
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2025-2-24 11:16 , Processed in 0.373961 second(s), 46 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表