移动应用界面设计的尺寸规范

《移动应用界面设计的尺寸规范》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、移动应用的界面设计画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。一、android篇1、android分辨率屏幕尺寸指实际的物理尺寸，为屏幕对角线的测量。为了简单起见，Android把实际屏幕尺寸分为四个广义的大小：小，正常，大，特大。像素（PX）代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。屏幕密度为解决Android设备碎片化，引入一个概念D

2、P，也就是密度。指在一定尺寸的物理屏幕上显示像素的数量，通常指分辨率。为了简单起见，Android把屏幕密度分为了四个广义的大小：低（120dpi）、中（160dpi）、高（240dpi）和超高（320dpi） 像素=DP*（DPI/160) 例如，在一个240dpi的屏幕里，1DP等于1.5PX。于设计来说，选取一个合适的尺寸作为正常大小和中等屏幕密度（尺寸的选取依据打算适配的硬件，建议参考现主流硬件分辨率），然后向下和向上做小、大、特大和低、高、超高的尺寸与密度。典型的设计尺寸•  320dp：一个普通的手机屏幕（240X320，320×480，480X800）•  480dp：一个中间平

3、板电脑像（480×800）•  600dp：7寸平板电脑（600×1024）•  720dp：10寸平板电脑（720×1280，800×1280）AndroidSDK模拟机的尺寸屏幕大小低密度（120）ldpx中等密度（160）mdpi高密度（240）hdpi超高密度（320）xhdpi小屏幕QVGA（240×320） 480×640 普通屏幕WQVGA400（240X400）WQVGA432（240×432）HVGA（320×480）WVGA800（480×800）WVGA854（480×854）600×1024640×960大屏幕WVGA800*（480X800）WVGA854*（480X

4、854）WVGA800*（480×800）WVGA854*（480×854）600×1024  超大屏幕1024×6001024×7681280×768WXGA（1280×800）1536×11521920×11521920×12002048×15362560×1600注意，ppi、dpi是密度单位，不是度量单位：*ppi(pixelsperinch)：图像分辨率（在图像中，每英寸所包含的像素数目）*dpi(dotsperinch)：打印分辨率（每英寸所能打印的点数，即打印精度）dpi主要应用于输出，重点是打印设备上；ppi对于设计师应该比较熟悉，photoshop画布的分辨率常设置为72像素

5、/英寸，这个单位其实就是ppi。尽管概念不同，但是对于移动设备的显示屏，可以看作ppi=dpi。ppi的运算方式是：PPI=√（长度像素数²+宽度像素数²）/屏幕对角线英寸数。即：长、宽各自平方之和的开方，再除以屏幕对角线的英寸数。以iphone5为例，其ppi=√（1136px²+640px²）/4in=326ppi（视网膜Retina屏）对于android手机，一个不确切的分法是，720x1280的手机很可能接近320dpi（xhdpi模式），480x800的手机很可能接近240dpi（hdpi模式），而320x480的手机则很接近160dpi（mdpi模式）。2、单位换算方法androi

6、d开发中，文字大小的单位是sp，非文字的尺寸单位用dp，但是我们在设计稿用的单位是px。这些单位如何换算，是设计师、开发者需要了解的关键。*dp：Density-independentpixels，以160PPI屏幕为标准，则1dp=1px。dp和px的换算公式：dp*ppi/160=px。对于320ppi的屏幕，1dpx320ppi/160=2px。*sp：Scale-independentpixels，它是安卓的字体单位，以160PPI屏幕为标准，当字体大小为100%时，1sp=1px。sp与px的换算公式：sp*ppi/160=px。对于320ppi的屏幕，1spx320ppi/160=

7、2px。简单理解的话，px（像素）是我们UI设计师在PS里使用的，同时也是手机屏幕上所显示的，dp是开发写layout的时候使用的尺寸单位。为什么要把sp和dp代替px？原因是他们不会因为ppi的变化而变化，在相同物理尺寸和不同ppi下，他们呈现的高度大小是相同。也就是说更接近物理呈现，而px则不行。根据单位换算方法，可总结出：当运行在mdpi下时，1dp=1px：也就是说设计师在PS里定义一个i