移动端App开发 - 02 - iPhone/iPad/Android UI尺寸规范

移动端app开发 - iPhone/iPad/Android UI尺寸规范

• 本笔记抛去无用的前期分析什么的，全是干货，简洁干练
• 本笔记不单独针对 ios 或者 Android，两种都介绍，当然我们实际开发过程中，也往往是 Android一套，ios一套

（一）设计规范与设计流程

• 了解设计规范，熟悉 Android 和 ios 规范差别，了解界面中主要设计元素
• 关键词： ios 设计基础规范，Android 设计规范，常用界面尺寸，布局规范，图标规范，文字规范
• 设计规范可以很好保证产品一致性，提升同伴之间的沟通效率，简单地说，实际规范是一份由很多范例组成的文档，例如：一级标题用36px，二级标题用30px，等等等

iOS 和 Android 基础规范

• 这里从界面尺寸 + 布局 + 控件 + icon + 字体 五个方面介绍

ios 常用界面分辨率尺寸：

iPhone界面尺寸

设备

分辨率

PPI

状态栏高度

导航栏高度

标签栏高度

iPhone6 plus设计版

1242×2208 px

401PPI

60px

132px

146px

                        <p>iPhone6 plus放大版</p>
                    </td>
                    <td><span>1125×2001 px</span></td>
                    <td><span>401PPI</span></td>
                    <td><span>54px</span></td>
                    <td><span>132px</span></td>
                    <td><span>146px</span></td>
                </tr>
                <tr>
                	<td class="tad_fir">

                        <p>iPhone6 plus物理版</p>
                    </td>
                    <td><span>1080×1920 px</span></td>
                    <td><span>401PPI</span></td>
                    <td><span>54px</span></td>
                    <td><span>132px</span></td>
                    <td><span>146px</span></td>
                </tr>
                <tr>
                	<td class="tad_fir">

                        <p>iPhone6</p>
                    </td>
                    <td><span>750×1334 px</span></td>
                    <td><span>326PPI</span></td>
                    <td><span>40px</span></td>
                    <td><span>88px</span></td>
                    <td><span>98px</span></td>
                </tr>
                <tr>
                	<td class="tad_fir">
                    
                        <p>iPhone5 - 5C  - 5S</p>
                    </td>
                    <td><span>640×1136 px</span></td>
                    <td><span>326PPI</span></td>
                    <td><span>40px</span></td>
                    <td><span>88px</span></td>
                    <td><span>98px</span></td>
                </tr>
                <tr>
                    <td class="tad_fir">

                        <p>iPhone4 - 4S</p>
                    </td>
                    <td><span>640×960 px</span></td>
                    <td><span>326PPI</span></td>
                    <td><span>40px</span></td>
                    <td><span>88px</span></td>
                    <td><span>98px</span></td>
                </tr>
                <tr>
                    <td class="tad_fir">
    
                        <p class="tad_td">iPhone &amp; iPod Touch第一代、第二代、第三代</p>
                    </td>
                    <td><span>320×480 px</span></td>
                    <td><span>163PPI</span></td>
                    <td><span>20px</span></td>
                    <td><span>44px</span></td>
                    <td><span>49px</span></td>
                </tr>
            </tbody></table>
        </div>

<h2>iPhone应用图标尺寸：</h2> 
<div id="mod_tad_1">
        	<table>
            	<tbody><tr>
                	<th>设备</th>
                    <th>App Store</th>
                    <th>程序应用</th>
                    <th>主屏幕</th>
                    <th>Spotlight搜索</th>
                    <th>标签栏</th>
                    <th>工具栏和导航栏</th>
                </tr>
                <tr>
                	<td class="tad_fir2">

                        <p>iPhone6 Plus <em>(@3×)</em></p>
                    </td>
                    <td><span>1024×1024 px</span></td>
                    <td><span>180×180 px</span></td>
                    <td><span>114×114 px</span></td>
                    <td><span>87×87 px</span></td>
                    <td><span>75×75 px</span></td>
                    <td><span>66×66 px</span></td>
                </tr>
                <tr>
                	<td class="tad_fir2">

                        <p>iPhone6 <em>(@2×)</em></p>
                    </td>
                    <td><span>1024×1024 px</span></td>
                    <td><span>120×120 px</span></td>
                    <td><span>114×114 px</span></td>
                    <td><span>58×58 px</span></td>
                    <td><span>75×75 px</span></td>
                    <td><span>44×44 px</span></td>
                </tr>
                <tr>
                	<td class="tad_fir2">

                        <p>iPhone5 - 5C - 5S <em>(@2×)</em></p>
                    </td>
                    <td><span>1024×1024 px</span></td>
                    <td><span>120×120 px</span></td>
                    <td><span>114×114 px</span></td>
                    <td><span>58×58 px</span></td>
                    <td><span>75×75 px</span></td>
                    <td><span>44×44 px</span></td>
                </tr>
                <tr>
                    <td class="tad_fir2">

                        <p>iPhone4 - 4S <em>(@2×)</em></p>
                    </td>
                    <td><span>1024×1024 px</span></td>
                    <td><span>120×120 px</span></td>
                    <td><span>114×114 px</span></td>
                    <td><span>58×58 px</span></td>
                    <td><span>75×75 px</span></td>
                    <td><span>44×44 px</span></td>
                </tr>
                <tr>
                    <td class="tad_fir2">
                    	
                        <p class="tad_td">iPhone &amp; iPod Touch第一代、第二代、第三代</p>
                    </td>
                    <td><span>1024×1024 px</span></td>
                    <td><span>120×120 px</span></td>
                    <td><span>57×57 px</span></td>
                    <td><span>29×29 px</span></td>
                    <td><span>38×38 px</span></td>
                    <td><span>30×30 px</span></td>
                </tr>
            </tbody></table>
</div>    <br>

iPad的设计尺寸

<div id="mod_tad_1">
        	<table>
            	<tbody><tr>
                	<th>设备</th>
                    <th>尺寸</th>
                    <th>分辨率</th>
                    <th>状态栏高度</th>
                    <th>导航栏高度</th>
                    <th>标签栏高度</th>
                </tr>
                <tr>
                	<td class="tad_fir">

                        <p class="tad_td">iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2</p>
                    </td>
                    <td><span>2048×1536 px</span></td>
                    <td><span>264PPI</span></td>
                    <td><span>40px</span></td>
                    <td><span>88px</span></td>
                    <td><span>98px</span></td>
                </tr>
                <tr>
                    <td class="tad_fir">

                        <p>iPad 1 - 2</p>
                    </td>
                    <td><span>1024×768 px</span></td>
                    <td><span>132PPI</span></td>
                    <td><span>20px</span></td>
                    <td><span>44px</span></td>
                    <td><span>49px</span></td>
                </tr>
                <tr>
                    <td class="tad_fir">
  
                        <p>iPad Mini</p>
                    </td>
                    <td><span>1024×768 px</span></td>
                    <td><span>163PPI</span></td>
                    <td><span>20px</span></td>
                    <td><span>44px</span></td>
                    <td><span>49px</span></td>
                </tr>
            </tbody></table>
</div>
<br>

<h2>iPad图标尺寸：</h2>

设备

App Store

程序应用

主屏幕

Spotlight搜索

标签栏

工具栏和导航栏

                        <p class="tad_td">iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2</p>
                    </td>
                    <td><span>1024×1024 px</span></td>
                    <td><span>180×180 px</span></td>
                    <td><span>144×144 px</span></td>
                    <td><span>100×100 px</span></td>
                    <td><span>50×50 px</span></td>
                    <td><span>44×44 px</span></td>
                </tr>
                <tr>
                    <td class="tad_fir">

                        <p>iPad 1 - 2</p>
                    </td>
                    <td><span>1024×1024 px</span></td>
                    <td><span>90×90 px</span></td>
                    <td><span>72×72 px</span></td>
                    <td><span>50×50 px</span></td>
                    <td><span>25×25 px</span></td>
                    <td><span>22×22 px</span></td>
                </tr>
                <tr>
                    <td class="tad_fir">
                    
                        <p>iPad Mini</p>
                    </td>
                    <td><span>1024×1024 px</span></td>
                    <td><span>90×90 px</span></td>
                    <td><span>72×72 px</span></td>
                    <td><span>50×50 px</span></td>
                    <td><span>25×25 px</span></td>
                    <td><span>22×22 px</span></td>
                </tr>
            </tbody></table>
</div>    <br>
<h3>
</h3>
<h2>Android SDK模拟机的尺寸</h2>
    <div id="mod_tad_1">
        	<table>
            	<tbody><tr>
                	<th>屏幕大小</th>
                    <th>低密度（120）</th>
                    <th>中等密度（160）</th>
                    <th>高密度（240）</th>
                    <th>超高密度（320）</th>
                </tr>
                <tr>
                	<td class="tad_fir_1">
                        <p>小屏幕</p>
                    </td>
                    <td><span>  QVGA（240×320）</span></td>
                    <td><span>&nbsp;</span></td>
                    <td><span>     480×640</span></td>
                    <td><span>&nbsp;</span></td>
                </tr>
                <tr>
                    <td class="tad_fir_1">
                        <p>普通屏幕</p>
                    </td>
                    <td>
                        <span>
                              WQVGA400（240×400）
							  WQVGA432（240×432）
                        </span>
                    </td>
                    <td><span>  HVGA（320×480）</span></td>
                    <td>
                    	<span>
                        	WVGA800（480×800）
							WVGA854（480×854）
							600×1024
						</span>
					</td>
                    <td><span>  640×960</span></td>
                </tr>
                <tr>
                    <td class="tad_fir_1">
                        <p>大屏幕</p>
                    </td>
                    <td>
                    	<span>
                        	WVGA800 *（480×800）
							WVGA854 *（480×854）
						</span>
					</td>
                    <td>
                    	<span>
                        	WVGA800 *（480×800） 
							WVGA854 *（480×854） 
                            600x1024
						</span>
					</td>
                    <td><span>&nbsp;</span></td>
                    <td><span>&nbsp;</span></td>
                </tr>
                <tr>
                    <td class="tad_fir_1">
                        <p>超大屏幕</p>
                    </td>
                    <td><span>   1024×600</span></td>
                     <td>
                    	<span>
                        	1024×768  
							1280×768WXGA（1280×800）
						</span>
					</td>
                    <td>
                    	<span>
                        	1536×1152  
							1920×1152  
                            1920×1200
						</span>
					</td>
                    <td>
                    	<span>
                        	2048×1536   
							2560×1600
						</span>
					</td>
                </tr>
            </tbody></table>
</div>

Android的图标尺寸

屏幕大小	启动图标	操作栏图标	上下文图标	系统通知图标(白色)	最细笔画
320×480 px	48×48 px	32×32 px	16×16 px	24×24 px	不小于2 px
480×800px 480×854px 540×960px	72×72 px	48×48 px	24×24 px	36×36 px	不小于3 px
720×1280 px	48×48 dp	32×32 dp	16×16 dp	24×24 dp	不小于2 dp
1080×1920 px	144×144 px	96×96 px	48×48 px	72×72 px	不小于6 px

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

名称	分辨率	比率 rate (针对320px)	比率 rate (针对640px)	比率 rate (针对750px)
idpi	240×320	0.75	0.375	0.32
mdpi	320×480	1	0.5	0.4267
hdpi	480×800	1.5	0.75	0.64
xhdpi	720×1280	2.25	1.125	1.042
xxhdpi	1080×1920	3.375	1.6875	1.5

主流Android手机分辨率和尺寸

设备	分辨率	尺寸	设备	分辨率	尺寸
<p>魅族MX2</p> </td> <td><span>4.4英寸</span></td> <td><span>800×1280 px</span></td> <td class="tad_fir"> <p>魅族MX3</p> </td> <td><span>5.1英寸</span></td> <td><span>1080×1280 px</span></td> </tr> <tr> <td class="tad_fir"> <p>魅族MX4</p> </td> <td><span>5.36英寸</span></td> <td><span>1152×1920 px</span></td> <td class="tad_fir"> <p>魅族MX4 Pro<em>未上市</em></p> </td> <td><span>5.5英寸</span></td> <td><span>1536×2560 px</span></td> </tr> <tr> <td class="tad_fir"> <p>三星GALAXY Note 4</p> </td> <td><span>5.7英寸</span></td> <td><span>1440×2560 px</span></td> <td class="tad_fir"> <p>三星GALAXY Note 3</p> </td> <td><span>5.7英寸</span></td> <td><span>1080×1920 px</span></td> </tr> <tr> <td class="tad_fir"> <p>三星GALAXY S5</p> </td> <td><span>5.1英寸</span></td> <td><span>1080×1920 px</span></td> <td class="tad_fir"> <p>三星GALAXY Note II</p> </td> <td><span>5.5英寸</span></td> <td><span>720×1280 px</span></td> </tr> <tr> <td class="tad_fir"> <p>索尼Xperia Z3</p> </td> <td><span>5.2英寸</span></td> <td><span>1080×1920 px</span></td> <td class="tad_fir"> <p>索尼XL39h</p> </td> <td><span>6.44英寸</span></td> <td><span>1080×1920 px</span></td> </tr> <tr> <td class="tad_fir"> <p>HTC Desire 820</p> </td> <td><span>5.5英寸</span></td> <td><span>720×1280 px</span></td> <td class="tad_fir"> <p>HTC One M8</p> </td> <td><span>4.7英寸</span></td> <td><span>1080×1920 px</span></td> </tr> <tr> <td class="tad_fir"> <p>OPPO Find 7</p> </td> <td><span>5.5英寸</span></td> <td><span>1440×2560 px</span></td> <td class="tad_fir"> <p>OPPO N1</p> </td> <td><span>5.9英寸</span></td> <td><span>1080×1920 px</span></td> </tr> <tr> <td class="tad_fir"> <p>OPPO R3</p> </td> <td><span>5英寸</span></td> <td><span>720×1280 px</span></td> <td class="tad_fir"> <p>OPPO N1 Mini</p> </td> <td><span>5英寸</span></td> <td><span>720×1280 px</span></td> </tr> <tr> <td class="tad_fir"> <p>小米M4</p> </td> <td><span>5英寸</span></td> <td><span>1080×1920 px</span></td> <td class="tad_fir"> <p>小米红米Note</p> </td> <td><span>5.5英寸</span></td> <td><span>720×1280 px</span></td> </tr> <tr> <td class="tad_fir"> <p>小米M3</p> </td> <td><span>5英寸</span></td> <td><span>1080×1920 px</span></td> <td class="tad_fir"> <p>小米红米1S</p> </td> <td><span>4.7英寸</span></td> <td><span>720×1280 px</span></td> </tr> <tr> <td class="tad_fir"> <p>小米M3S<em>未上市</em></p> </td> <td><span>5英寸</span></td> <td><span>1080×1920 px</span></td> <td class="tad_fir"> <p>小米M2S</p> </td> <td><span>4.3英寸</span></td> <td><span>720×1280 px</span></td> </tr> <tr> <td class="tad_fir"> <p>华为荣耀6</p> </td> <td><span>5英寸</span></td> <td><span>1080×1920 px</span></td> <td class="tad_fir"> <p>锤子T1</p> </td> <td><span>4.95英寸</span></td> <td><span>1080×1920 px</span></td> </tr> <tr> <td class="tad_fir"> <p>LG G3</p> </td> <td><span>5.5英寸</span></td> <td><span>1440×2560 px</span></td> <td class="tad_fir"> <p>OnePlus One</p> </td> <td><span>5.5英寸</span></td> <td><span>1080×1920 px</span></td> </tr> </tbody></table> </div> <h2>主流浏览器的界面参数与份额</h2> <div id="mod_tad_1"> <table> <tbody><tr> <th>浏览器</th> <th>状态栏</th> <th>菜单栏</th> <th>滚动条</th> <th>市场份额(国内)</th> </tr> <tr> <td class="tad_fir"> <p>Chrome 浏览器</p> </td> <td><span>22 px（浮动出现）</span></td> <td><span>60 px</span></td> <td><span>15 px</span></td> <td><span>8%</span></td> </tr> <tr> <td class="tad_fir"> <p>火狐浏览器</p> </td> <td><span>20 px</span></td> <td><span>132 px</span></td> <td><span>15 px</span></td> <td><span>1%</span></td> </tr> <tr> <td class="tad_fir"> <p>IE浏览器</p> </td> <td><span>24 px</span></td> <td><span>120 px</span></td> <td><span>15 px</span></td> <td><span>35%</span></td> </tr> <tr> <td class="tad_fir"> <p>360 浏览器</p> </td> <td><span>24 px</span></td> <td><span>140 px</span></td> <td><span>15 px</span></td> <td><span>28%</span></td> </tr> <tr> <td class="tad_fir"> <p>遨游浏览器</p> </td> <td><span>24 px</span></td> <td><span>147 px</span></td> <td><span>15 px</span></td> <td><span>1%</span></td> </tr> <tr> <td class="tad_fir"> <p>搜狗浏览器</p> </td> <td><span>25 px</span></td> <td><span>163 px</span></td> <td><span>15 px</span></td> <td><span>5%</span></td> </tr> </tbody></table> </div> <h2>系统分辨率统计</h2> <div id="mod_tad_1"> <table> <tbody><tr> <th>分辨率</th> <th>占有率</th> <th>分辨率</th> <th>占有率</th> </tr> <tr> <td class="tad_fir_1"><p>1366×768</p></td> <td><span>15%</span></td> <td class="tad_fir_1"><p>1440×900</p></td> <td><span>13%</span></td> </tr> <tr> <td class="tad_fir_1"><p>1920×1080</p></td> <td><span>11%</span></td> <td class="tad_fir_1"><p>1600×900</p></td> <td><span>5%</span></td> </tr> <tr> <td class="tad_fir_1"><p>1280×800</p></td> <td><span>4%</span></td> <td class="tad_fir_1"><p>1280×1024</p></td> <td><span>3%</span></td> </tr> <tr> <td class="tad_fir_1"><p>1680×1050</p></td> <td><span>2.8%</span></td> <td class="tad_fir_1"><p>320×480</p></td> <td><span>2.4%</span></td> </tr> <tr> <td class="tad_fir_1"><p>480×800</p></td> <td><span>2%</span></td> <td class="tad_fir_1"><p>1280×768</p></td> <td><span>1%</span></td> </tr> </tbody></table> </div> 更多文章链接：移动端App开发 - 本笔记不允许任何个人和组织转载