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

自从七月公开课开始以来，就有不少新加我们的小伙伴在问：

 

“老师，请教下web端原型图长宽一般设置成多少啊？”

“老师，web端的输入框一般设计的长宽是多少啊？”

 

下面，就把常见的原型设计中界面尺寸一次性分享给大家，希望能在小伙伴做原型设计时有所帮助。

 

手机界面尺寸

 

smartphone 设备名称	操作系统	尺寸 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