[界面]手机界面尺寸完全使用手册

VFX视效设2019-03-13 13:05:29

今天分享的文章是移动界面设计尺寸,这是界面设计中最基本的知识点,我整理了iPhone & Android界面尺寸,其中需要强调的是iPhone 7的放大版尺寸和iPhone 7Plus的放大版尺寸不在表格中,希望大家以后看到这两个尺寸不要感到陌生就好。


iPhone 7放大版:640×1136(同iPhone5) 

iPhone 7Plus放大版:1125×2001 


点击查看大图(右图为7Plus放大版)



iPhone手机界面尺寸大小


型号

尺寸

倍率

发售时间

1

320×480

1

2007629

3G

320×480

1

2008711

3GS

320×480

1

2009619

4

640×960

2

2010624

4S

640×960

2

20111014

5

640×1136

2

2012921

5S/5C

640×1136

2

2013920

6

750×1334

2

2014919

6 Plus

1242×2208

3

2014919

6S

750×1334

2

2015925

6S Plus

1242×2208

3

2015925

SE

640×1136

2

2016321

7

750×1334

2

2016916

7 Plus

1242×2208

3

2016916


iOS移动界面分辨率排行


点击查看大图


通过排行我们可以看到,目前iPhone主流的尺寸还是@2x以及@3x尺寸大小,因此我们设计的时候还是要做好适配工作。


@2x:750×1334 / 640×1136

@3x:1242×2208



Android手机界面尺寸大小


密度

尺寸

倍率

系统密度

LDPI

240×320

0.75

120

MDPI

320×480

1

160

360×640

HDPI

480×800

1.5

240

480×854

540×960

XHDPI

720×1280

2

320

720×1184

720×1200

XXHDPI

1080×1920

3

480

1080×1812

1080×1776


XXXHDPI

1440×2560

4

640


Android移动界面分辨率排行


点击查看大图


Android的界面尺寸一直以来由于手机厂家多的原因,界面尺寸尤其的多,我通过百度流量研究院查到的尺寸就超过30个屏幕尺寸,面对这么多不同的尺寸,谷歌公司非常机智的解决了这一历史性的难题,通过不同的屏幕密度对应出尺寸,界面比例一致或是差不多的可以直接选择相近似的倍率关系,这简直是设计师的福音啊! 通过排行我们可以看到,目前Android主流的尺寸主要还是@1.5x@2x以及@3x尺寸大小,因此我们设计师只要做好这方面的适配工作就可以了。


@1.5x:480×854 / 540×960

@2x:720×1280

@3x:1080×1920


希望这篇文章对大家有所帮助,如果你还有尺寸相关的问题,留言给我吧!


Copyright © 三星三星手机价格联盟@2017