Android UI 切图命名规范、标注规范及单位描述

---

很多UI设计师做APP切图都会有两套，一套是Android的，一套是IOS的。IOS我这边暂不作讲解，因为我本人也不是开发IOS。这里整理一下我在Android开发中总结的一些有利于本人开发的一些资源图片命名规则，并将其中有价值传播给大家。 （PS：本人有时拿到UI切图，看到名称确实是不知道这个图是用来干嘛和放在哪里的，还得跑过去问UI。。所以，一个好的命名规则可以让我们开发节省不少的时间。）

本文参考目录：

前缀位置、组件、用途后缀尺寸字体颜色标注注意事项dp和px的关系

欢迎关注我的github主页

本文将不定期作修改，欢迎阅读者提出修改建议。

---

前缀

前缀是一种简单记忆、节约成本的纯文本标记语言，使用前缀能快速知道切图是用作那一组件类别，好的前缀也无非就以下几种：

前缀原始说明示例icicon主要用于布局和子布局的图标ic_launcherbgbackground要用于布局和子布局的背景bg_welcomebtnbutton主要用于按钮的表示，有时会在ic和btn之间犹豫，简单的区分即是功能视图，如果一个view执行的时back或者confirm或者cancel的功能，则命名上则应该使用btnbtn_okdidivider主要用于分隔线，包括列表、普通布局中的线di_itemimgimage主要用于静态图片img_avatarclcolor主要用于颜色cl_white

位置、组件、用途

一般情况下，所切的图片用于哪个位置、哪个组件，就需要加上这些来命名（紧跟前缀），这样一来，就很清楚切图作用了：

位置标识说明示例common公共标识img_common_bg(共同背景)tab选项卡ic_tab_setting (设置)notify状态栏、通知栏btn_notify_download (通知栏下载按钮)dialog对话框bg_dialog_blur (模糊化的对话框背景)menu菜单bg_menu_save (保存菜单背景)anim用于动画img_anim_loading01 (loading帧动画第一帧)pop用于弹出框img_pop_bg (弹出框背景，区别于dialog)mask用于遮罩层img_dialog_mask (对话框上层遮罩)circle圆圈img_circle_avatar (圆形头像)

后缀

后缀一般是来表示切图的颜色、透明度、状态等信息：

后缀说明示例normal默认状态btn_cancel_normal (取消按钮默认状态时)pressed按下状态btn_cancel_pressed (取消按钮按下状态时)focused获得焦点btn_cancel_focused (取消按钮获得焦点、高亮时)selected选中状态btn_cancel_selected (取消按钮选中时)enabled不能点击btn_cancel_enabled (取消按钮不可用时)white白色bg_white (白色)tra透明度bg_banner_green_tra30 (banner中绿色背景指定30%透明)level层次、水平img_status_level60 (状态为60的时候)bg用于后缀背景当不在前缀命名时，添加到后缀命名

通过上述介绍，一般遇到的情况也就这么一些，只需要按照前缀+位置用途+后缀就差不多了，这里列举一些比较好的命名：

命名说明btn_download_start_green_normal绿色开始下载按钮默认状态img_setting_bg设置页面全背景ic_menu_save_gray_normal菜单中灰色保存按钮默认状态img_notify_wlan_level20状态栏中wifi信号强度为20的时候ic_share_qzone_pressedQQ空间分享图标选中时

尺寸字体颜色标注

尺寸：

1、画布大小定位 720 x 1280 或 1080 x 1920，72 dpi等； 2、只使用偶数单位的尺寸，比如 96 px 的列表项高度，16 px 的边距，64 px 的图标边长； 3、只使用偶数单位 24 pt，28 pt，36 pt等字体大小； 4、设计完成以后，所有尺寸的 px 值除以 2（需要约定的倍数） 作为 dp 数值交给工程师； 5、所有字体的 pt 值除以 2 （需要约定的倍数）作为 sp 数值交给工程师； 6、所有切图变成三份，分别是原始大小、缩小 1.5 倍，缩小 2 倍，分别作为 xhdpi，hdpi，mdpi 的资源交给工程师；

字体：

只需要全局标出共用字体即可，特殊字体特殊标注。

颜色：

颜色值一般使用十六进制表示，如 #FFFFFF, #90FFFFFF 其中90两位代表透明度。透明度计算：

225∗透明度百分比转16进制 FF 代表不透明，7F代表半透明，00代表不透明

注意事项

不使用特殊符号开头： 如 — _ @ 等不使用阿拉伯数字开头不在任何位置使用特殊符号包括中文符号和中划线命名分隔符统一为下划线九宫格图片文件拓展名为 .9.png后缀状态名最好为全拼，如normal

dp和px的关系

1、android手机有一些初始的分辨率：

密度ldpimdpihdpixhdpixxhdpixxxhdpi密度值120160240320480640分辨率240x320320x480480x800720x12801080x19202160x3840

2、在android中，以320x480分辨率为基准屏幕，即密度值为160时，1dp=1px：

3、切图包的存放位置（以当前48dp为例）：

对应dp48dp48dp48dp48dp48dp48dp对应px36px48px72px96px144px192px文件夹ldpimdpihdpixhdpixxhdpixxxhdpi

4、常用设计尺寸分辨率：

5、多种屏幕分辨率规则：

6、描述间距或长度时使用dp：

7、描述字号大小时使用sp：