用好蓝湖,提升团队协作效率,
蓝湖指北,教你如何用好蓝湖。
本期【蓝湖指北】如约而至~
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
蓝湖,高效的产品设计协作平台