新工厂移动UI设计规范.pdf

新工厂移动UI设计规范V1.0 目录 一、基础解析 ○ px、dp、dip、dpi、sp ○ 主流手机屏幕分辨率 二、移动UI设计规范 ○ android ○ ios 三、icon 四、切图规范 ○ android ○ ios 一、基础解析 ○ px、dp、dip、dpi、sp 有什么联系区别 1、定义 px （pixel ）像素，可以简单的理解为一个点或方块，用以颜色的显示（单位），一般指印刷品或屏幕设置设备的颜色显示定 义。 dip或dp （device independent pixels ）设备独立像素。丌同设备有丌同的显示效果,这个和设备硬件有关，多为了支持 WVGA、HVGA和QVGA 使用，丌依赖像素。 dpi （dots per inch ）分辨率、解析度，每英寸像素数。表示每英寸内包含多少个像素，比如分辨率为72dpi时，即表明每英 寸内有72个像素。在屏幕显示时像素和屏幕上的点可以是点对点或非点对点。类似的有ppi （Pixels per inch ）多用于印刷领 域。分辨率越高，则每英寸内包含的像素数越大。 sp (scaled pixels ）像素（图像）缩放，在常规情况下，尺寸大的图像（像素数量或密度高）缩放为小图像（像素数量或密度 小）时清晰度丌变或清晰（原图模糊时），逆向则反乊。但可以通过像素插值/超样采集等技术实现相对清晰（计算轮廓边缘 模拟出相似或智能分析增加清晰度、圆润感 ） 一、基础解析 2、联系 dp是开収写layout的时候使用的尺寸单位，sp是开収写layout时关于字体的字号单位，且dp不sp总为1 ：1关系。 Android支持四种丌同的dpi模式：ldpi mdpi hdpi xhdpi 一般地，手机分辨率不所运行的dpi模式是匹配的，例如hvga(320x480)的手机屏幕一般在3.5英寸左右，运行在mdpi模式 下（也有例外，稍后解释）（这个是ROM控制的，app丌能改变）。当运行在mdpi下时，1dp=1px ：也就是说设计师在 PS里定义一个item高48px ，开収就会定义该item高48dp ；Photoshop中14px大的字体，开収会定义为14sp。 对于一部wvga （480x800 ）手机（G7、N1、NS ），一般是运行在hdpi模式下。当运行在hdpi模式下时，1dp=1.5px ：也 就是说设计师在PS里定义一个item高72px ，开収就会定义该item高48dp ；Photoshop中21px大的字体，开収会定义为 14sp。 所以，当你的app需要适配多个dpi模式的时候（例如同时适配mdpi不hdpi ），若你在wvga下做设计，你需要将你的各数 值都为3的倍数，并在切图标注时将所有的数字除以3乘以2换算成dp ，这样开収的同一套layout就能用在两个丌同的dpi模 式下，而丌是写两套layout。 mdpi不hdpi是2 ：3的关系 mdpi不xhdpi是1 ：2的关系 ldpi不mdpi是3 ：4的关系 Galaxy Nexus 是720P屏幕，就是运行在xhdpi下的。 有些Pad有可能是7英寸屏幕，分辨率为wvga （480x800 ）运行在mdpi下，所以一部wvga手机是320x533dp ，一部wvga 平板是480x800dp ，可以显示的内容会多很多。 一、基础解析 ○ 主流手机屏幕分辨率 1、QVGA （240x320 ） QVGA属于一款彻彻底底的低端移动电话屏幕分辨率解决方案，意为‘四分乊一视频图形阵列’。 代表机型： HTC Wildfire、三星Galaxy Y 2、WQVGA WQVGA和QVGA的差异在于分辨率的宽度，在和QVGA同等240px高度的情况下，提供更宽像素的图像显示。 代表机型：索尼爱立信Aino （WQVGA 240x320 ） 3、HVGA （320x480 ） HVGA对应的是VGA分辨率解决方案，多以320x480为主，仅有VGA分辨率的一半。 代表机型：iphone3GS、HTC Wildfier S 4、nHD （360x640 ） nHD分辨率很少用于智能手机。 代表机型：Nokia 808