安卓的切图规范

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

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

本文参考目录:

前缀

位置、组件、用途

后缀

尺寸字体颜色标注

注意事项

dp和px的关系

前缀

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


位置、组件、用途

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


后缀

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


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


尺寸字体颜色标注

尺寸: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两位代表透明度。透明度计算: 

FF 代表不透明,7F代表半透明,00代表不透明

注意事项

不使用特殊符号开头: 如 — _ @ 等

不使用阿拉伯数字开头

不在任何位置使用特殊符号包括中文符号和中划线

命名分隔符统一为下划线

九宫格图片文件拓展名为 .9.png

后缀状态名最好为全拼,如normal

dp和px的关系

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


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


3、切图包的存放位置(以当前48dp为例):


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


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


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


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


自动切图工具推荐

摹客iDoc

在这里向UI设计师,前端推荐一款好用的国产自动切图神器-摹客iDoc,一款更快更简单的产品协作设计平台,智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理,从产品到开发,只要一个文档。


特色点:

UI设计师

①完成设计一键上传

②支持Sketch、PS、XD的设计原稿和设计图

③标注和切图自动生成,再不用手工做

产品经理

①多种批注样式,更好的表达想法和意见

②快速制作交互原型,支持多种动画特效

③支持多种的原型(Axure、Justinmind、Mockplus)和各类文档,直接在线预览


前端工程师

①轻松查看智能标注。还可显示百分比标注,一次选择多个图层并智能标注

②自动获取切图,可下载多个或全部切图

③各种平台适配自动呈现

④一键查看页面中的重复元素

⑤样式代码自动导出


文末福利

设计师双11福利,智能标注和一键切图工具,免费升级前往:

https://idoc.mockplus.cn/get-idoc

凭免费体验码 thomas 即可获得,强烈推荐给用PS,Sketch和Adobe XD的伙伴。

原文链接:https://blog.csdn.net/myLoverIsYou_web/article/details/80486357

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,544评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,430评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,764评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,193评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,216评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,182评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,063评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,917评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,329评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,425评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,019评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2 353

推荐阅读更多精彩内容