Copixel

引言：你是不是经常为项目开发的低还原度、频繁的设计走查而感到焦头烂额?眼看着交付日期一天天逼近,却还在为UI细节的实现而伤透脑筋,这种感觉简直糟透了。作为设计师,面对开发完成的页面总会有一种”图样图森破”的无力感,想快速找出差异点,又担心错过关键细节。如果你也有类似的烦恼,那就一定要试试Copixel这个神器!它能完美解决还原度和走查效率低的难题,让你的设计稿在开发过程中的体验感更上一层楼。

Copixel是字节推出的一款强大的设计还原工具，旨在解决开发还原度低、设计走查低效的问题。它提供了高质量的项目还原效果，保障用户体验。Copixel支持多种导入方式，包括设计稿批量导入、图片URL载入等。用户可以通过快捷键和鼠标实现不同的功能操作，还可以将其添加到Chrome、Firefox、Safari和Opera浏览器中。Copixel不仅提高了开发效率，还让设计师轻松完成项目验收，比临摹更精准，验收比找茬更简单。

Copixel：字节推出的精准设计还原工具

Copixel的主要功能

• 多路径导入：支持设计稿批量导入，批量拖入，图片URL载入。
• 比例缩放：支持设计稿快速通过调整尺寸比例大小实现比例缩放。
• 收合模式：根据您的需要可以快捷的展开和收起对话框。
• 锁定功能：锁定设计稿，保障开发页面正常的操作功能。
• 移动位置：可以通过对齐功能和鼠标拖拽实现快速对齐。
• 功能自定义：根据您的需要设置自己常用的功能操作。
• 开发面板大小：根据设计稿尺寸快速调整开发页面的大小。
• 快捷键支持：您可以通过快捷键和鼠标实现不同的功能操作。

使用方法

一、设计师使用Copixel走查开发的页面教程

1.如何选择页面的设计尺寸

建议按照主流窗口尺寸的宽度设计，如：1366px、1440px、1920px；推荐最小设计尺寸使用1366px(宽)，最大设计尺寸1920px(宽)。目的是按照1:1导出设计图，与开发页面显示效果一致。

2.该如何输出设计稿？

建议一次性导出所有要走查的设计稿，可以批量导入到插件，切换设计稿可以提高走查效率。可以通过sketch自带图片导出功能(建议导出为1倍图)，也可以选择其他的导出插件，可以更规范的导出设计稿，生成文件包，如Sketch Measure 插件；使用蓝湖协作工具的也可以直接在蓝湖下载2倍设计稿。

3.如何使用Copixel插件走查？

下载Copixel扩展插件（暂只支持Chrome浏览器）

a.下载插件，扩展到Chrome浏览器

b.打开开发页面，在Chrome浏览器的右上方启用该插件，添加UI设计图

c.通过调整设计图位置、大小和透明度使其与开发页面相对重合，配合飞书或者Teampaper的截图标注功能进行找茬标记。使用飞书或Teampaper标记存在问题的地方并说明问题

4.把标记的有问题的截图复制到docs文件，分享到产品和技术，并进行修复状态的标记

二、开发同学如何用Copixel插件还原页面

1.打开UI设计稿的蓝湖链接，在蓝湖上选择要开发的设计稿进行下载

现在UED内部设计输出统一同步到蓝湖设计协作平台

2.开发准备工作就绪后，打开Copixel插件，把UI设计稿上传到插件，对UI设计稿的透明度、大小和位置进行调整，使UI设计稿和开发的窗口相重合，就可以参照UI设计稿进行还原开发

Copixel操作视频演示

https://img.pidoutv.com/wp-content/uploads/2024/11/1730449581-Copixel对比操作演示1.mp4