【蓝湖指北】走向设计巅峰,从蓝湖 Sketch 插件开始,用它!

北京/UI设计师/5年前/816浏览
【蓝湖指北】走向设计巅峰,从蓝湖 Sketch 插件开始,用它!

用蓝湖,不加班~

用好蓝湖,提升团队协作效率,
蓝湖指北,教你如何用好蓝湖。

本期【蓝湖指北】如约而至~


Sketch 作为一款轻量级的矢量设计工具,凭借其强大的界面设计功能,被大多数 UI 设计师所使用,日渐成为产品研发团队中不可或缺的一款重要生产工具。这个工具有多重要呢,可以说:只要设计师不加班,整个团队都能早下班。


加班,是整个互联网行业会呼吸的痛,以提升产品设计协作效率为己任的蓝湖,为使用 Sketch 的设计师们出品了【蓝湖 Sketch 插件】。有人说,它为创意插上翅膀,有人说,它让设计效率原地起飞。

怎么用好【蓝湖 Sketch 插件】呢,且听湖湖为您分解:

👏 设计图一键上传

👏 支持多种界面

👏 设计图树状连线

👏 设计图自动标注

👏 切图一键下载

👏 蓝湖【设计规范云】


设计图一键上传,【项目/团队】要拎清

下载【蓝湖 Sketch 插件】,安装之后重启 Sketch,即可在 Sketch【Plugins】中通过【蓝湖】上传设计图。

下载地址:https://lanhuapp.com/mac(建议在 PC 端打开)

设计图上传之前需要选择设计图对应的团队和项目,这一步看似简单的操作,背后却是团队管理的学问。


Tips:

👉 上传设计图之前请梳理好工作的内容,以【项目】区分,按不同内容创建不同项目。比如 Banner 设计、官网设计、活动物料设计等,不仅能高效管理自己的工作内容,也便于团队中的其它成员查看。

👉 根据整个团队的工作流程,创建不同的团队和项目,以收录相关的设计图,及时更新,整个团队的工作进度一目了然。



支持多种界面,【当前设计】要看清

选择要上传的设计图,或者一键上传所有设计图;插件内 【当前设计】是指当前设计图的大小,根据设计图大小选择对应倍数。

确定当前设计基于的设备是 iOS、 Android 还是 Web,再确定现在的设计图是基于几倍设计的,最后选择和设计图匹配的设备和倍数。


Tips:

👉 iPhone、iPad、iWatch 这三种设备的界面设计 属于 —— iOS;安卓系统的界面设计 属于 —— Android;网页类型的界面设计 属于 —— Web。

👉 375 x 667, 属于 iOS 1x;750 x 1334,属于 iOS 2x;1920 x 1080, 手机建议选 Android-xxhdpi;网页选 Web-1x。

👉 Web 类型:1x , 是常用尺寸,大家做的网页一般都是选 1x ;2x 是指为特定的屏幕(4k 屏)设计的尺寸,通常该尺寸会是正常网页的 2 倍。


设计图树状连线,【连线 L 】要标清

很多 UI 设计师的设计图做好之后,标注说明图片和产品的逻辑,需要耗费大量时间,每一次修改都意味着需要再次耗费同样的时间做图片说明。

用【蓝湖 Sketch 插件】将设计图上传之后,进入蓝湖的【设计】页,点击上方的【连线 L 】图标,进入设计图连线模式,可将设计图随意拖动摆放,绘制页面间跳转逻辑连线,轻松、直观展现产品逻辑。


自动标注,设计元素和代码时时更新

设计元素设计图通过【蓝湖 Sketch 插件】上传之后,即可在设计图详情页查看设计图每一个元素的颜色、大小、间距、字号等信息,团队内的成员可以随时查看,并可直接复制相关代码;

如果设计图有修改、更新,蓝湖也能自动添加最新版本。


切图一键下载,【切图类型】要搞清

通过【蓝湖 Sketch 插件】标记需要生成的切图,上传设计图后,在设计图详情页,工程师即可一键下载多倍数切图文件,支持 JPG、PNG、SVG、WebP 格式。


Step1:标记切图


以众多设计师推荐的【 B.切片类型切图】为例,选中需要标记为切图的图标,点击 Sketch 右下角的 【 Make Exportable 】,然后再点击 Sketch 右下角的【切刀】图标,即可标记切图。

或者使用快捷键【S】,鼠标会显示成切刀工具,此时鼠标右键需要标记为切图的图标,即可标记切图。

Step2:自定义切图尺寸

当设计图上的切图尺寸不合适的时候,可以自定义切图尺寸。 

选中需要自定义尺寸的图标,在右上角的图标尺寸栏中,输入合适的尺寸,然后再将该图标的切图图层跟原始图层合并成一个分组,即可成功自定义切图。


Step3:切图导出 SVG 格式

插件右下角【切图导出 SVG 】,勾选后上传的切图会自动生成 SVG 格式。

👉 需要被切图层是矢量图层, 如形状图层和文本图层,则不能输出 SVG 格式。

👉 个别情况下有描边的矢量图标会导致导出错误,请把描边转为路径后上传。

👉 如果不需要使用 SVG 资源的时候,建议关闭 SVG 导出。


Tip:

如果你标记的切图有背景图层,而此时你需要切图是透明背景,此时选中 Slice 层后,再在右侧菜单中勾选【 Export group contents> 】这个选项,即可得到是透明背景的切图。


蓝湖【设计规范云】,带你起飞

除了【蓝湖 Sketch 插件】 ,我们还针对  Sketch 推出了蓝湖【设计规范云】。

下载地址:https://lanhuapp.com/dsm(建议在 PC 端打开)

在蓝湖【设计规范云】添加颜色、文本样式、图层样式、图标、组件等元素之后,团队成员即可直接使用添加好的元素。

蓝湖还提供下载 Element、Ant-Design 组件库,无须上传,就能直接使用。


蓝湖【设计规范云】帮助互联网团队同步设计规范,保持设计一致性,提高设计效率。👏

设计师们做图有了参考、元素有了出处、稿件有了归属,大大提升设计效率,设计师不加班,团队早回家。🎉


有人说设计是一门艺术,有人说设计是一门技术,湖湖认为,设计是用娴熟的技术成就艺术。

【蓝湖 Sketch 插件】➕蓝湖【设计规范云】,正努力成为设计师们那一对隐形的翅膀,带你飞过绝望、走出迷茫,天天都能一稿过!🎉


用蓝湖,不加班~

蓝湖网址:LanhuApp.com

蓝湖,高效的产品设计协作平台

4
举报
|
14
分享
相关推荐
评论
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
你可能喜欢
相关收藏夹
蓝湖
蓝湖
蓝湖
蓝湖
作品收藏夹
教程
教程
教程
教程
作品收藏夹
学习分享
学习分享
学习分享
学习分享
作品收藏夹
设计文章
设计文章
设计文章
设计文章
作品收藏夹
ui
ui
ui
ui
作品收藏夹
项目
项目
项目
项目
作品收藏夹
大家都在看
登录注册