日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

交互设计：界面尺寸设计大全

發(fā)布時(shí)間：2023/12/14 编程问答 29 豆豆
生活随笔 收集整理的這篇文章主要介紹了 交互设计：界面尺寸设计大全 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

自從七月公開課開始以來，就有不少新加我們的小伙伴在問：

?

“老師，請教下web端原型圖長寬一般設(shè)置成多少啊？”

“老師，web端的輸入框一般設(shè)計(jì)的長寬是多少啊？”

?

下面，就把常見的原型設(shè)計(jì)中界面尺寸一次性分享給大家，希望能在小伙伴做原型設(shè)計(jì)時(shí)有所幫助。

?

手機(jī)界面尺寸

?

smartphone?設(shè)備名稱

操作系統(tǒng)

尺寸?in

PPI

縱橫比

寬?x?高?dp

寬?x?高?px

密度?dpi

iPhone X

iOS

5.8

458

19 : 9

375 x 812

1125 x 2436

3.0?xxhdpi

iPhone 8+ (8+, 7+, 6S+, 6+)

iOS

5.5

401

16 : 9

414 x 736

1242 x 2208

3.0?xxhdpi

iPhone 8 (8, 7, 6S, 6)

iOS

4.7

326

16 : 9

375 x 667

750 x 1334

2.0?xhdpi

iPhone SE（SE, 5S, 5C）

iOS

4.0

326

16 : 9

320 x 568

640 x 1136

2.0?xhdpi

Android One

Android

4.5

218

16 : 9

320 x 569

480 x 854

1.5?hdpi

Google Pixel

Android

5.0

441

16 : 9

411 x 731

1080 x 1920

2.6?xxhdpi

Google Pixel XL

Android

5.5

534

16 : 9

411 x 731

1440 x 2560

3.5?xxxhdpi

Moto X

Android

4.7

312

16 : 9

360 x 640

720 x 1280

2.0?xhdpi

Moto X?二代

Android

5.2

424

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

Nexus 5

Android

5.0

445

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

Nexus 5X

Android

5.2

565

16 : 9

411 x 731

1080 x 1920

2.6?xxhdpi

Nexus 6

Android

6.0

493

16 : 9

411 x 731

1440 x 2560

3.5?xxxhdpi

Nexus 6P

Android

5.7

518

16 : 9

411 x 731

1440 x 2560

3.5?xxxhdpi

Samsung Galaxy S8

Android

5.8

570

18.5 : 9

360 x 740

1440 x 2960

4.0?xxxhdpi

Samsung Galaxy S8+

Android

6.2

529

18.5 : 9

360 x 740

1440 x 2960

4.0?xxxhdpi

Samsung Galaxy Note 4

Android

5.7

515

16 : 9

480 x 853

1440 x 2560

3.0?xxhdpi

Samsung Galaxy Note 5

Android

5.7

518

16 : 9

480 x 853

1440 x 2560

3.0?xxhdpi

Samsung Galaxy S5

Android

5.1

432

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

Samsung Galaxy S7 (S7, S6, S6 Edge)

Android

5.1

576

16 : 9

360 x 640

1440 x 2560

4.0?xxxhdpi

Samsung Galaxy S7 Edge

Android

5.5

534

16 : 9

360 x 640

1440 x 2560

4.0?xxxhdpi

Smartisan T2

Android

4.95

445

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

Smartisan M1

Android

5.15

428

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

Smartisan M1L

Android

5.7

515

16 : 9

480 x 853

1440 x 2560

3.0?xxhdpi

堅(jiān)果?Pro

Android

5.5

403

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

OnePlus 5

Android

5.5

401

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

OnePlus 3T

Android

5.5

401

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

Oppo R9s (R9s, R11)

Android

5.5

401

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

Oppo R9s Plus (R9s Plus, R11 Plus)

Android

6.0

368

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

Oppo A57

Android

5.2

282

16 : 9

360 x 640

720 x 1280

2.0?xhdpi

Oppo A59s

Android

5.5

267

16 : 9

360 x 640

720 x 1280

2.0?xhdpi

Oppo A37

Android

5.0

293

16 : 9

360 x 640

720 x 1280

2.0?xhdpi

小米MIX2

Android

5.99

403

18 : 9

360 x 720

1080 x 2160

3.0?xxhdpi

小米MIX

Android

6.4

362

17 : 9

360 x 680

1080 x 2040

3.0?xxhdpi

小米Note 3

Android

5.5

403

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

小米Note 2

Android

5.7

386

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

小米6

Android

5.15

428

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

小米5s

Android

5.15

428

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

小米5s Plus

Android

5.7

386

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

小米Max

Android

6.44

342

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

紅米Note 4 (4, ?Note 4X)

Android

5.5

403

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

紅米?4 (4, 4X)

Android

5.0

296

16 : 9

360 x 640

720 x 1280

2.0?xhdpi

Vivo X9 (X9, X9s)

Android

5.5

401

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

Vivo X9 Plus (X9 Plus, X9s Plus)

Android

5.88

375

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

HUAWEI P10

Android

5.1

432

16 : 9

360 x 640

1080 x 1920

3.0?xxhdpi

HUAWEI P10 Plus

Android

5.5

540

16 : 9

360 x 640

1440 x 2560

4.0?xxxhdpi

?

電腦界面尺寸

?

laptop?設(shè)備名稱

操作系統(tǒng)

尺寸?in

PPI

縱橫比

寬?x?高?dp

寬?x?高?px

密度?dpi

MacBook

OS X

12.0

226

16 : 10

1280 x 800

2304 x 1440

2.0?xhdpi

MacBook Air 11

OS X

11.6

135

16 : 9

1366 x 768

1366 x 768

1.0?mdpi

MacBook Air 13

OS X

13.3

128

16 : 10

1440 x 900

1440 x 900

1.0?mdpi

MacBook Pro 13

OS X

13.3

227

16 : 10

1280 x 800

2560 x 1600

2.0?xhdpi

MacBook Pro 15

OS X

15.4

220

16 : 10

1440 x 900

2880 x 1800

2.0?xhdpi

iMac 21.5

OS X

21.5

102

16 : 9

1920 x 1080

1920 x 1080

1.0?mdpi

iMac 21.5 4K

OS X

21.5

218

16 : 9

1920 x 1080

4096 x 2304

2.0?xhdpi

iMac 27

OS X

27

109

16 : 9

2560 x 1440

2560 x 1440

1.0?mdpi

iMac 27 5K

OS X

27

218

16 : 9

2560 x 1440

5120 x 2880

2.0?xhdpi

Surface Book

Windows

13.5

267

3 : 2

1500 x 1000

3000 x 2000

2.0?xhdpi

Surface Pro

Windows

12.3

267

3 : 2

1368 x 912

2736 x 1824

2.0?xhdpi

Surface Laptop

Windows

13.5

201

3 : 2

1128 x 752

2256 x 1504

2.0?xhdpi

Surface Studio

Windows

28

192

3 : 2

2250 x 1500

4500 x 3000

2.0?xhdpi

Dell XPS 13

Windows

13.3

276

16 : 9

1920 x 1080

3200 x 1800

1.5?hdpi

Dell XPS 15

Windows

15.6

280

16 : 9

1920 x 1080

3840 x 2160

2.0?xhdpi

小米筆記本Air 12.5

Windows

12.5

176

16 : 9

1920 x 1080

1920 x 1080

1.0?mdpi

小米筆記本Air 13.3

Windows

13.3

166

16 : 9

1920 x 1080

1920 x 1080

1.0?mdpi

小米筆記本Pro 15.6

Windows

15.6

166

16 : 9

1920 x 1080

1920 x 1080

1.0?mdpi

?

平板界面尺寸

?

tablet?設(shè)備名稱

操作系統(tǒng)

尺寸?in

PPI

縱橫比

寬?x?高?dp

寬?x?高?px

密度?dpi

iPad mini 4 (mini 4, mini 2)

iOS

7.9

326

4 : 3

768 x 1024

1536 x 2048

2.0?xhdpi

iPad Air 2 (Air 2, Air)

iOS

9.7

264

4 : 3

768 x 1024

1536 x 2048

2.0?xhdpi

iPad Pro 9.7

iOS

9.7

264

4 : 3

768 x 1024

1536 x 2048

2.0?xhdpi

iPad Pro 10.5

iOS

10.5

264

4 : 3

834 x 1112

1668 x 2224

2.0?xhdpi

iPad Pro 12.9

iOS

12.9

264

4 : 3

1024 x 1336

2048 x 2732

2.0?xhdpi

Google Pixel C

Android

10.2

308

4 : 3

900 x 1280

1800 x 2560

2.0?xhdpi

Nexus 9

Android

8.9

288

4 : 3

768 x 1024

1536 x 2048

2.0?xhdpi

Surface 3

Windows

10.8

214

16 : 9

720 x 1080

1080 x 1920

1.5?hdpi

小米平板?2

Android

7.9

326

16 : 9

768 x 1024

1536 x 2048

2.0?xhdpi

?

顯示器界面尺寸

desktop_windows? ? ??設(shè)備名稱

操作系統(tǒng)

尺寸?in

PPI

縱橫比

寬?x?高?dp

寬?x?高?px

密度?dpi

Apple Thunderbolt Display

-

27

109

16 : 9

2560 x 1440

2560 x 1440

1.0?mdpi

Dell UltraSharp HD 5K

-

27

218

16 : 9

2560 x 1440

5120 x 2880

2.0?xhdpi

Dell UltraSharp U2515H

-

25

123

16 : 9

1280 x 720

2560 x 1440

2.0?xhdpi

Dell UltraSharp U2417H

-

23.8

92

16 : 9

1920 x 1080

1920 x 1080

1.0?mdpi

Dell UltraSharp U2717D

-

27

114

16 : 9

2560 x 1440

2560 x 1440

1.0?mdpi

Dell UltraSharp U3415W

-

34

110

21 : 9

3440 x 1440

3440 x 1440

1.0?mdpi

LG 34UC98-W

-

34

110

21 : 9

3440 x 1440

3440 x 1440

1.0?mdpi

LG UltraFine 4K

-

21.5

218

16 : 9

1920 x 1080

4096 x 2304

2.0?xhdpi

LG UltraFine 5K

-

27

218

16 : 9

2560 x 1440

5120 x 2880

2.0?xhdpi

?

手表界面尺寸

?

watch?設(shè)備名稱

操作系統(tǒng)

尺寸?in

PPI

縱橫比

寬?x?高?dp

寬?x?高?px

密度?dpi

Apple Watch 38mm

watch OS

1.5

326

5 : 4

136 x 170

272 x 340

2.0?xhdpi

Apple Watch 42mm

watch OS

1.7

326

5 : 4

156 x 195

312 x 390

2.0?xhdpi

Moto 360

Android

1.6

205

32 : 29

241 x 218

320 x 290

1.3?tvdpi

Moto 360 v2 42mm

Android

1.4

263

65 : 64

241 x 244

320 x 325

1.3?tvdpi

Moto 360 v2 46mm

Android

1.6

263

33 : 32

241 x 248

320 x 330

1.3?tvdpi

總結(jié)

以上是生活随笔為你收集整理的交互设计：界面尺寸设计大全的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。