目录

  • 一、蓝湖简介
  • 1.产品经理轻松表达需求
  • 2.设计师更快交付设计图
  • 3.工程师快速省心开发
  • 二、注册账号
  • 三、下载并安装蓝湖 Photoshop 插件
  • 四、Photoshop 上操作



一、蓝湖简介

蓝湖官网:https://lanhuapp.com/,以下为官网的介绍。

1.产品经理轻松表达需求

在线展示文档,团队查看更方便

支持在线评审,更新通知,自动备份

一个地方展现所有资源

汇总文档和设计,理解更轻松

按页面逻辑连线,展现逻辑更清晰

快速生成交互原型

强调产品交互的说明和备注

产品经理可以基于设计图发表意见

2.设计师更快交付设计图

自动标注设计图,从此不再低效手工

一键生成标注和切图,自动共享给同事

设计图管理

清晰展现设计图不同状态

设计图批注

打点标记进行评论, @相关成员可实时通知

自动保存历史版本

随时查看历史版本,支持自动备份源文件

3.工程师快速省心开发

查看标注

点击任意元素,即可查看标注信息

切图下载

一键下载,支持 JPG、PNG、SVG、WebP

自动生成代码

自动生成 CSS、iOS 和 Android 代码

二、注册账号

点击官网首页【免费注册】按钮:

uniapp写ios 使用蓝湖的什么参数 蓝湖软件怎么使用_ui

三、下载并安装蓝湖 Photoshop 插件

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

uniapp写ios 使用蓝湖的什么参数 蓝湖软件怎么使用_产品经理_02

四、Photoshop 上操作

重启 Photoshop,进入 “窗口” -> “扩展” -> “蓝湖”:

uniapp写ios 使用蓝湖的什么参数 蓝湖软件怎么使用_产品经理_03


默认打开了设计图转代码功能:

uniapp写ios 使用蓝湖的什么参数 蓝湖软件怎么使用_产品经理_04


输入蓝湖账号密码登录:

uniapp写ios 使用蓝湖的什么参数 蓝湖软件怎么使用_官网_05


选择设计图画板宽度:

uniapp写ios 使用蓝湖的什么参数 蓝湖软件怎么使用_Photoshop_06


Android 手机建议选 xxhdpi,Web 建议选 Web-1x。标记为切图:

uniapp写ios 使用蓝湖的什么参数 蓝湖软件怎么使用_ui_07


上传设计图:

uniapp写ios 使用蓝湖的什么参数 蓝湖软件怎么使用_官网_08