蓝湖（LanHu）作为专注于设计交付的协作平台，以”设计到开发零损耗”为核心理念，帮助团队实现高效的设计还原。本文将深入讲解蓝湖的核心功能、团队协作流程和最佳实践，让设计交付效率提升300%。

一、蓝湖的核心价值与定位

1. 蓝湖解决什么问题？

传统设计交付的痛点：

  • 设计师：反复被开发询问尺寸、颜色、间距
  • 开发：需要对着设计稿手动测量，效率低且易出错
  • 产品：设计评审反馈散落在微信、邮件，难以追溯
  • 团队：设计资源分散，缺乏统一管理

蓝湖的解决方案：

  • 自动标注：上传设计稿，自动生成尺寸、颜色、字体标注
  • 一键切图：批量导出多平台切图，自动命名
  • 集中评审：所有反馈集中在设计稿上，实时通知
  • 版本管理：设计迭代历史清晰可追溯
  • 资源共享：团队组件库、色彩库、图标库统一管理

2. 蓝湖 vs 其他工具

对比项 蓝湖 Figma/Sketch Zeplin
核心定位 设计交付 设计创作 设计交付
自动标注 √（智能识别） √（基础） √（基础）
多设计工具支持 √（PS/Sketch/Figma/XD） ×（仅自身） √
本土化 √（中文优化） × ×
价格 免费版功能丰富 付费为主 付费为主

3. 适用场景

  • 互联网团队：产品、设计、开发协作
  • 外包公司：客户评审和交付管理
  • 设计团队：组件库和规范管理
  • 开发团队：快速获取设计规范和切图

二、快速上手：从设计稿到开发（30分钟）

Step 1：上传设计稿

方式1：插件上传（推荐）

  1. 在Sketch/Figma/Adobe XD中安装蓝湖插件
  2. 选中要上传的画板 → 点击插件”上传到蓝湖”
  3. 选择目标项目 → 确认上传
  4. 自动同步：修改设计后重新上传会覆盖旧版本

方式2：网页上传

  1. 导出设计稿为PNG/JPG（适合Photoshop）
  2. 登录蓝湖 → 进入项目 → 点击”上传设计稿”
  3. 拖拽文件到上传区域
  4. 自动识别画板尺寸和分辨率

Step 2：自动标注

上传完成后，蓝湖自动完成：

  • 尺寸标注：宽度、高度、边距自动计算
  • 颜色标注：自动提取所有颜色值（HEX/RGB/RGBA）
  • 文字标注：字体、字号、行高、字间距
  • 圆角标注：自动识别border-radius
  • 阴影标注：box-shadow参数完整提取

智能标注功能：

  • 组件识别：自动识别按钮、输入框等标准组件
  • 栅格检测：自动识别8px/12px栅格系统
  • 间距建议：发现不规则间距会高亮提示

Step 3：切图导出

单个切图：

  1. 点击需要切图的图层
  2. 右侧面板”标记为可导出”
  3. 设置导出规则：
    – iOS：@2x.png、@3x.png
    – Android：drawable-hdpi/xhdpi/xxhdpi/xxxhdpi
    – Web：SVG（图标）、PNG/JPG（图片）
  4. 点击”下载”，自动按平台分类打包

批量切图：

  1. 在设计工具中将需要导出的图层放入”切图”文件夹
  2. 上传到蓝湖后自动识别
  3. 批量下载所有切图，自动生成.zip文件

Step 4：代码查看

开发者打开蓝湖后：

  1. 点击任意元素查看属性
  2. 右侧显示CSS/iOS/Android代码
  3. 一键复制到剪贴板
  4. 支持rem/px单位切换
  5. 支持CSS预处理器（Sass/Less）

示例（按钮代码）：

/* CSS */
.button-primary {
  width: 343px;
  height: 48px;
  background: linear-gradient(135deg, #07C160 0%, #06AE56 100%);
  border-radius: 8px;
  font-size: 16px;
  color: #FFFFFF;
}

/* iOS (SwiftUI) */
Button(action: {}) {
    Text("按钮文字")
}
.frame(width: 343, height: 48)
.background(LinearGradient(...))
.cornerRadius(8)

/* Android (Jetpack Compose) */
Button(
    modifier = Modifier
        .width(343.dp)
        .height(48.dp),
    colors = ButtonDefaults.buttonColors(...)
) {
    Text("按钮文字")
}

三、团队协作与评审流程

1. 项目管理

创建项目：

  1. 点击”新建项目” → 填写项目名称
  2. 选择项目类型：
    – 移动端（iOS/Android）
    – Web端
    – 小程序
    – 平板/PC应用
  3. 设置基准尺寸：
    – iOS：375px（iPhone）/ 390px（iPhone 14 Pro）
    – Android：360dp
    – Web：1920px（PC）/ 750px（H5）
  4. 邀请团队成员

成员角色：

  • 所有者：创建者，拥有所有权限
  • 管理员：可管理成员和项目设置
  • 设计师：可上传、编辑设计稿
  • 开发：可查看标注、下载切图，不能修改
  • 产品/运营：可查看和评论，不能下载切图
  • 访客：仅查看权限，适合客户或临时协作者

2. 设计评审

评审发起：

  1. 设计师上传设计稿 → 点击”发起评审”
  2. @ 相关人员（产品经理、前端、后端、测试）
  3. 填写评审说明：”首页改版v2.0，重点关注导航交互”
  4. 设置评审截止时间
  5. 系统自动发送通知（站内信、邮件、企业微信）

评审反馈：

  • 点评模式：点击设计稿任意位置添加评论
    – 支持@成员
    – 支持上传参考图片
    – 支持表情和富文本
  • 状态标记：
    – 待处理（黄色）
    – 已解决（绿色）
    – 已忽略（灰色）
  • 评论筛选：
    – 仅看未解决
    – 仅看@我的
    – 按成员筛选

评审总结：

  1. 所有反馈收集完成后，设计师点击”结束评审”
  2. 系统生成评审报告：
    – 参与人数和反馈数量
    – 主要修改建议
    – 待解决问题列表
  3. 导出PDF报告，邮件发送给所有参与者

3. 版本管理

版本对比：

  1. 点击设计稿右上角”历史版本”
  2. 查看所有历史记录：
    – 版本号：v1.0、v1.1、v2.0
    – 上传时间和上传者
    – 版本说明
  3. 选择两个版本 → “对比”
  4. 差异高亮显示：
    – 新增元素（绿色边框）
    – 删除元素（红色边框）
    – 修改元素（黄色边框）

版本回滚：

  • 选择历史版本 → “恢复此版本”
  • 当前版本自动保存到历史记录
  • 支持在任意版本之间切换

四、设计规范与组件库管理

1. 建立设计规范

色彩规范：

  1. 进入项目 → “设计规范” → “色彩”
  2. 添加颜色：
    – 主色（Primary）：#07C160
    – 成功（Success）：#07C160
    – 警告（Warning）：#FF976A
    – 错误（Error）：#EE0A24
    – 信息（Info）：#1989FA
  3. 设置颜色别名：brand-primary、text-primary、bg-gray
  4. 添加颜色使用说明和示例

字体规范：

  • 主标题：PingFang SC Semibold, 24px, 行高32px
  • 副标题：PingFang SC Medium, 18px, 行高24px
  • 正文：PingFang SC Regular, 14px, 行高20px
  • 辅助文字：PingFang SC Regular, 12px, 行高18px

间距规范：

  • 基准间距：4px/8px/12px/16px/24px/32px/48px
  • 页面边距：16px（移动端）/ 24px（平板）
  • 组件内边距：12px（小）/ 16px（中）/ 24px（大）
  • 组件间距：8px（紧凑）/ 16px（正常）/ 24px（宽松）

2. 组件库管理

创建组件库：

  1. 新建项目 → 选择”组件库”类型
  2. 上传所有通用组件：
    – 基础组件（Button、Input、Checkbox等）
    – 业务组件（UserCard、ProductCard等）
    – 图标库（所有SVG图标）
  3. 为每个组件添加：
    – 组件名称和描述
    – 使用场景说明
    – 变体展示（不同状态）
    – 代码示例
  4. 发布组件库 → 设置访问权限

组件引用：

  1. 在业务项目中 → “关联组件库”
  2. 选择团队的组件库项目
  3. 查看组件时会显示”来自组件库”标识
  4. 组件库更新时，自动提示相关项目更新

3. 设计文档

创建设计文档：

  1. 项目内 → “新建文档”
  2. 选择模板：
    – 设计规范模板
    – PRD模板
    – 接口文档模板
    – 测试用例模板
  3. 使用Markdown编辑器编写
  4. 支持插入：
    – 设计稿截图
    – 原型链接
    – 表格和列表
    – 代码块

文档协作：

  • 多人同时编辑，实时同步
  • @ 成员添加评论
  • 版本历史记录
  • 导出PDF/Word/Markdown

五、开发对接最佳实践

1. 前端开发工作流

Step 1：理解设计稿

  • 查看设计规范，了解色彩、字体、间距系统
  • 识别可复用组件
  • 确认交互和动画效果

Step 2：提取设计Token

// design-tokens.css
:root {
  /* Colors */
  --color-primary: #07C160;
  --color-success: #07C160;
  --color-warning: #FF976A;
  --color-error: #EE0A24;

  /* Typography */
  --font-size-h1: 24px;
  --font-size-h2: 18px;
  --font-size-body: 14px;
  --line-height-base: 1.5;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

Step 3：获取切图和代码

  • 下载所有切图到项目assets目录
  • 复制组件代码作为参考
  • 根据实际需求调整代码（蓝湖代码仅供参考）

2. 移动端开发技巧

单位转换：

  • iOS：设计稿px ÷ 2 = 代码pt（以iPhone 14 Pro为基准）
  • Android：设计稿px ÷ 倍率 = dp（通常÷2或÷3）
  • H5：使用rem或vw实现响应式
    – 750px设计稿：1rem = 100px，元素宽度 = px ÷ 100
    – 使用postcss-px-to-viewport自动转换

适配技巧：

  • 使用相对单位而非绝对px
  • 关键元素使用约束布局
  • 图片使用@2x/@3x多倍图
  • 文字大小不要过小（最小12px）

3. 设计还原检查

还原度检查清单：

  • □ 颜色值完全一致（使用设计规范中的颜色变量）
  • □ 字体、字号、行高准确
  • □ 间距符合8px栅格系统
  • □ 圆角值正确
  • □ 阴影效果一致
  • □ 交互反馈符合预期
  • □ 边界情况处理（长文本、空数据等）

对比工具：

  1. 开发完成后截图
  2. 在蓝湖中上传到”开发自查”板块
  3. 与原设计稿对比
  4. 使用蓝湖的”像素对比”功能（企业版）
    – 自动检测差异
    – 高亮不一致的区域
    – 生成还原度报告

六、高级功能与技巧

1. 自动化工作流

Webhooks集成：

  • 设计稿更新时自动通知开发（钉钉、企业微信、Slack）
  • 切图更新时触发CI/CD自动构建
  • 评审完成时自动创建Jira任务

API接口：

// 获取项目所有设计稿
GET https://lanhuapp.com/api/v1/projects/{project_id}/designs

// 下载切图
GET https://lanhuapp.com/api/v1/designs/{design_id}/assets

// 获取设计规范
GET https://lanhuapp.com/api/v1/projects/{project_id}/specs

2. 插件与扩展

浏览器插件：

  • 蓝湖Chrome插件：网页上直接标注元素，对比设计稿
  • 蓝湖取色器：快速提取网页颜色到蓝湖色板

IDE插件：

  • VSCode蓝湖插件：编辑器内查看设计稿和标注
  • Android Studio插件：直接从蓝湖导入切图资源
  • Xcode插件：预览蓝湖切图和颜色值

3. 企业级功能（企业版）

私有化部署：

  • 数据存储在企业内网，保障安全
  • 支持Docker部署
  • 与企业AD/LDAP集成
  • 自定义域名和SSL证书

权限管控：

  • 项目级、文件夹级、设计稿级权限控制
  • 水印保护（防止截图泄露）
  • 操作日志审计
  • IP白名单限制

统计分析：

  • 设计稿查看次数
  • 切图下载记录
  • 成员活跃度
  • 项目进度统计

七、常见问题解答

Q1：蓝湖支持哪些设计工具？

A：Sketch、Figma、Adobe XD、Photoshop、Illustrator。推荐使用Sketch或Figma，标注效果最好。

Q2：免费版有什么限制？

A：免费版支持3个项目、10人团队、30天历史版本。升级专业版后项目和成员无限制。

Q3：如何处理设计稿和开发不一致？

A：① 使用像素对比功能检查；② 设计师和开发review；③ 建立设计规范，避免随意改动；④ 重要项目走设计验收流程。

Q4：切图命名规则如何设置？

A：在蓝湖项目设置中配置：
– iOS：图标ic_xxx@2x.png，图片img_xxx@2x.png
– Android：图标ic_xxx.png，自动生成多个dpi文件夹
– Web：图标icon-xxx.svg，图片img-xxx.png

Q5：如何避免设计与开发沟通成本？

A：① 建立完善的设计规范；② 组件化开发；③ 定期同步会议；④ 使用蓝湖评论功能集中反馈；⑤ 开发前review设计稿。

八、团队最佳实践

1. 设计师工作流

  1. 在设计工具中完成设计
  2. 自查：颜色、字体、间距是否符合规范
  3. 通过插件上传到蓝湖
  4. 检查自动标注是否准确
  5. 标记需要导出的切图
  6. 发起设计评审，@ 产品和开发
  7. 根据反馈修改，上传新版本
  8. 评审通过后通知开发开始实现

2. 开发工作流

  1. 收到设计评审通知后查看设计稿
  2. 阅读设计规范和组件库
  3. 评估开发工作量和技术难点
  4. 提出技术问题和优化建议
  5. 下载切图和参考代码
  6. 开发实现
  7. 自查还原度
  8. 提交设计验收

3. 产品工作流

  1. 在蓝湖中查看设计稿
  2. 检查是否符合PRD需求
  3. 提出交互和视觉优化建议
  4. 确认边界情况处理
  5. 审批通过后流转给开发

九、学习资源

官方资源：

  • 帮助文档：https://lanhuapp.com/help – 功能详解
  • 视频教程：蓝湖官方B站账号
  • 公众号：蓝湖产品设计协作 – 最佳实践案例

社区资源：

  • 蓝湖用户社群（添加客服微信加入）
  • 知乎专栏：搜索”蓝湖使用技巧”
  • 设计师社区：UI中国、优设网

总结

蓝湖作为专业的设计交付平台，其自动标注、一键切图、版本管理等功能大幅提升了设计到开发的效率。掌握本文介绍的核心功能后，你将能够：

  • 实现设计稿快速上传和自动标注
  • 建立标准化的设计评审流程
  • 管理团队组件库和设计规范
  • 确保设计与开发的高度一致
  • 减少90%的重复沟通成本

记住：工具只是提效手段，团队协作规范和沟通机制才是成功的关键。建议团队制定统一的蓝湖使用规范，定期review和优化流程。

年底送送送！新用户扫码添加 客服微信，即可 免费 领取此项目教程哦！

扫码添加客服微信

添加客服，轻松获取资源！