丨前言：

  交互動(dòng)效的首要目標(biāo)應(yīng)是支持和增強(qiáng)用戶在狀態(tài)間的轉(zhuǎn)化。因?yàn)閯?dòng)效存在負(fù)面作用，合理的使用它變尤為重要。Cooper提出動(dòng)效需要謹(jǐn)慎的使用。過度的使用動(dòng)效不僅讓人困惑和反感，而且讓人生理上不舒服

  現(xiàn)在越來越多手機(jī)應(yīng)用和web應(yīng)用都開始注重動(dòng)效的設(shè)計(jì)，恰到好處的動(dòng)效可以給用戶帶來愉悅的交互體驗(yàn)，是應(yīng)用顏值擔(dān)當(dāng)?shù)囊淮笾匾糠?。但?dòng)效的錯(cuò)誤使用也容易起到干擾用戶的副作用。

不久前參與了返還購APP分類欄交互的項(xiàng)目。雖然這對(duì)于整個(gè)APP來說只是微小的一部分，但我在這個(gè)項(xiàng)目的跟進(jìn)過程中受益良多。在這里整理了項(xiàng)目文件，分享一下這個(gè)項(xiàng)目提出到落地的過程，也算是對(duì)自己近期工作的總結(jié)和后期工作的提醒。

丨項(xiàng)目簡(jiǎn)介：

  這個(gè)改動(dòng)主要是考慮到這幾個(gè)點(diǎn)：

  不過以上這些都不重要，只是交代下一背景，對(duì)接下來要說的動(dòng)效影響不大。

丨設(shè)計(jì)工具：

這個(gè)項(xiàng)目主要用了這三個(gè)軟件來完成：Photoshop、Axure和After effects，三個(gè)軟件使用的比重都挺大的。這里我要說明一下，這個(gè)效果其實(shí)用Principle應(yīng)該是最快出效果的，無奈我沒有Mac機(jī)子可以用，于是我想這么個(gè)簡(jiǎn)單的效果就用Axure做好了。Axure優(yōu)點(diǎn)是可操作性比較強(qiáng)（還不容易宕機(jī)），After effects雖然做東西比較不廢時(shí)間而且好控制效果，但是只能導(dǎo)出視頻格式，所以這回優(yōu)先考慮用Axure。不過最后還是用了After effects，這里我在后面會(huì)說明。

 

丨項(xiàng)目過程

一：簡(jiǎn)易版demo

  按照需求做出這個(gè)交互以后我也覺得很唐突，文字分類欄小時(shí)和icon分類欄的出現(xiàn)都沒有一點(diǎn)提示，不像是兩種分類欄之間的狀態(tài)切換，反而像上滑到一定程度會(huì)突然出現(xiàn)一個(gè)新的模塊。這種類型的競(jìng)品也不多，很少APP會(huì)對(duì)分類欄進(jìn)行變化。于是只好和產(chǎn)品一起探索，一點(diǎn)點(diǎn)完善需求，尋找合適的交互方案。

 

二：思想碰撞與需求完善

在與產(chǎn)品進(jìn)行了幾輪頭腦風(fēng)暴的過程中產(chǎn)生了很多種想法，選取有代表性的幾張放出來（前方動(dòng)圖高能預(yù)警）：

  1. 用漸變顯示的動(dòng)畫效果替代了之前直接彈出的動(dòng)效果，使得這個(gè)交互沒有唐突的感覺，增加了對(duì)用戶的友好度；

  2. 因?yàn)橛X得搜索框在分類欄轉(zhuǎn)變后依然顯得很獨(dú)立，于是對(duì)搜索框也進(jìn)行了變化的處理。這樣一來頭部一塊更像一個(gè)整體，同時(shí)也弱化了搜索框的存在，讓信息流的瀏覽變得更純粹；

  3. 在弱化搜索框的基礎(chǔ)上進(jìn)行了推進(jìn)，在信息流上移的過程中直接取消了搜索框，目的是讓用戶能中心地瀏覽商品，也提高了商品在這個(gè)頁面的曝光數(shù)量。于此同時(shí)分類欄右邊的ico也加上了搜索的功能，點(diǎn)擊之后能直接跳轉(zhuǎn)到搜索&分類頁面；

  4. 想法和前一個(gè)方案是一樣的，在上滑的過程中隱藏了搜索框。這個(gè)交互動(dòng)作是：原來的分類欄和搜索框會(huì)隨著用戶上移的手勢(shì)慢慢漸隱，同時(shí)漸顯新的分類欄。這樣的交互動(dòng)作不顯得唐突，能讓用戶更容易接受分類的變化。

  因?yàn)橐婚_始需求不是很明確，需求方也不是很確定自己需要的是什么樣的效果，只能是打著燈籠一步步走。在這個(gè)出方案的過程中，也不斷地分析同類產(chǎn)品和有相似交互的產(chǎn)品，結(jié)合自身產(chǎn)品的定位最終重新理清了對(duì)這個(gè)頁面和交互動(dòng)作的需求：1.簡(jiǎn)化頭部，去掉搜索框，在原搜索框的位置加上“今日促銷”的標(biāo)題；2.分類欄變化的時(shí)候需要告知用戶元素間的切換，讓用戶便于接受新的分類欄；3.分類欄樣式需要特別突出，和信息流或者頭部標(biāo)題明顯分開（這個(gè)設(shè)計(jì)方案參考了淘寶天貓等主流電商產(chǎn)品的做法）。

三：最終設(shè)計(jì)稿

  考慮到需求對(duì)動(dòng)效的要求，可能會(huì)有一些元素狀態(tài)會(huì)變化，我決定不繼續(xù)用Axure做了，After effects對(duì)于有小動(dòng)畫的交互表現(xiàn)來說明顯比較合適。在原來方案的基礎(chǔ)上加了一些小細(xì)節(jié)，比如分類欄選中狀態(tài)的下劃線在切換時(shí)會(huì)先擴(kuò)張成一個(gè)圓角矩形再變成一個(gè)方塊、icon出現(xiàn)的動(dòng)畫不僅有透明度變化還有大小變化。

丨總結(jié)

  作為一個(gè)本科動(dòng)畫畢業(yè)的設(shè)計(jì)師，我對(duì)動(dòng)效還是有些感情的，工作外的時(shí)間也會(huì)看看動(dòng)效制作教程，學(xué)學(xué)軟件技巧或者試圖學(xué)一些大神的設(shè)計(jì)思路。但在項(xiàng)目中用到動(dòng)效設(shè)計(jì)的機(jī)會(huì)確實(shí)少之又少，平時(shí)練習(xí)時(shí)會(huì)想做一些花里胡哨的動(dòng)效，然而到了實(shí)際項(xiàng)目才發(fā)現(xiàn)確實(shí)不合適，這也是缺少項(xiàng)目經(jīng)驗(yàn)的后果。于是查閱了這方面的資料，正好趁著這個(gè)項(xiàng)目剛完成給自己補(bǔ)了一節(jié)課，也算是糾正自己對(duì)于這塊區(qū)域的錯(cuò)誤認(rèn)知。

動(dòng)效是存在副作用的，用得恰當(dāng)?shù)脑挄?huì)使產(chǎn)品更出色，如果用得不好不僅讓人困惑和反感，而且讓人生理上不舒服，影響用戶體驗(yàn)。交互動(dòng)效的首要目標(biāo)應(yīng)是支持和增強(qiáng)用戶在狀態(tài)間的轉(zhuǎn)化，使用動(dòng)效存在下列目的（交互領(lǐng)域前沿設(shè)計(jì)師Dan Saffer）：

  1.吸引用戶注意力在指定區(qū)域。

  2.表現(xiàn)對(duì)象和用戶操作間的關(guān)系。

  3.維持多窗口或多狀態(tài)的上下文關(guān)系。

  4.提供持續(xù)性事件的認(rèn)知感。

  5.創(chuàng)造虛擬空間引導(dǎo)用戶在狀態(tài)和功能間轉(zhuǎn)化。

  6.創(chuàng)造沉浸感和趣味性。

   在我們對(duì)于動(dòng)效制作有天馬行空的想法的時(shí)候，還是有一些事項(xiàng)需要注意的，這些甚至可以用來評(píng)判一個(gè)動(dòng)效的好壞。Dan Saffer對(duì)于動(dòng)效還提到這么一句話：“如果你做一件事可以不用動(dòng)效，那盡量避免。”這點(diǎn)我們可以從現(xiàn)在占市場(chǎng)份額很大的微信或微博客戶端中看得出來。并且，動(dòng)效應(yīng)符合它本身傳達(dá)的意思，。比如用戶上下滑動(dòng)屏幕，窗口內(nèi)容就該上下變換，而不是左右變換。僅僅為了達(dá)到炫酷引人耳目的目的而作動(dòng)效是不可取的，交互動(dòng)效需要盡可能解釋其本身含義。在此，設(shè)計(jì)師Amin Al Hazwani和Tobias Bernard提出4點(diǎn)讓動(dòng)效具有意義的注意事項(xiàng)：

  1.概念轉(zhuǎn)換：不要獨(dú)立的設(shè)計(jì)界面布局和動(dòng)效。設(shè)計(jì)它們的時(shí)候思考它們之間的聯(lián)系，如何它們之間轉(zhuǎn)化更自然，符合內(nèi)容的語義。

  2.解釋關(guān)系：每個(gè)元素都有其意義，狀態(tài)，位置等屬性。嘗試用動(dòng)效反應(yīng)這些屬性間的關(guān)系。比如點(diǎn)擊一個(gè)按鈕，如果會(huì)觸發(fā)一個(gè)面板。更好的效果是讓面板從按鈕處出現(xiàn)且漸入，而不是讓面板直接漸入。

  3.唯一性：不要讓一個(gè)相同概念的元素在畫面中同時(shí)出現(xiàn)在2個(gè)地方。這會(huì)讓用戶對(duì)理解該元素的意義產(chǎn)生困惑。比如點(diǎn)擊小圖顯示大圖，小圖在大圖顯示的過程中依然出現(xiàn)在用戶視野內(nèi)。

  4.空間一致性：動(dòng)效在空間上需要符合實(shí)際性。當(dāng)一個(gè)元素從左側(cè)離開視線后，潛意識(shí)里你會(huì)預(yù)判它回來的方向也是從左側(cè)。

 

雖然只是做了一個(gè)小動(dòng)作的交互，但是管中窺豹，在項(xiàng)目的推進(jìn)過程中我也逐漸意識(shí)到自己對(duì)于動(dòng)效應(yīng)用的不足：

1. 不應(yīng)該為了想做動(dòng)效而特地加上動(dòng)效；

2. 動(dòng)效的存在應(yīng)是向用戶清楚地交代界面發(fā)生的變化，告知用戶元素間發(fā)生的變化；

3. 動(dòng)效的發(fā)生到結(jié)束應(yīng)控制在合理的時(shí)間范圍，時(shí)間太短用戶無法明確感知?jiǎng)有У陌l(fā)生，時(shí)間太長(zhǎng)反而影響用戶瀏覽頁面的效率；

4. 最后，動(dòng)效應(yīng)貼近正常的物理規(guī)律，如元素的大小變化、位置移動(dòng)或者漸隱漸現(xiàn)，生硬的動(dòng)畫只會(huì)影響產(chǎn)品的友好度。

真正把理論運(yùn)用到實(shí)際中時(shí)總能發(fā)現(xiàn)自己對(duì)于一個(gè)知識(shí)點(diǎn)的遺漏，看過幾位前沿設(shè)計(jì)師對(duì)于動(dòng)效運(yùn)用方面的總結(jié)也明白紙上得來終覺淺。在此做一份工作記錄，算是給自己一個(gè)提醒，也望諸君共勉之。