全栈工程师?
嗯.....目前并不是!

動效設計-交互設計的最後一公里(四)

本文介紹了動效設計成果物規範的六個部分:動效Demo,Demo關鍵幀、觸發行為、運動對象、運動參數、運動曲線。

作為交互設計的延伸,動效設計成果物除了提供必要的動效資源、萬能的GIF圖片,也需要提供一些類似“設計說明”的註釋。這些註釋用來對動效的整個過程進行說明,指導開發實現動效設計,特別是在轉場類動效中,提供的動效說明文檔就顯得格外重要。

動效設計本質是:界面元素在觸發源的觸發下,相關元素(包括自身)經過一系列的變化,最終靜止的整個過程。

整個動效過程包含了的三個部分:起因、經過與結果。動效成果物規範,實質上就是對這三部分的要求與說明。

動效設計-交互設計的最後一公里(四)

成果物規範主要包含了六部分內容,分別是:動效Demo,Demo關鍵幀、觸發行為、運動對象、運動參數、運動曲線。

一、 動效Demo

動效Demo是整體動效設計的展示效果,可以是關鍵幀動畫、GIF、視頻,也可以是可交互的動效文檔。動效成果物比較適合以單個功能或操作為單元,將動效動畫切割成,減少查看效果時的等待時間。

在所有的Demo格式中,GIF的格式最好,可以實現一個Demo的循環展示,減少了預覽人員的操作。

在視頻播放器中,單個視頻多為一次播放,需要設置才能實現循環播放,預覽人員需要對每個視頻進行設置,才能重複查看一個動畫的效果。

對於可交互的動效文檔,一方面需要對設計方案比較熟悉的人員來進行操作,另一方面,在開發過程中,該形式的成果也容易漏掉一些細節動效。因此,可交互的動效文檔不適宜直接提供給開發同事,更多的是在動效設計評審中使用。

本文以新浪微博的舵式導航的動畫效果作為案例進行說明:

動效設計-交互設計的最後一公里(四)

新浪微博的導航動效

二、Demo關鍵幀

對於無限循環的動效Demo,若沒有明確標出動效的開始與結束,容易造成混淆。

因此,在文檔中,需標明動效的起始狀態,並對中間幀作以標識,便於明確在最小的動效單元中的運動順序。在明確整體動畫效果后,將Demo的關鍵幀抽離出來並進行標識,可高效的指導開發過程,同時實現文檔的統一性。

動效設計-交互設計的最後一公里(四)

Demo關鍵幀

三、觸發行為

觸發行為包含三個要素,包括:觸發源、觸發對象、觸發方式,在動效規範文檔中要明確闡述三者的聯動關係。

動效設計-交互設計的最後一公里(四)

觸發行為

在當前的互聯網產品中,常見的觸發源有四種:手指、鼠標、鍵盤以及條件觸發源。

觸發對象是界面中觸發源的作用對象,是產生整個動效的起點。

觸發方式即設備的操作方式,依據平台不同,觸發方式也不同,觸控設備的觸發方式多為手勢操作或感應器觸發等。針對PC電腦而言,觸發方式多鼠標點擊與鍵盤輸入等;針對電視設備而言,觸發方式多為按鍵操作等。

動效設計-交互設計的最後一公里(四)

觸控平台的手勢操作

四、運動對象

運動對象指的是:觸發動作發出后,發生屬性變化的頁面元素。

其中,屬性包含了形狀、顏色、位置、旋轉角度、透明度、大小等。在動效設計成果物中,可以在頁面中將運動對象通過序號標識出來。

作為其在接下來的運動參數進行對應,一方面使成果物更加整潔;另一方面,通過對其編號,可以有效的減少運動對象的遺漏,使運動對象的表達更加完整。

動效設計-交互設計的最後一公里(四)

運動對象

五、運動參數

運動參數是動效過程的數據化的體現形式,是動效實現的基本條件。

因此,在整個動效規範中,基於統一的時間起點,將運動對象的屬性值一一映射到時間軸上,形成運動對象的運動參數表格。

在基於同一時間起點,繪製出每一個運動對象延遲時間以及運動的時長,並將不同屬性在起止時間點標識出來,使時間變量與屬性變量對應起來,使運動參數直觀化。

註:根據動效設計原則,一般的動效持續時間不超過0.5s。

動效設計-交互設計的最後一公里(四)

運動參數

六、運動曲線

運動參數只表現出了運動對象的起止時間、運動時長以及屬性變化的量,但是沒有展示運動過程中的變化。因此,最後需要展示運動參數變化的曲線。

運動曲線是動效過程節奏的體現,也是其質量的保證。在完成動效時間的基礎上,標識出其運動的節奏可以有效的指導開發對動效過程的表達。

常見的運動曲線有五種:直線、緩出、緩入、緩動以及彈性運動。

動效過程的節奏都是由這五種運動形式的演變或組合而成,根據當前的開發動效庫,要提供一定的參數。

不同的開發方式,提供的參數有所不同,其中一種是提供運動曲線手柄的坐標,彈性曲線提供張力與摩擦力。在AE軟件中,可以根據插件Flow來標記運動曲線。

動效設計-交互設計的最後一公里(四)

常見的運動曲線

在案例中,共涉及兩種運動形式以及演變形式。

動效設計-交互設計的最後一公里(四)

例子中的運動曲線

文中所描述的動效設計成果物規範,只是最常用的一種,不同的動效製作軟件平台有不同的參數表述方式。例如:在AE中,可以通過BodyMovie來提供與開發的資源對接,在這裡就不一一介紹。

相對而言,動效設計的實現較為簡單,不管是移動端應用或是Web應用,其常規的動效組件庫都較為成熟與規範。

優秀的動效設計不僅僅需要設計師在動效細節的把控與專註,也需要設計師將動效過程清晰、明確的參數化展示出來。

因此,詳盡的動效規範文檔是推動動效方案落地的關鍵因素。

#專欄作家#

弘毅道,公眾號:UIUX設計工作坊,人人都是產品經理專欄作家。關注to B業務,尤其擅長後台程序界面設計,包括需求溝通,原型設計以及後期的設計評審等。

本文原創發佈於人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《動效設計-交互設計的最後一公里(四)》
文章链接:https://www.pmbear.com/%e5%8b%95%e6%95%88%e8%a8%ad%e8%a8%88-%e4%ba%a4%e4%ba%92%e8%a8%ad%e8%a8%88%e7%9a%84%e6%9c%80%e5%be%8c%e4%b8%80%e5%85%ac%e9%87%8c%ef%bc%88%e5%9b%9b%ef%bc%89/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们