web网页界面如何给前端标注，切图

一键标记切图， *** 作更快捷安装蓝湖插件之后，即可一键标记切图，方便快捷。

一键上传蓝湖，自动共享给同事

将标记好切图的设计图一键上传到蓝湖，即可将设计图跟切图共享给你的同事，管理更科学。

无须逐一发送，你的同事就能在线查看、在线评审设计图，还能自动标注和下载切图。

一键下载切图，支持多种设备

设计图上传到蓝湖后，可以一键下载多页面切图，也可以下载单张设计图内的切图文件；

而且蓝湖的切图下载支持多种设备，

开发常用的 PNG、SVG、JPG、PDF、WebP 格式都有哦~

一键压缩切图，告别二次加工

蓝湖支持一键压缩切图，能有效地缩小应用和网站的图像大小，从而让网站加载更快，用户体验更佳！

设计师和开发工程师从此告别切图文件二次加工，再也不用一张张地压缩切图文件了。

说下目前市面上的一些标注工具的优缺点好坏：

PxCook:（我的评价：4.5星）

先说我用过还不错的标注工具，也是我目前在用的工具。 *** 作形式和MarkMan有些许相似，不过交互体验上高出了一个档次。主要表现在支持智能的拖放标注，移动设备单位切换等方面上。并且它是为数不多的PS和Sketch都支持的标注工具。

优点：

成熟：跨平台——支持Windows和Mac

成熟2：支持PS和Sketch。

交互特别智能，也方便，一拖一放就标注完了。

相当需要说的一点：对于PSD文件或者Sketch进行了修改之后，PxCook里的标注会自动进行更新，免除了手动 *** 作的过程。这是后面很多软件没有的。

支持移动设备的多单位切换。

对于应用了图层样式的图层而言，它会忽略图层样式的尺寸，比较符合我们开发人员思路。

对于应用了颜色叠加的文本，标注时候，颜色值首先是正确的。

对于应用了颜色叠加，同时嵌套了组也对组应用了颜色叠加的文本标注颜色值也是正确的，以上两点很重要，因为我发现很多设计师喜欢通过这种方式来修改文本颜色。

缺点：

不能支持多个文件同时进行标注。

对于图层样式等信息，不能进行详细查看。

价格：免费

点击这里和UI设计

Assistor PS:（我的评价：3星）

韩国推出的一款综合类设计辅助工具。其中也提供了标注功能。其流程为通过控制PS进行标注，类似于插件但并非插件。可谓开创了自动标注的先河，基本 *** 作就是通过先选中图层，然后在插件面板中点击生成标注，标注会以一个新的图层的方式存在在你的设计稿中。只不过该软件已许久不再更新和维护了。

点击这里和UI设计小伙伴寻找更合适的标注工具

优点：

较为智能，不用手动去对像素了。

支持字体等标注，以及支持基本的颜色叠加识别。

支持Windows和Mac。

l   缺点：

仅支持PS。

对标注图层的设定有些欠妥：生成的标注是单独的图层，管理起来不方便；可以对同一个图层点击多次标注，这样就创建了多个相同的标注图层……

不能同步更改，如果设计稿改了，那标注改起来很不方便，先要找到对应的标注图层删掉，然后再重新标注。

速度慢（运算速度），比如我点一下标注，在PS里需要算几秒才能标出一个距离。

会把图层的效果（比如投影等）也算到尺寸里？！在大多数情景下感觉似乎不太符合开发人员的思路。

对于带有混合模式以及透明度的颜色叠加的文本进行标注时，颜色值取值不正确。最终结果应该是黑色，但是标注结果却是红色。

对于嵌套了组，同时对组也应用了颜色叠加之后，的文本标注取值也不对。最终结果应该是绿色，标注结果也变成了红色。

价格：由于公司被收购，从100usd/年变免费。

标你妹啊：（我的评价：3.5星）

这是一款在线的非标注工具，更适合开发人员，可以及时动态看到设计稿的相关标注信息，只需要把PSD上传上去即可，它会在服务器上去分析你的PSD然后提供和标注相关的数据。

优点：

交互方式更加流畅和直观， *** 作响应程度很快。

对于移动单位标注的切换更加直观和方便。

对于应用了图层样式的图层而言，它会忽略图层样式的尺寸，比较符合开发人员思路。

缺点：

安全的担心：需要上传PSD文件，对于一部分人和公司，文件的保密性可能是不能逾越的鸿沟，同时对PSD文件体积有限制。

只支持PSD文件。

上传受到网速限制，那些大文件真是要很久啊，不太符合国情。

有bug：对于一部分psd文件无法正常解析。

对于进行了颜色叠加的文本，得到的颜色值是错误的。

外面如果再嵌套了一个组，得到的颜色就错的更加离谱了。

价格：免费

MarkMan：（我的评价2.5星）

MarkMan是我最早接触过的标注工具，那时候标注需要的不多，作为一个可以为所有图片格式提供通用标注的软件来讲，MarkMan是个不错的选择，早期版本中是不支持移动端单位的，不过大概在几年前吧，他们加入了单位切换。问题在于，交互。他们后来加入的所有功能都放在了右键菜单里，用起来并不是那么方便，不过作为元老级产品，MarkMan是很赞的。直到他们把免费版变为了收费版后，就没见他们怎么更新过了。

优点：

入场比较早，做得比较早

为常见图片格式提供通用基本的标注，满足基本需求

缺点：

标注方式不智能，只能说是满足基本需求

部分功能（比如单位切换）在右键菜单里，很不方便，交互不够简洁明了。

价格：60rmb每年

Dorado：（我的评价：2星）

Dorado是后来腾讯出的一个标注工具，这个应该是继MarkMan之后一个同样在当时比较方便的标注工具了，好像和MarkMan之间有一段小风波。不过我们不讨论它，单纯客观来评价这个软件。他基本功能和MarkMan差不多，但是他的体积非常的小。

优点：

为常见图片格式提供通用基本的标注，满足基本需求

体积小巧，只有几百K，而且是绿色的不用安装。

支持的图像格式更多。

缺点：

只有Windows版本，没有Mac版本。

还是标注方式不够智能，仅满足基本需求

价格：免费

Parker：（我的评价：2.星）

Parker是以插件形式进行辅助标注的工具。支持PS和Sketch，要分别为两个工具去单独安装插件Parker插件。基本 *** 作与Assistor PS特别像，甚至连一些Bug和处理也一样[Microsof1] ，详见如下文中提到的缺点。

优点：

满足基本标注需求。

较为智能，不用手动去对像素了。

支持字体等标注，以及支持基本的颜色叠加识别。

缺点：

生成的标注是单独的图层，管理起来并不方便，并且可以对同一个图层点击多次标注，这样就创建了多个相同的标注图层。

如果设计稿修改了，那标注修改起来不方便，先要找到对应的标注图层删掉，然后再重新标注。

运算速度较慢，比如点一下标注，在PS里需要算几秒才能标出一个尺寸。

会把图层的效果（比如投影等）也算到尺寸里，感觉不太符合大多数开发情景。

对于这种带有混合模式以及透明度的颜色叠加的文本进行标注时，颜色值取值不正确。最终结果应该是黑色，但是标注结果却是红色。

对于嵌套了组，同时对组也应用了颜色叠加之后，的文本标注取值也不对。最终结果应该是绿色，标注结果也变成了红色。

价格：60rmb一次性付费。

以上就是庞姿姿的回答，希望对你有所帮助。

---