藍湖的安裝及使用

---

一、藍湖簡介

藍湖官網：https://lanhuapp.com/，以下為官網的介紹。

1.產品經理輕松錶達需求

在線展示文檔，團隊查看更方便

支持在線評審，更新通知，自動備份

一個地方展現所有資源

匯總文檔和設計，理解更輕松

按頁面邏輯連線，展現邏輯更清晰

快速生成交互原型

强調產品交互的說明和備注

產品經理可以基於設計圖發錶意見

2.設計師更快交付設計圖

自動標注設計圖，從此不再低效手工

一鍵生成標注和切圖，自動共享給同事

設計圖管理

清晰展現設計圖不同狀態

設計圖批注

打點標記進行評論, @相關成員可實時通知

自動保存曆史版本

隨時查看曆史版本，支持自動備份源文件

3.工程師快速省心開發

查看標注

點擊任意元素，即可查看標注信息

切圖下載

一鍵下載，支持 JPG、PNG、SVG、WebP

自動生成代碼

自動生成 CSS、iOS 和 Android 代碼

二、注册賬號

點擊官網首頁【免費注册】按鈕：

三、下載並安裝藍湖 Photoshop 插件

下載地址：https://lanhuapp.com/ps?formHeader=ps

四、Photoshop 上操作

重啟 Photoshop，進入 “窗口” -> “擴展” -> “藍湖”：

默認打開了設計圖轉代碼功能：

輸入藍湖賬號密碼登錄：

選擇設計圖畫板寬度：

Android 手機建議選 xxhdpi，Web 建議選 Web-1x。

標記為切圖：

上傳設計圖：