2021-1-4 前端達(dá)人
這一期專門為大家講解下在sketch中切圖問題
切圖作為UI設(shè)計師的必備技能，其實有許多地方困擾著很多同學(xué)們。比如批量下載切圖、切圖命名、不同切片的類型這些都有同學(xué)或多或少的有些迷茫。這一期專門為大家講解下在sketch中切圖問題。
在本文中我們將sketch中的切片分為兩類：一是內(nèi)置切片，二是獨立切片。
我們將某元素點擊導(dǎo)出按鈕之后形成的切片稱之為內(nèi)置切片，如下圖：
內(nèi)置切片相對比較簡單，他的切圖范圍是跟隨他所依附的元素的大小而改變的。而且只能切出所依附的元素本身。
由切片工具繪制而來的切片我們稱之為獨立切片
獨立切片范圍是可以隨意更改的，不依附于想要切的元素。并且可以切出所有在切片范圍中顯示的視覺元素。
如果我們需要用獨立切片去切出特定的元素，那么我們需要將切片和我們需要切的元素打組，并且在導(dǎo)出選項內(nèi)勾選“Export group contents only”就可以只切組內(nèi)我們需要的內(nèi)容了。
當(dāng)然我們對于這兩種切片還有更詳盡的講解，大家可以去看之前我們專門關(guān)于切片的視頻教程：https://www.bilibili.com/video/BV1ik4y1k7aU
由于現(xiàn)在越來越多的團隊選擇使用藍(lán)湖切圖，我們講一下切圖中使用到藍(lán)湖時候的注意事項。
首先我們需要上傳設(shè)計稿到藍(lán)湖，再上傳的時候我們要對照自己的設(shè)計稿尺寸選擇對應(yīng)的參數(shù)
是不是覺得上傳之后就大功告成，下載切圖什么的就交給開發(fā)小哥哥去處理了？
No no no!!!
為了讓開（zi）發(fā)（ji）更省心省力，我們還需要和開發(fā)小哥哥溝通一下藍(lán)湖的設(shè)置，方便他們操作。
首先我們需要在設(shè)置中將“切圖置頂”勾選，以防止開發(fā)在點選切圖元素時誤操作導(dǎo)致下載的切圖不正確。
然后我們還需要勾選“下載切圖有重名時替換”選項。這里是為了防止出現(xiàn)在不同頁面上的同一元素被重復(fù)下載，造成混亂。
如果我們遇到安卓的切圖，開發(fā)時出現(xiàn)了正確的圖標(biāo)開發(fā)出來之后尺寸發(fā)生變化的情況。我們建議將設(shè)置中“Android 文件夾以drawable 命名”選項勾選。
另外還有一個藍(lán)湖使用的小技巧可以告訴大家，就是在藍(lán)湖中按住鍵盤shift鍵，鼠標(biāo)框選多個畫板，然后右鍵就可以在選項中選擇“下載選中頁面全部切圖“，是不是覺得離準(zhǔn)點下班又進了一步呀～
最后還有一點要提醒大家，在sketch中我們?yōu)榻M件命名時所用到的“/”符號。如果用在了切片上，那么在藍(lán)湖下載切圖的時候會根據(jù)“/”形成文件夾。所以這里向大家推薦一款比較實用的插件——自動化。他可以將我們命名中的“/”自動修改為“-”或者”_“，這樣我們在使用藍(lán)湖的時候就不用再手動去修改切片中的特殊符號了啦。
插件下載地址
https://www.yuque.com/tuotadamowang/dhq5di/irybf6#SGtSu
好啦，本期就聊到這里，我們下期再見喲～
轉(zhuǎn)自：站酷
藍(lán)藍(lán)設(shè)計( m.sdgs6788.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://m.sdgs6788.com