UI 設計師在頁面動效上與前端工程師溝通，有什麼準確快捷的方法？

01-14

這裡的動效不單純指大範圍的動畫，也包括一個下拉框的下拉效果、點擊輸入框的效果等小的細節動畫效果。（或者說這中間還有UE的角色）如果都要用AE做出效果，那效率會較低。
在設計師html5與css代碼均懂的情況下，說只能溝通完實現的技術，但細節效果，如展開的速率這些，都得等後期，看到效果後再改。
求教有無更準確的快捷的溝通方式？

因為有與題主相似的困惑，之前有研究過「UI設計師如何與前端工程師溝通響應式設計」，與很多工程師和設計師朋友有過探討。作為一名前端工程師，說一下從前端角度的一些看法，以及對UI設計師的一些期望吧。

設計意圖的表達方式

我們在項目中會綜合使用多種方式表達設計意圖，抽象程度、靈活性、製作成本、維護成本、使用時機各有不同。

工程師通常希望設計人員使用更具體的表達方式。

這裡所謂「具體」的意思是：接近代碼。

按具體程度排列：

口頭描述

文字敘述

靜態原型

動態原型

代碼示例

真實案例

項目中已有組件

需要注意的是：

不是成本越高的表達方式就越具體。動態原型的具體程度在以上列舉中只是中等水平。

舉個例子，如果你要做一個與這個網站類似的背景效果 http://www.mty365.com/ ，你會用哪種方法表達你的設計意圖？

如果設計師自己懂技術，就可以直接說明「各區域背景使用fixed定位」。

如果設計師不懂技術，可以找到類似的網站給研發參考。

如果設計師知道哪裡有相關的組件，可以告訴研發去用。

這些都是更加具體化的表達方式，效果可能比高成本的動態原型還要好。

設計師可以不懂技術，但一定要善於利用已有的案例、組件來表達自己的設計意圖。

具體化過程

所謂具體化過程就是從設計意圖到代碼的過程。

設計意圖的表達方式越具體，離代碼就越近，具體化過程中出現的問題越少。

具體化過程中需要設計人員的跟進與配合。如果設計人員的參與程度太低，最終結果可能就與預想的相去甚遠。

對於設計師，表達方式只是助力溝通的工具，不同情境、不同階段適用的不同的表達方式，善於溝通比懂技術更重要。

系統化設計

在以上列舉的設計意圖表達方式中，最具體的也是研發最喜歡的就是能夠利用項目中已有的組件。

所謂系統化設計就是構建並維護可復用的組件，然後利用這些組件進行組合，從而完成整個設計。

系統化設計的核心是復用優先，所謂復用優先包括以下三個方面：

優先考慮復用已有的組件

優先做可復用的組件

做組件時要考慮可復用性

系統化設計的好處是加強了產品的內在一致性，避免了不必要的差異與溝通成本，促進產品積累與技術積累。

總結以上觀點，我給出的建議就是：

善於利用現有的東西 - 真實案例樣式庫開源組件項目積累

注意設計意圖表達的過程性，要加強參與程度，沒有完美文檔

要有系統化思維，復用優先，保持一致性，積累團隊財富

一些參考：

http://daneden.github.io/animate.css/ 動態效果庫

http://codepen.io/ 頁面效果Demo

http://onepagelove.com/ 有很多有趣的動效

有空，有能力，如果是較為複雜的動效還是得老老實實用AE，因為如果彼此溝通不順暢反而會帶來更多成本和時間，還難免出現情緒化。

另外如果是一般的動效可以用PS快速生成簡單的頁面GIF動圖來說明，我覺得並不是很花時間，而且避免後期的大量溝通與調試。

如果你以上都不熟練，也可以在紙上給前端演示動效這比單純的說要有效率一點。

最近花了很多時間在動效上面，總結出一種成本低但是效果不錯的方式。這個方式不適用全部動效實現方式，對於一些界面上的常用動效，已經適合。

一、方法論

1、原來靜態的界面，設計交給開發得時候，需要輸出如下資源：

有效的切圖
有效的標註

這樣開發才能根據切圖和標註高度還原設計。

2、同樣，在界面上加入動效之後，也同樣需要設計師輸出切圖和標註。

只是這個標註，變為如下三種：

屬性變化（位置、透明度、大小、顏色...）
時間變化（開始時間、持續時間）
緩動函數

只要做動效設計的過程中，能夠將動效有效地分解出以上的三種數據，那麼這些數據將可以直接用於開發。開發哥將不需要再對著一個gif默默轉身擦淚。

二、動效設計師看這裡

然而具體要怎麼做呢？

1、首先需要一個有效的動效製作工具。

動效設計有很多優秀的工具可以使用，關於工具的介紹知乎上已經很有多前輩介紹，我這裡重點拿其中一個工具介紹以上方法論的實踐。

這款工具叫Tumult Hype 3，他最大的好處不止是可以方便地實現各種動效，而且還可以直接導出Html5頁面供PC和移動端演示使用。具體介紹請看這裡：Sketch神助攻！無代碼做動效神器Hype3入門教程.

2、工具在手，然後？

下圖就是Hype 3的面板，在用Hype 3製作動效的時候，其實已經是利用了上面說的三種數據，當設計完畢，交給開發得時候，你只需要將你在Hype 3中製作的動效的一些數據整理好給開發哥即可。

時間，不同於AE使用幀，Hype 3直接使用時間，可以直接拿出來用，不需要再自己計算轉換了。下圖所示，一個動效設計中，可能會跟下面一樣，有多個元素在動，於是你需要記錄的是，每一個元素的運動開始時間和運動持續時間。
每一個元素，他在動效中，運動的可能不是一個維度，比如他可以在一邊位移，一邊變化透明度，因此你也需要記錄下，在運動的開始時間和持續時間內，他動了些什麼。加入他是位移，就記下位移開始時的坐標，和位移結束時的坐標。

剩下就是緩動函數，有沒有發現，不加緩動函數的時候，動效會顯得非常生硬，顯得不自然，因此就需要引入緩動函數，以模擬現實物體的運動效果的。如果想讓開發哥省心，最好使用已有的緩動函數，對緩動函數不熟悉的話，可以看看這個網站：http://easings.net/zh-cn，他上面列舉了一些常見的緩動函數供參考。而且，無論Web，iOS，Android都有現成的緩動函數庫可以使用，因此直接記好名字，直接調用。

3、舉個栗子

我設計了一個方塊，讓他從1s的時候開始向下位移300，持續1s，使用easeOutElastic這個緩動函數，我設計好的時候，可以輸出以下類似的文檔給開發哥：

開始時間：1s；持續時間：1s；
運動屬性：沿Y軸，向下移動300px
使用easeOutElastic緩動函數

這樣開發哥拿到文檔和切圖標註之後，就可以啃哧啃哧寫代碼了。

三、開發哥看這裡

1、拿到設計資源和文檔

開發哥從設計師手上拿到一個這麼個東西，該怎麼辦？

開始時間：1s；持續時間：1s；
運動屬性：沿Y軸，向下移動300
使用easeOutElastic緩動函數

2、選個趁手的工具

據我了解，無論Web，iOS和Android，都會有現成的第三方庫可以幫助我們實現動效。由於我比較熟悉iOS，所以先拿iOS的框架做示例。

iOS我用 jhurray/JHChainableAnimations · GitHub，這簡直是我用過最簡單的動效框架。比如我要寫上述動效，我連示意動畫都不用看了，直接將文檔上的數據套進代碼里。

3、套進代碼：

self.dq1.delay(1).moveY(300).easeOutElastic.animate(1);

解釋一下：

1、dq1：就是我這個方塊；

2、delay(1)：表示我延期1s，即開始時間是1s；

3、moveY(300)：表示方塊向下移動300；

4、easeOutElastic：表示用了這個緩動函數；

5、animate(1)：表示運動持續時間1s。

就是這樣我們實現了。So easy。今晚不用加班調參數了，噢耶。

看到有用AE啊，代碼啊的，做點小動效，有那麼複雜嗎？

設計師用flash直接做效果給前端看就可以了！

前端工程師更關注的重要內容：

1 設計理由。（為什麼要增加這個動效）

2 動效形式。（大概是一個什麼樣子）

3 臨時參數（動效的基本運動參數）

先說設計理由。

這塊無論是和前端工程師還是產品經理溝通。作為一名設計師你都要把自己的設計理念和設計緣由灌輸給其他的協同職能，就拿動效舉例，你可以說增加動效後跳轉更加流暢可以彌補慢載入帶來的一些焦灼感，等等諸如此類，這塊需要很好的溝通方式。得到別人的認同和理解都是一個良好溝通最起碼的前提。

再說動效形式。

不管是紙面原型或者是AE視頻以及口述，目的是需要讓前端明白你要表達的是一個什麼樣的動效。你甚至可以拿出類似APP的動效給前端看，然後前端的同學會根據此對動效的複雜度做一個評估，如果你前面的設計理由灌輸成功，那這塊基本不會有很大的問題。

最後說臨時參數。

為什麼叫臨時參數，因為很多好的動效都是在產品上線後或者動效開發完成之後對時間和節奏的多次調節得來的。所以你需要給一個相對健康的參數，具體的表現形式可以是象限圖（這個對於設計師應該是沒有困難。）或者對於有統一性質的（放大縮小或者位移）的這種動效，你甚至可以直接給出參數。

總結一下。個人認為高效溝通方式為動效形式參考+臨時參數的靜態文檔。

僅供參考。

去學代碼，不需要會寫多少，只需要知道什麼東西能實現什麼東西不能實現，就能很好的溝通了。

多看看歸結於本質的東西，不要只停留在設計表面。

edge animate.

用這個軟體可以完美地堵住前端們到時候各種說實現不了。因為你生成的就是html+js。

使用起來巨簡單無比，既然題主都提到了AE，那麼這個軟體就是小case啦，沒有學習成本。

用Hype做出來給前端看！

以前在設計公司，設計師會提出一些我想都沒想到過的問題，比如select框，設計師會考慮到下拉的速度，這都是瀏覽器內置的組件，改起來有多困難你造嗎，而且投入產出完全不成正比啊，就一個小的組件，你費勁吧里的改完了，用戶操作起來不習慣了，不舒服了，這個後果誰來承擔，別告訴我你又來一句話說那改回去好了，那可是我花了一個通宵自定義的組件啊。

你說的溝通，其實真的沒法很好的溝通，因為雙方的知識不是在一個層面上的，你UI設計師關注效果動畫，我前端工程師關注實現邏輯，而且你不去看代碼你根本不知道什麼東西能改什麼東西不能改，讓UI設計師去研究動畫曲線然後給我一個曲線嗎？有些組件在代碼實現上還有一些設計師根本就沒考慮到的參數，設計師的虧不知道，知道以後不也得這改改那改改的啊。所以啊，UI設計師你要是想什麼都改，你去讀代碼，去學js，讀懂代碼再跟我討論

謝邀

個人理解，一切設計團隊中最重要的兩點

1.一定要分工明確，設計不跨界，不能讓美工要求影響用戶體驗

2.一定需要有一個人出方案，另外一個人輔助其完成

一般來說對產品進行設計的應該是專人，需要他對於用戶的使用習慣以及趣味取向有足夠的把握之後在開始和ui設計師溝通，希望他幫助完成某些效果。然後等到ui和交互設計師的交流比較完善之後，再去讓網頁工程師實現。實質上兩者都是服從於交互體驗設計的，所謂的困難無非也就來自兩個地方：實現的可能性，以及個人喜好上的衝突。

對於第一點來說了解一些css和js特效知識基本就可以，前端最怕的事情無非也就是個難做。然後等你有了一些了解後就可以開始體諒他人，減少一些麻煩的特效。但是不能因此遷就產品效果不然哭的還是你。因為美術人人有發言權編程目前還不是。

第二點建議你把皮球踢給網頁的交互設計師或者負責功能設計的團隊，反正是上面的意思那麼只管實現就好了；其實大多數情況你也會遇到同樣的事情，設計師本來就是吃力不討好，管他是前端還是美術還是ui，同病相憐吧。

作為前端工程師，我表示最開始我都是看的草圖做的UI……

一般前端對於設計原型的需求僅僅在於大致布局、色彩、動作，有設計能力的前端會主動對這些進行一層優化。

設計師懂html5和css作用，個人感覺主要是為了防騙，你和技術人員說技術會讓技術人員反感。如果你說一個效果，前端和你說做不了，你可以直接用你的技術方案甩他一臉。

至於說設計師需要體感的效果（如下拉框的速率等），這些你告訴前端速率應該可以配置就行了。

最後，產品肯定是前端去做的，設計、UE基本上屬於指導。找一個好的前端才是王道。

flash

我們的設計師今天告訴我他們會通過flash來展現交互細節…

我很懷疑這種方式的效率，明天詳細交流一下再來填坑。

---------------2014年7月28日補充---------------

有個移動端原型工具Framer.js，可以快速構建產品原型...（甚至可以直接將原型上線？）

不過需要設計師懂一些代碼，基於題主的問題，應該是一種不錯的方式。

另外，複雜的交互可以通過flash來展示。

---------------2014年7月28日補充2---------------

不好意思看到Html5腦補成移動端了，PC端的話交互通常不會太複雜吧，如果是特別「絢麗」的頁面，用Flash來展示交互細節也算是一種解決方案。

關心運動速率的話直接給插值器就好了。

假設「設計師html5與css代碼均懂的情況下」不會不知道這個 css3beziercurve.net 吧。直接給就好了啊！

某個元素
某個屬性
開始值 —— 結束值
cubic-bezier(x1,y1,x2,y2)
時長
延遲

還要啥自行車？

動效乾貨--交互動效在開發落地中是怎麼實現的？（插值器及動效標註） - 知乎專欄

Quartz Composer+Origami or pixate（Coming Soon）

Noodl【更新神器】

比From好用