整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在一個互聯網產品的團隊中，往往不可或缺的不是產品經理，或者說很多產品經理的工作是很容易被替代的。
我也經常的問自己，怎樣的產品經理才算是不可替代的呢？
產品設計的能力自然是參考核心標準，如果將其作為核心技能，也就是產品經理的入門的門檻，就像是木工師傅要會木工，鐵匠師傅要會打鐵一樣，屬于基礎技能。
同時產品經理一直是團隊中溝通協調的中軸點，很多時候需要擔當決策者，因此需要同時銜接開發、設計、運營、商務等等職位的同事的工作。
溝通的角度來講，了解了這些工作內容，才能夠順暢的獲取和傳遞信息。
決策的角度來講，了解了這些工作內容，才能夠做出高效正確的選擇。
所以，在我看來，跨領域依然能夠保持專業視角的產品經理能夠提高團隊效率，保證團隊產出的質量。這樣的產品經理才是不可替代的。
在這抽出設計和開發中的轉場特效聊下：我眼中產品經理需要懂的那些轉場動畫特效。
轉場動畫特效是指在產品頁面或頁面元素的切換或狀態轉換時的過度特效。
轉場特效的兩個設計準則
1.符合物理規律、自然規律、符合人眼視覺認知
心理學依據
轉場特效存在的心理學依據：
A． 一方面可以縮短用戶在界面切換等待時可感知的時長，
B． 另一方面可以減少界面切換給用戶視覺上帶來的沖擊感，實現平滑過度。
認知規律
轉場特效是要以人為本的，也就必須做到符合人類認知規律，設計中需注意兩點：
運動變化需符合自然規律：如運動、顏色、形狀等不能突變，啟動以及收尾需要有自然過渡的阻塞感等。
人眼認知動態變化時存在視覺模糊，如果不添加動態模糊會顯得變化生硬不自然，設計動畫時需勾選視覺模糊選項。
2.不影響用戶操作效率
不打斷操作，保證操作順暢
轉場動畫切記不要拖沓累贅，不要采用過于臃腫的信息來做轉場過渡，耗時也要注意盡可能的精簡，不可打斷用戶操作，造成更長的時間等待感。
產品性能優先
如果因為絢麗的轉場動畫造成了產品性能的降低，顯然是更加損傷用戶體驗的，堅決不可取。轉場動畫屬于優化性質的需求，不是核心需求。
上文討論的都是設計理念，然而最終實現轉場動效還是要從開發視角來看。
體驗控制
A.符合自然規律，動效不能出現突變
開發工程師在實現中不采用突變性質的函數，回歸到數學原理上，所采用的函數須符合傅里葉變換。對函數參數的控制需按照設計師給出的效果設置。
B.保證操作順暢、性能優先
開發工程師實現過程盡量采用開發工具或引擎所自帶的動效函數庫中的函數，如果無法實現也盡量采用優化過得動效函數。 這點需要產品經理盡量提前溝通，保證項目順暢進行，我之前就遇到過因為視覺特效實現困難，險些延期的情況。
另外，動效能否實現、怎么實現、實現成本這些問題，作為產品經理都需要有所了解，這樣才能正確的評估轉場動畫特效的需求重要性。
實現方式
1.采用開發引擎，設計逐幀切圖，通過軟件內循環播放實現。實現成本因特效不同和引擎支持的函數庫不同差別較大。
2.視頻、Flash、gif直接嵌入，開發成本相對較低，但可能對產品性能造成較大影響。
3.HTML5、CSS根據動畫、參數、元素實現，綜合成本低、性能影響小，但應用范圍較小。
產品經理可以適當的使用AE這種視覺特效軟件，試用下里面自帶的常見的動效函數的效果，看完之后會有更整體的感受。
常見轉場動效函數
對應函數變化曲線如下：
曲線斜率代表變化速度，上下兩條橫線代表起始狀態與終止狀態。
那么知道了這些，如何衡量一個動效的好壞呢？
參考騰訊設計師的文章，將動效分為三個階段：（圖片摘自騰訊大講堂）
移動端領域的轉場動畫，我個人有如下衡量標準。
啟動階段
移動端操作集中在手勢，啟動階段要求跟手，要略有阻尼感，也就是速度變化盡量的平滑。
如果是非手勢操作的過度場景，啟動階段也應該干凈利索，柔和過度，變化速度的參數的控制盡量不要太大。
采用較低次的函數動畫（如一次緩入、二次緩入等函數的起速階段），整體給用戶的感知更加柔和。
采用較高次的函數動畫（如四次緩入、五次緩入等函數的起速階段），整體給用戶感知更加干脆，利落。
運行階段
保證動畫的穩定性，給用戶更多的安穩感，所以建議不要有較大的趨勢變化，保證加速度一致或速度一致。
恢復階段
強調動畫延續，但是不能影響操作，MIUI6的動效在發布會上獨立拿出來講解，也確實做的很優秀，尤其是收尾動畫的控制：
感興趣的朋友可以觀察下MIUI解鎖后的效果，給人很大的愉悅感，延伸性，同時不影響操作的順暢連貫性。
這是因為對多元素的動畫分節奏采用同樣的高速動畫形成的節奏感，從而產生了極強的延伸性。
多個元素：建議采用類似MIUI的方案，采用高節奏、統一的高變化速率的動效函數。
單一元素：建議采用阻尼回彈函數等收尾階段有回彈效果的動效函數。需要注意的是，收尾一定要利落干脆，不然會影響用戶操作的連貫性。
本文為作者萌斯特（微信號：DudusTaste）投稿發布，轉載請注明來源于人人都是產品經理并附加本文鏈接
著CSS3和HTML5建站技術的發展，動效在網頁設計中的作用越來越顯著。
與靜態界面相比，動態的轉變更符合人們的認知體系，可以有效降低用戶認知負載。
這是因為，在網站界面使用動畫效果能讓元素的變化、界面的轉變、層次結構之間的關系更加清晰自然。從某種程度上來說，動效還是用戶交互的基礎。
△做這種動畫有什么要求？
那么，什么樣的動效才是有效的呢?小編瀏覽了不少網站，問遍千鋒教育成都校區的HTML5講師，總結出5點要求。
一、流暢自然
一個好的動畫效果應該是自然流暢的。
在很多糟糕的網站設計中，我們可以看到頁面或元素的狀態改變都很生硬、突兀，這會讓用戶產生困惑：為什么某某元素突然出現或消失?
任何事物都存在一個轉變的過程，人們早已在自然界、生活中形成了這樣的認知規律。
下圖就是一個比較好的示例，當用戶在列表中選取一個項目點擊查看時，小卡片會展開為大卡片，展示眾多細節，這種動效是有規則可循的。
所以當網站的頁面有兩個或多個狀態，需要使用動畫效果做過渡時，一定要保證它的自然流暢，讓用戶明白所以然。
當然了，有些糟糕的設計作品，比如說卡頓的，視覺效果也不好，所以......你懂得。
二、層次分明
一個高效的動效應該是層次分明的。
層次分明的動效一方面能夠清晰展示頁面狀態的變化，另一方面能夠有效抓住用戶的注意力，決定著用戶的關注持續時間。
以下圖為例，圓形的懸浮按鈕處設置了動效，它會擴展為帶有3個按鈕的頭部導航元素，導航界面與原先的界面有很鮮明的層次分割。
雖然初次瀏覽的用戶難以預測到這一轉變的發生，但是這種形式的動畫能夠很好地保持用戶的注意力，引導用戶進行下一步的交互。
三、關聯自然
網站頁面上動畫效果大多都涉及到前后元素或狀態之間的變化。
雖然我們在前面也強調了不同元素和狀態之間的層次分明，但是，光有層次感可不行，動畫效果也要有邏輯感，能呈現出一定的關聯性，讓用戶清楚界面變化的過程。
以上兩個栗子給大家實際展示一下什么是動效的關聯性。
在第一個栗子中，新出現的界面與動效觸發點較遠，這讓整個界面看上去有斷層的感覺，用戶在瀏覽起來時也沒有那么順暢;
在第二個栗子中，新出現的界面就是從觸發點延伸出去的，這種形式的動效在關聯性上就做的很好。
四、精準快速
如果說網站中的動畫效果只能有一個準則的話，那一定就是動效的快速精準。
當我們在網站中設計轉場動畫時，動效的速度絕對是一個需要重點考慮的因素。
它既不能太慢，浪費訪客的時間，也不能太快，讓訪客覺得難以理解。以上是一個反面教材，動畫效果的速度太慢了，這種不必要的延遲會加長用戶的等待時間，讓用戶覺得煩躁。
這還有一個正面的栗子。
當元素在不同狀態中切換時，動效的速度是恰當的，足夠快速精準，也足夠讓用戶理解。千鋒教育建議大家，為了兼顧動效的效率、用戶理解的順暢，動效應該在觸動后的0.1s內開始，在300ms內結束，這算是一個最佳的狀態。
不過這條準則也不是固定不變的，你可以根據自己網站動畫效果的實際狀況進行調整。
五、簡單清晰
動畫效果還應該簡單清晰。如果用戶界面上存在許多動態或交互的元素，用戶的注意力會分散，不知道究竟應該點擊哪一個。這在一定程度上會引起用戶的混亂。
所以，動效應避免一次呈現過多效果，尤其當動效同時存在多重、復雜的變化的時候。少即是多的原則對于動效同樣也成立。如果某個動效的簡化能夠讓整個UI更加清晰直觀，一定要去進行修改。還有，當動效中同時包含形狀、大小和位移變化的時候，一定要保持移動路徑的清晰，讓狀態變化更清晰。
動效本質上是視覺溝通的一種方式。當你在設計動效時，一定要聚焦域他們能為用戶帶來什么。
網站中使用的動效，不管是有趣的還是直接的，最好跟自己網站的風格相結合，給用戶提供清晰、一致的瀏覽體驗。
rocessing.js
Processing.js是一個開放的編程語言，在不使用Flash或Java小程序的前提下，可以實現程序圖像、動畫和互動的應用。Processing.js是輕量，易于了解掌握的理想工具，可用于可視化的數據，創建用戶界面和開發基于Web的游戲。
FABRIC.JS
FABRIC.JS是一款簡單而強大的JavaScript Canvas 庫，提供了互動的對象模型，同時還包含 Canvas-to-SVG 解析器。
oCanvas
oCanvas是一個JavaScript框架，用于簡化HTML5 Canvas標簽的使用，可以利用對象來代替像素。 oCanvas 可以幫助你很容易的在 HTML5 的 Canvas 標簽上創建對象，并且創建這些對象的動畫。
jCanvas
jCanvas 就是一個 jQuery 的繪圖插件，它封裝了一些繪制圖形的方法，只需編寫幾行代碼即可生成圖形。
RGraph
RGraph是一個使用HTML5 Canvas標簽實現的圖表制作Library。利用該Library生成的Chart具有可交互性，當鼠標點擊或移過時會顯示相應的信息，可以動態加載Chart或對特殊點進行縮放。
Two.js
Two.js 是面向現代 Web 瀏覽器的一個二維繪圖 API。Two.js 可以用于多個場合：SVG，Canvas 和 WebGL，旨在使平面形狀和動畫的創建更方便，更簡潔。
Paper.js
Paper.js是一款開源的矢量圖形腳本框架，基于 HTML5 Canvas 開發，提供清晰的場景圖、DOM和大量強大的功能用來創建各種向量圖和貝塞爾曲線。
EaselJS
EaselJS 是一個封裝了 HTML5 畫布(Canvas) 元素的 JavaScript 庫。
Kinetic.JS
Kinetic.JS 是一個封裝了 HTML5 Canvas的JavaScript 庫，能為桌面和移動應用提供高性能動畫，轉場效果，節點嵌套，分層，濾鏡，緩存，事件處理以及更多功能。
Pixi.js
Pixi.js 是一個 2D webGL 渲染器，提供無縫 Canvas 回退，支持主流瀏覽器，包括桌面和移動。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
