UI 設計師如何向程序員解釋複雜的交互動畫？

01-08

是否要用到flash之類的？還是單獨和程序員口述？構思動畫效果是UI設計師做的還是交互設計師做的？

半小時製作交互動畫

出了四期，相信是你需要的。

複雜的交互動畫？

50％可行的方案

使用手勢、紙片等工具語言描述動畫
畫「麵包屑」效果圖或草圖也行

90％可行的方案

你可以使用 Photoshop 這類型工具建立這種動畫。
尋找差不多的詳細動畫。

吐槽

其實人才回答神馬。這裡是動畫，而非交互＝＝

不過，你必須思考清楚，你為什麼需要這麼「複雜」的動畫。

﹣﹣﹣

工具：

你可以用 PS、Flash、AE、3DMax 等各種工具來完成動畫，動畫質量不重要，最重要形式是對的。

口述：

應該和程序員一齊查看動畫和描述動畫是如何工作的。

構思動畫：

這個應該是 UI 設計師和交互設計師一起完成。

我只是疑惑，這個 UI 設計師到底做多「少」的事情啊？連動畫都不想一下。

一般來說，交互設計師複雜構思屏幕元素和用戶流程。

UI 設計師負責視覺設計。

得做出來讓我們看看啊。不管你用Blend做也好，用flash做也好，用PPT做也好，總之得做出來讓我們看，複雜點的直接給公式，我們最擅長的就是看例子寫程序了。

後來發現，要寫公式好像要求比較高。我們公司的美術就很屌，不僅動畫做了出來，還告訴我們那些飛來飛去的東西，是怎麼在他的工具里配置上去的。我們拿他的工具瞧一瞧，就知道這個動畫應該上什麼公式了。

建議用ae模仿出一個精細效果，然後將各種參數告訴程序員，例如時間軸k幀的時間點，回彈距離，多與程序員進行溝通就好。

一直用flash.

給工程看效果的同時，注意要向他們解釋什麼是層，什麼是遮罩。一定要搞清楚工程的思路跟實現的方法，然後你才能向他們解釋清楚，這樣他們也更好地理解，直到怎麼通過代碼實現。

不然效果再好也是白搭。

這裡舉例最近做的APP中的核心轉場動畫流程：

首先，設計線框圖的時候會標註出關鍵轉場動畫

然後撰寫個腳本草稿，畫出分鏡和企劃人員討論

評審通過後，在視覺設計階段，和視覺設計師配合，製作ppt或flash的demo，最終輸出給程序員。

輸出時最好標註一下，各個元素的動作時間、在關鍵幀的中的位置、縮放比例、移動時是否有加速度等，讓設計儘可能100%落地。

看看這個設計師（雞總，鬱悶的雞）的作品，相信對你會有啟發：tczhang的個人主頁

以及UI入門技能選擇中關於AE的介紹：《U1》04 - UI入門技能選擇|GUI|原創/自譯教程

一般交互用axure這種原型工具就行了，最多再配有原型規格說明書和流程圖。複雜一點的交互，一般用jquery和flash來做高保真模型

交互設計師需要收集項目中人員對項目的意見，包括ui設計師製作界面設計時提出的交互改進需求。具體誰來負責動畫設計是看項目的，有時候項目會配有動畫設計師的職位

做出來，或者GIF或者FLASH，怎麼方便怎麼來。這樣做的目的是1：方便溝通，一目了然。2：提升視覺設計的價值

單純的口述和文檔是非常難以全面理解的，因為這些都是抽象化的內容，你不能保證程序想像出來的畫面是你所想表達的。所以要將內容具象化，一個完整的操作動畫擺在程序面前，你只需要簡單解釋就可以表述清楚，而且保證兩個人理解是一致的。

我一般會做一個flash交互原型，推薦flash catalyst，優點：易上手，常用的動畫效果，比單純的flash修改方便。

ps：交互在自己時間允許的情況下（注意是時間允許的情況下），推薦設計下UI，培養自己的審美和動手能力。

國內現在有些公司裡面是有一個「動效師」的職位來做這些事情的

但是大部分依舊是UE、UI、FE等來實現。

首先要了解的是

不同代碼使用的Api和Lib還有運行的環境（軟硬體）是有區別的，這是一個很大的限制

就像iOS6下不推薦使用動態毛玻璃效果；

就像Textillate.js在不支持CSS3動畫的瀏覽器中完全失效；

所以要做到可以精確描述動效的時候，請先回到程序本身

1.動畫類API是否可以實現；

2.是否存在支持的動畫引擎（Lib）；

3.前面2點在實現上是否可兼容與擴展；

唔~~這也算是站在程序員的位置在想事情，同理心已經Extend了

利益相關：交互設計師

簡單的口述加圖，複雜的一般把整個動畫分解成單個的動畫，用AE做出來，AE裡面公式參數都是有的，直接給看源文件就OK了。

能自己做最好。

作曲家能想個好旋律還要別人寫譜子？哼唱么？那是怎樣也表達不清楚的。

感覺優秀的（前端）工程師應該是與設計師共同設計並實現交互動畫；降低實現難度和溝通成本；提高工作效率和雙方姿勢水平；

1、原型啊，附帶需求文檔

2、交互動畫師前端處理吧，他們都該很容易理解

我們這裡有UI編輯器

UI美術直接設計彈框之類的特效，程序使用的時候直接播放就好了

設計師只需要用visio做一個UI邏輯圖，表明每一個UI的按鈕在什麼條件下會發生什麼結果即可

所以說有開發工具是很重要的

簡單動畫口述就可以了，如果有類似的競品參考，也可以直接拿給工程師看，讓他照著做。對於比較複雜難以描述的動畫，建議flash輸出demo，這樣最直觀，還可以用來作為最終驗收標準，不過如果要高保真的demo製作時間不會短，不夠敏捷，這個就要看具體項目的要求和時間線了。

製作原型動畫和動畫曲線截圖，並寫清Spec文檔描述，後期再繼續跟進。

1.確保交互動畫滿足功能需求並沒有播放流程問題。

2.給出步驟圖解示例或類似動畫示例。

3.滿足以上兩點的前提下，一個合格的程序猿基本能清楚。（部分細節可以口述。）

第1點是關鍵，很多卡殼的問題都出在這點上。多複雜的動畫都好，實現並不麻煩，煩的是動畫流程細節考慮不到位，程序猿做了一大半才發現卡殼了，重新返工給設計那種抓狂大夥能體會到么....返工一次，再一次，又一次，第n次。。。刀呢？別攔...我.....