`

Ipad UI 设计规范

 
阅读更多

OS 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)

iph

 

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

 

iph-ico

 

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

ipavv

 

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

ipa-ico

 

ios—icon

 

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中模式(MDPIHDPIXHDPIXXHDPI,现在 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

 

分享到:
评论

相关推荐

    iPad软件界面设计基本规范.pdf

    iPad 软件界面设计基本规范是 Apple 公司规定的设计规范,旨在帮助开发者创建出色的 iPad 应用程序。按照这个规范,开发者可以创建出高度用户友好、美观大方的应用程序,提高用户体验。 iPad 平台特点 1. 大屏幕:...

    IPHONE IPAD UI组件

    8. **ipad全系列UI设计**:由于iPad有更大的屏幕尺寸,UI设计需要考虑更多的细节和多窗口操作的可能性。设计师需要为横屏和竖屏模式分别设计,以充分利用空间并保持良好的用户体验。 在设计过程中,设计师通常会...

    UI设计尺寸规范方案最新最全UI设计规范方案标准.doc

    2. **iPad UI设计规范**: - **设备尺寸和分辨率**:iPad 3-6、Air系列以及mini 2具有2048×1536 px的分辨率,264 PPI,状态栏、导航栏和标签栏的高度分别为40px、88px和98px。早期的iPad型号如iPad 1和2则有1024×...

    APP UI设计规范

    ### APP UI设计规范详解 #### 一、引言 随着移动互联网的发展,用户对应用程序的体验要求越来越高。良好的用户界面(UI)设计不仅能够提升用户体验,还能有效提高产品的市场竞争力。本篇文章将详细介绍iOS和Android...

    iPad UI设计

    iPad软件界面设计基本规范和iPad应用程序UI设计的五大要素

    ipad psd ui设计

    在IT行业中,UI设计是构建用户界面的关键环节,特别是在平板电脑设备如iPad上。"ipad psd ui设计"指的是使用Adobe Photoshop(PSD)文件格式进行iPad应用或界面的设计工作。这种设计方法允许设计师创建可编辑、分层...

    UI设计学习课程规范

    - **知识点**: 网页元素设计、不同风格的商业类网站设计、banner设计、按钮设计、loading动画设计、Web端网页UI设计规范 - **详细说明**: 学员将学习网页设计中重要的元素设计,包括不同风格的商业网站设计、banner...

    UI设计尺寸规范方案~最新最全UI设计规范方案.doc

    UI设计尺寸规范是移动应用和网页设计中的关键要素,它确保了在不同设备上的一致性和用户体验...这份最新最全的UI设计规范方案是设计师们的重要参考工具,能帮助他们快速适应不断变化的设备市场,创造出优秀的交互设计。

    iPhone、iPad、Android UI常用设计尺寸

    iPhone、iPad、Android UI常用设计尺寸,网上找的

    UI尺寸规范

    例如,iPad的屏幕分辨率通常在2048×1536像素,针对iPad的UI设计,开发者需要确保图标和界面元素在Retina显示屏上有清晰的表现。 在了解了具体设备的尺寸后,开发者还需要熟悉iOS设备上各类UI组件的尺寸规范,比如...

    中国电信知识库iPad端系统应用UI视觉规范V1.0.pdf

    这份规范旨在确保UI设计的一致性、易用性和美观性,提升用户体验。以下将详细阐述其中的关键知识点: 1. **字体规范**:规范中提到了两种主要的字体——STHeitiSC-Light,一种用于标题,另一种用于正文。标题的字体...

    iOS_UI切图规范

    因此,为了在各种设备上都能准确显示,UI设计师需要提供2x和3x两套切图。 - **切图命名**:文件包命名遵循项目名+功能模块+作者名+日期的格式,切图文件名则采用模块_类别_功能_状态@2x/@3x.png的结构,避免中文、...

    iOS_UI作品效果图,适合UI设计师使用的效果图。

    2. **响应式设计**:iOS设备有多种屏幕尺寸,因此UI设计需要考虑不同设备的适配,确保在iPhone和iPad上都有良好的视觉效果和交互体验。 3. **导航设计**:iOS常见的导航模式有Tab Bar、Navigation Controller、...

    Ipad设计素材源文件打包

    3. **Ipad设计**:iPad设计涵盖了平板电脑的用户界面(UI)和用户体验(UX)设计。设计师需要考虑iPad的屏幕尺寸、触控交互、设备特性,以及Apple的人机交互指南(Human Interface Guidelines, HIG)。设计时需注重...

    乐视3屏UI规范.zip

    在电视、手机和iPad这三类屏幕不同的设备上,UI设计需要考虑到不同屏幕尺寸、分辨率以及用户使用习惯。以下是这些文件可能涉及的一些核心知识点: 1. **响应式设计**:3屏UI规范强调了跨平台的适应性。这意味着UI...

    ui尺寸规范.pdf

    UI 设计尺寸规范 根据提供的文件信息,我们可以总结出以下几个知识点: 1. iPhone 设备的设计尺寸规范: iPhone6 Plus 设计版的尺寸为 1242×2208 px,PPI 为 401,状态栏高度为 60px,导航栏高度为 132px,标签...

    界面设计规范

    "UI设计规范.doc"文档很可能提供了更详尽的设计原则和实例,而"d746.zip"可能是包含额外设计资源或案例的压缩文件,设计师可以结合这些资料进一步提升自己的设计水平。通过理解和运用这些规范,设计师能够创造出既...

    ipad设计素材

    对于iPad UI设计来说,使用PSD素材意味着设计师可以精确控制每个按钮、图标和其他界面元素的大小、颜色和位置,以符合Apple的iOS设计规范。 iPad作为一款流行的平板电脑,其屏幕尺寸和分辨率与其他设备不同,因此...

    iPad2 GUI 详细分层

    3. 了解设计规范:通过分析iPad的界面元素,设计师可以更好地遵循Apple的Human Interface Guidelines(人机交互指南),确保用户体验的一致性和质量。 此外,这些分层的PSD文件也可以用于教育目的,帮助学生或初学...

Global site tag (gtag.js) - Google Analytics