网页设计切图标注 第1篇
如上所说，开发人员可以通过标注面板查看和复制图层属性值，如文本图层、字体粗细和行高、颜色值、对象阴影和描边值。那么，到底什么时候需要设计切图呢？切图标注输出的类型主要有四种：
应用型图标设计切图
应用型图标无处不在，如移动端界面、应用市场、手机设置列表等，所以需要输出多种不同的尺寸，并且在iOS和Android 中的参数不同，且iOS系统应用型图标需要提供直角。下图为
功能型图标设计切图
对于iOS系统界面的功能图标，由于部分大屏机型是750宽度设计参考图的倍，所以输出的切图是@3x。默认情况下，@3x是@2x的倍。所以前端工程师会将@2x和@3x的切图标注同时放入库中，再根据设备型号自动调用合适的尺寸。下图为
图片类设计切图
如启动页、引导页、提示页、banner等需要切图标注的图片。有的需要全屏切片，有的需要局部设计切图标注。如果是全屏的图片，最好将图片适配到手机的分辨率。如果页面是背景图片和颜色的组合，只需要切背景图片，前端工程师用代码写颜色值。如果背景图是单个元素的重复平铺，只需剪切单个元素，由前端工程师将单个元素平铺。
可拉伸元素切图
这种设计切图标注的方式在iOS中称为平铺切图，在 Android 中称为点九切图，是指在切图过程中，可以缩小和压缩图像的元素。不可拉伸区域保持不变，可以提高图片的加载速度，节省手机空间。
动效元素设计切图
动效元素设计切图标注一般是在加载动效所需要的切图标注元素，这些图片按照序号排序播放，也称为序列切图。序列切图需要设计师们仔细考虑，以确保流畅、自然的动画再现。
网页设计切图标注 第2篇
切图标注是设计师交付设计稿给开发的一个非常基本环节，主要解决开发中不能用代码实现的东西，比如素材、图标、插画、特殊设计的字体等等。设计切图不仅是裁剪图像那么简单，技巧到位，可以将其应用于任何过程和领域，为你节省大量时间。Pixso的设计切图标注功能有以下亮点：
一图导出多尺寸
选择要导出的对象和图层，可以是单个图层或对象、一组对象或画布上的所有内容、画布中的一部分，然后在面板右下角的导出设置控制Pixso导出资源的方式，包括比例和格式设置。
你可以在右侧面板的“导出”部分查看、添加和删除导出设置。如果已经添加了导出设置，则可以使用键盘快捷键导出您的选择，MacOS:「Shift Command E」 ；Windows：「Shift Ctrl E」。
IOS：采用 750×1334 来设计，@2x切图标注直接适配750×1334分辨率的机型，并向上向下适配主流分辨率（@2x/@3x）；
Android：采用 720×1280 来设计，XHDPI 切图标注直接适配 720×1280 分辨率的机型，并向上向下适配主流分辨率（XHDPI/XXHDPI）。
格式丰富不失真
设计切图导出的格式有以下四种：
导出为PNG：PNG是一种无损位图格式，图片质量不会随着资源的压缩而降低。
导出为JPG：JPG是一种基于像素的图像格式。与PNG不同，每个JPG 都有固定的尺寸。
导出为SVG：SVG是一种基于XML的矢量图形。是可以在任何屏幕上呈现的数值和坐标的形状。
导出为PDF：打开或者打印的时候都不会有排版错乱的情况。
高效协作不用等
作为一个集「原型 • 设计 • 协作 • 交付 • 资源管理」于一体的设计平台，前端工程师可以自行打开设计稿后自行切图标注，直接选中切图或使用切片工具划一刀，即可完成设计切图标注，同时也可会自动生成代码可供参考，高效解决设计师没时间切图、切漏图、切错图的尴尬局面。前端工程师切换到开发者标注模式，即可查看和复制设计元素代码和属性值，包括对象尺寸和布局约束的值，以简化开发过程。另外按住 Alt/Option 键，也可以快速获取元素距离容器的相对位置。
网页设计切图标注 第3篇
打开 AE，首选项 – 常规，将允许脚本写入文件和访问网络选项勾选上。
这里设置选择 Demo ，可以导出 html 文件，在浏览器查看动画效果。选择 Glyphs 将字体转换成图形形状。
导出文件：
在线测试结果：可以直接上传 json 文件，可以提前知道动画是否有问题，然后再交付给开发。
切图命名规范
网页设计切图标注 第4篇
必须要在正确的画布尺寸上切图，如不能在 750px 宽度的设计稿上去切 XHDPI，XXHDPI图，必须要在 720px 上处理 XHDPI，XXHDPI图。
关于 750px 设计稿上切@2x，@3x图时，只要所选图层是智能对象或者是矢量图层，就不用担心分辨率问题。
切图格式常用 PNG，这是因为 PNG 体积小（K值），最大程度减少安装包大小；无损压缩，保持素材清晰度；支持透明效果，只保留图层内容本身。也是由于 PNG 图片的特点，给切图带来了 3 个需要注意的知识点：
双数像素切图：750x1334px 与 720x1280px 的切图资源大小都必须为双数像素，才能保证开发时素材被高清显示。
实际切图与展示区域（桌面图标）：桌面图标/应用icon 会被运用在不同的位置，比如手机桌面，产品平台，手机系统列表……因此在输出桌面图标切图素材时，不需要对桌面图标切图进行圆角处理。
内存大小：为了方便用户使用产品时快速加载页面，需要对大素材或者图片进行压缩，常用的工具有ppduck、熊猫压图，都是业内较优秀的图片压缩工具，压缩出来的图片既保证了清晰度又减小的 K值。
盒子模型是网页开发中经常用到的CSS技术思维模型，模型具有内容（content）、内边距（padding）、边框（border）、外边距（margin）4 个属性。所有的控件和信息都需要在每一个盒子里完成多状态展示，所以可以理解为工程师们在搭建页面时先在页面上画一个又一个的格子（盒子），它们都是矩形格子，与我们的切图矩形相匹配，同一种控件的格子大小一模一样，就像复制粘贴一样。
同一类型的控件与它们所有状态的切图都需要统一尺寸。
动效实现原理是由若干张图片连续播放，从而形成视觉影像，这若干张图片就是需要提供给工程师实现动效的序列切图。
网页设计切图标注 第5篇
当设计稿完成后上传画板至蓝湖，可以通过链接的方式分享给客户、前端或是项目中的其他成员
当分享链接给他人后，他可以自动加入你的项目队伍中称为围观群众，而此时你可以根据意愿设置管理他们的权限操作。
使用
在蓝湖 Web 端创建团队与项目
执行 Plugins > 蓝湖 > 上传所选 Artboard / 上传全部 Artboard 或使用快捷键 command⌘ + L / command ⌘ + control ⌃ + E
1. 自动标注，一键下载多倍切图
通过插件一键上传所需设计图
进入设计图详情页，可查看设计图标注信息，并复制相应代码
2. 同步 Sketch Prototyping 并支持共享
在 Sketch 49 内做好交互原型，通过插件上传所需设计图
该 Sketch Prototyping 会直接同步至 蓝湖 Web 端，可在 蓝湖 Web 端 和蓝湖 APP 进行预览操作
在标注页也可查看跳转逻辑
设计图标注时，右侧属性区有 跳转页面 和 跳转动画 两种属性以方便查看
前往 蓝湖网盘下载页下载蓝湖网盘并安装
将公共 Sketch 文件放在蓝湖网盘对应团队的 Sketch 文件夹内
打开 Sketch，执行 Sketch > Preference > Libraries 添加 Library 文件（公共 Sketch 文件）
公共文件 Library 修改后，蓝湖网盘 会将其同步至云端，所有调用过该文件的 Sketch，都会在右上角看到紫色的更新提醒，团队设计师们可自主选择是否同步更新
提供一张画板，可将设计图随意拖动摆放，绘制页面间跳转逻辑连线，直观展现产品逻辑
支持在设计图上打点标记，或框选区域标记，并写下相应批注并 @团队成员，被 @成员会及时收到通知
设计图更新后，通过插件上传，会自动成为最新版本，同时保留历史版本
可基于设计图，快速制作一个高保真的交互原型，支持手机端预览、操作
本周排行榜
邮件投递： gsir@
慕枫建站平台专业提供高端网站建设,高端网站设计,企业网站制作,为广大公司客户建立高端品牌网站。
Copyright©2018 高端网站设计慕枫网络 All Rights Reserved. 浙ICP备15047023号 浙公网安备 33021202000871号
寒枫总监
已有账号
重置密码
网页设计切图标注 第6篇
设计切图的命名规范是UI设计师基本的技能之一，团队成员遵守统一的命名规范可以有效配合，提高工作效率。标准的命名规则可以在后续修改文件和图层更方便，比如我们更改了设计切图标注的内容，只要切片名称保持不变，即可一键替换。
通用类型设计切图标注命名规则
命名格式：组件_类别_功能_状态@
示例：tabbar_icon_home_default@
中文对应的是：标签栏_图标_主页_默认@
模块特有设计切图标注命名规则
命名格式：模块_类别_功能_状态 @
示例：mail_icon_search_pressed@
对应的中文为：邮件_图标_搜索_ 默认@
如果将所有的命名都拼写完全，设计切图标注名称会太长，所以我们可以将一些常用的英文单词缩写，以减少开发代码工作和资源的成本。至于如何缩写，任何缩写规则都可以，只要整个团队能够达成共识，拿出一个缩写列表即可。下面是UI常用英语单词缩写规则示例列表：
网页设计切图标注 第7篇
标注软件
现如今市场已有很多设计交互的平台，如：国内的摹客、墨刀等，国外的 Figma、invision 等，各自都有优秀的特点，既满足交互需求，又能有标注切图功能，选择适合自己团队的工具与开发一起协作即可。
支持 sketch 导入，Figma 也像 Zeplin 一样，标注页面间距与尺寸，并且支持各种图片格式、尺寸、形态输出，开发人员也有相应的代码可用参考，分享链接即可。