android 系统的切图方式_设计规范 | 切图、标注与命名

最新推荐文章于 2021-05-27 16:37:27 发布

夜空中的UFO恋曲

最新推荐文章于 2021-05-27 16:37:27 发布

阅读量751

点赞数

文章标签： android 系统的切图方式

本文链接：https://blog.csdn.net/weixin_27388739/article/details/112265043

版权

本文详细介绍了Android系统的切图方法，包括点九图的制作过程和注意事项，以及命名规范。同时阐述了标注的重要性，提供了iOS和Android的标注规范，并强调了文件命名、尺寸一致性和格式选择等关键点。

摘要由CSDN通过智能技术生成

一、切图

App切图是实现设计效果的重要环节，开发工程师会在实现的过程中计算好各个图片、图标、版块的位置，然后会调用我们已经切好的图进行填充，切图的效率关系到产品的开发效率与团队协作。 1.1 命名规范 (1)常用界面

(2)系统控件

(3)功能命名

(4)常见状态

1.2 命名规则

命名规范并不是唯一的，唯一的目的是要清晰，能让开发者一看就懂。命名的规则就是告诉开发文件是什么，在哪里，第几页，什么状态。

组件：指的是App，如首页、发现、财富与朋友；

类别：指的是页面中的切图对象的种类，如图标、图片；

页面：指的是二级页面，如登录、设置；

功能：指的是页面中的图标和图片，如搜索、设置、删除、确定；

状态：指的是切图的图标所处的状态，如，_n:正常、_p:按下、_s:选中、_d:禁用、_h:点击；

(1)通用切图

组件_类别_功能_状态.png

例 : 标签栏_图标_主页_未选中状态(tabbar_icon_home_n.png)

(2)特有切图

页面_类别_功能_状态.png

例 : 发现_图标_搜索_选中状态(discover_icon_search_s.png)

(3)点九图

智能手机中有自动横屏功能，界面会随着手机中的方向传感器的参数不同而改变显示的方向，图片会因为长宽的改变而产生拉伸，造成图片失真变形。

由于Android平台有很多不同的分辨率，大部分控件的切图文件需要放大，那么点九图的制作变成了必要，点九图其实相当于把一张PNG图分成9个部分，分别为四个角、四条边以及一个中心区域，它可以在图片横向和纵向同时拉伸时，保持四个角不做拉伸，实现多分辨率下完美展示，只需采用一套界面切图适配不同的分辨率。

但点九图有一个特点，只能被拉伸放大，缩小容易造成图片像素分布不均匀。当标注一个48dp的按钮时，切记提供一个不大于48dp的图片资源。

那么如何制作点九图呢？

1、首先，用Photoshop沿着图片的边缘切好图；

2、调节画布大小，手动将上下左右各增加1px；

3、使用铅笔工具，颜色为纯黑(#000)，对图片四周1px区域进行填充；

4、存储为web所用格式，选择png-24，储存后手动将后缀名改为.9.png；

附注：Android系统下的切图，包括logo、按钮、图片、图标等图片格式为点九图(.9.png)，关于详细情况，可以百度了解一下。

1.3 注意事项

在image切图文件和切图命名中，应注意以下几点：

(1)不要出现大写，字母必须为小写；

(2)不要有中文、特殊符号和空格；

(3)同类切图，尺寸大小应保持一致；

(4)切完图后，记得压缩图片的大小，与App安装包的大小有关。其次，当jpg与png相差不大时，选用png-24格式，二者相差较大时，选用jpg格式；

(5)icon图标一定要用png格式；

1.4 命名方式

1.5切图工具

通用工具：Cutterman、墨刀、蓝湖、摹客、Assistor PS

1.6 管理方式

利用工具切图，为了提升平台版本更新迭代的效率。从开发时，就对组件、页面、模块、图标进行合理的分类，根据对应切图的分类创建不同类别的文件夹。

其中，图标可以按像素倍率进行分类。

二、标注 App标注可以让工程师及时了解界面开发元素的尺寸大小，Android和iOS标注的规范存在一定的差异性，特别是重点关注App设计稿的标注单位。目前，虽说安卓和苹果的@1x手机已经被淘汰，但是@2x和@3x设计师尺寸都需转为@1x工程师尺寸。 2.1 iOS与Android界面标注的区别

iOS标注：

(1)用750*1334px设计稿进行标注；

(2)距离和字号用pt/px；

Android标注：

(1)用720*1280px设计稿进行标注；

(2)距离用dp，字号用sp；

2.2 标注规范

(1)文字标注

文字属性，需要有颜色、字号、间距、位置等最基本的要素，在标注页面时，注意不要漏掉未标记的元素。