用好藍(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è)工具有多重要呢螃壤，可以說：只要設(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 插件】寄啼。有人說，它為創(chuàng)意插上翅膀代箭，有人說墩划，它讓設(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】中通過【藍(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é)問。
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)頁類型的界面設(shè)計(jì)?屬于?—— Web寺擂。
?? 375 x 667，?屬于 iOS 1x泼掠；750 x 1334怔软，屬于 iOS 2x；1920 x 1080, 手機(jī)建議選 Android-xxhdpi择镇；網(wǎng)頁選 Web-1x挡逼。
?? Web 類型：1x , 是常用尺寸，大家做的網(wǎng)頁一般都是選 1x 腻豌；2x 是指為特定的屏幕（4k 屏）設(shè)計(jì)的尺寸家坎，通常該尺寸會(huì)是正常網(wǎng)頁的 2 倍。
設(shè)計(jì)圖樹狀連線吝梅，【連線 L?】要標(biāo)清
很多 UI 設(shè)計(jì)師的設(shè)計(jì)圖做好之后虱疏，標(biāo)注說明圖片和產(chǎn)品的邏輯，需要耗費(fèi)大量時(shí)間苏携，每一次修改都意味著需要再次耗費(fèi)同樣的時(shí)間做圖片說明做瞪。
用【藍(lán)湖 Sketch 插件】將設(shè)計(jì)圖上傳之后，進(jìn)入藍(lán)湖的【設(shè)計(jì)】頁右冻，點(diǎn)擊上方的【連線 L 】圖標(biāo)装蓬，進(jìn)入設(shè)計(jì)圖連線模式，可將設(shè)計(jì)圖隨意拖動(dòng)擺放纱扭，繪制頁面間跳轉(zhuǎn)邏輯連線牍帚，輕松、直觀展現(xiàn)產(chǎn)品邏輯跪但。
自動(dòng)標(biāo)注履羞，設(shè)計(jì)元素和代碼時(shí)時(shí)更新
設(shè)計(jì)元素設(shè)計(jì)圖通過【藍(lán)湖 Sketch 插件】上傳之后，即可在設(shè)計(jì)圖詳情頁查看設(shè)計(jì)圖每一個(gè)元素的顏色屡久、大小忆首、間距、字號(hào)等信息被环，團(tuán)隊(duì)內(nèi)的成員可以隨時(shí)查看糙及，并可直接復(fù)制相關(guān)代碼；
如果設(shè)計(jì)圖有修改筛欢、更新浸锨，藍(lán)湖也能自動(dòng)添加最新版本唇聘。
切圖一鍵下載，【切圖類型】要搞清
通過【藍(lán)湖 Sketch 插件】標(biāo)記需要生成的切圖柱搜，上傳設(shè)計(jì)圖后迟郎，在設(shè)計(jì)圖詳情頁，工程師即可一鍵下載多倍數(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 組件庫，無須上傳睬愤，就能直接使用片仿。
藍(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ì)早回家筐摘。??
有人說設(shè)計(jì)是一門藝術(shù)，有人說設(shè)計(jì)是一門技術(shù)船老，湖湖認(rèn)為咖熟，設(shè)計(jì)是用嫻熟的技術(shù)成就藝術(shù)。
【藍(lán)湖 Sketch 插件】?藍(lán)湖【設(shè)計(jì)規(guī)范云】柳畔，正努力成為設(shè)計(jì)師們那一對(duì)隱形的翅膀馍管，帶你飛過絕望、走出迷茫薪韩，天天都能一稿過确沸！??
?
用藍(lán)湖，不加班~
藍(lán)湖網(wǎng)址：LanhuApp.com
藍(lán)湖俘陷，高效的產(chǎn)品設(shè)計(jì)協(xié)作平臺(tái)
