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) |
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
随便说一下现在安卓设计稿尺寸设定:
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 UI 设计规范相关推荐
- UI培训分享:导航栏UI设计规范及注意事项有哪些?
UI设计学习起来要注意的东西还是有很多的,例如导航栏,导航栏UI设计规范及注意事项有哪些呢?今天小编为大家详细的介绍一下关于导航栏的设计注意事项,希望能够帮助到今后工作的你. UI培训分享:导航栏UI ...
- ui设计移动端字体适配_超全面的移动端UI 设计规范整理汇总
很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意.本文整理汇总了一些 ...
- UI设计师必备知识|最全UI设计规范!
超级有用的设计规范! 收藏起来,没毛病! 一步步教你建立UI设计规范! 设计规范 UI手机屏幕尺寸设计规范包含: 设备名称 操作系统 纵横比 宽 x 高 宽 x 高 密度 Android设计尺寸规范 ...
- ios底部栏设计规范_超全面的UI设计规范整理,你值得收藏!
很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意. 本文整理汇总了一 ...
- 到底什么是UI设计规范
所谓规范,便是对成一定数量的可复用设计或者多设计师协作的设计项目进行量化和约束的东西.对于同一家公司的多个产品线来说,有一个统一UI规范,可以对多个产品在图标.主题色彩等方面进行规范,使得产品统一:多 ...
- 屏幕尺寸大全和UI设计规范
偶然在人人都是产品经理上看到了一页屏幕尺寸大全和UI设计规范,留作保存. 屏幕尺寸大全和UI设计规范
- UI设计规范-全文篇
目录 UI设计规范 1 1. 界面规范 1 1.1. 总体原则 1 1.2. 原则详述 2 1.2.1. 用户控制 2 1.2.2. 清楚一致的设计 2 1.3. 细节约定 3 1.3.1. 界面风 ...
- 最全移动端UI设计规范,作为前端的你,了解多少?
很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意.本文整理汇总了一些 ...
- ui设计移动端字体适配_移动端UI设计规范全方位汇总(附演示PPT下载)
很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,对做UI设计的基础概念也没有清晰的认识,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页 ...
最新文章
- webpack入门(二)what is webpack
- mysql干货——数据库字符集和校对规则详解
- VC6.0 如何改变对话框背景色
- 分享一款最近比较火爆的宝石迷情游戏游戏源码安卓版
- ios学习笔记block回调的应用(一个简单的例子)
- python教程输入_python怎么输入一个集合
- Tomcat catalina.properties配置文件详解
- 文件夹文件遍历并插入数据库的操作,IO Directory File的递归操作
- 转发:一个复杂系统的拆分改造实践
- 在VS2012集成Fortran95(Ftn95)
- 【matlab智能算法一函数学习】Matlab聚类分析(Cluster Analyses)
- 大学计算机学术活动,计算机学院学术活动公告---南京理工大学Wai-Tat Fu教授学术报告...
- 如何实现 JS 运行时的 Inspector 能力
- 微分方程数值解法(PID仿真用一阶被控对象库PLC算法实现)
- shp2sdo的下载及使用说明
- 8000401a和80080005
- gaussdb200 实操
- 使用Python进行立体几何和立体校正的综合教程
- reduce()方法使用详解
- 软阈值(Soft Thresholding) 函数解读