用好藍(lán)湖，提升團(tuán)隊(duì)協(xié)作效率，藍(lán)湖指北，教你如何用好藍(lán)湖。本期【藍(lán)湖指北】如約而至～
Sketch 作為一款輕量級(jí)的矢量設(shè)計(jì)工具，憑借其強(qiáng)大的界面設(shè)計(jì)功能，被大多數(shù) UI 設(shè)計(jì)師所使用，日漸成為產(chǎn)品研發(fā)團(tuán)隊(duì)中不可或缺的一款重要生產(chǎn)工具。
這個(gè)工具有多重要呢，可以說(shuō)：只要設(shè)計(jì)師不加班，整個(gè)團(tuán)隊(duì)都能早下班。

加班，是整個(gè)互聯(lián)網(wǎng)行業(yè)會(huì)呼吸的痛，以提升產(chǎn)品設(shè)計(jì)協(xié)作效率為己任的藍(lán)湖，為使用 Sketch 的設(shè)計(jì)師們出品了【藍(lán)湖 Sketch 插件】。有人說(shuō)，它為創(chuàng)意插上翅膀，有人說(shuō)，它讓設(shè)計(jì)效率原地起飛。
怎么用好【藍(lán)湖 Sketch 插件】呢，且聽湖湖為您分解：
設(shè)計(jì)圖一鍵上傳
支持多種界面
設(shè)計(jì)圖樹狀連線
設(shè)計(jì)圖自動(dòng)標(biāo)注
切圖一鍵下載
藍(lán)湖【設(shè)計(jì)規(guī)范云】
>
設(shè)計(jì)圖一鍵上傳，【項(xiàng)目/團(tuán)隊(duì)】要拎清
下載【藍(lán)湖 Sketch 插件】，安裝之后重啟 Sketch，即可在 Sketch【Plugins】中通過(guò)【藍(lán)湖】上傳設(shè)計(jì)圖。
下載地址：https://lanhuapp.com/mac（建議在 PC 端打開）
設(shè)計(jì)圖上傳之前需要選擇設(shè)計(jì)圖對(duì)應(yīng)的團(tuán)隊(duì)和項(xiàng)目，這一步看似簡(jiǎn)單的操作，背后卻是團(tuán)隊(duì)管理的學(xué)問(wèn)。

Tips：
上傳設(shè)計(jì)圖之前請(qǐng)梳理好工作的內(nèi)容，以【項(xiàng)目】區(qū)分，按不同內(nèi)容創(chuàng)建不同項(xiàng)目。比如 Banner 設(shè)計(jì)、官網(wǎng)設(shè)計(jì)、活動(dòng)物料設(shè)計(jì)等，不僅能高效管理自己的工作內(nèi)容，也便于團(tuán)隊(duì)中的其它成員查看。
根據(jù)整個(gè)團(tuán)隊(duì)的工作流程，創(chuàng)建不同的團(tuán)隊(duì)和項(xiàng)目，以收錄相關(guān)的設(shè)計(jì)圖，及時(shí)更新，整個(gè)團(tuán)隊(duì)的工作進(jìn)度一目了然。

支持多種界面，【當(dāng)前設(shè)計(jì)】要看清
選擇要上傳的設(shè)計(jì)圖，或者一鍵上傳所有設(shè)計(jì)圖；插件內(nèi) 【當(dāng)前設(shè)計(jì)】是指當(dāng)前設(shè)計(jì)圖的大小，根據(jù)設(shè)計(jì)圖大小選擇對(duì)應(yīng)倍數(shù)。
確定當(dāng)前設(shè)計(jì)基于的設(shè)備是 iOS、 Android 還是 Web，再確定現(xiàn)在的設(shè)計(jì)圖是基于幾倍設(shè)計(jì)的，最后選擇和設(shè)計(jì)圖匹配的設(shè)備和倍數(shù)。

Tips：
iPhone、iPad、iWatch 這三種設(shè)備的界面設(shè)計(jì) 屬于 —— iOS；安卓系統(tǒng)的界面設(shè)計(jì) 屬于 —— Android；網(wǎng)頁(yè)類型的界面設(shè)計(jì) 屬于 —— Web。
375 x 667， 屬于 iOS 1x；750 x 1334，屬于 iOS 2x；1920 x 1080, 手機(jī)建議選 Android-xxhdpi；網(wǎng)頁(yè)選 Web-1x。
Web 類型：1x , 是常用尺寸，大家做的網(wǎng)頁(yè)一般都是選 1x ；2x 是指為特定的屏幕（4k 屏）設(shè)計(jì)的尺寸，通常該尺寸會(huì)是正常網(wǎng)頁(yè)的 2 倍。

設(shè)計(jì)圖樹狀連線，【連線 L 】要標(biāo)清
很多 UI 設(shè)計(jì)師的設(shè)計(jì)圖做好之后，標(biāo)注說(shuō)明圖片和產(chǎn)品的邏輯，需要耗費(fèi)大量時(shí)間，每一次修改都意味著需要再次耗費(fèi)同樣的時(shí)間做圖片說(shuō)明。
用【藍(lán)湖 Sketch 插件】將設(shè)計(jì)圖上傳之后，進(jìn)入藍(lán)湖的【設(shè)計(jì)】頁(yè)，點(diǎn)擊上方的【連線 L 】圖標(biāo)，進(jìn)入設(shè)計(jì)圖連線模式，可將設(shè)計(jì)圖隨意拖動(dòng)擺放，繪制頁(yè)面間跳轉(zhuǎn)邏輯連線，輕松、直觀展現(xiàn)產(chǎn)品邏輯。

自動(dòng)標(biāo)注，設(shè)計(jì)元素和代碼時(shí)時(shí)更新
設(shè)計(jì)元素設(shè)計(jì)圖通過(guò)【藍(lán)湖 Sketch 插件】上傳之后，即可在設(shè)計(jì)圖詳情頁(yè)查看設(shè)計(jì)圖每一個(gè)元素的顏色、大小、間距、字號(hào)等信息，團(tuán)隊(duì)內(nèi)的成員可以隨時(shí)查看，并可直接復(fù)制相關(guān)代碼；
如果設(shè)計(jì)圖有修改、更新，藍(lán)湖也能自動(dòng)添加最新版本。

切圖一鍵下載，【切圖類型】要搞清
通過(guò)【藍(lán)湖 Sketch 插件】標(biāo)記需要生成的切圖，上傳設(shè)計(jì)圖后，在設(shè)計(jì)圖詳情頁(yè)，工程師即可一鍵下載多倍數(shù)切圖文件，支持 JPG、PNG、SVG、WebP 格式。
Step1：標(biāo)記切圖

以眾多設(shè)計(jì)師推薦的【 B.切片類型切圖】為例，選中需要標(biāo)記為切圖的圖標(biāo)，點(diǎn)擊 Sketch 右下角的 【 Make Exportable 】，然后再點(diǎn)擊 Sketch 右下角的【切刀】圖標(biāo)，即可標(biāo)記切圖。
或者使用快捷鍵【S】，鼠標(biāo)會(huì)顯示成切刀工具，此時(shí)鼠標(biāo)右鍵需要標(biāo)記為切圖的圖標(biāo)，即可標(biāo)記切圖。

Step2：自定義切圖尺寸
當(dāng)設(shè)計(jì)圖上的切圖尺寸不合適的時(shí)候，可以自定義切圖尺寸。
選中需要自定義尺寸的圖標(biāo)，在右上角的圖標(biāo)尺寸欄中，輸入合適的尺寸，然后再將該圖標(biāo)的切圖圖層跟原始圖層合并成一個(gè)分組，即可成功自定義切圖。
Step3：切圖導(dǎo)出 SVG 格式
插件右下角【切圖導(dǎo)出 SVG 】，勾選后上傳的切圖會(huì)自動(dòng)生成 SVG 格式。
需要被切圖層是矢量圖層, 如形狀圖層和文本圖層，則不能輸出 SVG 格式。
個(gè)別情況下有描邊的矢量圖標(biāo)會(huì)導(dǎo)致導(dǎo)出錯(cuò)誤，請(qǐng)把描邊轉(zhuǎn)為路徑后上傳。
如果不需要使用 SVG 資源的時(shí)候，建議關(guān)閉 SVG 導(dǎo)出。
Tip：
如果你標(biāo)記的切圖有背景圖層，而此時(shí)你需要切圖是透明背景，此時(shí)選中 Slice 層后，再在右側(cè)菜單中勾選【 Export group contents> 】這個(gè)選項(xiàng)，即可得到是透明背景的切圖。

藍(lán)湖【設(shè)計(jì)規(guī)范云】，帶你起飛
除了【藍(lán)湖 Sketch 插件】 ，我們還針對(duì) Sketch 推出了藍(lán)湖【設(shè)計(jì)規(guī)范云】。
下載地址：https://lanhuapp.com/dsm（建議在 PC 端打開）
在藍(lán)湖【設(shè)計(jì)規(guī)范云】添加顏色、文本樣式、圖層樣式、圖標(biāo)、組件等元素之后，團(tuán)隊(duì)成員即可直接使用添加好的元素。

藍(lán)湖還提供下載 Element、Ant-Design 組件庫(kù)，無(wú)須上傳，就能直接使用。

藍(lán)湖【設(shè)計(jì)規(guī)范云】幫助互聯(lián)網(wǎng)團(tuán)隊(duì)同步設(shè)計(jì)規(guī)范，保持設(shè)計(jì)一致性，提高設(shè)計(jì)效率。
設(shè)計(jì)師們做圖有了參考、元素有了出處、稿件有了歸屬，大大提升設(shè)計(jì)效率，設(shè)計(jì)師不加班，團(tuán)隊(duì)早回家。

有人說(shuō)設(shè)計(jì)是一門藝術(shù)，有人說(shuō)設(shè)計(jì)是一門技術(shù)，湖湖認(rèn)為，設(shè)計(jì)是用嫻熟的技術(shù)成就藝術(shù)。
【藍(lán)湖 Sketch 插件】?藍(lán)湖【設(shè)計(jì)規(guī)范云】，正努力成為設(shè)計(jì)師們那一對(duì)隱形的翅膀，帶你飛過(guò)絕望、走出迷茫，天天都能一稿過(guò)！
?
用藍(lán)湖，不加班~
藍(lán)湖網(wǎng)址：http://LanhuApp.com
藍(lán)湖，高效的產(chǎn)品設(shè)計(jì)協(xié)作平臺(tái)

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的怎么用class引入svg_【蓝湖指北】走向设计巅峰，从蓝湖 Sketch 插件开始，用它！...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。