Android切图规范

Android端切图规范v1.0
1.容器的概念

    UI设计师在拿到产品经理的原型图后，应该对每张原型图进行分组分类。
    具体的分类方法如下:
    1.每一个功能界面对应一个文件夹
    2.对原型图中的界面进行整体分割并命名
    3.基于2中的分割结果创建相应文件夹，分割块中的需要的素材放置到对应文件夹
   
    以医万佳为例，医万佳从整体上可以分为四个大的模块，那么这四个模块就对应四个文件夹（如图）

对首页界面进行分割，从整体上可以分割为三大块。顶部的标题栏，中间的内容展示，底部的导航栏。这三部分可以理解为三个容器，那么就应该在首页文件夹中新建三个对应的文件夹。顶部和底部容器使用的素材较少，所以不再继续分割。

    主要对内容展示进行分割。内容展示部分又可以分割为5部分（具体如何分割可以咨询Android开发和产品经理），依次为：banner、一级功能、二级功能、在线咨询、医院列表（这里为个人分法仅供参考）。那么就应该在内容文件夹中对应新建五个文件夹。对应容器中的素材放入对应的文件夹。

2.素材命名

    分割完所有的界面并新建对应文件夹后，可以将文件目录截图给Android开发。让Android开发尽快给出对应的中英对照文档。
    拿到文档结合下面规则就可以愉快的命名素材进行切图了。

2.1位置+前缀+用途+后缀

    这种命名方式会导致图片名称很长，但是便于Android开发人员（以下简称开发）分类和查找。前面说到UI设计师需对图片进行分组放置，但事实上最终所有的素材图片都会被开发放入项目中对应分辨率的mipmap文件夹中（如下图）所有命名是不能重复的。

    素材名称只能用英文小写，素材名称中的分隔符必须使用下划线”_”,不能使用其它符号。因为Android编译器只支持下划线。
    命名用英文小写，分隔符用下划线“_”!!!
    命名用英文小写，分隔符用下划线“_”!!!
    命名用英文小写，分隔符用下划线“_”!!!
    重要的事情说三遍。

2.2.1位置
位置     说明     示例
top     顶部，多数情况下与标题栏关联使用     top_menu_back（顶部菜单回退）
bottom     底部，多数情况下与导航栏关联使用     bottom_menu_refresh（底部菜单刷新）
item     条目，一般都是指列表中的条目     
home     主页，一般用于主界面相关     home_hospital_list(主界面医院列表)
user     用户，一般用于登录用户的数据展示界面     me_head_img(用户头像)
2.2.2缩写
缩写     原文     说明     示例
ic     icon     主要用于表示布局中的图标或桌面图标     ic_launcher(桌面图标)
bg     background     主要用于布局的或控件的背景图片     bg_launcher(启动页图标)
btn     button     主要用于按钮相关的图片     btn_delete(删除按钮)
img     image     主要表示图片相关     img_banner_1（banner中的第一张图）
            
            
            
2.2.3用途
用途     说明     示例
tab     选项卡     tab_home(主页选项卡)
dialog     对话框     dialog_exit(对话框退出操作)
menu     菜单     bottom_menu(底部菜单)
circle     圆形、圆圈     bg_circle(圆形背景图)
notify     状态栏、通知栏     btn_nofity_download(通知栏下载按钮)
pop     弹框(区别于对话框)     bg_pop(弹框背景图)
tools     工具栏     tools_tab_home(工具栏中的主界面选项卡)
2.2.4后缀
用途     说明     示例
normal     默认状态     tab_home_normal(主页选项卡默认状态)，btn_cancel_normal(取消按钮默认状态)
selected     选中状态     tab_home_selected(主页选项卡选中状态)
pressed     按压状态     btn_cancel_pressed(取消按钮按下时的状态)
enabled     不可用     btn_delete_enabled(删除按钮不可用)
2.3组合示例
命名     说明
home_top_search_bg     主界面顶部搜索框背景图
user_head_img_normal     用户没有上传头像时，展示的默认头像
home_bottom_tools_tab_user     主界面底部工具栏用户选项卡
3.标注(只使用偶数)
3.1画布尺寸

    做设计图之前须向开发咨询主流屏幕的大小(分辨率)，一般以1920*1080和1280*720为主。以该分辨率为画布开发设计图。
    UI设计师也可自行查询：腾讯移动分析

3.2字体大小

    全局标出公用字体即可，特殊字体特殊标注(斜体、加粗、下划线等等)。
    Android 4.0之后使用的英文字体是Roboto,中文字体是方正兰亭黑体.
    对于xhdpi设备的字号规范:
    导航标题: 18sp=36px
    文章标题或图标名称: 16sp=32px
    文本字体: 14sp=28px
    注释最小字体: 12sp=24px

名称     tag     size
一级标题     font_size_1     ??sp=??px
二级标题     font_size_2     ??sp=??px
三级标题     font_size_3     ??sp=??px
四级标题     font_size_4     ??sp=??px

    设计师以该表作为参考，标记全局标注

3.3颜色

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

3.4间距

    间距分为内边距和外边距分别表示为：padding和margin
    当设计图中的文字存在背景但是没有提供背景图时，需要将padding标记出来。
    margin一般不需要标记，但是控件的宽高和控件之间的距离以及容器的高度一定要标记出来。

3.5控件尺寸

    控件尺寸是指,图片在app中展现时的尺寸大小.
    设计的时候,一般遵循48dp定律: 48dp作为安卓可触摸的UI元件的标准.
    一般来说,48dp转化为一个物理尺寸约9毫米.而建议的目标大小为7-10毫米的范围,这是一个用户手指能准确并且舒适触摸的区域.
    如果你设计的元素高和宽至少48dp,就可以保证:
    (1).触摸目标绝不会比建议的最低目标(7mm)小,无论在什么屏幕上显示.
    (2).在整体信息密度和触摸目标大小之间取得了一个很好的平衡.
    而每个UI元素之间的空白通常是8dp.

3.6图片资源尺寸

    图片资源尺寸是指,图片资源的大小,可以决定app中图片的清晰度.
    图片资源多为png格式,因为png可以表现透明效果.jpg不能.

名称     ldpi     mdpi     hdpi     xhdpi     xxhdpi     xxxhdpi
程序启动图标     36*36     48*48     72*72     96*96     144*144     
4.dp和px关系

1.Android手机有一些初始的分辨率
名称     ldpi     mdpi     hdpi     xhdpi     xxhdpi     xxxhdpi(4k)
密度值     120     160     240     320     480     640
分辨率     240*320     320*480     480*800     720*1080     1280*1920     2160*3840
注意事项：
1.切图分包
1.1APP的桌面图标要切五套：mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi。

    以上面的五种分辨率为名称在launcher文件夹中创建五个文件夹，不同分辨率的桌面图标分别放入对应的文件夹中。图片统一命名为ic_launcher。