了解ui设计切图的规范操作，教你日常切图如何做

切图是ui设计最日常的工作之一，而有些ui设计者往往觉得切图没有大不了的。其实切图的好坏关系到效果的呈现，切图也是有一定规范要求的。今天就让小编为大家介绍ui设计切图的规范操作。

　　ui设计切图的规范操作

　　1、Android篇标注规范：

　　画布大小：以720 x 1280分辨率为准进行标注。

　　字体：按照像素标注，只使用 24 pt，28 pt，36 pt 和 44 pt 的字体，并pt 值除以 2 作为 sp 数值交给工程师。

　　颜色：按照实际的颜色值标注，Android颜色值取值为十六进制的值 比如一绿色的值， 给工程师的值为 #5bc43e。

　　间距：每个主要的控件必须标注出来，各种边距必须标注清楚。所有尺寸的 px 值除以2作为 dp 数值交给工程师。

　　切图：统一采用Png格式，部分需要做适配的图片需要制作.9格式。

　　图片优化：图片压缩优化，ICON 可采用PNG 8，支持完全透明和完全不透明两种效果和256色，需要高清的可采用 PND24/32。

　　切图命名：每个页面按照设计高保真分目录：hdpi（480 *800）xhdpi（720 *1080） xxdpi（1080 *1920）。依图片性质命名。例如 bg_xxx.png、btn_xxx.png、img_xxx.png、tab_xxx.png等。

ui设计切图（图片来自网络）

　　2、iOS篇标注规范：

　　画布大小：以@2x图以640/750为宽度尺寸为基准标注。

　　字体：按照640/750宽尺寸中的像素进行标注。

　　颜色：按照实际的颜色值标注，iOS颜色值取 RGB各颜色的值比如某个色值，给予IOS程序员的色值为 R:12 G:34 B:56给出的值就是 12,34,56(有时也要根据程序员的习惯，有时也用十六进制)。

　　间距：每个主要的控件必须标注出来，各种边距必须标注清楚。

　　切图：统一采用Png格式，以640/750宽分辨率为@2x输出三套尺寸：@1x @2x @3x。

　　图片优化：图片压缩优化，ICON 可采用PNG 8，支持完全透明和完全不透明两种效果和256色，需要高清的可采用 PND24/32。

　　切图命名：每个页面按照设计高保真分目录：@1x @2x @3x。在文件名中需要区分是几倍图，例如: xxxxx@2x.png。

ui设计切图（图片来自网络）

　　日常切图如何做

　　切图规范其实很简单，就是遵守一点，我们的切图是为了方便开发使用，完成交付过程，而不是为了完成切图这件事。

　　1、至于如何切图，以往我们会使用二倍图下设计，三倍图下切图原则；但日常工作中，我相信大多数人都会嫌麻烦；我们可以“遵守横平竖直原则”，让你的icon不出现虚边。

　　2、做好提前与开发沟通，标注特殊元素，交付设计稿时，除了提前制定设计规范或遵守原定的设计规范外，还需要和开发沟通点击区域，并在验收的时候去进行点击区域的补漏。

　　3、切图格式注意保持背景为透明通道。保证图片格式统一、相同模块icon尺寸统一，便于开发使用，另一方面也方便调整及验收。

　　以上就是小编为大家介绍的关于ui设计切图的相关内容。切图作为ui设计师最日常的工作之一，了解不同系统的切图规范，才能做出最适合的切图，大家学会了吗？