IOS与安卓屏幕尺寸设计参数参考

2024-07-28 作者:

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)

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界面尺寸：

设备 分辨率

状态栏高度

60px

导航栏高度

132px

标签栏(工具栏)高度

146px iPhone6 plus设计版 1242 × 2208

iOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程 iPhone6 plus物理版 1080 × 1920 54px 132px 146px

iOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程

iPhone6

iPhone5s

iPhone5c

iPhone5

iPhone4s

iPhone4

750 × 1334

640 × 1136

640 × 1136

640 × 1136

640 × 960

640 × 960

40px

40px

40px

40px

40px

40px

88px

88px

88px

88px

88px

88px

98px(88px)

98px(88px)

98px(88px)

98px(88px)

98px(88px)

98px(88px)

iPhone图标尺寸：

系统

iOS 6-

iOS 7+

iPhone 6 iPad and iPad 2 and

iPhone 6 iPhone 4s

and iPhone iPad mini iPad mini

Plus (@3x) (@2x)

5 (@2x) (@2x) (@1x)

分辨率

90px – 1024px

90px – 1024px

圆角大小

约为图标宽度 × 0.175

约为图标宽度 × 0.225

Asset

App icon

(required for 180 × 180 120 × 120 120 × 120 152 × 152 76 × 76

all apps) App icon for

the App Store 1024 ×

(required for 1024

all apps)

1024 ×

1024

1024 ×

1024 × 1024 1024 × 1024

1024

For iPhone

6, use a

Launch file or Use a launch file 1536 × 2048 768 × 1024

image launch file (see Launch (portrait) (portrait)

640 × 960

(required for (see Launch Images) 2048 × 1536 1024 × 768

all apps) Images) For iPhone (landscape) (landscape)

5, 640 ×

1136

Spotlight

search results

120 × 120 80 × 80

icon

(recommended)

Settings icon

87 × 87

(recommended)

58 × 58

80 × 80 80 × 80 40 × 40

58 × 58 58 × 58 29 × 29

Toolbar and

navigation bar About 66 × About 44 × About 44 × About 44 × About 22 ×

icon 66 44 44 44 22

(optional)

About 75 × About 50 × About 50 × About 50 × About 25 ×

Tab bar icon 75 50 50 50 25

(optional) (maximum: (maximum: (maximum: (maximum: (maximum:

144 × 96) 96 × 64) 96 × 64) 96 × 64) 48 × 32)

Default

Newsstand At least At least At least At least

At least 512

cover icon for 1024 pixels 1024 pixels 1024 pixels 1024 pixels

pixels on

the App Store on the on the on the on the

the longest

(required for longest longest longest longest

edge

Newsstand edge edge edge edge

apps)

Web clip icon

(recommended

180 × 180 120 × 120 120 × 120 152 × 152 76 × 76

for web apps

and websites)

iPad的设计尺寸

iPad界面尺寸：

设备

iPad6/iPad Air2

分辨率 状态栏高度 导航栏高度 标签栏高度

40px

40px

40px

40px

20px

20px

20px

88px

88px

88px

88px

44px

44px

44px

98px

98px

98px

98px

49px

49px

49px

2048 × 1536

iPad5/iPad Air/ipad mini 2 2048 × 1536

iPad4/ipad mini

iPad3/the new iPad

iPad2

iPad1

iPad Mini

2048 × 1536

2048 × 1536

1024 × 768

1024 × 768

1024 × 768

iPad图标尺寸：

系统

iOS 6-

iOS 7+

Asset

分辨率

90px – 1024px

90px – 1024px

圆角大小

约为图标宽度 × 0.175

约为图标宽度 × 0.225

iPhone 6 iPad and iPad 2 and

iPhone 6 iPhone 4s

and iPhone iPad mini iPad mini

Plus (@3x) (@2x)

5 (@2x) (@2x) (@1x)

App icon

(required for 180 × 180 120 × 120 120 × 120 152 × 152 76 × 76

all apps)

App icon for

the App Store 1024 ×

(required for 1024

all apps)

1024 ×

1024

1024 ×

1024 × 1024 1024 × 1024

1024

For iPhone

6, use a

Launch file or Use a launch file 1536 × 2048 768 × 1024

image launch file (see Launch (portrait) (portrait)

640 × 960

(required for (see Launch Images) 2048 × 1536 1024 × 768

all apps) Images) For iPhone (landscape) (landscape)

5, 640 ×

1136

Spotlight 120 × 120 80 × 80 80 × 80 80 × 80 40 × 40 search results

icon

(recommended)

Settings icon

87 × 87

(recommended)

58 × 58 58 × 58 58 × 58 29 × 29

Toolbar and

navigation bar About 66 × About 44 × About 44 × About 44 × About 22 ×

icon 66 44 44 44 22

(optional)

About 75 × About 50 × About 50 × About 50 × About 25 ×

Tab bar icon 75 50 50 50 25

(optional) (maximum: (maximum: (maximum: (maximum: (maximum:

144 × 96) 96 × 64) 96 × 64) 96 × 64) 48 × 32)

Default

Newsstand At least At least At least At least

At least 512

cover icon for 1024 pixels 1024 pixels 1024 pixels 1024 pixels

pixels on

the App Store on the on the on the on the

the longest

(required for longest longest longest longest

edge

Newsstand edge edge edge edge

apps)

Web clip icon

(recommended

180 × 180 120 × 120 120 × 120 152 × 152 76 × 76

for web apps

and websites)

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）

类型 hdpi mdpi ldpi

ICON 96*96 72*72 48*48 36*36

Notification图标 48*48 32*32 24*24

标签Tab图标 48*48 32*32 24*24

Android安卓系统dp/sp/px换算表

名称

idpi

mdpi

hdpi

xhdpi

xxhdpi

分辨率

240 × 320

320 × 480

480 × 800

720 × 1280

1080 × 1920

比率 rate (针比率 rate (针比率 rate (针对320px) 对640px) 对750px)

0.75

1

1.5

2.25

3.375

0.375

0.5

0.75

1.125

1.6875

0.32

0.4267

0.64

1.042

1.5

主流Android手机分辨率和尺寸

设备 分辨率 尺寸 设备 分辨率 尺寸

1080 ×

1920

1200 ×

1920

三星Galaxy S3 4.8英寸 720 × 1280 三星Galaxy S4 5英寸

三星Galaxy S5 5.1英寸

小米1

小米2

小米3

小米4

红米Note

1080 ×

1920

三星Galaxy S6

小米1s

小米2s

4.5英寸

4英寸 480 × 854

4.3英寸 720 × 1280

5英寸

5英寸

1080 ×

1920

1080 ×

1920

4英寸 480 × 854

4.3英720 × 1280

寸

1080 ×

1920

小米3s(概念) 5英寸

红米

4.7英720 × 1280

寸

1080 ×

OPPO Find 7 5.5英寸 1440 × OPPO Find 7 轻装5.5英5.5英寸 720 × 1280 2560

OPPO N1 mini

OPPO R1S

5英寸 720 × 1280

5英寸 720 × 1280

1080 ×

1920

1080 ×

1920

1080 ×

1920

版

OPPO R3

华为 Ascend

Mate7

华为 Ascend

Mate2

寸 1920

5英寸 720 × 1280

6英寸

1080 ×

1920

锤子 Smartisan 4.95英T1 寸

华为 Ascend P7 5英寸

华为 荣耀6

华为 C199

HTC One (M8)

魅族 MEIZU MX4

5英寸

6.1英720 × 1280

寸

5.5英寸 720 × 1280

5英寸

5.36英寸

1080 ×

1920

1152 ×

1920

5.5英HTC Desire 820 720 × 1280

寸

魅族 MEIZU MX3

5.1英寸

1080 ×

1800