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学习路线图,您可以清楚地了解您需要掌握的知识!