浅谈网页设计切图规范

网页设计切割图，是UI设计师最重要的设计输出，是反映设计师专业水平的重要标准。适当准确的切割图，能最大程度的还原设计图纸，事半功倍。如何输出具有全局控制和对细节的关注的高层次裁剪图形应该是所有设计师一直追求的能力。

一、设计切图的原则

设计切割图输出的目的是与工程师团队合作，所以在团队合作的过程中，首先要保证切割图输出能够满足工程师设计效果图高保真恢复的要求。

其次，切割图的输出要尽量减少工程师的开发工作量，避免切割图的输出带来不必要的工作量。

最后，对输出切割图进行尽可能的压缩，以减少APP的总尺寸，提高用户的加载速度。

因此，图形切割的输出应准确、方便、紧凑。

1. 切图资源尺寸必须为双数

智能手机以双屏著称，比如iphone 7，分辨率为750 * 1334像素。

为了确保切割资源在工程师开发时以高清格式显示，切割资源的大小必须是均匀的。因为1px是智能手机能识别的最小单位，换句话说，一个像素在智能手机上不能分成两部分。

因此，如果是一个奇异的切割图形，手机系统会自动拉伸切割图形，导致切割元素的边缘模糊，从而导致开发出来的APP界面效果与最初的设计效果相差甚远。

2. 切割图的输出应根据标准尺寸，并考虑手机的拟合

图标切割图形输出是切割图形资源输出的重要组成部分。

由于开发中每个模型的屏幕分辨率不同，需要对一些大屏幕模型进行调整。

3.缩小图像文件大小

图标切割图形输出是切割图形资源输出的重要组成部分，如新手引导页面、启动页面、默认图形、广告图形等。

一般来说，文件的大小比较大，这不利于用户在使用app的过程中加载页面。因此，对图像进行剪切，尝试压缩图像文件的大小。

4. 可点击部分应注意可点击区域不小于88px

44px的点击量是基于iphone 3的(320×480px)分辨率，你可以随时掌握最新的手机分辨率。

在iphone7的视网膜下(750*1334px)，

44px的点击区域变成了88px。然而，无论是320*480px的44px，还是750*1334px的88px，换算成物理尺寸时，都在7mm到9mm之间。

5. 可点击部分将相应的状态剪切到输出，如正常状态和点击状态。

在图形切割过程中，不仅要输出图形的正常状态，还要注意不要遗漏图形的其他状态。

这也是设计师常犯的一个错误，例如，在切割按钮的过程中，他们可能会忽略点击图形的状态。

二、切图输出类型

1. 桌面图标切割图形输出

App桌面图标显示在很多不同的地方，如移动桌面、App store、移动设置列表等。因此，app桌面图标需要以多种不同的尺寸显示。

相应的桌面图标设计输出两个平台的尺寸不一样，在输出中把这些尺寸的双平台全部输出截图。

桌面图标切割图只需要提供一个直角图标切割图即可，手机系统会自动产生圆角效果。

2. 系统图标切割图输出

两个平台的一套图纸:

Ios平台(iphone 6plus版本除外)与android平台共享44*44px的裁剪素材，可实现两平台一套裁剪图片的开发。

适应大屏幕:

为了适应iphone 6plus和iphone

7plus，一组切割图是原始44*44px切割图的1.5倍，即66*66px切割图。(UI设计适应将在另一篇文章中详细讨论。)

3.切割图片输出

图片类切图主要是指起始页、新手指南页、默认提示、广告图等需要完整切图的图片。

相同类型的图形切割图应保持相同的大小，供工程师开发和使用。

另外，一般来说，这些切割图的文件比较大。在切割图的过程中，需要控制切割图文件的大小。(后面的文章将详细说明如何压缩切割图的大小。)

4. 动态效果元件切割图输出

动效元素切割图一般是指在app中加载动效所需要的切割图元素。例如qq的下拉加载动效就是几个切割图连续播放所形成的动画效果。这些图片是按序列号排序的，我们称它们为序列片。序列切割图是用户界面设计过程中不可避免的问题。这种切割图需要动态效果的流畅自然表现，需要设计者的深思熟虑。

5. 可拉伸元件图纸输出

可拉伸元素一般是指在图形切割过程中可以被缩减和压缩的元素，如按钮、输入框等。通过对这些元素进行瘦身和压缩，可以大大改善图像的大小，从而提高用户在应用程序中的加载速度。这在ios中被称为tile

cutting，在android中称为dot nine。

6. 不需要切割的部分

重新设计的切割图的输出中的许多元素不需要输出，而是直接使用系统的本地设计元素来修改参数。

作为一个设计师，你需要知道哪些元素需要被削减，哪些元素需要在系统中使用，以避免不必要的削减。

例如，文本、卡片背景、线条和一些标准的set图形不需要提供cut图形。例如，搜索框只需要指示注释中的大小、圆角的大小、笔画的厚度和颜色值。工程师可以通过代码根据设计效果来实现这种效果。

三、缩小裁剪图形的方法

1. 点割图法

PNG之所以称为PNG，是因为文件extension.png。

p9的主要目的是适应各种android手机型号。这种方法允许图像水平和垂直拉伸，而不会损坏图像。

另一个重要的效果是减少了不必要的图像文件大小，大大提高了页面加载速度。Android平台是切割地图的重要途径。

制作点九的软件是“DRAW9PATCH”，它可以很容易的制作点九图，并在切割图后预览开发效果。

3.在线图像压缩工具“Tinypng”

使用“Tinypng”智能PNG和JPG在线压缩工具，在不影响图像质量的情况下，将较大的图像切成较小的片。

Tinypng在线压缩工具在图像质量和文件大小之间取得了完美的平衡，降低了图像的视觉质量，但大大降低了图像的剪切大小。

Tinypng是一个高度推荐的图像压缩工具，现在是最广泛使用的在线压缩工具。

使用说明:

1. 一键剪画面，真正解放双手

卡特曼允许您自动输出各种图片，你需要在点击一个按钮。

2. 支持IOS平台

输出支持IOS平台单倍图，双位数，支持iphone 6/6p大小比。

支持Android平台

输出支持各种分辨率的Android平台，如XXHPDI, XHDPI, HDPI等，都是自动输出，节省了你和朋友玩的时间。

3.支持多种图像格式的输出

什么PNG, JPG, GIF里的单词，还可以缩放，压缩大小。从现在开始，是时候告别所谓的“web格式”特性了

4. 多个层分别合并和输出

图层太多了吗?木头!你可以选择多个。支持选择多个图层来合并输出，可以一个一个的输出哦，很方便的!

5. 固定大小的输出

想要输出一个固定大小的图标，各种位置供您选择，秒秒事情~~

草图测量插件的介绍

素描测量是最新的素描切割插件，使用非常简单。它可以用一个键生成Html注释文件，并自动生成非常高端的设计规范文件。

以上介绍的网页设计切图规范，只是一种工作方法，技术更新很快，所以小编在此要提醒大家的是，每个人在具体的工作中，都要灵活运用，希望它们能对设计者有所帮助。