网页设计切图标注 第1篇
产品经理：使用智能组件进行原型设计，简单快速。Pixso组件库让原型制作变得比以往更容易，配合交互动画，产品方案演示更加生动；
设计师：邀请团队加入，实现一切设计创意。几分内完成从头脑风暴到设计方案的探索，快速统一视觉规范，实现所有UI/UX设计创意；
运营：随时掌控项目进度，从此精益运营。通过Pixso在线参与产品诞生的全生命周期，实时评估、反馈、审查和更新运营内容；
开发：轻而易举获取代码，从设计到开发无缝过度。Pixso画布上所有内容和样式，自带CSS代码，以便开发人员直接复制使用；
告别繁冗的切图标注流程，一个Pixso就够了。在Pixso多人协作切图，在线切图，让设计交付效率原地起飞！
网页设计切图标注 第2篇
打开 AE，首选项 – 常规，将允许脚本写入文件和访问网络选项勾选上。
这里设置选择 Demo ，可以导出 html 文件，在浏览器查看动画效果。选择 Glyphs 将字体转换成图形形状。
导出文件：
在线测试结果：可以直接上传 json 文件，可以提前知道动画是否有问题，然后再交付给开发。
切图命名规范
网页设计切图标注 第3篇
设计切图的命名规范是UI设计师基本的技能之一，团队成员遵守统一的命名规范可以有效配合，提高工作效率。标准的命名规则可以在后续修改文件和图层更方便，比如我们更改了设计切图标注的内容，只要切片名称保持不变，即可一键替换。
通用类型设计切图标注命名规则
命名格式：组件_类别_功能_状态@
示例：tabbar_icon_home_default@
中文对应的是：标签栏_图标_主页_默认@
模块特有设计切图标注命名规则
命名格式：模块_类别_功能_状态 @
示例：mail_icon_search_pressed@
对应的中文为：邮件_图标_搜索_ 默认@
如果将所有的命名都拼写完全，设计切图标注名称会太长，所以我们可以将一些常用的英文单词缩写，以减少开发代码工作和资源的成本。至于如何缩写，任何缩写规则都可以，只要整个团队能够达成共识，拿出一个缩写列表即可。下面是UI常用英语单词缩写规则示例列表：
网页设计切图标注 第4篇
切图标注是设计师交付设计稿给开发的一个非常基本环节，主要解决开发中不能用代码实现的东西，比如素材、图标、插画、特殊设计的字体等等。设计切图不仅是裁剪图像那么简单，技巧到位，可以将其应用于任何过程和领域，为你节省大量时间。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 键，也可以快速获取元素距离容器的相对位置。