iOS规范尺寸OS 10.9 (1)

一张图带你快速掌握iOS设计规范

每次发文章，评论里总会有大堆小白们在问：~求最新iOS设计规范链接~~求中文翻译版~~

你看的是哪个版本，我的怎么没有~这次就做下基础知识普及，以更简单易懂的方式整理

下iOS 9 的设计规范给大家。

iOS设计规范，指的是苹果开发者官网上面的 iOS 人机交互指南（iOS Human Interface

Guideline）。制作这个规范的目的是为了让所有安装到iOS系统中的App都遵从某些特定的视觉特性、交互特性，以达到风格一致性的使用体验。另一个层面，也是便于让设计人员和开发人员能

够更好的理解iOS系统，更合理的运用系统提供的功能和接口，更高效的制作出App。

概述首先上一张整体结构图：

iOS人机交互指南主要分为5个章节：

1. iOS UI设计基础知识（UI Design Basics）–主要介绍针对iOS系统的特性，在设计时要考虑到的各种影响因素。比如多尺寸屏幕的自适应；程序的启动与停止时的注意事项；iOS的布局、配色、

字体规范等等。

2. 设计策略（Design Strategies）–介绍了交互设计的一些原则以及设计实现App的建议流程。最后举了几个案例进行说明。

3. iOS技术（iOS Technologies）–介绍了集成到iOS系统内的一些软硬件技术，方便在设计开发功能时加以利用。

4. UI元素简介（UI Elements）–介绍iOS系统中的每个UI元素（交互控件）的使用方式和注意事项。在了解了这些UI元素后，设计者会更加了解系统提供了哪些设计元素，以便于提高开发效率和统

一视觉、交互体验。也能很好的限制住设计师们野马一样的思维。

5. 图标与图像设计（Icon and Image Design）–介绍了iOS系统对于图标和图像的设计的一些要求和注意事项。

iOS App设计原则

iOS的整体设计原则，在规范的第一章已经清楚的说明：1. 设计要服从于功能（或内容）

1 / 15

IOS和安卓ui设计常用尺寸及基本知识

iOS app

iOS app 图标的圆角半径是多少？

括弧里面是对应的半径大小

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)2 / 15 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 320PX3 / 15 iPhone的设计尺寸(ios尺寸)

一. APP设计规范(ios)

————设计稿一般不使用Android的尺寸（因为Android的五花八门）

1. iphone界面的设计尺寸（设计稿默认iphone6）

（1）iphone6 plus设计版[iPhone7 plus]（@3x）

分辨率1242x2208px ppi:401 状态栏：60px 导航栏：132px 标签栏：146px

（2）iphone6 plus放大版（@3x）

分辨率1125x2001px ppi:401 状态栏：54px 导航栏：132px 标签栏：146px

（3）iphone6 plus物理版（@3x）

分辨率1080x1920px ppi:401 状态栏：54px 导航栏：132px 标签栏：146px

（4）iphone6 [iPhone7]（设计稿默认）（@2x）

分辨率750x1334px ppi:326 状态栏：40px 导航栏：88px 标签栏：98px

（5）iphone5 - 5c -5s（@2x）

分辨率640x1136px ppi326 状态栏：40px 导航栏：88px 标签栏：98px

（6）iphone4 – 4s（@2x）

分辨率640x960px ppi:326 状态栏：40px 导航栏：88px 标签栏：98px

（1）iphone & ipod Touch第一、二、三代（@1x）

分辨率320x480px ppi:163 状态栏：20px 导航栏：44px 标签栏：49px

2. iphone图标设计尺寸

（1）iphone6 plus （@3x）

App store：1024x1024px 程序应用：180x180 主屏幕：152x152

ios移动端切图及前端规范

移动端IOS知识普及：IOS标准分辨率：1242px * 2208px

切⽚要求：1、 设计稿是按标准分辨率1242X2208设计，图⽚资源尺⼨则是3倍图尺⼨，将整个设计图压缩成750X1334，图⽚资源尺⼨则是2倍图尺⼨，在⼆倍图的基础上压缩成50%，图⽚资源尺⼨则是1倍图尺⼨；2、产品效果图独⽴切⽚，即是每张效果图独⽴建⽴⼀个⽂件夹（命名以效果图名称为准），⽂件夹内容包含1倍图⽂件、2倍图⽂件、 3倍图⽂件和标识⽂件

3、图⽚命名要求语义化，格式为png；

4、图⽚资源需要备有1倍图、2倍图、3倍图，3倍图命名规则为：添加后缀@3x；2倍图命名规则为：添加后缀@2x；例如：1倍图：abg.png，2倍图则为：abc@2x.png，3倍图则为：abc@3x.png;

5、字体:IOS默认字体—— 英⽂ HelveticalNeue 中⽂ ⿊体；字体⼤⼩采⽤点pt，设计稿以相对单位px，字体⼤⼩需要进⾏转化，转化公式为：px*72/96=pt（eg：12px*72/96=9pt），字体颜⾊只需给出rgb值（eg：color：rgb（255，255，255））；6、页⾯纯⾊背景需标出rgb值，如果有透明度则需标出rgba值，其他特殊背景直接切图；

7、页⾯的图标、⾊块、按钮的⾼度都必须是4的倍数，最⼩像素不能低于44px，如不够可以添加补⽩；

8、页⾯外边距留⽩为10px；

9.启动图标1024*1024,png格式，不能透明底，透明的部分补⽩⾊。

IOS切图规范：

设计图：1242X2208

三倍图：按1242X2208来切 iphone plus

⼆倍图：将整个设计图压缩成750X1334 按750X1334切

⼀倍图：在⼆倍图的基础上压缩成50%⼀倍图

Ios启动图

1. 图标按照最⼤1024*1024来设计，之后按照⽐例缩⼩到每个尺⼨，再进⾏调整，提交没有⾼光和阴影的直⾓⽅形图即可；2. 29*293. 58*584. 40*405. 80*80