很多UI设计师做APP切图都会有两套,一套是Android的,一套是IOS的。IOS我这边暂不作讲解,因为我本人也不是开发IOS。这里整理一下我在Android开发中总结的一些有利于本人开发的一些资源图片命名规则,并将其中有价值传播给大家。 (PS:本人有时拿到UI切图,看到名称确实是不知道这个图是用来干嘛和放在哪里的,还得跑过去问UI。。所以,一个好的命名规则可以让我们开发节省不少的时间。)
本文参考目录:
前缀位置、组件、用途后缀尺寸字体颜色标注注意事项dp和px的关系本文将不定期作修改,欢迎阅读者提出修改建议。
前缀是一种简单记忆、节约成本的纯文本标记语言,使用前缀能快速知道切图是用作那一组件类别,好的前缀也无非就以下几种:
前缀原始说明示例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用于后缀背景当不在前缀命名时,添加到后缀命名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代表不透明1、android手机有一些初始的分辨率:
密度ldpimdpihdpixhdpixxhdpixxxhdpi密度值120160240320480640分辨率240x320320x480480x800720x12801080x19202160x38402、在android中,以320x480分辨率为基准屏幕,即密度值为160时,1dp=1px:
3、切图包的存放位置(以当前48dp为例):
对应dp48dp48dp48dp48dp48dp48dp对应px36px48px72px96px144px192px文件夹ldpimdpihdpixhdpixxhdpixxxhdpi4、常用设计尺寸分辨率:
5、多种屏幕分辨率规则:
6、描述间距或长度时使用dp:
7、描述字号大小时使用sp: