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

举报
愚公搬代码 发表于 2022/10/31 19:22:30 2022/10/31
【摘要】 前言蓝湖是一款产品文档和设计图的共享平台,帮助互联网团队更好地管理文档和设计图。蓝湖可以在线展示Axure,自动生成设计图标注,与团队共享设计图,展示页面之间的跳转关系。蓝湖支持从Sketch、Ps一键共享、在线讨论,而且蓝湖只需简单几步就能将设计图变成一个可以点击的演示原型,蓝湖还支持分享给同事,让他也可以在手机中查看设计效果。蓝湖已经成为新一代产品设计的工作方式。蓝湖官网:https:...

前言

蓝湖是一款产品文档和设计图的共享平台,帮助互联网团队更好地管理文档和设计图。蓝湖可以在线展示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 )、切图包。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。