[[201630]]

編者按：今天推薦兩個(gè)神器，一個(gè)是谷歌設(shè)計(jì)團(tuán)隊(duì)開(kāi)發(fā)的Sketch2AE，可以幫你一鍵導(dǎo)入AE動(dòng)效，一個(gè)可以讓你在 谷歌瀏覽器 上非常方便地查看網(wǎng)頁(yè)標(biāo)注樣式的擴(kuò)展插件，趕緊來(lái)體驗(yàn)！

Sketch2AE

隨著 Sketch 日益普及，越來(lái)越多的 UE 設(shè)計(jì)人員已然將日常設(shè)計(jì)工具由 Photoshop 改成了 Sketch，因?yàn)?Sketch 輕量、高效、插件擴(kuò)展豐富。

但是對(duì)于動(dòng)效來(lái)說(shuō)，跟 Sketch 結(jié)合得較好的 Principle 跟 AE 比起來(lái)還是略遜一籌，這樣導(dǎo)致你在 Sketch 中做好的界面還需要導(dǎo)出圖片才能夠在 AE 中使用，而為了解決這個(gè)問(wèn)題，Google 設(shè)計(jì)團(tuán)隊(duì)推出了 Sketch 一鍵導(dǎo)入 AE 的插件——Sketch2AE，先讓我們看看官方的一個(gè)小預(yù)覽視頻：

從視頻中可以看到，導(dǎo)入流程非常順暢快捷，而且分層很清晰完整，之后我下載官方包進(jìn)行了安裝，雙擊 Sketch 插件安裝，并且將 Sketch2AE.jsx 文件放入 Applications/Adobe After Effects/Scripts/ScriptUI Panels 之后就能正常調(diào)用插件面板了。

接著進(jìn)入 Sketch，打開(kāi)自己做的一個(gè)小練習(xí)，試試看導(dǎo)入是否同樣順暢：

（動(dòng)圖1/2）

還有一種方式是，先將 Sketch 中選中的圖層保存成 _SketchExport.sketchae 文件，然后通過(guò) AE 中的打開(kāi) .sketchae 形式進(jìn)行導(dǎo)入：

實(shí)際體驗(yàn)起來(lái)確實(shí)很流暢，而且圖層分離很完整，非常不錯(cuò)。

不過(guò) Google 團(tuán)隊(duì)同樣提示了幾個(gè)需要注意的點(diǎn)，讓我們一起看看：

最好將想要導(dǎo)入 AE 的畫(huà)板放到新建文件里，簡(jiǎn)單理解起來(lái)就是因?yàn)閷?dǎo)入算法需要遍歷文件里的

• Symbols 等各種元素，這樣會(huì)大大縮短導(dǎo)入時(shí)間。
• 需要在 Sketch 中就設(shè)置好畫(huà)板（Artboard）的尺寸，因?yàn)檫@會(huì)限定導(dǎo)入 AE 后的實(shí)際尺寸。
• 通過(guò)選擇 Sketch 圖層的方式可以選擇性導(dǎo)入 AE 中，或者直接選擇畫(huà)板本身進(jìn)行導(dǎo)入。
• 導(dǎo)入 AE 的方式可以是復(fù)制圖層數(shù)據(jù)或者打開(kāi) .sketchae 文件。
• 導(dǎo)入時(shí)可以選擇 1x／2x／3x 的尺寸。

總的來(lái)說(shuō)，這真的是一個(gè)非常贊的插件功能，感謝 Google Design Team 再次對(duì)設(shè)計(jì)師們作出的貢獻(xiàn)，感興趣的朋友可以自己研究使用一下。傳送門(mén)： Sketch2AE 官網(wǎng)

歡迎關(guān)注作者的知乎專(zhuān)欄： Sketch 與 UE 設(shè)計(jì)知多少

網(wǎng)頁(yè)樣式標(biāo)注Chrome擴(kuò)展

網(wǎng)頁(yè)設(shè)計(jì)師通常會(huì)使用Chrome或firefox這兩款瀏覽器，為什么？不僅僅是因?yàn)楹糜茫菫榱耸褂冒碏12出現(xiàn)的「查看網(wǎng)頁(yè)元素」這個(gè)Web開(kāi)發(fā)者工具，然而這個(gè)工具真的沒(méi)代替品嗎？有的，Visual Inspector 這個(gè)視覺(jué)查看器就相當(dāng)好用，建議設(shè)計(jì)師們?nèi)ピ囋嚒?/p>

Visual Inspector 是 Chrome 的一個(gè)擴(kuò)展，它可以方便的查看頁(yè)面的 字體、顏色、盒子模型、及元素間的間距標(biāo)注 等等，全是 視覺(jué)化展示 ，這比代碼展示形式的F12工具更易觀看，是網(wǎng)頁(yè)設(shè)計(jì)師必備輔助工具之一。

• 擴(kuò)展名稱(chēng)：Visual Inspector
• 擴(kuò)展主頁(yè)： https://www.canvasflip.com/visual-inspector/
• 安裝擴(kuò)展（搭梯子）： https://chrome.google.com/webstore/detail/visual-inspector-by-canva/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en

查看/修改樣式、標(biāo)注

點(diǎn)擊「INSPECT」按鈕（第2個(gè)）可以實(shí)時(shí)查看選中元素的盒子模型、樣式以及與其它元素的標(biāo)注，尤其是查看鄰元素的間距標(biāo)注功能，這個(gè)相當(dāng)好用。而且， 除了查看還可以實(shí)時(shí)修改！

顏色

點(diǎn)擊第3個(gè)圖標(biāo)（水滴icon）可以查看當(dāng)前網(wǎng)站樣式的所有顏色。

圖像查看與導(dǎo)出

這個(gè)就實(shí)用了，如果一些網(wǎng)站禁止右鍵復(fù)制圖像，那么這功能就可以很方便的將其導(dǎo)出來(lái)。我們只需要點(diǎn)擊第4個(gè)相機(jī)按鈕，就可以想看當(dāng)前頁(yè)面的所有圖片，并可以單獨(dú)導(dǎo)出來(lái)哦！

雖然我有100種方法我可以扣出網(wǎng)頁(yè)的圖片，但這個(gè)工具實(shí)在太方便了！

值得使用的理由

• 視覺(jué)化形式來(lái)查看元素的結(jié)構(gòu)樣式，同時(shí)也可以修改
• 查看元素間的間距功能（超實(shí)用）
• 圖像導(dǎo)出功能，不僅是為了導(dǎo)出圖片，有時(shí)還想導(dǎo)出某個(gè)圖標(biāo)。

有了這個(gè)，是不是可以不用F12了？非也，F(xiàn)12還有很多強(qiáng)大的功能，只是作為設(shè)計(jì)師很少用到。所以結(jié)合Visual Inspector二者相互使用會(huì)更好。