UI切图管理规范

1 切图命名规范

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。

2 切图类型和格式

2.1 图标切图

命名以“ico”开头；后缀为“png”格式。

例如：首页公告图标切图应命名为“ico_home_notice.png”

2.2 背景切图

命名以“bg”开头； 后缀为“png”格式。

例如：首页标题栏背景切图应命名为“bg_home_title.png”。

2.3 图片切图

命名以“img”开头； 后缀为“jpg”格式。

例如：广告栏轮播图应命名为“img_adv_name.jpg”

2.4 按钮切图

命名以“btn”开头； 后缀为“png”格式。

按钮一般分为两种状态：点击状态和未点击状态。 例如：缴费页面确定按钮

点击状态的切图应命名为“btn_pay_confirm_onclick.png”;

未点击状态的切图应命名为“btn_pay_confirm_unclick.png”

2.5 标签切图

命名以“tab”开头； 后缀为“png”格式。

标签一般分为两种状态：选中状态和未选中状态 例如：首页标签

选中状态的切图应命名为“tab_home_onselected.png” 未选中状态的切图应命名为“tab_home_unselected.png”

3 切图尺寸规范

3.1 iOS尺寸规范 3.1.1 iPhone界面尺寸

设备 iPhone6 plus设计版 iPhone6 plus放大版 iPhone6 plus物力版 iPhone6 iPhone5 – 5C – 5S iPhone4 – 4S iPhone& iPad Touch第一代、第二代、带三代

分辨率 1242×2208px 1125×2001 px 1080×1920 px 750×1334 px 640×1136 px 640×960px 320×480 px

PPI 401PPI 401PPI 401PPI 326 PPI 326 PPI 326 PPI 163 PPI 状态栏高度 导航栏高度 标签栏高度 60 px 54 px 54 px 40 px 40 px 40 px 20 px 132 px 132 px 132 px 88 px 88 px 88 px 44 px 146 px 146 px 146 px 98 px 98 px 98 px 49 3.1.2 iPhone图标尺寸

设备 iPhone6 plus （@3x） iPhone6 （@2x） iPhone5 – 5C – 5S （@2x） IPhone4 – 4S （@2x） iPhone & iPad Touch第一代、第二代、带三代

App Store 1024×1024px 1024×1024px 1024×1024px 1024×1024px 1024×1024px 程序应用 180×180 px 120×120 px 120×120 px 120×120 px 120×120 px 主屏幕 114×114 px 114×114 px 114×114 px 114×114 px 57×57 px Spotlight搜索 87×87 px 58×58 px 58×58 px 58×58 px 29×29 px 标签栏 75×75 px 75×75 px 75×75 px 75×75 px 38×38 px 工具栏和导航栏 66×66 px 44×44 px 44×44 px 44×44 px 30×30 px

3.2 Android尺寸规范

3.2.1 Android SDK模拟机尺寸

屏幕大小 小屏幕 普通屏幕 低密度（120） GVGA（240×320） WQVGA400（240×400） WQVGA432（240×432） WVGA800（480×800） WVGA854（480×854） 中等密度（160） HVGA（480×800） WVGA800（480×800） WVGA854（480×854） 600×1024 1024×768 1280×768WXGA（1280×800） 高密度（240） 480×640 WVGA800（480×800） WVGA854（480×854） 600×1024 1536×1152 1920×1152 1920×1200 超高密度（320） 640×960 大屏幕 超大屏幕 1024×600 2048×1536 2560×1600 3.2.2 Android图标尺寸

屏幕大小 320×480 px 480×800 px 480×854 px 540×960 px 720×1280 px 1080×1920 px 启动图标 48×48 px 72×72 px 96×96 px 144×144 px 操作栏图标 32×32 px 48×48 px 64×64 px 96×96 px 上下文图标 16×16 px 24×24 px 32×32 px 48×48 px 系统通知图标（白色） 24×24 px 36×36 px 48×48 px 72×72 px 最细笔画 不小于2 px 不小于3 px 不小于4 px 不小于6 px 3.2.3 Android系统dp/sp/px换算表

名称 idpi mdpi hdpi xhdpi xxhdpi 分辨率 240×320 320×480 480×800 720×1280 1080×1920 比例rate（针对320px） 0.75 1 1.5 2.25 3.375 比例rate（针对640px） 0.375 0.5 0.75 1.125 1.6875 比例rate（针对750px） 0.32 0.4267 0.64 1.042 1.5