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

2014年，F(xiàn)acebook推出了新聞閱讀應(yīng)用Paper，諸多交互細(xì)節(jié)與炫酷動(dòng)效啟動(dòng)了界面設(shè)計(jì)的新時(shí)代，Google的Material Design更是將移動(dòng)動(dòng)效提升到了app基礎(chǔ)體驗(yàn)環(huán)節(jié)的高度。盤點(diǎn)如今體驗(yàn)優(yōu)秀的移動(dòng)app，精彩的動(dòng)效層出不窮，放眼望去，聚集UI設(shè)計(jì)大神的dribbble、behance等地，出彩的動(dòng)效更好的詮釋了流暢細(xì)膩的交互操作……如果說(shuō)移動(dòng)體驗(yàn)設(shè)計(jì)師還能在傳統(tǒng)的交互視覺(jué)之上提升app的可用性，移動(dòng)動(dòng)效必定是最重要的方式之一。

Everyone who touches UI, needs to have motion skills.

移動(dòng)動(dòng)效設(shè)計(jì)聽(tīng)起來(lái)門檻頗高，似乎都是動(dòng)效設(shè)計(jì)師的專業(yè)范疇。 Quartz Composer+Origami、Framer.js、Adobe After Effects都是很優(yōu)秀的動(dòng)效設(shè)計(jì)工具，可惜入門門檻太高，要想熟練掌握需要一定的編程技巧或視覺(jué)設(shè)計(jì)背景，對(duì)于大多數(shù)交互設(shè)計(jì)師來(lái)說(shuō)，永遠(yuǎn)有一種“只可遠(yuǎn)觀而不可褻玩焉”的感覺(jué)。對(duì)于非動(dòng)畫或計(jì)算機(jī)專業(yè)科班出身的我，這也是困擾已久的問(wèn)題。

2014年Google I/O大會(huì)上的設(shè)計(jì)工作坊中，一個(gè)普遍被提及的問(wèn)題是：設(shè)計(jì)師應(yīng)該如何選擇動(dòng)效設(shè)計(jì)工具并將其融入到設(shè)計(jì)流程中去？得到的回答也多種多樣，有人說(shuō)Adobe After Effects可以實(shí)現(xiàn)諸多細(xì)膩的微動(dòng)效，有人提Google自己的Polymer framework可以整合全新的Material Design動(dòng)效，也有人說(shuō)Quartz Composer的原型動(dòng)效適合創(chuàng)業(yè)團(tuán)隊(duì)快速展示想法…簡(jiǎn)單說(shuō)來(lái)，沒(méi)有完美的答案，因?yàn)闀r(shí)代變化太快，不斷有新的工具涌現(xiàn)，幫助設(shè)計(jì)師更好的表達(dá)自己的想法。 在項(xiàng)目中，作為交互設(shè)計(jì)師的我常常發(fā)現(xiàn)，為了達(dá)到理想效果，一不留神就會(huì)在動(dòng)效細(xì)節(jié)中耗費(fèi)太多時(shí)間，某個(gè)構(gòu)件切片不夠完美、Timing控制不夠精準(zhǔn)或者字體不夠漂亮。此時(shí)，你很可能正在浪費(fèi)時(shí)間。

另一方面，項(xiàng)目節(jié)奏快，交互設(shè)計(jì)師辛苦花費(fèi)一天制作出來(lái)的動(dòng)效，可能只是整個(gè)交互設(shè)計(jì)工作中的一小部分。開發(fā)拿到后看了或許回應(yīng)一聲“原來(lái)是那么回事，可惜臣妾做不到啊”，這時(shí)候的再調(diào)整溝通過(guò)程，會(huì)占用很多交互設(shè)計(jì)思考時(shí)間，很可能得不償失。

此時(shí)，選擇一款適合交互設(shè)計(jì)師的動(dòng)效設(shè)計(jì)工具能夠很大程度上幫你解決以上問(wèn)題，分分鐘變?yōu)閯?dòng)效達(dá)人。

如今，動(dòng)效制作工具市場(chǎng)百花爭(zhēng)鳴、變幻莫測(cè)，似乎每隔幾天就能聽(tīng)到一款全新的動(dòng)效制作工具上線。我們研究了當(dāng)前能夠支持Android和iOS平臺(tái)的流行移動(dòng)動(dòng)效制作工具，它們各具千秋，并沒(méi)有一款完美的工具可以滿足所有要求。

作為交互設(shè)計(jì)師，在表達(dá)創(chuàng)意時(shí)，經(jīng)常會(huì)陷入以下困境：

1.如何快速上手動(dòng)效制作工具？

2.如何在短時(shí)間內(nèi)實(shí)現(xiàn)app交互動(dòng)效？

3.如何低成本高效率的完成動(dòng)效溝通？

一個(gè)偶然的機(jī)會(huì)，我在Vimeo上發(fā)現(xiàn)了這樣一段視頻“[Keynote does Material Design][5]”，作者將Keynote使用到了神乎其技的地步，幾乎完美的模擬了Google Material Design中的所有動(dòng)效。 在震驚中我打算嘗試使用Apple Keynote作為快速動(dòng)效制作工具，并計(jì)劃開展相關(guān)的研究與練習(xí)。

Keynote的主要優(yōu)點(diǎn)體現(xiàn)在：

1.它真的很快。在拿到相關(guān)視覺(jué)切圖資源的情況下，一個(gè)基本動(dòng)效的制作可以在15分鐘內(nèi)搞定。即使動(dòng)效需要調(diào)整也很容易，可以很方便的進(jìn)行創(chuàng)意表達(dá)和設(shè)計(jì)溝通。

2.它很容易上手。Keynote是絕大多數(shù)用戶體驗(yàn)設(shè)計(jì)師必備的工具，你不需要花時(shí)間來(lái)熟悉它。在扁平化大行其道的今天，更適合使用Keynote作為productivity工具。

3.它不需要編程。即使不懂代碼，也可以做出以假亂真的動(dòng)效。

當(dāng)然，Keynote也有其不足之處，比如：

1.預(yù)覽原型有些麻煩，你無(wú)法像AE那樣逐幀調(diào)整每個(gè)細(xì)節(jié)。

2.不支持分層，當(dāng)元素較多時(shí)不容易管理。

3.分享不太方便，需要將影響錄制下來(lái)并轉(zhuǎn)成gif圖片，相對(duì)繁瑣。

基于“怎樣才能在無(wú)需編程（Object C，Swift或者Javascript）并遠(yuǎn)離陡峭學(xué)習(xí)曲線的基礎(chǔ)上，迅速有效的制作媲美原生動(dòng)效的原型交互動(dòng)畫？”的初衷，它的以上不足對(duì)我來(lái)說(shuō)都不是事兒。

另一方面，動(dòng)效在制作之前，得準(zhǔn)備好視覺(jué)元素的切圖，此時(shí)便需要一款快速繪圖工具。

說(shuō)到繪圖工具，Sketch這個(gè)產(chǎn)品界面設(shè)計(jì)新銳自從發(fā)布3.0以來(lái)，就逐漸成為我的主打交互設(shè)計(jì)工具，Axure這個(gè)前任基本已經(jīng)被打入冷宮。 利用Keynote制作動(dòng)效時(shí)，挑選Sketch作為圖形繪制工具，無(wú)疑看中了它矢量繪圖精度高、導(dǎo)出資源方便的特點(diǎn)。 在此不再贅述Sketch的優(yōu)點(diǎn)，有關(guān)Sketch的介紹可以查看Sketch中文網(wǎng)?，或者閱讀設(shè)計(jì)師Meng To的一篇文章：https://medium.com/design-with-sketch/design-with-sketch-92608a88c103

本文將以一個(gè)列表頁(yè)到詳情頁(yè)的動(dòng)效作為案例來(lái)幫助描述。

開始動(dòng)效創(chuàng)意之前，先普及一下動(dòng)效的基本原理。

大部分移動(dòng)動(dòng)效，都可以基于以下5要素進(jìn)行分解：

1.移動(dòng)Move：改變?cè)匚恢茫?/p>

2.縮放Scale：改變?cè)卮笮⌒螤睿?/p>

3.旋轉(zhuǎn)Rotate：調(diào)整元素角度；

4.透明Opacity：調(diào)整元素透明度；

5.起始Timing：定義元素出現(xiàn)（消失）時(shí)機(jī)。

比較復(fù)雜的形變動(dòng)畫，在分解足夠細(xì)的情況下，也可以看成是以上要素的組合。最著名的《迪斯尼的12條動(dòng)畫原則》中提及的動(dòng)畫原則，都是以上5要素的不同搭配。

拓展閱讀：?http://www.smashingmagazine.com/2012/10/30/motion-and-animation-a-new-mobile-ux-design-material/

該步驟中，最重要的就是將動(dòng)效構(gòu)思表達(dá)出來(lái)。?比如，像我這樣，先以草圖的形式將動(dòng)效分解：

然后，把草圖中的動(dòng)效要素編排到時(shí)間線中，以下為本文所用案例的動(dòng)效Timing示意圖：

值得注意的是，最終時(shí)間線（Timing）的編排設(shè)計(jì)，并非起始階段就確認(rèn)敲定，而是結(jié)合動(dòng)效效果反復(fù)調(diào)試更改至最佳后，才確認(rèn)并提交給開發(fā)作為實(shí)現(xiàn)依據(jù)的。

關(guān)于動(dòng)效制作的思路，大家可以通過(guò)收集優(yōu)秀動(dòng)效作品來(lái)積累靈感，除了優(yōu)秀app的實(shí)際動(dòng)效體驗(yàn)外，dribbble和capptivate都是不錯(cuò)的動(dòng)效發(fā)散圣地。

思路理順之后，開始進(jìn)入制作階段。此時(shí)，需要將step1中動(dòng)起來(lái)的元素制作出來(lái)，Sketch就能派上用場(chǎng)了。

首先，打開需要制作動(dòng)效的產(chǎn)品頁(yè)面Sketch視覺(jué)設(shè)計(jì)稿，

將可能需要用到的獨(dú)立動(dòng)效元素或者不涉及動(dòng)效的元素在Sketch中合并成組，以此為基礎(chǔ)導(dǎo)出視覺(jué)切圖。由于Keynote導(dǎo)入的資源在“構(gòu)件順序”面板中不支持重命名，為了避免在設(shè)置元素動(dòng)效細(xì)節(jié)時(shí)產(chǎn)生混淆，建議在Sketch里面就把相關(guān)layer進(jìn)行合理命名。

在進(jìn)行動(dòng)效制作前，按照以下步驟對(duì)Keynote進(jìn)行配置：

1.運(yùn)行Keynote并打開一個(gè)空白模板；

2.點(diǎn)擊Keynote工具欄右上角的“文稿”設(shè)定，在幻燈片顯示設(shè)置中，勾選“打開時(shí)自動(dòng)播放”“循環(huán)幻燈片顯示”選項(xiàng)；

3.在演示文稿類型中，將默認(rèn)的“正常”改為“自行播放”，并將延遲的過(guò)渡與構(gòu)件時(shí)間調(diào)整為0；

4.根據(jù)動(dòng)效的展示平臺(tái)，自定義幻燈片大小。iOS建議640×1136，Android建議720×1280；

5.確保Keynote工具欄右上角“動(dòng)畫效果”設(shè)定下的“構(gòu)建順序”面板已調(diào)出。

最有意思也是最關(guān)鍵的一步，即怎樣使它們按照你的設(shè)想真正動(dòng)起來(lái)。

首先，我們普及一下Keynote動(dòng)畫功能中兩個(gè)重要的模塊：

1.構(gòu)件的動(dòng)效 構(gòu)件出現(xiàn)：定義元素如何出現(xiàn)，能夠結(jié)合移動(dòng)動(dòng)效5要素中的“起始”概念，展現(xiàn)構(gòu)件的開始過(guò)程。 動(dòng)作：定義元素如何變化 ，能夠結(jié)合移動(dòng)動(dòng)效5要素中的“縮放”、“旋轉(zhuǎn)”、“移動(dòng)”、“透明”等概念，展現(xiàn)構(gòu)件的變化過(guò)程。 構(gòu)件消失：定義元素如何消失，能夠結(jié)合移動(dòng)動(dòng)效5要素中的“起始”概念，展現(xiàn)構(gòu)件的結(jié)束過(guò)程。

2.頁(yè)面的轉(zhuǎn)場(chǎng) 神奇移動(dòng)：這是Keynote動(dòng)效中非常重要的功能，它提供了兩張頁(yè)面之間構(gòu)件位置與大小自由過(guò)渡的效果，以一種神奇的方式自動(dòng)填補(bǔ)兩張頁(yè)面之間相同構(gòu)件的位置、透明度、大小等變化過(guò)程。 未選中任何構(gòu)件時(shí)，動(dòng)畫效果設(shè)定下選擇過(guò)渡效果中的“神奇移動(dòng)”即可，以下是我的習(xí)慣設(shè)置：

其次，我們根據(jù)動(dòng)效Timing的編排，將整個(gè)動(dòng)效過(guò)程分解成不同的階段，其劃分一般是根據(jù)不同頁(yè)面狀態(tài)過(guò)渡點(diǎn)設(shè)定的。 一段連續(xù)的動(dòng)效基本可以表達(dá)為：

頁(yè)面狀態(tài)1 – 狀態(tài)過(guò)渡 – 頁(yè)面狀態(tài)2 – 狀態(tài)過(guò)渡 – 頁(yè)面狀態(tài)3…

正如本文開始時(shí)所提及的，Keynote本身沒(méi)有分層管理的概念，正是為了避免同一個(gè)頁(yè)面的元素過(guò)多，所以將動(dòng)效中的部分變化過(guò)程適當(dāng)利用神奇移動(dòng)作過(guò)渡處理，把一個(gè)完整的動(dòng)效過(guò)程分解到幾個(gè)不同頁(yè)面進(jìn)行。更確切的說(shuō)，建議將各頁(yè)面中的構(gòu)件動(dòng)效在該頁(yè)面中處理完成，而不同頁(yè)面狀態(tài)之間的切換，既可以利用神奇移動(dòng)效果進(jìn)行過(guò)渡，也可以先在單獨(dú)頁(yè)面中處理完畢，再合并到前一狀態(tài)頁(yè)面中去。

例如，將列表頁(yè)面的操作反饋?zhàn)鳛榈谝浑A段，列表圖到詳情圖的過(guò)渡變化作為第二階段，而詳情頁(yè)面的內(nèi)容呈現(xiàn)作為第三階段。

然后，按照階段劃分將所有的視覺(jué)元素拖入Keynote，并拼接成產(chǎn)品界面，其中不涉及動(dòng)效的部分合并成組。

適當(dāng)利用Keynote的快捷鍵，能夠極大提高你的操作效率。

如上圖所示，動(dòng)效第一階段即列表頁(yè)自身控件變化（包括觸控光標(biāo)的出現(xiàn)和列表項(xiàng)點(diǎn)擊反饋）；第二階段可以借助神奇移動(dòng)，實(shí)現(xiàn)兩個(gè)狀態(tài)的過(guò)渡；第三個(gè)階段則著重表現(xiàn)詳情頁(yè)相關(guān)內(nèi)容元素的逐步呈現(xiàn)效果。

接下來(lái)，利用動(dòng)畫效果設(shè)定選擇每個(gè)構(gòu)件的動(dòng)效（出現(xiàn)、動(dòng)作、消失）。只要有耐心，Keynote自帶的動(dòng)效幾乎能夠?qū)崿F(xiàn)所有動(dòng)態(tài)效果。

最后，在構(gòu)件順序中對(duì)每一步動(dòng)作進(jìn)行編排。

需要特別留意的是，由于Keynote本身缺少可視化的時(shí)間線展示，只能通過(guò)構(gòu)件順序面板中各構(gòu)件的起始順序、起始方式與延遲時(shí)間的有效組合實(shí)現(xiàn)。

起始方式有如下幾種選擇：

1.過(guò)渡之后：構(gòu)件順序面板中第一個(gè)構(gòu)件特有的起始方式，表示在該頁(yè)面起始時(shí)自動(dòng)運(yùn)行該效果。

2.在點(diǎn)按時(shí)：表明在點(diǎn)擊后該效果才啟動(dòng)。如果要做實(shí)時(shí)交互原型，可以選擇這類起始方式，通過(guò)把構(gòu)件鏈接到某個(gè)狀態(tài)的頁(yè)面完成交互操作過(guò)程。

3.與構(gòu)件X一起：需要同步啟動(dòng)的效果，可以選擇該起始方式。

4.在構(gòu)件X之后：選擇該起始方式后，該構(gòu)件的效果在上一個(gè)效果完成之后啟動(dòng)。

無(wú)論是與構(gòu)件X一起，還是在構(gòu)件X之后，延遲時(shí)間的設(shè)置都可以用來(lái)把控動(dòng)效微妙的節(jié)奏，從而與動(dòng)效Timing示意圖中編排的完美匹配。

例如，若想實(shí)現(xiàn)下圖不同構(gòu)件逐次顯現(xiàn)的效果，只需要將對(duì)應(yīng)的構(gòu)件起始方式一并設(shè)置為同步啟動(dòng)（與構(gòu)件X一起），并依次為每個(gè)構(gòu)件輸入不同的延遲時(shí)間即可。

就這樣，通過(guò)以上三個(gè)階段的動(dòng)效編排，一個(gè)完整的由列表頁(yè)到詳情頁(yè)的過(guò)渡轉(zhuǎn)場(chǎng)動(dòng)效就制作完畢了。

我們來(lái)看看剛才制作的動(dòng)效，盡管展現(xiàn)了基本的動(dòng)態(tài)過(guò)程，但在細(xì)節(jié)上還有所欠缺： 比方說(shuō)，我們使用神奇移動(dòng)效果來(lái)處理列表圖到詳情圖的變形過(guò)渡，略顯呆板。 神奇移動(dòng)只能處理線性的移動(dòng)變化，無(wú)法展現(xiàn)曲線或弧形的構(gòu)件運(yùn)動(dòng)軌跡，因此我們可以借用另外一個(gè)Keynote自帶動(dòng)作“移動(dòng)”來(lái)優(yōu)化這個(gè)過(guò)程。

1.把兩個(gè)狀態(tài)的已有構(gòu)件內(nèi)容拷貝到同一個(gè)頁(yè)面上，并合理安排好它們的上下層順序。

2.為列表圖構(gòu)件添加兩個(gè)動(dòng)作：“放大”與“移動(dòng)”，并確保兩者同時(shí)發(fā)生。

3.在構(gòu)件順序中選中移動(dòng)動(dòng)作，利用句柄拉出弧形的移動(dòng)軌跡。

4.將列表圖變形為詳情圖的兩個(gè)動(dòng)作安插到構(gòu)件順序面板中的合適位置。

此時(shí)，再預(yù)覽一下整個(gè)動(dòng)效效果，比剛開始完成時(shí)還是優(yōu)雅不少。 其實(shí)，每一個(gè)精彩的動(dòng)效都是設(shè)計(jì)師不斷修改不斷調(diào)試的結(jié)晶，因此，開始在Keynote中預(yù)覽或播放你的作品，并不斷調(diào)試至最佳吧。

完工之后，你可以使用Keynote的導(dǎo)出功能將其保存為.mov格式，并在Photoshop中轉(zhuǎn)錄成.gif文件，分享給身邊的小伙伴或者資深設(shè)計(jì)師。如能結(jié)合收集的反饋再次加工，一定會(huì)讓你的作品更加出色。

制作移動(dòng)動(dòng)效是很有意思的事情，一旦有了動(dòng)效創(chuàng)意并能夠付諸行動(dòng)表達(dá)出來(lái)，設(shè)計(jì)師極容易獲得的成就感和滿足感。 想法和工具的結(jié)合能夠支撐溝通需要，成為了設(shè)計(jì)師如何看待動(dòng)效設(shè)計(jì)ROI的原則。各種動(dòng)效工具好比十八般兵器，選擇最合適自己的即可，核心還是對(duì)創(chuàng)意的表達(dá)和溝通。

Sketch+Keynote工具的結(jié)合，雖不完美，但簡(jiǎn)單快速，幫助我在十幾分鐘內(nèi)實(shí)現(xiàn)動(dòng)效創(chuàng)意并提交給開發(fā)實(shí)現(xiàn)，所以推薦給交互設(shè)計(jì)師嘗試。

而我們，依舊在不斷努力嘗試不同動(dòng)效工具，去尋找真正的perfect tool。

There will always be a new skill to learn. Never stop learning！

作者：舒舟

來(lái)源：阿里巴巴UED