中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：設(shè)計(jì)師們對于切圖一定不陌生，切圖雖然并不復(fù)雜，但是需要精心的優(yōu)化才能在使用的時(shí)候得心應(yīng)手。本篇文章中，作者以切圖為出發(fā)點(diǎn)，結(jié)合了自己的工作經(jīng)驗(yàn)，為大家總結(jié)了節(jié)省時(shí)間，提升效率的方法，讓你的設(shè)計(jì)能一天頂兩天。

切圖是設(shè)計(jì)師將設(shè)計(jì)稿交付開發(fā)非?；A(chǔ)的一環(huán)。

它主要解決的是開發(fā)童鞋無法用代碼去實(shí)現(xiàn)的東西，比如一個(gè)素材、一個(gè)圖標(biāo)、一幅插畫、一段特殊字體等等。雖然它很簡單，但是依然有很多提效優(yōu)化的空間。

我由去年年底到現(xiàn)在使用sketch大概一年之久，切圖雖然感覺不怎么順手但也沒怎么去注意。直到前段時(shí)間才發(fā)現(xiàn)，我一直在使用的切圖方法，簡直是低效到爆。

如果你和我有著一樣的問題，那么繼續(xù)往下看，相信我總結(jié)出的三個(gè)提效辦法能幫你省去大量的時(shí)間。

一、自動組內(nèi)切圖

切圖的操作分為點(diǎn)切和拖切，前者是直接切出原尺寸，后者則是切出任意區(qū)域。但是如果圖片帶有圓角或者是非矩形，點(diǎn)切時(shí)就會出現(xiàn)背景，而非透明底。

切透明背景圖標(biāo)的方法大家應(yīng)該都很熟悉。它需要將切圖與其對應(yīng)的圖片置于一組內(nèi)，再勾選僅導(dǎo)出組內(nèi)內(nèi)容（export group contents only）。

乍看之下沒毛病，可是一旦圖層多了，就會這樣——

由于sketch的點(diǎn)切式切圖默認(rèn)將切圖置頂，所以你不得不手動將其拖到所在到組。而一旦你沒有提前命名這個(gè)習(xí)慣，光搜尋圖層就得耗費(fèi)相當(dāng)?shù)綍r(shí)間。

我之前一直是用到這種笨法子，所以每次一到切圖環(huán)節(jié)都會感覺特累！如果你也正經(jīng)歷著和我一樣到問題，那接下來的這2個(gè)辦法將會徹底解決這個(gè)痛點(diǎn)，而且很簡單。

1. 方法一

按住切圖快捷鍵s的同時(shí)，按住cmd，點(diǎn)擊即可！

2. 方法二

先選中組內(nèi)需要切圖的對象，再進(jìn)行切圖操作！因?yàn)榍袌D（點(diǎn)切）生成的位置默認(rèn)在選中層所屬空間的頂部，所以只要選中組內(nèi)的對象即可將其組內(nèi)置頂。

當(dāng)然如果有切圖組內(nèi)存在多個(gè)對象，整體編組即可。

兩種方法隨意選擇，只是我個(gè)人更習(xí)慣用第二種方法。因?yàn)榉椒ㄒ辉诎醋md后，默認(rèn)只能選中對象中的一個(gè)圖層區(qū)域（即使編組），局限過多。

二、自動生成切圖文件夾

產(chǎn)品并不是上線后就了事了，后期的營銷活動（比如為實(shí)現(xiàn)拉新、促活、提升gmv等業(yè)務(wù)目標(biāo)而進(jìn)行的一系列活動等）都需要我們的運(yùn)營童鞋來進(jìn)行。

而營銷活動所需要的banner則是由我們提供給運(yùn)營，再由他們于oss后臺上傳。

拿一次大促活動來說，一個(gè)banner會跟隨其所在的場景呈現(xiàn)不同的尺寸訴求，比如頂通、霸屏、著陸頁banner、內(nèi)頁banner、后臺專題頭部banner等等。

另外，web產(chǎn)品往往需要適配觸屏端，那每個(gè)場景下的banner又會額外細(xì)分成不同設(shè)備斷點(diǎn)處的banner。僅僅單個(gè)專題的banner就可能達(dá)到數(shù)十張，更別提多個(gè)專題了！

如果我們按照傳統(tǒng)的辦法輸出到一個(gè)文件夾內(nèi)，再分門別類得整理到子文件夾方便運(yùn)營查看調(diào)用，那無疑需要耗費(fèi)相當(dāng)多的精力和時(shí)間。

下面的辦法解決的就是這個(gè)問題：

如果你對sketch的核心功能——symbol比較熟的話，你應(yīng)該知道symbol的命名格式。

所有的symbol可以通過 / 這個(gè)符號進(jìn)行管理，“/”后面的內(nèi)容是“/”前內(nèi)容的子集，通過多個(gè)“/”對名稱的劃分可以便捷得實(shí)現(xiàn)組件管理。

比如組件庫中的Alert警告提示組件，就可以分別根據(jù)其所屬的類以及衍生的四個(gè)常用狀態(tài)用“/”命名，狀態(tài)為Alert的子集，Alert為反饋的子集，從而實(shí)現(xiàn)組件的分類管理。

最終可以很高效得進(jìn)行組件的調(diào)用。

而切圖的命名則是一個(gè)道理！

給切圖文件使用“/”格式進(jìn)行命名后，導(dǎo)出時(shí)就會自動在本地生成文件夾，文件夾的名稱即“/”之前的命名，而且支持文件夾嵌套哦~

不僅視覺上便于圖層的辨識歸類，而且也免去了自己手動歸類的麻煩，是不是超方便？

三、中心區(qū)域切圖

考慮到設(shè)計(jì)版式的布局，以及前端的高效開發(fā)，多個(gè)圖標(biāo)及插畫的切出往往不會貼邊，而是在周圍加入空白區(qū)域?qū)⑶袌D的尺寸統(tǒng)一化，這種區(qū)域性的切圖對應(yīng)到sketch中的交互是拖選式切圖。

讓我們先看下以往的切圖方式：

你得先拖選一個(gè)規(guī)定好的尺寸如68px，之后進(jìn)行對齊，然后再將其拖入所屬的組進(jìn)行去底處理。

而優(yōu)化后的辦法加入了兩個(gè)要素：

1. 第一步：就是第一節(jié)講到的自動組內(nèi)切圖，選中打組后的圖層對象，切圖將直接組內(nèi)置頂生成。
2. 第二步：用到了sketch中常用的“Alt”快捷鍵，按住之后繪制任意形狀或區(qū)域都是由中心向外部繪制?；趨⒖季€對準(zhǔn)圖標(biāo)中心，向外拖曳即可。

這兩步的優(yōu)化去除了對齊步驟、尋找圖層組步驟、拖入圖層組步驟，節(jié)省了大量寶貴的精力和時(shí)間。

四、小結(jié)

切圖看似簡單，但是細(xì)節(jié)處的優(yōu)化一旦累加起來，就可以幫你省去大量的時(shí)間。不僅僅是切圖，應(yīng)用到任一流程、領(lǐng)域都是一個(gè)道理！

當(dāng)你覺得某個(gè)工作流程需要耗費(fèi)較多精力，或者你感覺不舒服時(shí)，果斷去搜索可以提效的辦法吧！然后你會發(fā)現(xiàn)原本存在的“瞎忙活”、“忙了一天但也不知道在忙啥”是由于有相當(dāng)一部分時(shí)間浪費(fèi)在這些低效能、無意義的產(chǎn)出上。

但愿今天這篇小小的分享對你有所幫助，下期見。

作者：Andrew臣；微信公眾號：轉(zhuǎn)行人的設(shè)計(jì)筆記

本文由 @Andrewchen 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。