編者按：今天推薦兩個(gè)設(shè)計(jì)神器，一個(gè)是Airbnb??發(fā)布的開(kāi)源動(dòng)畫(huà)庫(kù) Lottie，幫你輕松讓動(dòng)效落地。一個(gè)是Sketch 44 新版的編組縮放功能詳解，為設(shè)計(jì)師提供更高效直觀的控制能力，一起來(lái)提高效率！

Sketch 44 新版響應(yīng)式縮放功能詳解

Sketch 44 對(duì)編組縮放功能（Group Resizing）進(jìn)行了升級(jí)。雖然從實(shí)現(xiàn)的角度講沒(méi)什么本質(zhì)性的變化，但在操作方式上卻為我們提供了更高效、直觀的控制能力。

什么是編組縮放

對(duì)新版本進(jìn)行探索之前，我們先來(lái)簡(jiǎn)單了解和回顧一下功能的定義。

預(yù)先設(shè)定規(guī)則，使元素隨著父級(jí)編組或畫(huà)板（Artboard）的尺寸變化而進(jìn)行響應(yīng)式的調(diào)整，這便是編組縮放。通過(guò)這種方式，當(dāng)我們改變編組或畫(huà)板的尺寸時(shí)，其中包含的圖層元素將不再被簡(jiǎn)單粗暴的拉伸，以至形狀及布局結(jié)構(gòu)被徹底破壞，而是會(huì)有規(guī)則的縮放、位移，或保持尺寸及位置恒定。下面的視頻演示了編組縮放功能設(shè)置前后的效果對(duì)比：

新版本發(fā)生了怎樣的變化

從最終實(shí)現(xiàn)結(jié)果的角度來(lái)看，新的縮放功能并沒(méi)有帶來(lái)很顯著的變化，但我們現(xiàn)在可以更直觀高效的設(shè)置響應(yīng)規(guī)則了，譬如以可視化的方式將元素與某個(gè)側(cè)邊的距離設(shè)置為恒定，等等。而另一方面，新的設(shè)置方式對(duì)于新手來(lái)說(shuō)又可能帶來(lái)一些困擾，例如難以體現(xiàn)出過(guò)去“Stretch”與“Float in place”的設(shè)置方法等等。沒(méi)關(guān)系，我們接下來(lái)就會(huì)講到，其實(shí)非常簡(jiǎn)單。

可以說(shuō)，使用舊版本的縮放功能同樣能夠?qū)崿F(xiàn)出如今的多數(shù)效果，只是有些地方可能要用到一些額外的小技巧；因此再次強(qiáng)調(diào)，從實(shí)現(xiàn)結(jié)果的角度講，Sketch 44 當(dāng)中的響應(yīng)式設(shè)計(jì)功能相比于從前并不算是本質(zhì)性的突破，只是在直觀性等使用體驗(yàn)上有了明顯提升，并且更貼近于 Xcode 等開(kāi)發(fā)工具當(dāng)中所提供的相關(guān)模式。

一個(gè)范例，演示各種可能性

這個(gè)范例當(dāng)中最重要的細(xì)節(jié)在于下方的網(wǎng)格編組。要實(shí)現(xiàn)這樣復(fù)雜的響應(yīng)式布局，除了縮放設(shè)置之外，我們還需要在編組中添加一些隱藏圖層，否則網(wǎng)格之間的間距將隨著容器尺寸的調(diào)整而發(fā)生變化。

每個(gè)元素的響應(yīng)規(guī)則設(shè)置詳見(jiàn)下圖：

我制作了一張圖表，以便更加清晰的演示新舊版本設(shè)置之間的對(duì)應(yīng)關(guān)系。當(dāng)然其中一些新版本的設(shè)置方式并不能通過(guò)舊版本來(lái)實(shí)現(xiàn)，因?yàn)樵谂f版當(dāng)中你無(wú)法為同一元素設(shè)置多重屬性，例如第五條當(dāng)中那樣。

• 新建圖層或編組的默認(rèn)設(shè)置，即“Stretch”。
• 將元素在各個(gè)方向上進(jìn)行縮放，以保持元素與容器之間的距離不變，即“Resize object”。
• 將元素釘在容器的某個(gè)邊角，即“Pin to corner”。
• 使元素保持原本的尺寸并懸浮于容器之中，即“Float in place”。
• 將元素釘在容器左上角，高度保持不變，寬度則隨著容器尺寸的變化而拉伸。
• 將元素釘在容器上邊緣，高度保持不變，橫向保持與容器之間的距離不變。

你可以下載這個(gè)范例的 Sketch 文件：http://pan.baidu.com/s/1slK1XZR，進(jìn)行深入研究。

更多實(shí)用技巧

1. 在四個(gè)方向上釘?。≒in）元素的快捷操作

選中元素，在 Resizing 設(shè)置中點(diǎn)擊中央的矩形，即可同時(shí)釘住四邊，無(wú)需一一點(diǎn)擊。

2. 重置縮放規(guī)則的快捷操作

選中已經(jīng)設(shè)置過(guò)縮放規(guī)則的元素，在 Resizing 設(shè)置中點(diǎn)擊中央的矩形，使其四邊被釘住，然后再次點(diǎn)擊中央矩形，即可清空所有規(guī)則。

3. 包含文字圖層的編組縮放

很多時(shí)候，我們需要根據(jù)文字內(nèi)容的增減來(lái)手動(dòng)調(diào)整容器的高度或?qū)挾?，而如何確保比例的精確就成了問(wèn)題。

需要增大容器高度時(shí)，我們可以運(yùn)用 Sketch 的輸入計(jì)算功能。如下方的視頻所示，文字內(nèi)容從3行增加到5行，我們需要調(diào)整編組容器的高度。選中編組，在右側(cè)面板中輸入新的 Height 值“241+24*2”即可。其中，241是容器原本的高度，24是文字的行高，由于新增了兩行內(nèi)容，所以需要乘2。沒(méi)錯(cuò)，至少目前你還需要做些這樣的人工計(jì)算才可以。

需要調(diào)整容器寬度時(shí)（例如制作按鈕），我們則可以通過(guò) Relabel 插件?輕松的實(shí)現(xiàn)最為精確的響應(yīng)式調(diào)整（如視頻所示，搭配 Runner 插件?會(huì)更為高效，搭梯子訪問(wèn)）

很希望 Sketch 可以針對(duì)文字內(nèi)容提供原生的響應(yīng)式縮放功能，人工計(jì)算的方式太落后了。

4. Symbols 中的圖層自動(dòng)響應(yīng)功能

Sketch 的 Symbols 機(jī)制當(dāng)中存在一個(gè)小小的響應(yīng)式功能：當(dāng)你覆寫(xiě) Symbol 實(shí)例當(dāng)中的文字屬性時(shí)，文字圖層旁邊的元素會(huì)自動(dòng)隨著內(nèi)容的調(diào)整而重新定位。

這個(gè)功能的實(shí)現(xiàn)取決于元素的尺寸及相對(duì)位置關(guān)系。如果你發(fā)現(xiàn)響應(yīng)方式有問(wèn)題，可以試著在 Symbol 當(dāng)中調(diào)整這些屬性值。

期待

Sketch 推出響應(yīng)式編組縮放功能已經(jīng)有一年的樣子了，這絕對(duì)是個(gè)正確的決策，而此次新版帶來(lái)的可視化設(shè)置方式更是早該提供。比起優(yōu)化調(diào)整來(lái)說(shuō)，我個(gè)人更期待一些重大的改進(jìn)，例如圖層堆棧、自動(dòng)縮放、圖層之間的約束設(shè)置、網(wǎng)格布局等等。

此外，我認(rèn)為 Bohemian Coding 團(tuán)隊(duì)或許有些缺乏謹(jǐn)慎，因?yàn)檫t緩且缺少規(guī)劃的關(guān)鍵功能升級(jí)往往導(dǎo)致設(shè)計(jì)師們長(zhǎng)時(shí)間處于一種不穩(wěn)定的工作流程當(dāng)中，尤其是涉及到圖層樣式、Symbols 一類(lèi)最為重要的功能時(shí)。不該迫使設(shè)計(jì)師每一次都要隨著工具的升級(jí)而重新學(xué)習(xí)和適應(yīng)。

總之，我認(rèn)為 Bohemian Coding 應(yīng)該制定更合理的路線圖，在開(kāi)發(fā)關(guān)鍵功能時(shí)更具謹(jǐn)慎精神。畢竟，我們愛(ài) Sketch，我們都希望它變得更加強(qiáng)大。

AE 動(dòng)畫(huà)直接變?cè)a：Airbnb 發(fā)布開(kāi)源動(dòng)畫(huà)庫(kù) Lottie

Airbnb 發(fā)布的 Lottie 是一個(gè)面向 iOS、Android 和 React Native 的開(kāi)源動(dòng)畫(huà)庫(kù)。

簡(jiǎn)單來(lái)說(shuō)，就是可以直接利用 AE 導(dǎo)出的 JSON 動(dòng)畫(huà)文件，將其解析為原生代碼，并跨平臺(tái)運(yùn)行在設(shè)備上。

Lottie

根據(jù)身邊朋友的試用，通過(guò) Canvas 繪制動(dòng)畫(huà)非常非常流暢，并且在 AE 動(dòng)畫(huà)沒(méi)有遮罩的前提下內(nèi)存控制得也非常好，基本可以取代用 GIF 做動(dòng)畫(huà)。

一個(gè) JSON 文件可以同時(shí)復(fù)用于 iOS 和 Android ，免去了動(dòng)畫(huà)重復(fù)開(kāi)發(fā)實(shí)現(xiàn)，并且還原度都比較高。

唯獨(dú)當(dāng) AE 動(dòng)畫(huà)大量使用遮罩時(shí)，內(nèi)存管理似乎還有些 Bug。

名字 Lottie 好像來(lái)源于一個(gè)德國(guó)以剪輯電影出名的導(dǎo)演。

總的來(lái)說(shuō)，這個(gè)動(dòng)畫(huà)庫(kù)為跨平臺(tái)低成本動(dòng)畫(huà)實(shí)現(xiàn)提供了非常有想象力的解決方案，一旦做成了對(duì)很多前端同學(xué)會(huì)有一定的沖擊......畢竟以后做牛逼的動(dòng)畫(huà)可能就不那么稀奇了。

順便，設(shè)計(jì)師們趕快去抓一抓 AE 吧，以后實(shí)現(xiàn)原生動(dòng)畫(huà)可能就沒(méi)那么費(fèi)勁，許多好效果也都可以慢慢搬上臺(tái)面了。

Airbnb Design 博客原文如下：

一直以來(lái)，在 Android、iOS、React Native 上實(shí)現(xiàn)一套復(fù)雜動(dòng)畫(huà)是一件蠻困難而且耗時(shí)的事。開(kāi)發(fā)者們不僅要為各種屏幕尺寸加載一大堆素材，還得寫(xiě)成百上千行生硬、難維護(hù)的代碼。正因如此，絕大部分 App 都不愿意使用動(dòng)畫(huà) —— 盡管動(dòng)效對(duì)用戶(hù)體驗(yàn)來(lái)說(shuō)是一個(gè)強(qiáng)大的工具。為此，從一年前開(kāi)始，我們就想要改變這件事。

一年后的今天，很高興和向大家介紹我們的解決方案——Lottie。Lottie 是一個(gè)面向 iOS、Android、React Native 的動(dòng)畫(huà)庫(kù)，能給實(shí)時(shí)繪制 After Effects 動(dòng)畫(huà)并且讓原生 App 像使用靜態(tài)素材一樣使用這些動(dòng)畫(huà)。

通過(guò)插件 Bodymovin，Lottie 可以直接解析 AE 導(dǎo)出的 JSON 文件，并且插件內(nèi)置的 JavaScript 圖層可以將動(dòng)畫(huà)直接在 Web 上運(yùn)行。自2015年2月起，Bodymovin 的創(chuàng)始人 Hernan Torrisi 就一直在優(yōu)化這個(gè)插件，以得到更好的功能，而我們整個(gè)團(tuán)隊(duì)也開(kāi)始了這項(xiàng)不同尋常的工作。（Brandon Withrow 負(fù)責(zé) iOS, Gabriel Peal 負(fù)責(zé) Android, Leland Richardson 負(fù)責(zé) React Native, 以及我負(fù)責(zé)設(shè)計(jì)和體驗(yàn)。）

Lottie 讓工程師們可以輕松實(shí)現(xiàn)豐富的動(dòng)畫(huà)效果。我們所熟悉的如 Nick Butcher 的跳動(dòng)進(jìn)度條效果、Bartek Lipinski 的漢堡菜單欄動(dòng)畫(huà)、Twitter 的愛(ài)心動(dòng)效就是實(shí)現(xiàn)動(dòng)畫(huà)費(fèi)時(shí)費(fèi)力的最好代表。而通過(guò) Lottie，工程師可以準(zhǔn)確地實(shí)現(xiàn)設(shè)計(jì)師所要的動(dòng)畫(huà)效果，并且使得那些與動(dòng)畫(huà)框架做斗爭(zhēng)、猜測(cè)動(dòng)畫(huà)時(shí)間和手動(dòng)重建動(dòng)畫(huà)曲線等等繁復(fù)的操作成為歷史。

我們的目標(biāo)就是盡可能準(zhǔn)確地實(shí)現(xiàn) AE 制作出來(lái)的動(dòng)畫(huà)，Lottie 提供的示例 App 將會(huì)向大家展示如何利用 AE 和 JSON 文件快速、靈活且精確地實(shí)現(xiàn)動(dòng)效。在示例中，也提供了很多復(fù)雜動(dòng)畫(huà)的源文件，包括以線條為基礎(chǔ)的動(dòng)畫(huà)、以字體變形為基礎(chǔ)的動(dòng)畫(huà)、動(dòng)態(tài) Logo 以及多角度多切面的效果。

目前的 Airbnb App 中已經(jīng)有不少動(dòng)畫(huà)是通過(guò) Lottie 實(shí)現(xiàn)的，如應(yīng)用內(nèi)通知、全動(dòng)畫(huà)引導(dǎo)、評(píng)價(jià)頁(yè)面等。接下來(lái)我們還打算在趣味性的動(dòng)畫(huà)上進(jìn)一步拓展。

靈活、高效的解決方案

Airbnb 是一家全球化的公司，服務(wù)于數(shù)百萬(wàn)旅行者和房主，因此我們的動(dòng)畫(huà)也將運(yùn)行在各種各樣的設(shè)備和平臺(tái)上。盡管 Marcus Eckert 的 Squall 和 Facebook 的 Keyframes 庫(kù)和 Lottie 很相似，但我們各自的目標(biāo)略有不同。

Facebook 為專(zhuān)注于響應(yīng)式布局，只選擇支持了少數(shù) AE 動(dòng)效，Lottie 則打算盡可能多的實(shí)現(xiàn)效果本身。Squall 的 AE 預(yù)覽 App 是非常有用的工具，但它目前只支持 iOS，所以我們的工程師需要跨平臺(tái)的解決方案。

Lottie 的 API 中集成了許多很棒的功能，讓整體變得更佳高效和易用：它支持通過(guò)網(wǎng)絡(luò)加載 JSON 文件，這對(duì) A/B 測(cè)試方案非常有用；它有可選的緩存機(jī)制，能支持調(diào)用緩存中的動(dòng)畫(huà)；動(dòng)畫(huà)的速度、相關(guān)聯(lián)的手勢(shì)都可以通過(guò)簡(jiǎn)單的參數(shù)來(lái)控制；甚至 iOS 中還支持在 Runtime 中添加額外的原生 UI ，從而實(shí)現(xiàn)復(fù)雜的過(guò)渡動(dòng)畫(huà)。

除了目前已有的各個(gè)功能之外，未來(lái)我們還打算為 Lottie 動(dòng)畫(huà)增加 mapping 視圖、轉(zhuǎn)場(chǎng)視圖等功能。

搭建社區(qū)

Airbnb 將 Lottie 在 GitHub 開(kāi)源出來(lái)，正是希望它能成為連接開(kāi)發(fā)者和設(shè)計(jì)師們的一個(gè)橋梁，讓所有喜歡動(dòng)畫(huà)的人都加入進(jìn)來(lái)。

9 Squares, Motion Corpse, 和 Animography 等動(dòng)畫(huà)交流社區(qū)的興起讓我們倍受鼓舞，它們讓全世界的動(dòng)畫(huà)人連結(jié)到一起，即便這些人從來(lái)沒(méi)有一起工作過(guò)。雖然這個(gè)過(guò)程伴隨各個(gè)團(tuán)隊(duì)之間持續(xù)幾個(gè)月的爭(zhēng)吵，但毫無(wú)疑問(wèn)，最終的成果對(duì)動(dòng)畫(huà)界來(lái)說(shuō)價(jià)值非凡。

在這些人的引領(lǐng)下，Airbnb 接觸到這三大動(dòng)畫(huà)社區(qū)，并將來(lái)自它們的許多動(dòng)畫(huà)增加到我們的示例 App 中。我們相信把這些驚艷的設(shè)計(jì)整合到 Lottie 強(qiáng)大的工程師社區(qū)中，將會(huì)點(diǎn)燃創(chuàng)意的火花。

我們非常樂(lè)意收到來(lái)自用戶(hù)的反饋——無(wú)論你是設(shè)計(jì)師、動(dòng)畫(huà)制作者、工程師，都可以通過(guò) lottie@airbnb.com 的郵箱和我們聯(lián)系。我們也無(wú)比期待看到全世界使用 Lottie 的用戶(hù)所匯聚成的團(tuán)體能給創(chuàng)造出怎樣的奇跡。

Lottie 官方網(wǎng)站（可下載 AE 插件、三大平臺(tái)代碼和示例）

「有哪些最新的設(shè)計(jì)神器」

1. 《超全面！新晉設(shè)計(jì)神器FIGMA 深度評(píng)測(cè)》
2. 《新晉神器！超厲害的原型設(shè)計(jì)新玩具KITE COMPOSITOR 深度測(cè)評(píng)》
3. 《ADOBE新利器！EXPERIENCE DESIGN CC 體驗(yàn)版使用詳細(xì)評(píng)測(cè)》

原文地址：medium
譯文地址：beforweb

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專(zhuān)欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專(zhuān)欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com