UI标注工具都有哪些？

如题所述

举报该问题

其他回答

第1个回答 2019-12-25

我之前用的zeplin还挺好用的，不过本人英语不太好，就改用了国产插件——摹客iDoc，总体来说我的需求都能满足，而且标注方式很智能，自动标注的信息可以快速切换为百分比，还可以用手动补充工具快速标注文字、坐标、颜色、尺寸、区域。

还有几个实用的功能，比如：

自动生成颜色和字体规范，还可以直接复制CSS代码，开发小哥哥应该比较喜欢。

标记图层，下载图层数据，可以快速还原设计稿。

快速切换不同平台的标注单位。

目前我经常用到的功能就这些，如果有人探索到别的实用功能记得留言告诉我~

第2个回答 2021-01-15

我用的专门的UI标注插件——蓝湖，总体说我的需求都能满足，而且标注方式很智能，自动标注的信息可以快速切换为百分比，还可以用手动补充工具快专速标注文字、坐标、颜色、尺寸、区域。标注完后可以直接把链接发给开发，开发自己就能看。

第3个回答 2020-11-18

推荐蓝湖
我们公司用了三年了
通过插件上传设计图到蓝湖之后，系统会自动标注每个元素的信息
特别省事和方便

第4个回答 2020-02-17

蓝湖呀，很好用的，已经稳定用了3年了

第5个回答 2019-06-21

PxCook(标注、切图工具)、Zeplin(切图、设计稿标注)等

所需工具：PS、AI等(设计)、Cutterman (切图工具)、PxCook(标注、切图工具)、Zeplin(切图、设计稿标注)等。

设计过程就不说了，只要你是一位UI设计师，页面怎么做那你肯定清楚。当你设计完成页面以后，要做的工作就是：标注、切图。

1、界面设计工具(Photoshop)

支持平台：Windows&Mac

Photoshop是最流行的图像编辑器之一，UI设计师入门的必备界面设计工具。相信不是设计行业的小伙伴，也略知一二。PS作为UI界面设计神器，有着强大的图片编辑和处理功能，想要什么的图形都可以用PS来实现，可用于摄影的后期制作，可给图像添加各种滤镜，调整亮度，对比度等，生成高分辨的图形。借助图层面板可非常简单和高效的处理修复图片;并且PS提供了不同文件格式保存的选项，调整图像大小和分辨率也不会丢失图像质量。

PS：如果要制作图标，需要用到矢量绘图软件AI来制作，这样放大才不会失真。

特色：

a、照片处理技术(剪裁背景，裁剪，调整光线，调整颜色，过滤，消除红眼等功能)；

b、强大的图层功能处理副本时保存原件；

c、批量处理照片；

d、兼容其他Abode套件程序，如After Effect，InDesign，Illustrator；

e、Photoshop可以将图像保存为各种格式。

2、标注、切图的工具有很多，在这里只不过是推荐几款常用的给你。

1)Cutterman

切图插件，需要你安装到PS插件里。能够自动将你需要的图层进行输出，以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。

注：需要安装Adobe Air文件，要不然没有办法安装该插件

2)PxCook

PxCook既可以标注，也可以切图。是高效易用的自动标注工具, 生成前端代码, 设计研发协作利器。只需点击拖拽, 即可轻松获得间距尺寸, 字体, 阴影圆角等所有信息。PNG, JPG也能手动测量。支持标注单位：PX , PT , DP/SP , REM。还可以生成前端代码，支持Win/Mac, 支持PS/Sketch等。ui设计工具大揭秘

3)Zeplin

Zeplin 是配合着 Sketch 非常好用的一款插件，设计稿完成后，可以直接从 Sketch 导入到 Zeplin 中。Zeplin 可以帮你自动生成尺码标注、CSS 样式代码、需导出的图片(在 Sketch 中设好切片的设计稿，在 Zeplin 中可以直接导出)，以及共享成员间可以备注和评论。