UI切图管理规范.docx

UI切图管理规范切图命名规范UI切图命名格式为：“aaa_bbbb_cccc”。其中“aaa”为切图类型；“bbbb”为模块名称；“cccc”为具体名称。其间用“_”分割。其他情况：当三级仍无法具体标识切图时，可延伸至四级。例如“aaa_bbbb_cccc_dddd”。iOS以在切图命名末位加“@2x”或“@3x”等标识来区分不同像素的同一张图片。例如：“aaa_bbbb_cccc@2x”、“aaa_bbbb_cccc@3x”。详见3.1。Android则以drawable-mdpi，drawable-hdpi，drawable-xhdpi，drawable-xxhdpi等文件夹来区分不同像素的同一张图片。详见3.2。切图类型和格式图标切图命名以“ico”开头；后缀为“png”格式。例如：首页公告图标切图应命名为“ico_home_notice.png”背景切图命名以“bg”开头；后缀为“png”格式。例如：首页标题栏背景切图应命名为“bg_home_title.png”。图片切图命名以“img”开头；后缀为“jpg”格式。例如：广告栏轮播图应命名为“img_adv_name.jpg”按钮切图命名以“btn”开头；后缀为“png”格式。按钮一般分为两种状态：点击状态和未点击状态。例如：缴费页面确定按钮点击状态的切图应命名为“btn_pay_confirm_onclick.png”;未点击状态的切图应命名为“btn_pay_confirm_unclick.png”标签切图命名以“tab”开头；后缀为“png”格式。标签一般分为两种状态：选中状态和未选中状态例如：首页标签选中状态的切图应命名为“tab_home_onselected.png”未选中状态的切图应命名为“tab_home_unselected.png”切图尺寸规范iOS尺寸规范iPhone界面尺寸设备分辨率PPI状态栏高度导航栏高度标签栏高度iPhone6 plus设计版1242×2208 px401 PPI60 px132 px146 pxiPhone6 plus放大版1125×2001 px401 PPI54 px132 px146 pxiPhone6 plus物力版1080×1920 px401 PPI54 px132 px146 pxiPhone6750×1334 px326 PPI40 px88 px98 pxiPhone5 – 5C – 5S640×1136 px326 PPI40 px88 px98 pxiPhone4 – 4S640×960 px326 PPI40 px88 px98 pxiPhone iPad Touch第一代、第二代、带三代320×480 px163 PPI20 px44 px49iPhone图标尺寸设备App Store程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏iPhone6 plus （@3x）1024×1024 px180×180 px114×114 px87×87 px75×75 px66×66 pxiPhone6 （@2x）1024×1024 px120×120 px114×114 px58×58 px75×75 px44×44 pxiPhone5 – 5C – 5S （@2x）1024×1024 px120×120 px114×114 px58×58 px75×75 px44×44 pxIPhone4 – 4S （@2x）1024×1024 px120×120 px114×114 px58×58 px75×75 px44×44 pxiPhone iPad Touch第一代、第二代、带三代1024×1024 px120×120 px57×57 px29×29 px38×38 px30×30 pxAndroid尺寸规范Android SDK模拟机尺寸屏幕大小低密度（120）中等密度（160）高密度（240）超高密度（320）小屏幕GVGA（240×320）480×640普通屏幕WQVGA400（240×400）WQVGA432（240×432）HVGA（480×800）WVGA800（480×800）WVGA854（480×854）600×1024640×960大屏幕WVGA800（480×800）WVGA854（480×854）WVGA800（480×800）WVGA854（480×854）600×1024超大屏幕1024×6001024×7681280×768WXGA（1280×800）15361152192015362560×1600Android图标尺寸屏幕大小启动图标操作栏图标上下文图标系统通知图标（白色）最细笔画320×480 px48×48 px32×3