歷時2個月,整理了這篇動效落地輸出指南! - 優設網 - UISDC

歷時2個月,整理了這篇動效落地輸出指南!

2019/09/15 16430評論區

云南体彩网針對動效輸出的選擇變得越來越多,然而作為設計師僅僅對動效輸出有所了解,往往產出的結果還是不盡如人意。了解動效落地背后的原理,可以贊助我們在設計的前期階段,就了解應該如何做設計能力更容易的對接和落地。

隨著技術革新,用戶對于產品細節的感知度和挑剔水平正在日益劇增,越來越多的產品都在測驗考試通過分歧的手段來打造產品的差別化,而動效設計作為近年來大火的設計趨勢之一也被越來越多的產品所青睞。動效日漸從「錦上添花」慢慢釀成「必弗成少」的優秀產品的構成元素。但是當我們去觀察身邊很多的線上產品,對于動效落地把控的現實結果往往并不盡如人意,很多優秀的概念在想法階段到最終落地幾乎被打磨得體無完膚。以往的經驗告訴我們,可以通過簡單的方式輸出我們的設計作品,而且加以跟進就可以使線上的結果達到很高的完成度。但是當我們面臨動效輸出的時候會發現,輸出的選擇在日漸變多,但是輸出的結果還是很難達到理想的狀態。

目前市面上針對動效的輸出與落田主要還是圍繞著基礎的幾種輸出方式,輸出方式的選擇就困擾著很多的設計師,而作為設計師我們要做的不僅是了解在什么情境下應該選擇什么樣的輸出方式,更應該了解這些流程化的輸出方式的原理,以及圍繞這些原理我們可以在整個產品的設計流程中能做到的更多的事情。

產品中的動效分類

在了解動效落地方式的選擇之前,我們需要明白的第一件事是互聯網產品傍邊的動效分類與一般意義上的動效有很大的區別。廣義的我們把 UI 動效分為三類。

1. 情感化動效

情感化動效偏向于感性的層面,主要目的是增加我們產品的氣質和轉達情緒,增加產品的魅力值,在一些小的細節上我們加入一些情感化的元素也可以以彩蛋的形式給用戶驚喜。比較常見的有 app 中的 loading 動畫,點贊動畫等。

2. 交互動效

云南体彩网產品流程、交互行為的串聯,豈論可實際操作的交互原型,還是純做 demo 展示的動效過場都可以算作交互動效設計。交互動效最基礎的形態就是原型流程圖的串聯交互稿。交互動效又可以細分為轉場動效和微交互,分別應用于頁面銜接和基礎組件的交互反饋。前者可以轉達給用戶產品的條理結構和空間關系,后者可以使用戶減少操作成本。

3. 復合型動效

復合型動效不局限于感性層面的情緒轉達,也不局限于交互行為的串聯,往往真實場景傍邊更多的也是這一類動效,在與開發人員對接階段也更容易存在各種各樣的不穩定因素,對于設計師而言也存在更多層面的挑戰性。

影響輸出方式的因素

云南体彩网情感化動效一般情況下會受到三個方面的屬性影響他的輸出選擇,分別是尺寸、時間、動畫復雜度。

1. 動畫尺寸

動畫尺寸越大,占用系統空間越大,占用的系統性能也越大,但是這個等式僅僅成立于我們常見的一些所見即所得的格式上,例如 gif/視頻/webp/apng 等。

云南体彩网類似這樣的一些格式,是我們的設備所能接受的最簡單最直白的格式。他產出一個動畫的邏輯,一般都是分歧的靜態圖像的堆棧,通過給定的順序和時間逐個播放。這里的每一個靜態構成圖,尺寸越大,整個動畫的占用內存相應的也就越大。但是產品包的容量始終有限,不克不及允許太大內存的動效存在。

云南体彩网另一方面,大尺寸的靜態圖在預覽過程中也需要耗費更多的設備計算。舉一個很簡單的例子,當我們在電腦上預覽一張 800*600 的圖和一張 2400*1800 的圖,電腦打開它所需要的時間是分歧的。相應的,動畫格式多個大尺寸靜態圖做預覽時耗費的系統性能是成倍數增長的。

2. 動畫時長

影響原因與尺寸的影響原因類似,當圖片堆棧的時間變長時,堆棧傍邊的圖片數量也會增加,動畫的占用內存相應的也就變得更大。所以,當我們的動畫時間過長時也不適合使用這些所見即所得的格式類型。

需要注意的一點是,動畫的時長對性能的影響會相對的小很多。

3. 動畫復雜度

動畫復雜度對在以上提到的輸出格式傍邊不存在任何問題,更多的是在近幾年比較時髦的輸出工具上涌現問題。對于復雜動畫,我們要盡可能選擇輸出所見即所得的格式。被選擇了其他的格式時也要盡可能的減少動畫的復雜度,保存重點,去掉冗雜的細節。

情感化動效輸出選擇

一般情況下我們會根據動效的類型把輸出方式分為兩類:

  • 所見即所得格式
  • 所見非所得格式

所謂「所見即所得」就是輸出之后即可預覽的格式,好比 GIF 圖/視頻這種的格式,也是動效輸出最基礎的格式。

1. GIF圖格式

GIF 圖格式,可謂是作為設計師接觸得最多的動態格式了,GIF 格式自 1987 年由 CompuServe 公司引入后,因其體積小而成像相對清晰,特別適合于初期慢速的互聯網,而從此大受歡迎。因為時代配景使得他有非常強的兼容性,基本上可以在目前大多數的智能設備上直接預覽。豈論動效落地還是在各個平臺上的兼容性也都是非常優秀的,尤其在一些設計平臺上,也是選擇最多的概念展示格式之一。也因為他在分歧平臺設備之間的兼容,他的流傳性也是非常強的。

當然除了他自身所帶的這么多優點之外,GIF 格式也因為他的應用年代技術限制,會有很多其他的缺陷。前面提到的很多優點往往也是因為出身早給他自身帶來的福利,他會有很多弗成逆的問題。=第一點是對電腦的內存和性能占用非常大(根據 GIF 的時間尺寸等情況會有分歧水平的影響)。第二點他是一個有損的文件格式,豈論是色彩還是畫面質感都邑有一定水平的壓縮。第三點是對透明通道的支持非常有限,輸出結果會非常差,時常會有鋸齒或白邊的情況。以上是我們在輸出 GIF 格式之前,需要提前思考是否可以接受的問題。

云南体彩网另外輸出 GIF 圖的過程也經常困擾著很多的設計師,我也為此錄制了一篇關于 GIF 輸出的經驗分享:

云南体彩网在開發環境中我們向開發人員提供一個貝塞爾曲線需要提供以下幾個參數:

  • 錨點1(P0)
  • 錨點2(P3)
  • 把持桿1(P1)
  • 把持桿2(P2)

在多數情況下我們完全可以依照前面提供的格式,直接對接我們的矢量形狀。在少數情況下,尤其在一些交互類動效的情況下,很多就需要我們手動的去提供每一個曲線的參數了。但是我們弗成能每個點的參數挨個去測量去輸出,這是非常不現實的。目前在市面上大多數的設計軟件和輸出軟件上都邑提供一些簡單的代碼參數給我們。

云南体彩网但是這些都只是基于靜態頁面的情況,在動效頁面的交接中我們如何去對接呢?以下圖作為例子:

像這樣一個例子,我們需要提供動畫的前后兩個狀態給到開發人員,即 icon 搜索框的形式和輸入光標的豎線形式。每一個路徑的 svg 信息我們可以直接輸出給開發人員,像 Sketch/Zeplin 這樣的工具我們可以直接輸出 Web 端所用的格式,但是他們都只是局限于 CSS 格式,但是在 Android 和 iOS 下就無法提供相應的代碼。為了解決這個問題,這里推薦另一款軟件──PaintCode 3。

云南体彩网PaintCode 3 是一款專門為設計師準備的簡單的矢量圖形繪圖軟件,通過 PaintCode 3,即使沒有編程經驗,設計師也可以輸出適量圖形的 iOS/Web/Android 相應的代碼。而且他跟 sketch 之間有非常強的關聯性,可以直接復制 sketch 傍邊的矢量形狀,也可以直接在軟件里編輯和新建矢量圖形,非常強大。

2. 緩動貝塞爾曲線

云南体彩网緩動貝塞爾曲線,即我們在設計動效時使用的緩動曲線,他可以控制我們動效的速度緩急,可以直接控制我們動效的整體節奏感。在大多數情況下我們看到的緩動貝塞爾曲線都是如下圖,他與我們的貝塞爾曲線非常類似,區別在于緩動貝塞爾曲線的兩個端點是固定的,而貝塞爾曲線的端點是動態的。也就是說當我們與開發人員對接緩動曲線時,可以只提供兩個控制桿的位置。像在下圖中我們的緩動曲線的參數,兩個端點的坐標位置,即( 0.17,0.67,0.83,0.67 )。

在 AE 傍邊我們如何獲得我們相應的緩動曲線的參數呢?我們在 AE 傍邊把緩動曲線圖表的顯示類型選擇為「編輯值圖表」即可調劑為我們常見的緩動曲線的類型。

為了獲得我們在 AE 傍邊的緩動曲線的參數,我們可以以圖表左下角作為出發點,根據兩個控制桿的位置創建兩個矩形,以左側控制桿為基礎的矩形寬高(在整個區域寬高中的比例值作為數值)作為緩動曲線的前兩個數值,以右側控制桿為基礎的矩形寬高作為緩動曲線的后兩個數值。

雖然以上的方式可以使我們更方便地獲得 AE 緩動參數的具體數值,但是因為操作繁瑣只適用于我們已經完成了動畫需要去落地的情況。更多的情況下我們需要在動畫設計之前就使用參數的方式去使用緩動曲線。Flow 插件可以贊助我們完成這件事。

他可以贊助我們使用一般的緩動曲線的方式設計動畫,而且提供了 25 種在開發環境傍邊常用的緩動類型,我們也可以自界說一些緩動類型,可以備份成文件傳輸在團隊內部當成一份規范來使用,也可以導入外部的一些緩動參數的文件。當然在正常情況建議還是使用一些默認的緩動類型,原因有兩個方面,一方面是這樣默認的曲線在算法上更容易計算,對系統性能的占用默認也可以低一些,另一方面很多非系統默認的緩動差值需要開發再去寫一遍,無形中也會增加我們的對接成本和后期的代碼維護成本。

3. 手動標注

基于我們對貝塞爾曲線的理解和緩動曲線的理解,可以贊助我們在手動輸出標注時有更豐富的選擇。手動標注的情況下我們需要把動效中每一個具體元素的參數都參數化。一般情況下我們會把動畫的基礎單位分為以下六個部分:

  • 元素(在發生變更的元素)
  • 屬性(元素發生變更的屬性)
  • 參數(屬性發生的具體數值變更)
  • 時間(變更的起始時間/連續時間)
  • 差值(動畫的緩動曲線)
  • 備注(其他說明)

有了這些基本的參數之后,我們可以參照下圖中的方式完整的表述我們的動畫過程給開發人員。

云南体彩网另外我們也可以通過更加可視化的方式去標注,而且把這些樣式做成組件的形式在團隊內作為一種共識推廣開之后也能大大提高動效標注的交接效率。

動效落地拓展──代碼

云南体彩网當我們通過上述手動標注的方式交接給開發人員時,站在設計的立場上似乎已經做到盡善盡美了,但是我們回過頭時候,往往輸出的結果在大多數情況下還是不那么盡如人意。這其中有非常多綜合的因素,站在開發者的角度來看,往往我們對于結果輸出所做的事情非常有限。造成這種輸出與落地巨大差別的最大原因也是來自于設計師與開發者之間理解產品構成的巨大差別。

設計師在輸出動畫時更多的時間精力在于對動畫細節(緩動、時間等)的調劑,而對于開發者來說有非常多的外部因素影響最終的輸出,一般情況下會有以下幾點:

  • 開發者自身的水平
  • 時間排期的影響
  • 框架結構、代碼語言限制
  • 其他影響

云南体彩网在大多數動畫中有非常多的圖層細節,挨個實現需要大量的時間,比方說制作下圖中這樣一個動畫,只需要使用 CSS 設置一下最外層面板的寬度,而且加一個過渡動畫。但是對于大多數的產品開發者來說,你需要同時設置外部和內部所有元素的動畫。

云南体彩网第二個更麻煩的事情是你在 sketch 傍邊的圖層與 html 傍邊的圖層不匹配。所以即使你在動效標注傍邊,標識某個矩形從 0 向右移動 10 像素,設計上非常容易。但是代碼會有非常多非常復雜的框架層,開發人員需要把設計塊調劑到他們的代碼傍邊,每一個元素都需要零丁相同或分歧的方式去實現。這是一個非常容易失足的過程,完全取決于如何清楚地用文檔描述你的動畫,以及開發人員如何仔細地查看并實現你的內容。

第三點是修改動畫的效果非常麻煩,設計和產品開發是一個迭代的過程。但是當你對一個動畫效果進行調劑的時候,不管是設計還是開發都需要大量的時間去對之前的文件和代碼進行重新了解,每個人都邑根據自己的理解會有分歧的實現方式,從重新熟識早期版本的實現邏輯,到調劑,再到開發落地需要非常復雜的一套流程。

云南体彩网為了讓這個過程不那么痛苦,我們意識到需要跳出自己的舒適區,去用另外一種分歧的邏輯去構建動畫,這也意味著不建議人人使用所見即所得的設計工具。相反的,我推薦人人使用 html/css/js 的方式去構建我們的動畫體系,你需要一些時間來適應他,但經過幾個動畫之后,很多過程就會變得特別容易,其實也并不需要你知道太多關于代碼的知識,就可以為開發人員創建一些基本的動畫。

一方面我們真正控制了動畫的微小細節,對于開發人員來說,這種方式更容易使我的代碼適應他們現有的代碼庫,而不是大多數標注軟件自帶的 css 屬性那么软弱,雖然各個平臺都邑有分歧的代碼語言差別,但是他們之間的跨度相比設計到代碼的跨度來說可以說是微不足道了。

云南体彩网我只需要將輸出的代碼放在 codepen上,開發人員就可以輕松看到我做了什么,也可以復制粘貼我的代碼部分來制作一些效果。

當然這么做也有一些問題,首先,我需要在開始設置動畫之前用 html 重構我的設計,不過因為我們只是去針對動畫發生的部分去做設計,所以不會因為框架和代碼邏輯對我們發生影響,相比之下就會容易很多,另外我們也可以在 sketch 中直接復制 css 代碼,只需要很少的步調就可以重構我們的設計,甚至一些根本沒動畫的部分可以截個圖,貼圖進去也沒有問題。

另一種方式是我們直接從實際項目的代碼入手,但是會比我們自己去寫 demo 要復雜很多,因為實際產品的代碼框架更復雜,需要重新梳理。

雖然這種工作方式主要是使用代碼做一些動畫,但是大多數情況下還是需要先在一些動畫軟件上做想法的探索,分歧的想法可能會需要比較久的代碼時間。因此,如果我不太清除自己想要什么樣的動畫,我還是會付出一部分時間在 demo 的制作上。

云南体彩网另一種可能性是我們在平時可以通過一些簡單的代碼,去繪制一些基礎組件的動效,我們稱這種器械為腳手架,可以給我們所有的一些基礎元素做一些小動畫,比方說開關,checkbox,按鈕點擊效果之類的。因為這些是我們大多數時間都邑去反復使用的一些組件,做一個動畫相當于對整個系統動畫的貫穿。這種方向不管是自己去寫代碼還是通過開發人員去寫代碼都是非常容易的一個過程,而且帶來的效果其實是非常可觀的。

目前市面上也有一些針對設計師的代碼動效輸出工具,像 Origami / Framer,都是目前比較火熱的開發思維實現動效的產品,非常建議人人去測驗考試使用。

總結

動效輸出的手段目前雖然非常多樣,而且隨著技術手段進步選擇會越來越多。但是目前來說沒有任何一種方案,可以完全解決我們落地動效傍邊的所有問題。而且目前市面上所提供的任何一款工具無法真正解決設計思維所帶來的局限性。作為設計師我們需要始終堅持敏銳的觀察力,而且連續的更新自身的知識樹,能力應對多種多樣需求下輸出的動效效果的落地。另一方面我們也需要站在更久遠的角度去了解一個動效需求從產品邏輯到開發邏輯之間的鴻溝,并試著通過更多元的手段去跨越鴻溝。

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.7daer.cn/dynamic-design-landing

發表評論 加載中....

評論加載中....

uisdc

云南体彩网評論區都快餓癟了,看看我期盼的小眼神...

您還沒有登錄

優設啟用更平安省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里