iOS和Android的app界面设计规范

   <p>记录一下iOS和Andoird的界面设计规范，方便进行标准的产品设计，并与设计师顺畅沟通</p>    <h3>iOS篇</h3>    <p>界面尺寸</p>    <table>     <thead>      <tr>       <th>设备</th>       <th>分辨率</th>       <th>状态栏高度</th>       <th>导航栏高度</th>       <th>标签栏高度</th>      </tr>     </thead>     <tbody>      <tr>       <td>iPhone6 plus</td>       <td>1242×2208 px</td>       <td>60px</td>       <td>132px</td>       <td>147px</td>      </tr>      <tr>       <td>iPhone6</td>       <td>750×1334 px</td>       <td>40px</td>       <td>88px</td>       <td>98px</td>      </tr>      <tr>       <td>iPhone5/5s/5c</td>       <td>640×1136 px</td>       <td>40px</td>       <td>88px</td>       <td>98px</td>      </tr>      <tr>       <td>iPhone4/4s</td>       <td>640×960 px</td>       <td>40px</td>       <td>88px</td>       <td>98px</td>      </tr>      <tr>       <td>iPad3/4/Air/Air2/mini2</td>       <td>2048×1536 px</td>       <td>40px</td>       <td>88px</td>       <td>98px</td>      </tr>      <tr>       <td>iPad1/2</td>       <td>1024×768 px</td>       <td>20px</td>       <td>44px</td>       <td>49px</td>      </tr>      <tr>       <td>iPad mini</td>       <td>1024×768 px</td>       <td>20px</td>       <td>44px</td>       <td>49px</td>      </tr>     </tbody>    </table>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/5ef5c4897e4f1463d6bf76f1d8152698.png"></p>    <p style="text-align: center;">Paste_Image.png</p>    <p>图标尺寸</p>    <table>     <thead>      <tr>       <th>设备</th>       <th>App Store</th>       <th>程序应用</th>       <th>主屏幕</th>       <th>spotlight搜索</th>       <th>标签栏</th>       <th>工具栏和导航栏</th>      </tr>     </thead>     <tbody>      <tr>       <td>iPhone6 plus</td>       <td>1024*1024px</td>       <td>180*180px</td>       <td>144×144px</td>       <td>87×87 px</td>       <td>75*75px</td>       <td>66*66px</td>      </tr>      <tr>       <td>iPhone6</td>       <td>1024*1024px</td>       <td>120*120px</td>       <td>144×144px</td>       <td>58*58px</td>       <td>75*75px</td>       <td>44*44px</td>      </tr>      <tr>       <td>iPhone5/5s/5c</td>       <td>1024*1024px</td>       <td>120*120px</td>       <td>144×144px</td>       <td>58*58px</td>       <td>75*75px</td>       <td>44*44px</td>      </tr>      <tr>       <td>iPhone4/4s</td>       <td>1024*1024px</td>       <td>120*120px</td>       <td>144×144px</td>       <td>58*58px</td>       <td>75*75px</td>       <td>44*44px</td>      </tr>      <tr>       <td>iPad3/4/Air/Air2/mini2</td>       <td>1024*1024px</td>       <td>180*180px</td>       <td>144×144px</td>       <td>100*100px</td>       <td>50*50px</td>       <td>44*44px</td>      </tr>      <tr>       <td>iPad1/2</td>       <td>1024*1024px</td>       <td>90*90px</td>       <td>72*72px</td>       <td>50*50px</td>       <td>25*25px</td>       <td>22*22px</td>      </tr>      <tr>       <td>iPad mini</td>       <td>1024*1024px</td>       <td>90*90px</td>       <td>72*72px</td>       <td>50*50px</td>       <td>25*25px</td>       <td>22*22px</td>      </tr>     </tbody>    </table>    <p>字体</p>    <p>iPhone 上的字体英文为： HelveticaNeue 至于中文，Mac下用的是黑体-简，Win下则为华文黑体，所有字体要用双数字号。</p>    <p>百度用户体验部做过一个小调查， 对于app字体大小的调查结论如下：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/01898ffc49ec580049449895de63736f.png"></p>    <p style="text-align: center;">Paste_Image.png</p>    <p>颜色值</p>    <p>IOS颜色值取 RGB各颜色的值比如某个色值，给予IOS开发的色值为 R:12 G:34 B:56 给出的值就是 12,34,56(有时也要根据开发的习惯，有时也用十六进制)</p>    <p>内部设计</p>    <p>1、所有能点击的图片不得小于44px（Retina需要88px）</p>    <p>2、单独存在的部件必须是双数尺寸</p>    <p>3、两倍图以@2x作为命名后缀</p>    <p>4、充分考虑每个控制按钮在4中状态下的样式，如图</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/731bb28ddc185ef7acd7a80b24917159.png"></p>    <p style="text-align: center;">Paste_Image.png</p>    <h3>Android篇</h3>    <p>界面尺寸</p>    <pre>  android的尺寸众多，建议使用分辨率为720x1280 的尺寸设计。这个尺寸 720x1280中显示完美，在 1080x1920 中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。</pre>    <p>状态栏高度：50 px</p>    <p>导航栏高度：96 px</p>    <p>标签栏高度：96 px</p>    <p>Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和标签栏一样的：96 px</p>    <p>内容区域高度为：1038 px （1280-50-96-96=1038）</p>    <p>图表尺寸</p>    <table>     <thead>      <tr>       <th>屏幕大小</th>       <th>启动图标</th>       <th>操作栏图标</th>       <th>上下文图标</th>       <th>系统通知图标(白色)</th>       <th>最细笔画</th>      </tr>     </thead>     <tbody>      <tr>       <td>320×480 px</td>       <td>48×48 px</td>       <td>32×32 px</td>       <td>16×16 px</td>       <td>24×24 px</td>       <td>不小于2 px</td>      </tr>      <tr>       <td>480×800px /480×854px /540×960px</td>       <td>72×72 px</td>       <td>48×48 px</td>       <td>24×24 px</td>       <td>36×36 px</td>       <td>不小于3 px</td>      </tr>      <tr>       <td>720×1280 px</td>       <td>48×48 dp</td>       <td>32×32 dp</td>       <td>16×16 dp</td>       <td>24×24 dp</td>       <td>不小于2 dp</td>      </tr>      <tr>       <td>1080×1920 px</td>       <td>144×144 px</td>       <td>96×96 px</td>       <td>48×48 px</td>       <td>72×72 px</td>       <td>不小于6 px</td>      </tr>     </tbody>    </table>    <p>ps: Android设计规范中， 使用的单位是dp， dp在安卓机上不同的密度转换后的px 是不一样的</p>    <p>字体</p>    <p>Android 上的字体为： Droid sans fallback ，是谷歌自己的字体，与微软雅黑很像。</p>    <p>Android的字体大小调查结论是：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/14f71d6f32ad9c53abae35a3994047af.png"></p>    <p style="text-align: center;">Paste_Image.png</p>    <p>颜色值</p>    <p>Android颜色值取值为十六进制的值 比如一绿色的值， 给开发的值为 #5bc43e</p>    <p> </p>    <p>来自：http://www.jianshu.com/p/67ab63723e54</p>    <p> </p>