UI设计中切图规范指南分享

Date 2024-05-22 20:56:05

设计师的切割输出是反映设计师专业水平的重要标准，也是设计师表达设计态度的最有力的语言。合适、准确的切割图可以最大限度地恢复设计图纸，用一半的努力得到两倍的结果。如何输出具有全球控制和细节重点的高级切割图应该是所有设计师都需要追求的能力。

UI设计中切图规范指南分享

设计切图的原则

设计切图输出的目的是与下游工程师团队合作。在团队合作过程中，首先要确保切图输出能够满足工程师设计效果图的高保真还原需求。

其次，切图输出应尽量减少工程师的开发工作量，避免因切图输出而造成不必要的工作量。

最后，输出的切割图应尽可能压缩，以减少应用程序的总尺寸，提高用户使用时的加载速度。因此，切割输出应准确、协调、压缩。

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

众所周知，智能手机的屏幕尺寸是双值的，比如iPhone 7.屏幕分辨率为750*134 px。图形切割资源的大小必须是偶数，以确保图形切割资源在工程师开发时高清显示。因为1px是智能手机可以识别的最小单元，换句话说，智能手机中的1像素不能分为两部分。

因此，如果是单数切割，手机系统会自动拉伸切割，导致切割元素的边缘模具燃烧，导致开发的应用界面效果与原设计效果相差甚远。

2.图标切图输出应按标准尺寸输出，并考虑手机适配(主要是iPhone) 适应6plus)

图标切图输出是切图资源输出中至关重要的组成部分。在开发过程中，由于屏幕分辨率不同，需要适应一些大屏幕型号。

为了适应大分辨率手机(如iPhone) 7plus)，切图时需要输出图标 2x和其中，3x的切图 2x切图可满足双平台大多数型号的适应要求， 3x是用来适应iPhone手机的各种plus版本(后面会有专门解释适应问题的文章)。 3x是 2x尺寸的1.5倍，例如图标切图 2x尺寸为44px，所以 3x尺寸为66px。

3.尽量减少图片文件的大小，以提高APP的使用速度

在切割资源输出中，图标切割是新手指南页面、启动页面、默认图、广告图等非常重要的组成部分。一般来说，图片切割文件的大小相对较大，不利于用户在使用应用程序时加载页面，因此图片切割应尽可能压缩图片文件的大小。

4.点击部件时，应注意点击区域不小于88px

44px的点击区域值是iPhone 3（320×480px)是在普通显示屏下制作的，现在手机分辨率大大提高，这个数据自然要跟上时代的步伐。

在iPhone7(750*1334px)的Retina显示屏下，44px点击区域变成88px。但无论是320*480px尺寸下的44px，还是750*1334px尺寸下的88px，换算成物理尺寸后，大致在7mm-9mm之间。

早在人机工程学研究中就得出结论，人类舒适的触摸范围需要7-9毫米。因此，88px的值经常出现在iOS的官方空间尺寸中，例如，菜单栏的高度是88px。

5.可点击部件输出所有相关状态，如正常状态和点击状态。

在切割过程中，我们不仅要输出正常状态的切割，还要注意不要错过其他状态的切割。这也是设计师经常犯的错误。例如，在按钮切割过程中，点击切割图的状态可能被忽略。因此，设计师在制作设计图纸时，最好尽可能地显示页面中的各种状态，以避免在后期切割过程中丢失状态。

应用程序的桌面图标将在许多不同的地方显示，如手机桌面APP store、手机设置列表，因此app桌面图标需要多个不同尺寸的切图输出。两个平台对相应桌面图标设计的输出尺寸也不尽相同，在输出时要将这些尺寸全部输出到双平台上。桌面图标切图只需提供直角图标切图即可，手机系统会自动产生圆角效果。

输出系统图标切图

适合双平台的一套图：

iOS平台（iPhone 除了6plus版本)和Android平台公共44*44px切图材料，一套切图可以适应两个平台的开发。

适合大屏幕：

为了适应iPhone 6plus、iPhone 7plus，单独切割一套比原44*4px大1.5倍的切图，即66*66px大小的切图。

减小切图大小的方法：点九切图法

点九切图是Android平台独特的图像处理方法，因为文件扩展被称为.因此，png被称为点九切图法。点九切图的作用主要是适应Android的各种手机型号。这种方法可以随意水平和垂直拉伸图片，不会损害图片效果。另一个重要的作用是减少不必要的图片文件大小，大大提高页面加载速度。是安卓平台的重要切图方法。

制作点9的软件是“DRAW9PATCH“制作点九图非常方便，预览切图后的开发效果非常方便。设计师也可以在PS中用铅笔工具绘制点图。

Tinypng，利用“Tinypng智能png和jpg在线压缩工具在不影响图片质量的情况下压缩较大的图片切图。Tinypng在线压缩工具可以在图片质量和文件尺寸之间找到完美的平衡，基本上不会降低图片的视觉质量，但会大大压缩图片切割尺寸。Tinypng是一种非常推荐的图片压缩工具，也是目前应用最广泛的在线压缩工具。

Cutterman是最主流的设计师切图工具，可以自动输出您需要的切图。大大降低了设计师的工作量，提高了切图效率。它支持各种图片格式、尺寸和形式的输出，与安卓兼容iOS、一键输出WEB各种系统。

以上优漫动游我希望它能帮助路上的设计师。分享是一种美德，我也希望将来能分享更多的设计经验。学习UI设计培训，您可以参考优曼教育提供的UI学习路线。学习路线包括PS软件介绍、人工智能和品牌设计、视觉表达技术、网络视觉设计、图标设计、产品交互、移动终端设计等。根据优曼提供的UI学习路线图，您可以清楚地了解您需要掌握的知识！

上一篇：为什么插画可以比普通的平面设计更吸引眼球呢？

下一篇：平面设计和广告设计哪个更有前途？

课程推荐

— Course recommendation —

红喵设计

红喵设计

红喵设计

红喵设计

红喵设计

红喵设计

红喵设计

红喵设计

more

UI设计中切图规范指南分享

课程推荐

— Course recommendation —

课程

友情链接

关于红喵

快速导航

红喵平面设计