5.1 KiB
5.1 KiB
Web to Pixso 使用说明
Web to Pixso 可以将网页采集为可导入 Pixso 的高保真设计稿，适合网页参考稿采集、运营页转设计稿、竞品页面还原、开发页面转 Pixso 资产等场景。
插件包：web-to-pixso-v1.1.1.zip
使用说明在线文档：Web to Pixso 使用说明
反馈邮箱：270310136@qq.com。给我发邮件哦，我光速改。
一、安装 Chrome 浏览器扩展
- 解压
web-to-pixso-v1.1.1.zip。 - 打开 Chrome 浏览器，进入
chrome://extensions/。 - 打开右上角「开发者模式」。
- 点击「加载已解压的扩展程序」。
- 选择解压后的
web-to-pixso文件夹。 - 安装成功后，浏览器右上角会出现 Web to Pixso 扩展图标。
二、安装 Pixso 插件
- 打开 Pixso。
- 进入插件开发/导入插件入口。
- 选择
web-to-pixso/pixso-plugin目录中的插件文件。 - 导入成功后，在 Pixso 插件面板中可以看到 Web to Pixso。
三、采集网页
- 在 Chrome 中打开需要采集的目标网页。
- 点击浏览器右上角 Web to Pixso 扩展图标。
- 选择采集模式：
- 混合高保真：优先保留关键模块截图兜底，同时尽量保留文字可编辑。
- 可编辑优先：优先转换为 Pixso 原生文本、图片、形状和组件图层。
- 可按需要设置：
- 跨域图片代理模式：用于减少图片丢失。
- 页面采集宽度：用于按指定视口宽度触发响应式页面布局。
- 图片采集并发：用于控制图片下载并发数量。
- 点击「开始采集」。
- 采集完成后，会下载一个
.json文件。
四、导入 Pixso
- 在 Pixso 中打开 Web to Pixso 插件。
- 将 Chrome 扩展下载的
.json文件拖拽到插件面板，或点击选择文件。 - 插件会自动识别页面宽度和页面高度。
- 点击「导入到 Pixso」。
- 导入完成后，会创建一个以网页标题命名的画板。
五、导入后的图层结构
导入后的设计稿会按用途分层，方便设计师编辑和对比：
-
对比底图层
- 放置完整页面截图或模块截图。
- 用于和上层可编辑元素进行还原度对比。
- 可隐藏或锁定。
-
可编辑元素层
- 包含按钮、卡片、输入框、背景、图片、Logo、图标等。
- 尽量保留尺寸、位置、圆角、边框、阴影、透明度和背景样式。
-
文字编辑层
- 包含网页中的可见文字。
- 尽量保留字体、字号、颜色、行高、字重、对齐方式等样式。
- 文字可在 Pixso 中直接编辑。
六、常见问题
1. 为什么有些区域是截图？
部分网页使用复杂动画、轮播、视频、Canvas、伪元素、复杂背景或特殊渲染方式。为了保证视觉效果不丢失，插件会为这些区域生成截图兜底，同时尽量保留文字和主要元素可编辑。
2. 为什么有些图片没有显示？
可能是目标网站启用了跨域限制、懒加载、防盗链或动态鉴权。可以尝试开启「跨域图片代理模式」后重新采集。
3. 为什么 Header 或 Hero 区域有时不可编辑？
部分网站的导航栏、轮播图或首屏区域可能由复杂脚本、Shadow DOM、Canvas、视频或异步渲染生成。插件会优先转换为可编辑图层，并使用兜底截图保证视觉可对比。
4. 页面采集宽度有什么用？
页面采集宽度用于模拟不同视口下的响应式布局。例如输入 1920 可以采集桌面宽屏布局，输入 375 可以采集移动端布局。
5. 导入后如何检查还原度？
可以先显示「对比底图层」，再查看上方的可编辑元素层和文字编辑层是否与底图对齐。对比完成后，可以隐藏或锁定底图。
七、适用场景
- 网页转 Pixso 设计稿
- 竞品页面采集
- 运营活动页还原
- 开发页面转设计资产
- 设计走查和页面对比
- 旧页面重构前的视觉备份
八、版本说明
当前版本：V1.1.1
支持从 Web to Pixso Chrome 扩展导出的 JSON 文件导入 Pixso，生成包含可编辑文本、图片、背景、按钮、卡片和对比底图的高保真网页设计稿。
本版重点：
- Chrome 扩展和 Pixso 插件版本号统一为
1.1.1。 - 插件面板显示版本号，避免用户混淆安装包。
- Chrome 扩展和 Pixso 插件均新增「使用说明」入口，点击后打开飞书文档。
- 两端插件底部均新增反馈邮箱：
270310136@qq.com。 - 采集 JSON 协议版本同步为
1.1.1，方便问题排查。 - 保留页面采集宽度、混合高保真、可编辑优先、跨域图片代理和图片采集并发能力。
- 继续强化三层结构：对比底图层、可编辑元素层、文字编辑层。
已知边界：
- 复杂动画、Canvas、视频、动态轮播和强跨域资源可能仍需要兜底截图或人工微调。
- 真实网页还原质量会受目标网站资源加载、登录态、懒加载和浏览器环境影响。
- 对外使用时建议先用对比底图层检查还原度，再进行设计稿编辑。