【愚公系列】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 )、切图包。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/aa2528877987/article/details/127147796

智能推荐

DevExpress关于正版和非正版的运行以及发布的问题_devexpress23.2激活-程序员宅基地

文章浏览阅读283次。DevExpress关于正版和非正版的运行以及发布的问题。_devexpress23.2激活

Sql server 使用DBCC Shrinkfile 收缩日志文件-程序员宅基地

文章浏览阅读795次。Sql server 使用DBCC Shrinkfile 收缩日志文件_dbcc shrinkfile 收缩日志

生产计划管理软件有哪些?哪个好_生产计划执行管理有什么目的和意义-程序员宅基地

文章浏览阅读3.6k次。生产计划管理软件有哪些?哪个好?生产计划管理,一般是指企业对生产活动的计划、组织和控制工作。生产计划管理软件可提高生产效率、提升品质、降低成本等。对企业管理意义深远。​生产计划管理软件介绍:MES制造执行系统​MES系统是一套面向制造企业车间执行层的生产信息化管理系统。是生产工业常见的生产管理软件,他可以为企业提供包括制造数据管理、计划生产调度管理、库存管理以及质量管理,同时还有人力资源管理..._生产计划执行管理有什么目的和意义

vue播放flv格式视频_vue flv-程序员宅基地

文章浏览阅读4.7k次,点赞3次,收藏11次。vue播放flv视频_vue flv

JPBC库的使用实例——BLS签名_it.unisa.dia.gas.jpbc.element-程序员宅基地

文章浏览阅读1.5k次。这里展示了一个简单的对JPBC库的调用的实例。可以参考JPBC库的官方文档进行学习:http://gas.dia.unisa.it/projects/jpbc/docs/ecpg.html#TypeAimport it.unisa.dia.gas.jpbc.Element;import it.unisa.dia.gas.jpbc.Field;import it.unisa.dia.gas.jpbc.Pairing;import it.unisa.dia.gas.jpbc.PairingParam_it.unisa.dia.gas.jpbc.element

【Emmylua】lua的debug无效果connect localhost:9966 ... Connection refused: connect,pycharm使用Emmylua无法连接_try connect localhost:9966 ... connection refused:-程序员宅基地

文章浏览阅读2.1k次。Try connect localhost:9966 ...Connection refused: connectunity执行了,就会把端口占用掉,所以pycharm的debug那里就会断开了。然后打开的时候没注意,unity开启了A工程文件,pycharm开启了B工程文件。你可能会注意到每次播放unity的时候,debug工具都会自动断开一次连接。我赶紧改成unity开启了A工程文件,_try connect localhost:9966 ... connection refused: connect

随便推点

使用LL库开发STM32:UART进阶使用(DMA循环接收 + UART空闲中断)_stm32 ll uart-程序员宅基地

文章浏览阅读5.1k次,点赞10次,收藏20次。文章目录目的发送处理问题与解决方法个人常用处理方式数据接收与解析总结目的发送处理问题与解决方法个人常用处理方式数据接收与解析总结_stm32 ll uart

Android UI线程和非UI线程_android在ui线程-程序员宅基地

文章浏览阅读3.7k次,点赞2次,收藏9次。UI线程及Android的单线程模型原则  当应用启动,系统会创建一个主线程(main thread)。  这个主线程负责向UI组件分发事件(包括绘制事件),也是在这个主线程里,你的应用和Android的UI组件(components from the Android UI toolkit (components from the android.widget andandroid.vie_android在ui线程

C++:opencv 人脸检测_c++ opencv十字检测-程序员宅基地

文章浏览阅读2.1k次,点赞3次,收藏19次。C++:opencv 人脸检测问题描述:要求输入一张图片;输出圈出人脸的图片;vs2015; opencv3.4.6;效果输入:输出:代码实现:#include "opencv2/objdetect.hpp"#include "opencv2/highgui.hpp"#include "opencv2/imgproc.hpp"#include <iostrea..._c++ opencv十字检测

CentOS增加IP地址的全面指南_centos追加ip-程序员宅基地

文章浏览阅读455次,点赞9次,收藏8次。在Linux服务器管理中,有时需要在不重启网络服务的情况下为网卡添加额外的IP地址。这一过程涉及到对网络配置文件的编辑和命令行工具的使用。下面是详细的步骤说明以及相关实例。_centos追加ip

hdu 5322 Hope 分治 NTT_hdu5322 ntt-程序员宅基地

文章浏览阅读453次。设f[i]f[i] 表示长度为i时的答案,那么 f[i]=∑i=1nCj−1i−1∗f[i−j]∗(j−1)!∗j2f[i]=\sum\limits_{i=1}^{n}C_{i-1}^{j-1}*f[i-j]*(j-1)!*j^2 然后这个东西直接分治fft就行了。 推错式子害死人。。。#include using namespace std;#define_hdu5322 ntt

vue单页面 全屏 使用 screenfull 实现全屏(左侧菜单栏隐藏)_vue在打开一个界面的时候隐藏侧边栏-程序员宅基地

文章浏览阅读1.4k次。vue单页面 全屏 使用 screenfull 实现全屏(左侧菜单栏隐藏)_vue在打开一个界面的时候隐藏侧边栏

推荐文章

热门文章

相关标签