标注命名规范

咳咳... 升级打怪啦...

前言：规范的命名方式可以提高客户端程序员的开发效率和团队协作。

标识符号命名原则：尽可能用最少的字符而又能完整的表达标识符的含义。

此文主要从3方面来叨叨：

一、切图的基本认识

二、切图的文件整理

三、切图的命名规则

一、基本认识

1，切图是什么？

在app中切图，与在web中切图大致是一样的。开发同学在实现过程中，需要计算好每一个元素的位置，然后再调用我们切好的图进行填充。

2，切图的格式要求

一般元素切图png24，启动或引导页切图png8

3，iOS和Android分别需要几套切图？

iOS屏幕精度分成Retina和非Retina2种，而Android的屏幕精度主要分为mdpi 360 ,   hdpi 480 ,     xhdpi 720   3种

4，iOS和Android切图分别命名格式？

在这五套切图种，提供一套最大的，可以辛苦开发同学通过常用比例自动缩小到其余4套。

通常我们常用的切图最大精度切图，就是android中的xhdpi=iOS的retain@2x这两套

不论何种方法，一定要保证设计元素的4PX原则

二、文件整理

掌握好整理文件和上传的方法，有一份清晰的切图文档，能高效地开展开发和视觉之间的沟通

如何整理我们的切图，从两方面来

1.正确精准的命名（参照切图命名 前缀+位置、组件、用途+后缀）

2.归纳切图类别

我们完成的页面有几十个，每个页面又有零零散散的图标，把他们一个个拿出来，必定有很多重复标注。在iOS中要求的icon又大多是44px的，所以很多都是可以在不同页面里通用的，学会归纳也能提升效率。

· 通用文件归纳法：比如类目icon，你可以把这些常用的类目图标，都整理在一个文件包中。只要是用到类目的，哪怕是不同的页面，开发也能在一个文件包中找，

· 控件归纳法

像一些常用的控件，比如navi,toolbar,setting,tab-bar等，也可以整理成一个通用的切图包

3.一个页面一个包

纵使我们归纳总结，但零零散散的切图，不可能完全分类。于是剩下的一些，我们就需要按照一个页面也个文件包的方式，来整理切图，这样不管是开发要拿，或是你要更新，都在这个统一的地方交接就行了

4，切图时注意点击区域

切图时可以把点击区域一起切，并在页面标注上相应的标明

三、切图命名

Android切图用“_”分割,iOS切图命名用“-”分割

切图的命名分为三部分：前缀+（位置、组件、用途）+后缀

下面区分一下什么是前缀；什么是位置、组件、用途；什么是后缀？

· 前缀：用来快速知道切图的类别

如：ic——icon    

      bg——background

      btn——button

      di——divider

      img——image

      cl——color

· 位置，组件，用途

common:公共标识 （img_commom_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弹出框背景）

mask用于遮罩层（img_dialog_mask对话框上层遮罩）

circle圆圈（img_circle_avatar圆形头像）

· 后缀：用奥表示切图的颜色，透明度，状态等    后缀状态的命名最好为全拼

normal 默认状态    

例：btn_cancle_normal取消按钮默认状态

pressed按下状态    

例：btn_cancle_pressed取消按钮按下状态

focused获得焦点    

例：btn_cancle_focused取消按钮获得焦点，高亮时

selected选中状态   

例：btn_cancle_seleced取消按钮选中时

enabled不能点击    

例：btn_cancle_enabled取消按钮不可用

white白色               

例：bg_white白色背景

tra 透明度               

例：bg_banner_green_tra30 banner背景绿色透明度30%

level层次，水平      

例：img_status_level60状态为60的时候