Ipad UI 设计规范

未央 2016-04-17

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 × 220860px132px146px
iOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程
iPhone6 plus物理版1080 × 192054px132px146px
iOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程
iPhone6750 × 133440px88px98px(88px)
iPhone5s640 × 113640px88px98px(88px)
iPhone5c640 × 113640px88px98px(88px)
iPhone5640 × 113640px88px98px(88px)
iPhone4s640 × 96040px88px98px(88px)
iPhone4640 × 96040px88px98px(88px)

Ipad UI 设计规范

iPhone图标尺寸：

系统分辨率圆角大小
iOS 6-90px – 1024px约为图标宽度 × 0.175
iOS 7+90px – 1024px约为图标宽度 × 0.225
AssetiPhone 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 × 180120 × 120120 × 120152 × 15276 × 76
App icon for the App Store
(required for all apps)		1024 × 10241024 × 10241024 × 10241024 × 10241024 × 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 × 9601536 × 2048 (portrait)
2048 × 1536 (landscape)		768 × 1024 (portrait)
1024 × 768 (landscape)
Spotlight search results icon
(recommended)		120 × 12080 × 8080 × 8080 × 8040 × 40
Settings icon
(recommended)		87 × 8758 × 5858 × 5858 × 5829 × 29
Toolbar and navigation bar icon
(optional)		About 66 × 66About 44 × 44About 44 × 44About 44 × 44About 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 edgeAt least 1024 pixels on the longest edgeAt least 1024 pixels on the longest edgeAt least 1024 pixels on the longest edgeAt least 512 pixels on the longest edge
Web clip icon
(recommended for web apps and websites)		180 × 180120 × 120120 × 120152 × 15276 × 76

Ipad UI 设计规范

iPad的设计尺寸

iPad界面尺寸：

设备分辨率状态栏高度导航栏高度标签栏高度
iPad6/iPad Air22048 × 153640px88px98px
iPad5/iPad Air/ipad mini 22048 × 153640px88px98px
iPad4/ipad mini2048 × 153640px88px98px
iPad3/the new iPad2048 × 153640px88px98px
iPad21024 × 76820px44px49px
iPad11024 × 76820px44px49px
iPad Mini1024 × 76820px44px49px

Ipad UI 设计规范

iPad图标尺寸：

系统分辨率圆角大小
iOS 6-90px – 1024px约为图标宽度 × 0.175
iOS 7+90px – 1024px约为图标宽度 × 0.225
AssetiPhone 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 × 180120 × 120120 × 120152 × 15276 × 76
App icon for the App Store
(required for all apps)		1024 × 10241024 × 10241024 × 10241024 × 10241024 × 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 × 9601536 × 2048 (portrait)
2048 × 1536 (landscape)		768 × 1024 (portrait)
1024 × 768 (landscape)
Spotlight search results icon
(recommended)		120 × 12080 × 8080 × 8080 × 8040 × 40
Settings icon
(recommended)		87 × 8758 × 5858 × 5858 × 5829 × 29
Toolbar and navigation bar icon
(optional)		About 66 × 66About 44 × 44About 44 × 44About 44 × 44About 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 edgeAt least 1024 pixels on the longest edgeAt least 1024 pixels on the longest edgeAt least 1024 pixels on the longest edgeAt least 512 pixels on the longest edge
Web clip icon
(recommended for web apps and websites)		180 × 180120 × 120120 × 120152 × 15276 × 76

Ipad UI 设计规范

Ipad UI 设计规范

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)
idpi240 × 3200.750.3750.32
mdpi320 × 48010.50.4267
hdpi480 × 8001.50.750.64
xhdpi720 × 12802.251.1251.042
xxhdpi1080 × 19203.3751.68751.5

主流Android手机分辨率和尺寸

设备分辨率尺寸设备分辨率尺寸
三星Galaxy S34.8英寸720 × 1280三星Galaxy S45英寸1080 × 1920
三星Galaxy S55.1英寸1080 × 1920三星Galaxy S64.5英寸1200 × 1920
小米14英寸480 × 854小米1s4英寸480 × 854
小米24.3英寸720 × 1280小米2s4.3英寸720 × 1280
小米35英寸1080 × 1920小米3s(概念)5英寸1080 × 1920
小米45英寸1080 × 1920红米4.7英寸720 × 1280
红米Note5.5英寸720 × 1280   
OPPO Find 75.5英寸1440 × 2560OPPO Find 7 轻装版5.5英寸1080 × 1920
OPPO N1 mini5英寸720 × 1280OPPO R35英寸720 × 1280
OPPO R1S5英寸720 × 1280   
锤子 Smartisan T14.95英寸1080 × 1920   
华为 Ascend P75英寸1080 × 1920华为 Ascend Mate76英寸1080 × 1920
华为 荣耀65英寸1080 × 1920华为 Ascend Mate26.1英寸720 × 1280
华为 C1995.5英寸720 × 1280   
HTC One (M8)5英寸1080 × 1920HTC Desire 8205.5英寸720 × 1280
魅族 MEIZU MX45.36英寸1152 × 1920魅族 MEIZU MX35.1英寸1080 × 1800
未央

未央

相关推荐

专业级的MySQL开发设计规范及SQL编写规范

在团队开发过程中为了项目的稳定，代码的高效，管理的便捷制定内部种开发设计规范是必不可少的，命名规范的对象是指数据库SCHEMA、表TABLE、索引INDEX、约束CONSTRAINTS等的命名约定。数据库创建时必须添加默认字符集和校对规则子句。设计应至少满

bianruifeng / 0评论 2020-11-16

看不懂UI文字设计规范？这篇文章帮你搞定！

文字设置过程中涉及到字体类型、字号、字重、行高、行宽以及颜色等。iOS设备的系统默认字体，中文为苹方，英文&数字为SF UI Text。也有特殊情况，例如标签里面的文字，字号为10甚至可能更小。在界面过程中，需要规范字号大小和对应的行高。可以看出i

精细化设计 / 0评论 2020-11-06

.net core快速开发平台，learun自主工作流引擎设计规范

一个完整的工作流管理系统通常由工作流引擎、工作流设计器、流程操作、工作流客户界面、流程监控、表单设计器、与表单的集成以及与应用程序的集成等几个部分组成。工作流设计器为用户以及开发商提供了快速绘制、修改流程的方式，工作流设计器的好坏决定到工作流管理系统的易用

chenyanyan / 0评论 2020-08-06

.net core快速开发平台，learun自主工作流引擎设计规范

一个完整的工作流管理系统通常由工作流引擎、工作流设计器、流程操作、工作流客户界面、流程监控、表单设计器、与表单的集成以及与应用程序的集成等几个部分组成。工作流设计器为用户以及开发商提供了快速绘制、修改流程的方式，工作流设计器的好坏决定到工作流管理系统的易用

yanglin / 0评论 2020-08-06

软件定义网络基础---REST API的设计规范

文档是资源的单一表现形式；集合是资源的一个容器(目录)，可以向里面添加 资源(文档)；客户端管理的一个资源库，可以向仓库中新增资源 或者删除资源，或者从仓库中获取资源；可以执行一个方法，支持参数输入，结果返 回。URI中分隔符“/”一般用来对资源层级的划分

xiaouncle / 0评论 2020-01-23

软件设计规范

软件设计是把需求转化为软件系统的最重要的环节，系统设计的优劣在根本上决定了软件系统的质量。旨在帮助开发人员搞清楚“设计什么”以及“如何设计”。*详细设计阶段的重点是用户界面设计、数据库设计、模块设计、数据结构与算法设计等。人们希望在需求发生变化时，最好只对

特 / 0评论 2011-04-26

红绿灯与设计规范

过马路的时候突然注意到红绿灯，恰好最近的新交通规则也热火朝天，就顺势吐槽下关于“设计规范”的思考。提到设计规范，很多人都觉得是个很虚、不务实的绩效工程，很多企业为设计规范而设计规范，拍脑袋定规则，投了精力进去，面子起来了，最后死掉了。以前也很不情愿去制定设

homesmile / 0评论 2014-09-17

学霸的自学笔记！MATERIAL DESIGN设计规范学习心得

今天分享@東門王三 同学关于Material Design的自学成果，他的学习笔记严谨有序，触类旁通，从Material Design到其他系统的设计规范都有所研究，还认真地做了思维导图，同学们可以边学习边借鉴他的自学方法，一举两得呦。Material D

yanglin / 0评论 2014-11-15

浅谈Android系统的图标设计规范

目前移动平台的竞争日益激烈，友好的用户界面可以帮助提高用户体验满意度，图标Icon是用户界面中一个重要的组成部分，今天我们来研究和学习一下Android系统的图标设计规范。在探讨Android的icon设计之前，我们有必要先了解Android的界面是如何适

yanglin / 0评论 2011-07-15

零基础学ui设计教学教你从0基础建立设计规范

从一开始的立项到现在落地上线，可以说是从零开始进行APP全部细节的梳理并且规定规范，这一路走过来还是能总结出很多心得，本文将分为3个部分，阐述如何从0到1建立设计规范。根据不同的用途和目标，不同的团队对设计规范的制定是不一样。比如为了指导与规范全球第三方开

qtlearn / 0评论 2018-11-29

谷歌开发者讲述Material Design设计规范

AndroidL系统采用了全新的MaterialDesign设计风格，相比旧版安卓系统变化显著，风格更加现代，视觉也更加干净，没有给人杂乱之感。为了让开发者更好的理解MaterialDesign，并知道如何设计符合这种风格的应用，谷歌工程师RomanNur

梅利奥达斯 / 0评论 2014-08-07

Android 4.0设计规范 十大界面改变

由之前的物理按键导航变成了嵌入屏幕的虚拟按键。左侧为早期有4个物理按键的手机，右侧为新版只有3个虚拟按钮的手机把菜单项和搜索项从导航栏去掉，把之前通过长按主页键才出现的最近任务直接展示在导航栏中。把菜单收起的同时，在软件界面的操作栏上增加了“更多操作”，如

木叶 / 0评论 2012-01-18

腾讯实战经验！如何搭建有效的设计规范？

从作为 UI/UX 设计师典范级入门教材的 Human Interface Guidelines 和 Android Design Guideline，到各个团队的业务都有自己的设计规范，设计规范似乎越来越重要。甚至每做一个项目都会出一套新的规范，定义好设

小世界小梦想小欢乐 / 0评论 2018-04-11

[设计]GUI设计规范的规范

其实除了这些大公司，软件公司都最好有自己的GUI设计规范，即使这个规范简略一些，也可以帮助团队改善工作、提高工作效率及传递品牌价值。总的来说，GUI设计规范是指导设计人员完成GUI设计的规则和范例。

明学的白板 / 0评论 2018-03-15

干货分享！悬浮按钮设计规范和经典实践

悬浮按钮是APP应用中常见的UI元件。它轻盈、优雅、便捷又高效，是Google设计语言中一颗璀璨的明珠。悬浮按钮往往都会独立出现在界面之上，提升整体的导航，拓展页面的功能，使应用的操作更加便捷。作为Android UI交互中最关键的元素之一，悬浮按钮在用户

设计奇葩说 / 0评论 2018-02-28