一、前言

B類產(chǎn)品設(shè)計過程中會遇到各種各樣的問題，不同問題有不同的解法。有的問題不適合用動效去解決，盲目無意義的動效不僅浪費設(shè)計師及開發(fā)成本，更會降低產(chǎn)品性能、分散用戶操作注意力等。然而有些問題則用動效解決更為巧妙，恰到好處的動效可以簡化產(chǎn)品模型，降低設(shè)計開發(fā)成本，促進用戶對產(chǎn)品的理解等。

本文將介紹一套動效創(chuàng)新方法。以B類產(chǎn)品為例，講解如何分步驟的剖析B類產(chǎn)品設(shè)計過程中所產(chǎn)生的問題，接著運用動效創(chuàng)新解決產(chǎn)品問題，最終產(chǎn)生設(shè)計價值（如產(chǎn)品用戶體驗及關(guān)鍵數(shù)據(jù)的提升）。

二、B類產(chǎn)品設(shè)計中遇到什么樣的問題適合用動效去解決？

我們可以全局審視整個產(chǎn)品，將需要解決的問題按用戶體驗要素進行拆解和歸類。

1. 戰(zhàn)略層

這一層，設(shè)計師需了解企業(yè)和用戶對產(chǎn)品的期望和目標，促進設(shè)計目標的制定。戰(zhàn)略層是整個產(chǎn)品設(shè)計的底層，動效能直接作用于戰(zhàn)略層的情況不多。

2. 范圍層

此層需明確產(chǎn)品的功能和內(nèi)容。B類產(chǎn)品的功能復(fù)雜、內(nèi)容很多，往往一個豆腐塊大小的界面要塞下很多內(nèi)容。當(dāng)有太多內(nèi)容放不下的時候，除了增加產(chǎn)品頁面數(shù)，我們可以嘗試運用動效，在同一頁面上擴大產(chǎn)品的內(nèi)容范圍。

3. 結(jié)構(gòu)層

此層確定產(chǎn)品的層級結(jié)構(gòu)，主要用來設(shè)計用戶如何快速、準確的到達某個頁面，并且要考慮他們完成事情之后能夠去哪里。由于B類產(chǎn)品的內(nèi)容模塊很多，信息層級嵌套較C類產(chǎn)品更為復(fù)雜，對于這一點尤其適合用動效去解決。巧妙的動效可以關(guān)聯(lián)上下文，瞬間降低用戶理解成本，提高產(chǎn)品操作效率。

4. 框架層

此層用于優(yōu)化頁面設(shè)計布局，確定各元件的擺放位置，涉及到具體的信息、界面、導(dǎo)航設(shè)計。如界面，選擇正確的元素和布局，將重要的功能放在顯眼的位置，相似的功能分類放置在一起等。導(dǎo)航，允許用戶在相關(guān)的內(nèi)容之間自由的切換，以找到足夠多的有效的信息。在這一層，動效可以用來輔助，如強化重要元件的位置，優(yōu)化布局切換順暢度等。

5. 表現(xiàn)層

此層乃UI感知，涉及到視覺、聽覺、觸覺的體驗設(shè)計。B類產(chǎn)品復(fù)雜度高，較C類產(chǎn)品往往更枯燥，但加入適當(dāng)友好的動效能夠提升產(chǎn)品趣味性，加強用戶與產(chǎn)品的情感鏈接，增加用戶對產(chǎn)品的友好度。

以上問題，是以我日常接觸的B類產(chǎn)品為基準，推敲總結(jié)歸納的。在實際業(yè)務(wù)協(xié)同過程中，我們都可以根據(jù)實際產(chǎn)品，按照這種思路，以全局視角拆解產(chǎn)品，洞見微動效賦能點。為用戶為產(chǎn)品去服務(wù)，解決產(chǎn)品的實際問題。

三、針對四大層問題的動效創(chuàng)新方法集

1. 范圍層：以一擴三法

以一擴三，即不改變內(nèi)容的區(qū)域大小，在同一塊陣地上，運用微動效，達到擴充內(nèi)容范圍的效果。比如本來可以展示一行內(nèi)容的區(qū)域，現(xiàn)在可以展示多行內(nèi)容。

案例1

產(chǎn)品問題：B類買家把感興趣的貨品加入收藏夾。這時我們可以透傳收藏夾列表中商品的關(guān)鍵利益點，從而輔助用戶進行二次決策，提高產(chǎn)品L到D的轉(zhuǎn)化率。但是有的貨品沒有利益點，有的貨品利益點又很多，這時在保證列表相同秩序的情況下，該怎么透傳內(nèi)容呢？

關(guān)鍵切入點：希望列表保證相同的秩序，卻又放下不同容量的內(nèi)容，這屬于范圍層的問題。我們運用「以一擴三」法，在界面中框定一個相同的區(qū)域，讓多出來的內(nèi)容在相同區(qū)域內(nèi)滾動，達到不改變界面大小，擴大內(nèi)容范圍的效果。

實現(xiàn)價值：解決內(nèi)容過載問題，保證產(chǎn)品列表頁的統(tǒng)一。同時動效本身自帶吸引用戶注意力的屬性，無形之中強化了商品關(guān)鍵利益點，刺激用戶點擊，提高了產(chǎn)品L到D的轉(zhuǎn)化率。

案例2

產(chǎn)品問題：C類用戶下單是為了自用，下單多取決于感性喜好。而B類用戶下單是為了銷售，下單時會將產(chǎn)品好不好賣作為自己下單的重要決策因素。因此我們希望在收藏夾場景下，把下游銷售數(shù)據(jù)前置，在買家對感興趣的商品進行操作時，直接透傳相關(guān)參謀數(shù)據(jù)，幫助B類買家更高效的進行二次下單決策。這時問題來了，商品相關(guān)下游數(shù)據(jù)很多，在商品操作半浮層頁能否展示相對較多的數(shù)據(jù)呢？

關(guān)鍵切入點：商品操作半浮層頁大小有限，卻又想放下更多的內(nèi)容，這依然是一個范圍擴大問題。我們運用「以一擴三」法，把參謀數(shù)據(jù)分層，依次在浮層頁中輪播展示。同時用戶可以參照頁面運動路徑，了解到頁面可以左右來回輪播后，用手指左右撥動頁面，也可以看到更多參謀數(shù)據(jù)。

實現(xiàn)價值：讓B類買家在單位區(qū)域內(nèi)看到更多參謀內(nèi)容，輔助用戶進行二次決策，提高產(chǎn)品下單轉(zhuǎn)化率。

「以一擴三」法非常簡單，但是卻很有效。熟悉此法后，遇到類似內(nèi)容很多，界面大小不夠用時，除了增加產(chǎn)品頁面數(shù)，我們更可以嘗試運用動效，讓單位頁面放下更多內(nèi)容。

2. 結(jié)構(gòu)層：斗轉(zhuǎn)星移法

斗轉(zhuǎn)星移，即以關(guān)鍵聯(lián)動元素在各個復(fù)雜的頁面層級中進行移動，引導(dǎo)用戶視線，從而解釋產(chǎn)品各個層級之間的關(guān)系，起到關(guān)聯(lián)上下文，降低用戶理解成本的作用。比如層級A、層級B、層級C，在產(chǎn)品定位上層級A和層級C是有關(guān)系的，但在視覺表現(xiàn)上ABC看起來都像是獨立的個體，這時用聯(lián)動元素從層級A移動到層級C，則能自然而然地向用戶透傳出層級A與層級C的關(guān)聯(lián)性。

案例1

產(chǎn)品背景：此功能運用在賣家工作臺后臺場景里。因賣家工作臺里的功能很多，用戶需要把常用的功能添加至主頁左邊欄快捷入口中，方便進入后臺后直接操作。快捷入口中的功能最多為15條，多出的功能需移出快捷入口。

操作行為：

• 用戶點擊「功能地圖」圖標，則會出現(xiàn)全部功能列表。
• 用戶直接點擊某項功能的文字，則會進入該功能的內(nèi)頁。而用戶鼠標懸停在某個功能（如“投訴管理”）上面時，該功能右側(cè)則會出現(xiàn)空心的「釘」圖標。
• 點擊空心的「釘」圖標，則「投訴管理」功能被添加進左側(cè)的「快捷入口」欄目里面，同時空心的「釘」圖標變成實心的「釘」圖標（代表該功能已經(jīng)加入“快捷入口”）。
• 點擊任何功能右側(cè)的實心「釘」圖標，則該功能將從「快捷入口」列表中被移除。同時實心的「釘」圖標將消失。

產(chǎn)品問題：我們在測試時發(fā)現(xiàn)，新用戶在未經(jīng)過說明的情況下，根本無法理解「釘」圖標的用意。因為點擊了「釘」圖標后，左側(cè)「快捷入口」欄的功能只是瞬間被增加了一條，不仔細盯著左邊看根本不知道頁面上發(fā)生了什么。當(dāng)左側(cè)「快捷入口」中功能很多的時候，瞬間移除一條也不知道是到底移除了哪一條。最關(guān)鍵是用戶根本就不知道左側(cè)「快捷入口」中的功能和「功能地圖」中的功能是產(chǎn)生聯(lián)動的。

關(guān)鍵切入點：為了說清楚「釘」圖標的用意，一般產(chǎn)品可以放一頁新手引導(dǎo)。然而在設(shè)計產(chǎn)品中，如果能用交互自然解決的問題，就盡量不要再做一個新手引導(dǎo)頁。畢竟，產(chǎn)品的目標是簡單易上手，而不是使用之前還要看說明書。

信息模塊多，關(guān)聯(lián)度不明朗，這屬于結(jié)構(gòu)問題。我們運用「斗轉(zhuǎn)星移」法，點擊空心的「釘」圖標時，「釘」圖標左邊的功能文字便作為關(guān)鍵聯(lián)動元素，引導(dǎo)用戶視線，從「功能地圖」中飛進了「快捷入口」中，讓「功能地圖」模塊與「快捷入口」模塊聯(lián)動起來。同時空心的「釘」圖標以注水的形式，緩緩填充成實心「釘」圖標，速率與功能文字飛入的速率保持一致，暗含此功能已被「釘」住，即加入「快捷入口」。

同理，點擊實心「釘」圖標，相對應(yīng)的功能便會飛出「快捷入口」模塊，暗指該功能已被移除。

實現(xiàn)價值：降低用戶理解成本，提高產(chǎn)品操作效率。

案例2

產(chǎn)品問題：B類Offerdetail改版，B類商品詳情頁較C類更加復(fù)雜。在舊版中，頂部Tab欄可切換商品、詳情、參謀，分銷和拿樣功能放在商品頁的次屏。新版Offerdetail加入了訂貨功能，并把分銷和拿樣功能一起放到了首屏。這樣在首屏，便把商品拆為現(xiàn)貨、訂貨、分銷、拿樣四個Tab。

滑到頁面二屏，一級Tab商品、詳情、參謀便浮現(xiàn)出來，二級Tab現(xiàn)貨、訂貨、分銷、拿樣置于一級Tab下方。這樣頁面上就出現(xiàn)了操作比較惡心的雙Tab。且雙Tab一直置于頂部，占用頁面高度，影響瀏覽頁面。

雙Tab在移動端是非常影響用戶操作的。為避免這種情況，我們想到，既然現(xiàn)貨、訂貨、分銷、拿樣都是屬于商品選項的，在滑動到二屏的時候，是否可以把現(xiàn)貨、訂貨、分銷、拿樣統(tǒng)一收攏到頂部一級Tab的商品選項里面。

這樣問題來了，首屏是現(xiàn)貨、訂貨、分銷、拿樣，滑動到二屏?xí)r，Tab突然變成了現(xiàn)貨、詳情、參謀，用戶如何才能知道訂貨、分銷、拿樣功能去哪了呢？

關(guān)鍵切入點：為此我們嘗試了兩種方案。此處演示demo為展示清楚，在關(guān)鍵變換處做了停頓，實際用戶瀏覽時為流暢動效，用戶手指滑到哪里，動效就變動到哪里。

• 方案1：直接切換，用戶若滑動頁面較快，Tab切換感知不明顯。
• 方案2：運用「斗轉(zhuǎn)星移」法，在用戶滑動頁面至二屏?xí)r，將現(xiàn)貨、訂貨、分銷、拿樣作為關(guān)鍵聯(lián)動元素，整體收攏至頂部Tab欄，并最后出現(xiàn)下拉小三角，告訴用戶，原先的四個類目已經(jīng)統(tǒng)一被收攏到一個類目中。這個收攏的動作雖然在動效表現(xiàn)層上，動靜大了些，但是對新版本功能傳遞，避免用戶誤操作有良好的效果。

最后我們在現(xiàn)貨、訂貨、分銷、拿樣文字上部加入了圖標，增加用戶對新功能Tab的感知，讓一級Tab與二級Tab差異更加顯性化。

實現(xiàn)價值：幫助產(chǎn)品強化新功能認知，幫助用戶理清兩個層級間的關(guān)系，避免用戶誤操作、誤下單。

案例3

產(chǎn)品問題：為促進貨品下單轉(zhuǎn)化率，收藏夾中的全部貨品增加了降價貨品和促銷貨品分類。然而B類用戶很忙，進入收藏夾時并不會每次打開全部貨品分類欄。若每次都打開全部貨品欄，沒有降價和促銷貨品的話，就是在浪費時間。

關(guān)鍵切入點：我們在用戶第一次進入收藏夾時，加入利益點透傳小黃條，比如「您收藏的貨品有9件正在參與促銷」，并運用「斗轉(zhuǎn)星移」法，把利益點小黃條作為關(guān)鍵聯(lián)動元素，慢慢飄逸縮小成提醒小圓點，點在全部貨品欄上，提醒用戶點開此處可查看9件促銷商品。

實現(xiàn)價值：提高產(chǎn)品操作、用戶瀏覽效率，提高商品下單轉(zhuǎn)化率。

3. 框架層：魔方復(fù)原法

魔方復(fù)原，即把二維的頁面布局想象成三維立體空間里面的模塊。當(dāng)出現(xiàn)頁面布局多樣化，一種布局已經(jīng)滿足不了產(chǎn)品需求的時候，我們除了可以平鋪所有的頁面布局，更可以通過動效輔助，像拼接魔方一樣，把A頁面布局扭轉(zhuǎn)成B頁面布局。

案例1

產(chǎn)品問題：1688后臺產(chǎn)品分為買家端和賣家端兩個端，用戶進來需根據(jù)自己的身份選擇買家端或者賣家端。但有些用戶是買賣家同號的，即是買家也是賣家，需要頻繁在兩個端之間切換。

關(guān)鍵切入點：我們加入買賣家切換手柄，用「魔方復(fù)原」法，順應(yīng)兩端各自的布局，把買家端布局依次扭轉(zhuǎn)成賣家端布局。

實現(xiàn)價值：優(yōu)化布局切換順暢度，優(yōu)化產(chǎn)品操作體驗。

4. 表現(xiàn)層：氛圍渲染法

氛圍渲染，即把專業(yè)度高、略枯燥、瀏覽易倦怠的B類產(chǎn)品，加入適當(dāng)友好的氛圍動效。可以提升產(chǎn)品趣味性，增強用戶對產(chǎn)品的情緒共鳴。也可以通過對專業(yè)數(shù)據(jù)的渲染，增加產(chǎn)品信賴感，科技感等。

案例1

產(chǎn)品問題：平臺提供商家7項能力，需商家完成任務(wù)才能獲得相關(guān)能力，但商家目前的任務(wù)參與度不高。

關(guān)鍵切入點：通過用「氛圍渲染」法，提取物像特征，讓商務(wù)人物奔跑來表現(xiàn)商家成長進度，調(diào)動用戶的直觀情緒感知。

實現(xiàn)價值：提高任務(wù)參與度，便于用戶進行成長任務(wù)連貫操作，提高成長效率。

案例2

產(chǎn)品問題：B類后臺產(chǎn)品專業(yè)度高、略枯燥、瀏覽易倦怠。

關(guān)鍵切入點：通過用「氛圍渲染」法，對新加載的模塊進行數(shù)據(jù)強化，提高平臺專業(yè)感的同時，打破用戶的倦怠感。

實現(xiàn)價值：增強平臺專業(yè)感知，提高產(chǎn)品瀏覽體驗。

四、后記

演員王寶強曾說過：沒做過導(dǎo)演的演員，可能會給自己加戲，其實不是的，戲不在多，在于準確。

動效也是如此，我們并不需要為了表達自己的動效能力而在頁面中加入各種動效。巧妙而精準的動效并不需要太多動作，卻能真正的作用于產(chǎn)品。

當(dāng)下時代，設(shè)計師是產(chǎn)品的共同締造者，我們做的每一項設(shè)計，都得經(jīng)過思考，用盡我們?nèi)康闹腔郏?wù)于我們的用戶，實現(xiàn)產(chǎn)品的價值。全局化思考產(chǎn)品問題，把在業(yè)務(wù)協(xié)同過程中遇到的產(chǎn)品問題分層拆解，洞見設(shè)計發(fā)力點，最終以最合適的動效創(chuàng)新手段，實現(xiàn)設(shè)計賦能。

以上觀點并非絕對，僅希望帶給大家一些幫助。希望大家都能以小支點撬動大價值。

歡迎關(guān)注「阿里巴巴UED」的微信公眾號：

「為設(shè)計賦能的動效是怎樣的」

• 《超全面！騰訊出品的交互微動效設(shè)計指南》
• 《沿著這7個思路，你可以正確的使用動效取悅用戶》
• 《為什么你的動效特別酷炫，但一直不能落地？（附解決思路）》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備： http://hao.uisdc.com