APP界面设计规范二

、Android设计常识开始介绍之前先帮大家梳理一下Android常用单位，方便各位亲们更好的掌握并了解Android端设计规范。Android常用单位perinch):数字影像的解析度，也就是每英寸所拥有的像素数，即像素密度；PPI计算公式：ppi=v＜长度彳t素数2+宽度像素数2)/屏幕对角线英寸数perinch)：是指印刷上的计量单位，也就是每英寸上能印刷的网点数，我们设计用于显示器的默认为(72像素/英寸)就好了；屏幕尺寸(ScreenSize:一般我们所说的手机屏幕尺寸，比如3英寸、英寸等，都是指对角线的长度，而不是手机的面积；分辨率(Resolution)：是指手机屏幕垂直和水平方向上的像素个数，比如分辨率为：720*1280,是指设备水平方向有720个像素点，垂直方向有1280个像素点pixels)：像素，不同设备显示效果相同(point)：一个标准的长度单位，ios的逻辑单位，1Pt=1/72英寸，用于印刷业，非常简单易用；标注字体大小(72是早期台式机的DPI)(Scaled-independentpixels:放大像素，安卓的字体单位；(Density-independentpixels)：是指设备的独立像素，不同的设备有不同的显示效果，它与设备硬件有关系；sp和dp基本一样，是android开发里特有的单位，都是为了保证文字在不同密度的显示屏上显示相同的效果；dp与设备硬件有关，与屏幕密度无关，sp与屏幕密度和设备硬件均无关；换算关系android开发中，文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px0这些单位如何换算，是设计师、开发者需要了解的关键。dp：以160PPI屏幕为标准，则1dp=1px。dp和px的换算公式：dp*ppi/160=px。对于320ppi的屏幕，1dpx320Ppi/160=2px。sp：它是安卓的字体单位，以160PPI屏幕为标准，当字体大小为100%时，1sp=1px。sp与px的换算公式：sp*ppi/160=px。

对于320Ppi的屏幕，1spx320Ppi/160=2px=简单理解的话，px(像素)是我们UI设计师在PS里使用的，同时也是手机屏幕上所显示的，dp是开发写layout的时候使用的尺寸单位。dp和px的换算公式：dp*ppi/160=px或者px=dp*ppi/160。为什么要把sp和dp代替px原因是他们不会因为ppi的变化而变化，在相同物理尺寸和不同ppi下，他们呈现的高度大小是相同。也就是说更接近物理呈现，而px则不行。根据单位换算方法，可总结出：当运行在mdpi模式下时，1dp=1px:也就是说设计师在PS里定义一个item高48px,开发就会定义该item高48dp;当运行在hdpi模式下时，1dp=:也就是说设计师在PS里定义一个item高72px,开发就会定义该item高48dp;当运行在xhdpi模式下时，1dp=2px:也就是说设计师在PS里定义一个item高96px,开发就会定义该item高48dp;具体换算关系如下：ldpi模式下 1dp=mdpi模式下(baseline) 1dp=1pxhdpi模式下 1dp=xhdpi模式下 1dp=2pxxxhdpi模式下 1dp=3pxXxxhdpi模式下 1dp=4pxBASEUHEXXHDPI-480DPI4xXXXHDPI-&400PIBASEUHEXXHDPI-480DPI4xXXXHDPI-&400PI小结：其实对于我们设计师来讲，我们做效果图的单位仍然是 px,那些sp、dp、pt单位都是Android开发中所使用到的单位，但是我们必须要了解每种单位的含义以及它们之间的关系，这样才能使我们的设计更加统一和完美。Android屏幕分辨率Android按照DPI分为了LDRMDPI、HDPkXHDP和XXHDPE：类，Android还添加了XXXHDP这个新的DPI分类。下面是Android界面尺寸详细总结：Android界面尺寸一』莅夏LDHMQPIHDP1XHDPIXXHDPIXXXHDPI3?0*44¥14Rn*Rnn77俨？™HF伊耳城甑F，■一32・里，堇寸4#可4，“5J6i-57W寸小二鼻中卬*武日:三・KMC*«K«WI*低也！iFOdp?40dp3R1ni4SCdp口tdt>0.75pK1rgSo®1如.而甚仃的T中篇乳鼠标36-36daMfl1rmQO^eClB)"44'14-1(25)用=133???2曲第二附踞3Bpx-tftsp54PMi明快7?四，16甲比曲年阴际弱增即上航Fsa72-72JlX行外£1W1日我此1W谢(国附沿七时示加*M39fc■3tto48*48px72yA的袋中制驾机32勒p«48MaJXWlMK12B^2Spk24*24即*呼32即病’哂眠64时8AW舞髀£SM11中3标河百痂■JMTMpc罂即PKh4*b4pK赧ps出败事0751之0$意他口4|■新।*阵第7联冲”峥比吟即■骊，1割即iTiias号?24A2fc124中地典・64品安出0c圄喝22-2dp<33一口如q一吗斯安我电％■电加工中畀w?解尊口仲门卿।，峪=1丽3毕尸1鼻牙S8|：>-=SSp小学伸7?啡LM印第pE4印12g73*3w7用卬就pElp豆Et年Q27揶±1比R©K口??2和羌=”卑刘口后22印日口Ur>?22zcdtipr-^sp黄乔T"而后伯口哈2clip班内时第w三器dp生4&®lOLipx^Sdp汨a-献kJ。41加7皿LN阱一如rj「1嫄NTWJp3flp-4f'dD4(Jpa^A»Sfica-Jflrl；!lUo-J1nH口1期iTflidp内自X畦3如耳“307中M节x"S-SGdp后的中7刘dn-OSSps-51Stf5tSdj3部”严・51出p目前主流的安卓手机分辨率有以下3种：hdpi,对应480*800的手机。主流机型：小米1,1s三星htc等xdpi,对应720*1280的手机。主流机型：三星Galaxy系列和华为p6等xxdpi,对应1080*1920的手机。主流机型：小米手机，华为荣耀手机系列为主力口上htcone下面是当面流行的安卓手机的屏幕尺寸和分辨率：

主流android的分辨率和尺寸»E计场♦咫4mBMW4也口KVilJKlI* j■NMK1liwo-ajM5.»*n1152<lS2fl»也后MN上帆口也上一工$甑・西种冏SlTTT-士必•■不轴曲sBCMJUCVMorta5.T1T7■的,器就ailWTg.Lp. 歌三册皿新丽・・SW7丁楠・uw秘口—W打,丽工睥IS&gHJEXJ»乱F寸im-iwp-JKTCSrLirrW11HFT7却・1JBC伊MICOneUA4值可EIKO-lQJOpaIDFFOFVdT》讯号⑷・■时4臼 ，omaml工商叩1卿邛Jt的IWK»R]Hi叮m冰aOePONI^MI^6HT口如l*gmWnM-Lu 匚SJ*T”0・3i而三=ipa•^9134EE:制7界0户,]+JHM3kKlrT5*^n*tq的pi4MMM2$4卡亍叮|»rfUKi■蛔m篦口■ 备・THIW.gwpa&1寸L444rj^Wpl ■OnrPlusOticAk■寸5IM6a>3V/OpiE3设计稿基本元素的尺寸设置Android手机那么多，具体怎么分哪些手机是几倍的倍率呢我们设计人员需要按照哪个尺寸进行设计我们先看一张表，这是友盟 2014年10月到2015年03月的数据：

从友盟的分辨率占比数据来看：720*1280的手机占比最高为％,800*480的手机占比为%居第二，而540*960的手机占比最少为%,xxdhpi模式的高分辨率1080*1920手机占比也越来越高，目前为％0所以我没可以得出结论：目前Android主流手机屏幕分辨率为：xdhpi模式的高分辨率720*1280。在目前我们的安卓APP设计项目当中，我们并不会去为每一种分辨率去设计一套UI界面。为每一种分辨率单独设计一套UI界面，这是一种追求完美和理想的状态。所以，这个时候我们需要学会变通，为了适应多分辨率，我们一般选择一个较合适的分辨率最为基准，以下3种方法分别是我经常用到的方式，仅供大家参考：方法1以中间尺寸(xdpi:720*1280px)作为基准，然后放大或缩小，以适应到其他尺寸；不足之处是，对于更高分辨率的手机，图标被放大后会导致质量不高。方法2以较大尺寸(xxdpi:1080*1920px)作为基准，然后缩小，并适应到所需的最小屏幕尺寸；缺点是，图标等若都是最大尺寸，加载时速度慢且耗费流量较多，对于小分辨率的用户也不够好。方法3有些时候我们也会在实际开发过程中,Android和ios的设计稿若无太大差异,也可从ios的分辨率(750*1334px)开始，再调整设计稿的比例，适应其他分辨率；不足之处：在切图的时候需要做一些图片的调整， 如果不是矢量图的原件，需要重新按照720*1280的尺寸设计下。结合友盟的分辨率占比数据、也为了方便换算到 android开发中的尺寸单位，推荐设计稿的画布尺寸选用720X1280px,分辨率为72Ppi(像素/英寸)。一、Android设计规范界面基本组成元素Android的APP界面和iphone的界面基本相同：状态栏+导力(栏+主菜单栏+内容区域具体大小请参照中Android界面尺寸字体设计规范安卓之后用的字体是Roboto。中文字体：方正兰亭黑体，是谷歌自己的字体，与微软雅黑很像。界面图标规范界面中图形的实现由两种，一种是用图片，另一种是代码画出来。代码画的方式比较耗费程序员脑力和代码量，图片则耗费空间，增加APP的体积。一般是偏重使用图片，但是一些简单形状的按钮可以直接让程序员画出来即可。

LogoLogo按伊切换小制睨按伊切换小制睨际第切图要点.有一些小的icon式按钮，不能只切到icon边缘，而是要考虑到最终实现的时候，是把这个图片做成按钮，和用户交互。所以必须要多留一些透明的边，让能点击的图片在88X8姒上，这样用户才保证比较好点到。.对于不改变可见图形而又需要加大点击区域的图。 那么切图的时候建议在可见图形的四周都加上1像素的透明，这是为了放大拉伸而不产生可见区域的图像失真。.切图的高度。对于一个通用的背景图，如文字圆角边框背景，那么切图的时候并不是效果图上有多高就切多高，为了通用而是只需切一行文字的高度就可以了。不过这也不是绝对的，准确的说应该切的高度为

H=paddingTop+textHeight+paddingBottom,及文字相对背景的上边距+一行文字的高度+文字相对背景的下边距。.切图的宽度。如果是一个通用的背景图，那么他的宽度应该是他在效果图中的最小宽度，也就是说这个背景可能在多处使用到了， 就取最小的那个宽度就可以了。比较麻烦的是铺满全屏的时候，这就需要看看你做的效果图的宽屏宽度， 所以说做效果图的时候最好是做小屏幕的效果图。 有人可能会问点9的图不是可以拉伸、压缩吗，为什么需要参考最小的宽度呢根据个人经验发现，一个大图在屏幕小的情况下点9图中拉伸的部分会变得颜色更深。.以每个模块分开创建文件夹存放切图资源；这样更有助于程序员在每个模块的时候找到相应的图片；.所有切图尺寸必须是偶数，一般是png-24格式；底部工具栏icon切图（有两种方法）方法1：icon单独切，有默认和选中两种状态方法2：icon+文字一起切，有默认和选中两种状态TOC\o"1-5"\h\z' ⑥ I背我 B.g题杷""iQ0 …m编篇忆E"丽2Q0 0一 首页 9.9包蒯，.工也元”: •-■他同r；*切图命名规范:下面是常用的一些命名缩写：bg 按钮：btn按钮按下：down图标：bg 按钮：btn按钮按下：down图标：icon用户：user弹出：pop删除：delete编辑：edit按钮常态：nor 按钮选中：sel搜索：search 个人资料：proflie返回：back 刷新：refresh例如：nav_bg、tab_btn_sel点九切图：

首先我们要知道什么是点9图：点九图是andriod平台的应用软件开发里的一种特殊的图片形式，是一种可拉抻而不失真的图，文件扩展名为：-其实相当于把一张png图分成了9个部分（九宫格），分别为4个角（图中：1、3、6、8）,4条边（图中：2、4、5、7）,以及一个中间区域（图中：9）。比如我们的微信、QQ的聊天气泡就是典型的点9图，因为聊天气泡需要随文字的多少进行拉抻。一般图在整体放大时会出现失真的情况，而点9图是把图中某些部分进行拉抻，而不重复的地方，比如圆角和光泽等部分都不做变化，以此来实现图片的放大，不会出现失真的情况。接着我们来说一下点9图的绘制方法：当然点9图的绘制方法也有很多种，直接用点9切图的软件，譬如：draw9patch、cutterman等，安卓开发中的SDK里有tools文件夹，里面有一个，或者直接用ps绘制点9切图；我个人还是习惯用ps直接绘制点9图，因为软件有时候自己把握不好尺寸导致点9图在程序中识别出现问题。Ps绘