赞助商
立即赞助

该如何做切图标注,才能让开发把你夸上天?

UI设计3年前 (2021)发布 流光
3.1K 0 0

一个互联网产品从构思到落地,大致分为以下环节:发现商机 – 市场调研 – 头脑风暴 – 产品策划/功能设计 – 原型绘制 – 交互设计 – 项目立项 – 流向图绘制 – UI设计 – 切图标注 – 技术开发 – 产品测试 – 项目上线。

切图是指在设计稿里整理出技术开发所需要的素材或图片。合格的、严谨的切图可以大大减少技术人员开发的返工率,减少技术人员的开发工期,提升开发流畅度,从而减少项目人力成本,最终开发出有利于交互,拥有良好视觉感的产品。

切图标注作为连接 UI 设计到技术开发两者的工作模块,是不可或缺的。设计师需要熟悉工具、理解设计尺寸与切图倍数的关系,才能在切图时进行判断:目前的设计稿尺寸与切图单位是否正确匹配。

切图标注

如今,设计切图插件能够将设计稿里所选中的图层、图层组按不同开发规范宽度、倍数,进行合并裁剪切片。与传统切图方法「调整图像尺寸 – 选中切图图层/图层组 – 调整画布尺寸 – 导出web所用格式」相比,这一系列动作被进行了一键化处理,只需要在插件中选择好开发语言,保持文件夹位置便可一键标记或导出,极大地缩减了繁琐的操作流程。

蓝湖插件

蓝湖插件在设计稿做切片标记,上传至平台的画板便带有切图下载。

该如何做切图标注,才能让开发把你夸上天?

Cutterman插件

该如何做切图标注,才能让开发把你夸上天?

3种开发语言(iOS,Android,Web):根据不同的项目选择不同的开发语言,下方小箭头可进行素材输出「倍数」选择。

倍数:插件在导出选中图层时以「@2x」和「XHDPI」为标准对设计稿进行等比放大缩小。如 750px 宽度的设计稿导出「@3x」和「@1x」时,导出的切图会分别放大 1.5 倍和缩小至 0.5 倍,然后进行图层导出。

导出选中图层:插件根据已选语言、倍数,对已选中的所有图层、图层组进行合并裁剪然后导出。裁剪大小为所有图层合并后总宽度高度。

固尺寸:插件导图已图、图组并,画或者图至固尺寸,图导。已图固尺寸,则被图,素被压缩。已图固尺寸,则被画,图素变,素尺寸变固尺寸。

设计稿尺寸与切图倍数

UI 需确稿尺寸切图,切图素供使。否则落图标变形,素低况。

端尺寸它应切图倍数

iOS:采 750×1334 ,@2x 切图 750×1334 辨率,并流辨率(@2x/@3x)。

稿750x1334px——切图倍数iOS@2x,iOS@3x

Android:采 720×1280 ,XHDPI 切图 720×1280 辨率,并流辨率(XHDPI/XXHDPI)

稿720x1280px——切图倍数XHDPI,XXHDPI

程序(它i6750px划)

稿750x1334px——切图倍数png24

端页、众链(程序统使i6,转)

稿750x1334px——切图倍数

设计稿尺寸与切图倍数对应关系

1. APP-iOS

该如何做切图标注,才能让开发把你夸上天?

2. APP-Android

该如何做切图标注,才能让开发把你夸上天?

3. 微信小程序

该如何做切图标注,才能让开发把你夸上天?

4. 手机端网页、公众号链接

该如何做切图标注,才能让开发把你夸上天?

5. 注项

必须确画尺寸切图, 750px 宽稿切 XHDPI,XXHDPI图,必须 720px  XHDPI,XXHDPI图。

关于 750px 设计稿上切@2x,@3x图时,只要所选图层是智能对象或者是矢量图层,就不用担心分辨率问题。

切图格式与大小

切图格式常用 PNG,这是因为 PNG 体积小(K值),最大程度减少安装包大小;无损压缩,保持素材清晰度;支持透明效果,只保留图层内容本身。也是由于 PNG 图片的特点,给切图带来了 3 个需要注意的知识点:

双数像素切图:750x1334px 与 720x1280px 的切图资源大小都必须为双数像素,才能保证开发时素材被高清显示。

该如何做切图标注,才能让开发把你夸上天?

实际切图与展示区域(桌面图标):桌面图标/应用icon 会被运用在不同的位置,比如手机桌面,产品平台,手机系统列表……因此在输出桌面图标切图素材时,不需要对桌面图标切图进行圆角处理。

该如何做切图标注,才能让开发把你夸上天?

点击区域大小:画布大小≠素材大小。一般情况下素材分两种,装饰素材与可点击素材,装饰素材直接按图层贴边切图,点击素材需要考虑点击区域的位置与大小,适当调整素材的画布,再进行素材切图。

该如何做切图标注,才能让开发把你夸上天?

内存大小:为了方便用户使用产品时快速加载页面,需要对大素材或者图片进行压缩,常用的工具有ppduck、熊猫压图,都是业内较优秀的图片压缩工具,压缩出来的图片既保证了清晰度又减小的 K值。

切图分类

该如何做切图标注,才能让开发把你夸上天?

CSS盒子模型 ── 多状态切图

盒模页CSS思模,模(content)、距(padding)、框(border)、距(margin)4 属。控件息需盒状展示,程搭页先页画(盒),它矩形,切图矩形相匹,控件模,复粘贴。

同一类型的控件与它们所有状态的切图都需要统一尺寸。

该如何做切图标注,才能让开发把你夸上天?

该如何做切图标注,才能让开发把你夸上天?

动效切图gif

动效实现原理是由若干张图片连续播放,从而形成视觉影像,这若干张图片就是需要提供给工程师实现动效的序列切图。

该如何做切图标注,才能让开发把你夸上天?

切图命名与分组

1. 命名公式

位置_类别_描述_状态.png,如:导航_按钮_搜索_默认.png。

Example:nav_button_search_default.png

2. 切图命名禁忌

  • 不可出现中文
  • 不可出现英文字母大写
  • 不可出现空格
  • 不可用「-」符号,例如错误的 button-search,正确为 button_search。

3. 切图命名英文缩写

  • 短词掉「音」形缩写;
  • 较长的单词可取单词的头部几个字母形成缩写,如 normal 可写成 nor;
  • 还有一些约定俗成的英文单词缩写,如 background 可写成 bg。

4. 类命

  • 按钮:btn_xxx.png
  • 图标:icon_xxx.png
  • 图:pic_xxx.png或img_xxx.png
  • 照片:pho_xxx.png

5. 常用状态

  • 正常:normal
  • 按下:pressed
  • 选中:selected
  • 禁:disabled
  • 已访问:visited
  • 悬停:hover

6. 切图组

项目-语言-

xxxAPP-iOS-2020.20.20

iOS:@2/@3切图一起放

xxxAPP-Android-2020.20.20

Android:每个尺寸分开单独放

项目切图模拟

案例一

该如何做切图标注,才能让开发把你夸上天?

切哪里?如下图所示:(粉红色遮罩为切图标注)

该如何做切图标注,才能让开发把你夸上天?

案例二

该如何做切图标注,才能让开发把你夸上天?

切哪?图示:(遮罩切图标注)

该如何做切图标注,才能让开发把你夸上天?

案例三

该如何做切图标注,才能让开发把你夸上天?

切哪里?如下图所示:(粉红色遮罩为切图标注)

该如何做切图标注,才能让开发把你夸上天?

欢迎关注作者的微信公众号:「大tip」

该如何做切图标注,才能让开发把你夸上天?

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

一般来说,文字的实际占位在页面中并不是紧贴文字可视边界,是有一定的额外边距的,所以对于标注稿中的文字部分来说,开发往...
4px网格设计
编者按:本文是一篇写给新手的科普指南,从切图的发展史到基础知识,以及常见的术语解释,都有详细的说明,非常适合刚入门的 ...
切图工具
写这篇文章也是总结了以前刚接触的时候遇到的问题,还有来自其他朋友的提问。关于切图的命名规范给人的第一印象就是全英文,...
切图工具
Axure 制作 toB类项目的 Web端原型比较常见,可以将原型做得非常系统、交互逻辑逼真,适用于大部分测试和演示等场景中。甚至...
axure
编者按:完整的 UI 设计流程到底是怎样的?从需求到产品上线,要经历多少个阶段,每个阶段有哪些应该掌握的基础知识,本次优...
UI 设计
随着消费升级的步伐,商家总结出在带动消费能力上小孩>女人>宠物>男人的规律,爸爸们作为商家最不重视的一个角色,...
H5
@菜心设计铺 :图标——界面设计最重要的元素之一。 菜心经常写关于图标的教程和感悟,可见图标设计在我日常工作中占了很大比...
图标设计
编者按:大厂的改版设计都是怎么做的?今天腾讯这篇干货用一个完整的设计流程告诉你,一个优秀的改版案例应该这么来! 一、定...
App改版