講在前面

在一個互聯(lián)網(wǎng)產(chǎn)品的團(tuán)隊(duì)中，往往不可或缺的不是產(chǎn)品經(jīng)理，或者說很多產(chǎn)品經(jīng)理的工作是很容易被替代的。

我也經(jīng)常的問自己，怎樣的產(chǎn)品經(jīng)理才算是不可替代的呢？

產(chǎn)品設(shè)計(jì)的能力自然是參考核心標(biāo)準(zhǔn)，如果將其作為核心技能，也就是產(chǎn)品經(jīng)理的入門的門檻，就像是木工師傅要會木工，鐵匠師傅要會打鐵一樣，屬于基礎(chǔ)技能。

同時產(chǎn)品經(jīng)理一直是團(tuán)隊(duì)中溝通協(xié)調(diào)的中軸點(diǎn)，很多時候需要擔(dān)當(dāng)決策者，因此需要同時銜接開發(fā)、設(shè)計(jì)、運(yùn)營、商務(wù)等等職位的同事的工作。

溝通的角度來講，了解了這些工作內(nèi)容，才能夠順暢的獲取和傳遞信息。

決策的角度來講，了解了這些工作內(nèi)容，才能夠做出高效正確的選擇。

所以，在我看來，跨領(lǐng)域依然能夠保持專業(yè)視角的產(chǎn)品經(jīng)理能夠提高團(tuán)隊(duì)效率，保證團(tuán)隊(duì)產(chǎn)出的質(zhì)量。這樣的產(chǎn)品經(jīng)理才是不可替代的。

正文

在這抽出設(shè)計(jì)和開發(fā)中的轉(zhuǎn)場特效聊下：我眼中產(chǎn)品經(jīng)理需要懂的那些轉(zhuǎn)場動畫特效。

轉(zhuǎn)場動畫特效是指在產(chǎn)品頁面或頁面元素的切換或狀態(tài)轉(zhuǎn)換時的過度特效。

設(shè)計(jì)視角

轉(zhuǎn)場特效的兩個設(shè)計(jì)準(zhǔn)則

1.符合物理規(guī)律、自然規(guī)律、符合人眼視覺認(rèn)知

心理學(xué)依據(jù)

轉(zhuǎn)場特效存在的心理學(xué)依據(jù)：

A． 一方面可以縮短用戶在界面切換等待時可感知的時長，

B． 另一方面可以減少界面切換給用戶視覺上帶來的沖擊感，實(shí)現(xiàn)平滑過度。

認(rèn)知規(guī)律

轉(zhuǎn)場特效是要以人為本的，也就必須做到符合人類認(rèn)知規(guī)律，設(shè)計(jì)中需注意兩點(diǎn)：

運(yùn)動變化需符合自然規(guī)律：如運(yùn)動、顏色、形狀等不能突變，啟動以及收尾需要有自然過渡的阻塞感等。

人眼認(rèn)知動態(tài)變化時存在視覺模糊，如果不添加動態(tài)模糊會顯得變化生硬不自然，設(shè)計(jì)動畫時需勾選視覺模糊選項(xiàng)。

2.不影響用戶操作效率

不打斷操作，保證操作順暢

轉(zhuǎn)場動畫切記不要拖沓累贅，不要采用過于臃腫的信息來做轉(zhuǎn)場過渡，耗時也要注意盡可能的精簡，不可打斷用戶操作，造成更長的時間等待感。

產(chǎn)品性能優(yōu)先

如果因?yàn)榻k麗的轉(zhuǎn)場動畫造成了產(chǎn)品性能的降低，顯然是更加損傷用戶體驗(yàn)的，堅(jiān)決不可取。轉(zhuǎn)場動畫屬于優(yōu)化性質(zhì)的需求，不是核心需求。

開發(fā)視角

上文討論的都是設(shè)計(jì)理念，然而最終實(shí)現(xiàn)轉(zhuǎn)場動效還是要從開發(fā)視角來看。

體驗(yàn)控制

A.符合自然規(guī)律，動效不能出現(xiàn)突變

開發(fā)工程師在實(shí)現(xiàn)中不采用突變性質(zhì)的函數(shù)，回歸到數(shù)學(xué)原理上，所采用的函數(shù)須符合傅里葉變換。對函數(shù)參數(shù)的控制需按照設(shè)計(jì)師給出的效果設(shè)置。

B.保證操作順暢、性能優(yōu)先

開發(fā)工程師實(shí)現(xiàn)過程盡量采用開發(fā)工具或引擎所自帶的動效函數(shù)庫中的函數(shù)，如果無法實(shí)現(xiàn)也盡量采用優(yōu)化過得動效函數(shù)。
這點(diǎn)需要產(chǎn)品經(jīng)理盡量提前溝通，保證項(xiàng)目順暢進(jìn)行，我之前就遇到過因?yàn)橐曈X特效實(shí)現(xiàn)困難，險(xiǎn)些延期的情況。

另外，動效能否實(shí)現(xiàn)、怎么實(shí)現(xiàn)、實(shí)現(xiàn)成本這些問題，作為產(chǎn)品經(jīng)理都需要有所了解，這樣才能正確的評估轉(zhuǎn)場動畫特效的需求重要性。

實(shí)現(xiàn)方式

1.采用開發(fā)引擎，設(shè)計(jì)逐幀切圖，通過軟件內(nèi)循環(huán)播放實(shí)現(xiàn)。實(shí)現(xiàn)成本因特效不同和引擎支持的函數(shù)庫不同差別較大。

2.視頻、Flash、gif直接嵌入，開發(fā)成本相對較低，但可能對產(chǎn)品性能造成較大影響。

3.HTML5、CSS根據(jù)動畫、參數(shù)、元素實(shí)現(xiàn)，綜合成本低、性能影響小，但應(yīng)用范圍較小。

綜合視角

產(chǎn)品經(jīng)理可以適當(dāng)?shù)氖褂肁E這種視覺特效軟件，試用下里面自帶的常見的動效函數(shù)的效果，看完之后會有更整體的感受。

常見轉(zhuǎn)場動效函數(shù)

對應(yīng)函數(shù)變化曲線如下：

曲線斜率代表變化速度，上下兩條橫線代表起始狀態(tài)與終止?fàn)顟B(tài)。

那么知道了這些，如何衡量一個動效的好壞呢？

參考騰訊設(shè)計(jì)師的文章，將動效分為三個階段：（圖片摘自騰訊大講堂）

移動端領(lǐng)域的轉(zhuǎn)場動畫，我個人有如下衡量標(biāo)準(zhǔn)。

啟動階段

移動端操作集中在手勢，啟動階段要求跟手，要略有阻尼感，也就是速度變化盡量的平滑。

如果是非手勢操作的過度場景，啟動階段也應(yīng)該干凈利索，柔和過度，變化速度的參數(shù)的控制盡量不要太大。

采用較低次的函數(shù)動畫（如一次緩入、二次緩入等函數(shù)的起速階段），整體給用戶的感知更加柔和。

采用較高次的函數(shù)動畫（如四次緩入、五次緩入等函數(shù)的起速階段），整體給用戶感知更加干脆，利落。

運(yùn)行階段

保證動畫的穩(wěn)定性，給用戶更多的安穩(wěn)感，所以建議不要有較大的趨勢變化，保證加速度一致或速度一致。

恢復(fù)階段

強(qiáng)調(diào)動畫延續(xù)，但是不能影響操作，MIUI6的動效在發(fā)布會上獨(dú)立拿出來講解，也確實(shí)做的很優(yōu)秀，尤其是收尾動畫的控制：

感興趣的朋友可以觀察下MIUI解鎖后的效果，給人很大的愉悅感，延伸性，同時不影響操作的順暢連貫性。

這是因?yàn)閷Χ嘣氐膭赢嫹止?jié)奏采用同樣的高速動畫形成的節(jié)奏感，從而產(chǎn)生了極強(qiáng)的延伸性。

多個元素：建議采用類似MIUI的方案，采用高節(jié)奏、統(tǒng)一的高變化速率的動效函數(shù)。

單一元素：建議采用阻尼回彈函數(shù)等收尾階段有回彈效果的動效函數(shù)。需要注意的是，收尾一定要利落干脆，不然會影響用戶操作的連貫性。

本文為作者萌斯特（微信號：DudusTaste）投稿發(fā)布，轉(zhuǎn)載請注明來源于人人都是產(chǎn)品經(jīng)理并附加本文鏈接