【愚公系列】2022年10月 微信小程序-电商项目-UI设计之蓝湖的使用

---

前言

蓝湖是一款产品文档和设计图的共享平台，帮助互联网团队更好地管理文档和设计图。蓝湖可以在线展示Axure，自动生成设计图标注，与团队共享设计图，展示页面之间的跳转关系。蓝湖支持从Sketch、Ps一键共享、在线讨论，而且蓝湖只需简单几步就能将设计图变成一个可以点击的演示原型，蓝湖还支持分享给同事，让他也可以在手机中查看设计效果。蓝湖已经成为新一代产品设计的工作方式。

蓝湖官网：https://lanhuapp.com/products/docs?utm_source=baidu&utm_medium=brandzone&utm_campaign=zujian2&utm_term=docs

一、UI设计之蓝湖的使用

1.下载插件

网址：https://lanhuapp.com/dds#startuse

点击安装等待安装完成就好了

打开PS软件，选择蓝湖插件，并且上传设计图到蓝湖；如果是 PS 插件上传设计图，记得提醒设计师打开转代码按钮

2.生成代码

1、上传设计图之后，点击“代码” Tab栏，跳转「设计图转代码」页面。

3.配置代码

1、当你进入「设计图转代码」页面后，可以看到设计图和代码运行效果的对比，直观感受设计图转代码的魅力。

2、不同企业对代码语言的要求有所不同，你可以根据需求，选择 Html、Vue、Uni-app 等代码框架，样式代码对应可选 Css、Less、Scss。

3、如果你想要实现自适应效果，可以在样式代码中选择 Rem 或者 Response 。

4、如果你觉得复制代码比较麻烦，想一键导入代码，可以选择「下载代码」，配置代码框架、渲染样式后，导出代码即可；
导出的代码包，包含有代码框架、样式代码（包含 Css、Rem、Response、Common ）、切图包。