发表于： 2018-11-30 21:17:10
1 957
今天完成的事情：
做了任务八，帮师兄做了几个模块。
明天计划的事情：
做任务9
遇到的问题：
今天遇到了切图命名规范，标注单位及单位描述。
今天的收获切图命名规范，标注单位及单位描述
前缀
前缀是一种简单记忆、节约成本的纯文本标记语言，使用前缀能快速知道切图是用作那一组件类别，好的前缀也无非就以下几种：
| 前缀 | 原始 | 说明 | 示例 |
|---|---|---|---|
| ic | icon | 主要用于布局和子布局的图标 | ic_launcher |
| bg | background | 要用于布局和子布局的背景 | bg_welcome |
| btn | button | 主要用于按钮的表示，有时会在ic和btn之间犹豫，简单的区分即是功能视图，如果一个view执行的时back或者confirm或者cancel的功能，则命名上则应该使用btn | btn_ok |
| di | divider | 主要用于分隔线，包括列表、普通布局中的线 | di_item |
| img | image | 主要用于静态图片 | img_avatar |
| cl | color | 主要用于颜色 | 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_pressed | QQ空间分享图标选中时 |
返回列表
评论