ui设计规范网格图（UI切图与命名规范）

写一写UI的基础和用软实力增强与工程师团队的协同工作能力，通过规范的切图不仅可以提升整个团队的工作效率，而且大大缩短了设计狮与程序猿之间的沟通成本，好的切图更是为设计图的精确实现和完美落地做坚实保障。

切图是什么？互联网产品是由一套富有逻辑的页面通过链接构成从而实现某种特殊功能服务于不同需求与受众。而页面中最基本的元素就是色块、文字、图片，通过色块拉开页面不同信息之间的层次，产生布局美；通过文字展现内容加以对比突出重点，呈现信息流；通过图片增加页面丰富度和可看性，展现多样性。而切图一方面是处理图片，更重要的一方面是处理复杂样式，我们经常把复杂样式以切图的形式出现以降低开发难度和开发成本。

切图的原则

切图资源尺寸必须为双数

因为1px是智能手机能够识别的最小单位，换句话说就是1像素不能在智能手机被分为两份。所以如果是单数切图的话手机系统就会自动拉伸切图从而导致切图元素边缘模糊，进而造成开发出来的APP界面效果与原设计效果差距甚远。

切图倍率考虑到主流适配机型

在切图资源输出中图标切图输出是至关重要的部分。因为在开发中由于各机型的屏幕分辨率不同，需要针对一些大屏机型进行适配。现在主流要输出@2x和@3x的切图，针对近几年的大屏手机，适配倍率应该在3倍比较合适。

控制切图大小

在用户网络速度和网络环境未知的情况下，要考虑到用户打开产品时加载速度问题和APP安装包大小等问题，所以需要在保证质量的前提下尽可能的减少切图大小。

切图的类型

启动图标切图

APP的启动图标往往象征了整个产品的形象，起到一定的标识作用。应用场景一般在手机桌面、APP store、手机的设置列表，所以app桌面图标需要很多个不同尺寸的切图输出。切图只需要提供直角的图标切图即可，手机系统会自动生成圆角效果。

icon切图

在iOS和Android的@2x切图中，icon可使用公用的44*44px切图，可实现一套切图适配两个平台。同样适应于@3x的尺寸为66*66px。

图片类切图输出

针对广告图、启动页、新手指引页等同类型的图片切图要保持同样大小尺寸做以规范。

动态元素切图

动效元素切图一般是指在app中加载动效所需要的切图元素，运用的是序列帧的方法输出动画，不过此种方法可能运用较少，现在大多都用GIF图或者lottie动画。(关于lottie动画我会在下期文章中着重说明)

可拉伸元素切图

可拉伸元素一般指的是输入框、聊天对话框等可以扩充的切图。在ios中这种切图方式叫做平铺切图，在安卓中这种切图方式叫做点九切图法。

通常在项目中

IOS:以750*1334为基稿设计，按实际项目开发为标准，需切出@2x和@3两套图，把在公共页面中的导航栏里面有一个按钮（40x40px）的选中状态切图，直接输出的切图为@2x图，@2x的1.5倍图为@3x。

Android：以720*1280为基稿设计，由于尺寸不同且多样，需要切多套图适配不同机器，分别为mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi，直接输出的切图为xhdpi;它们分别对应的倍数关系为1、1.5、2、3、4。

切图命名规范

1、产品模块_类别_功能_状态.png

例：发现_图标_搜索_点击状态

2、场景_模块_状态.png

例：登录_按钮_默认状态

3、产品模块_场景_二级场景_状态.png

例：按钮_个人_设置_默认状态

【场景和二级场景】：一般指app的一级页面与二级页面。

例如上：个人页-场景，个人页里的设置页-二级场景

【模块】：一般指页面中的部分区块，也有指背景图。如背景、按钮、icon都是模块。

【功能】：一般指的是，页面或者模块中，需要操作或点击的某个点，如上图，发现页中的搜索icon。

【状态】：一般指当前切图的状态区分，像按钮的话，有默认状态、点击时状态、按下状态、不可点击状态等，网页上按钮还有悬停状态。

注意：所有命名只能为小写英文字母，不要为了好看或者像平时打英语一样，首字母是大写之类的，也不可以为中文，不然对于开发来说，是没有意义的，因为他们还是得自己再改一遍。

注意：ios切图需要在命名后加上@2x、@3x后缀名，安卓的切图不能加(加了好像会报错)，安卓一般将不同倍率的图放在不同文件夹。

现如今UI切图工作也变得越来越方便，如国产的蓝湖协作插件、PxCook等众多优秀工具，具体工具和使用方法不在此详述，可进官网了解：

名词基本规范一览

名词命名：

bg（backgrond）：背景

nav（navbar）：导航栏

tab（tabbar）：标签栏

btn（button）：按钮

img（image）：图片

del（delete）：删除

msg（message）：信息

s(Selection)：选中

n(Unchecked)：未选中

icon：图标

content：内容

left/center/right：左/中/右

logo：标识

login：登录

register：注册

refresh：刷新

banner：广告

link：链接

user：用户

note：注释

bar：进度条

profile：个人资料

ranked：排名

error：错误

操作命名：

close：关闭

back：返回

edit：编辑

download：下载

collect：收藏

comment：评论

play：播放

pause：暂停

pop：弹出

audio：音频

viedio：视频

状态命名：

selected：选中

disabled：无法点击

highlight：点击时

default：默认

normal：一般

pressed：按下

slide：滑动

切图命名栗子：

common_nav_btn_back_s@2x.png

common_nav_btn_back_s@3x.png

common_tab_demand_s@2.png

common_tab_me_n@2.png

common_tab_me_s@2.png

...

Android切图栗子：(将不同倍率的图放在不同文件夹)

common_nav_btn_menu_n.png

common_nav_btn_menu_s.png

common_nav_btn_back_n.png

common_nav_btn_back_s.png

common_nav_btn_close_n.png

common_nav_btn_close_s.png

common_nav_btn_eidt_n.png

...

本文过长，就先写到这儿，后面会陆续写物理像素与逻辑像素，以及点九切图和动图如何完美引入等关键点，因本人能力有限，文章中还有很多不足之处，请各位指正。

,