【蓝湖指北】走向设计巅峰,从蓝湖 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 组件库,无须上传,就能直接使用。

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

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章