起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識小支點(diǎn)撬動大價值：論微動效創(chuàng)新如何為B類產(chǎn)品賦能
本文將介紹一套動效創(chuàng)新方法。以B類產(chǎn)品為例，講解如何分步驟的剖析B類產(chǎn)品設(shè)計過程中所產(chǎn)生的問題，接著運(yùn)用動效創(chuàng)新解決產(chǎn)品問題，最終產(chǎn)生設(shè)計價值（如產(chǎn)品用戶體驗(yàn)及關(guān)鍵數(shù)據(jù)的提升）。
B類產(chǎn)品設(shè)計過程中會遇到各種各樣的問題，不同問題有不同的解法。有的問題不適合用動效去解決，盲目無意義的動效不僅浪費(fèi)設(shè)計師及開發(fā)成本，更會降低產(chǎn)品性能、分散用戶操作注意力等。然而有些問題則用動效解決更為巧妙，恰到好處的動效可以簡化產(chǎn)品模型，降低設(shè)計開發(fā)成本，促進(jìn)用戶對產(chǎn)品的理解等。
本文將介紹一套動效創(chuàng)新方法。以B類產(chǎn)品為例，講解如何分步驟的剖析B類產(chǎn)品設(shè)計過程中所產(chǎn)生的問題，接著運(yùn)用動效創(chuàng)新解決產(chǎn)品問題，最終產(chǎn)生設(shè)計價值（如產(chǎn)品用戶體驗(yàn)及關(guān)鍵數(shù)據(jù)的提升）。
一、B類產(chǎn)品設(shè)計中遇到什么樣的問題適合用動效去解決？
我們可以全局審視整個產(chǎn)品，將需要解決的問題按用戶體驗(yàn)要素進(jìn)行拆解和歸類。
1、戰(zhàn)略層：
這一層，設(shè)計師需了解企業(yè)和用戶對產(chǎn)品的期望和目標(biāo)，促進(jìn)設(shè)計目標(biāo)的制定。戰(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ù)，我們可以嘗試運(yùn)用動效，在同一頁面上擴(kuò)大產(chǎn)品的內(nèi)容范圍。
3、結(jié)構(gòu)層：
此層確定產(chǎn)品的層級結(jié)構(gòu)，主要用來設(shè)計用戶如何快速、準(zhǔn)確的到達(dá)某個頁面，并且要考慮他們完成事情之后能夠去哪里。由于B類產(chǎn)品的內(nèi)容模塊很多，信息層級嵌套較C類產(chǎn)品更為復(fù)雜，對于這一點(diǎn)尤其適合用動效去解決，巧妙的動效可以關(guān)聯(lián)上下文，瞬間降低用戶理解成本，提高產(chǎn)品操作效率。
4、框架層：
此層用于優(yōu)化頁面設(shè)計布局，確定各元件的擺放位置，涉及到具體的信息、界面、導(dǎo)航設(shè)計。如界面，選擇正確的元素和布局，將重要的功能放在顯眼的位置，相似的功能分類放置在一起等。導(dǎo)航，允許用戶在相關(guān)的內(nèi)容之間自由的切換，以找到足夠多有效的信息。在這一層，動效可以用來輔助，如強(qiáng)化重要元件的位置，優(yōu)化布局切換順暢度等。
5、表現(xiàn)層：
此層乃UI感知，涉及到視覺、聽覺、觸覺的體驗(yàn)設(shè)計。B類產(chǎn)品復(fù)雜度高，較C類產(chǎn)品往往更枯燥，但加入適當(dāng)友好的動效能夠提升產(chǎn)品趣味性，加強(qiáng)用戶與產(chǎn)品的情感鏈接，增加用戶對產(chǎn)品的友好度。
以上問題，是以我日常接觸的B類產(chǎn)品為基準(zhǔn)，推敲總結(jié)歸納的。在實(shí)際業(yè)務(wù)協(xié)同過程中，我們都可以根據(jù)實(shí)際產(chǎn)品，按照這種思路，以全局視角拆解產(chǎn)品，洞見微動效賦能點(diǎn)。為用戶為產(chǎn)品去服務(wù)，解決產(chǎn)品的實(shí)際問題。
二、針對四大層問題的動效創(chuàng)新方法集
1、范圍層：以一擴(kuò)三法。
以一擴(kuò)三，即不改變內(nèi)容的區(qū)域大小，在同一塊陣地上，運(yùn)用微動效，達(dá)到擴(kuò)充內(nèi)容范圍的效果。比如本來可以展示一行內(nèi)容的區(qū)域，現(xiàn)在可以展示多行內(nèi)容。
案例1
產(chǎn)品問題：
B類買家把感興趣的貨品加入收藏夾。這時我們可以透傳收藏夾列表中商品的關(guān)鍵利益點(diǎn)，從而輔助用戶進(jìn)行二次決策，提高產(chǎn)品L到D的轉(zhuǎn)化率。但是有的貨品沒有利益點(diǎn)，有的貨品利益點(diǎn)又很多，這時在保證列表相同秩序的情況下，該怎么透傳內(nèi)容呢？
關(guān)鍵切入點(diǎn)：
希望列表保證相同的秩序，卻又放下不同容量的內(nèi)容，這屬于范圍層的問題。我們運(yùn)用“以一擴(kuò)三”法，在界面中框定一個相同的區(qū)域，讓多出來的內(nèi)容在相同區(qū)域內(nèi)滾動，達(dá)到不改變界面大小，擴(kuò)大內(nèi)容范圍的效果。
實(shí)現(xiàn)價值：
解決內(nèi)容過載問題，保證產(chǎn)品列表頁的統(tǒng)一。同時動效本身自帶吸引用戶注意力的屬性，無形之中強(qiáng)化了商品關(guān)鍵利益點(diǎn)，刺激用戶點(diǎn)擊，提高了產(chǎn)品L到D的轉(zhuǎn)化率。
案例2
產(chǎn)品問題：
C類用戶下單是為了自用，下單多取決于感性喜好。而B類用戶下單是為了銷售，下單時會將產(chǎn)品好不好賣作為自己下單的重要決策因素。
因此我們希望在收藏夾場景下，把下游銷售數(shù)據(jù)前置，在買家對感興趣的商品進(jìn)行操作時，直接透傳相關(guān)參謀數(shù)據(jù)，幫助B類買家更高效的進(jìn)行二次下單決策。這時問題來了，商品相關(guān)下游數(shù)據(jù)很多，在商品操作半浮層頁能否展示相對較多的數(shù)據(jù)呢？
關(guān)鍵切入點(diǎn)：
商品操作半浮層頁大小有限，卻又想放下更多的內(nèi)容，這依然是一個范圍擴(kuò)大問題。我們運(yùn)用“以一擴(kuò)三”法，把參謀數(shù)據(jù)分層，依次在浮層頁中輪播展示。同時用戶可以參照頁面運(yùn)動路徑，了解到頁面可以左右來回輪播后，用手指左右波動頁面，也可以看到更多參謀數(shù)據(jù)。
實(shí)現(xiàn)價值：
讓B類買家在單位區(qū)域內(nèi)看到更多參謀內(nèi)容，輔助用戶進(jìn)行二次決策，提高產(chǎn)品下單轉(zhuǎn)化率。
“以一擴(kuò)三”法非常簡單，但是卻很有效。熟悉此法后，遇到類似內(nèi)容很多，界面大小不夠用時，除了增加產(chǎn)品頁面數(shù)，我們更可以嘗試運(yùn)用動效，讓單位頁面放下更多內(nèi)容。
2、結(jié)構(gòu)層：斗轉(zhuǎn)星移法。
斗轉(zhuǎn)星移，即以關(guān)鍵聯(lián)動元素在各個復(fù)雜的頁面層級中進(jìn)行移動，引導(dǎo)用戶視線，從而解釋產(chǎn)品各個層級之間的關(guān)系，起到關(guān)聯(lián)上下文，降低用戶理解成本的作用。
比如層級A、層級B、層級C，在產(chǎn)品定位上層級A和層級C是有關(guān)系的，但在視覺表現(xiàn)上ABC看起來都像是獨(dú)立的個體，這時用聯(lián)動元素從層級A移動到層級C，則能自然而然的向用戶透傳出層級A與層級C的關(guān)聯(lián)性。
案例1
產(chǎn)品背景：
此功能運(yùn)用在賣家工作臺后臺場景里。因賣家工作臺里的功能很多，用戶需要把常用的功能添加至主頁左邊欄快捷入口中，方便進(jìn)入后臺后直接操作?？旖萑肟谥械墓δ茏疃酁?5條，多出的功能需移出快捷入口。
操作行為：
- 用戶點(diǎn)擊“功能地圖”圖標(biāo)，則會出現(xiàn)全部功能列表。
- 用戶直接點(diǎn)擊某項(xiàng)功能的文字，則會進(jìn)入該功能的內(nèi)頁。而用戶鼠標(biāo)懸停在某個功能（如“投訴管理”）上面時，該功能右側(cè)則會出現(xiàn)空心的“釘”圖標(biāo)。
- 點(diǎn)擊空心的“釘”圖標(biāo)，則“投訴管理”功能被添加進(jìn)左側(cè)的“快捷入口”欄目里面，同時空心的“釘”圖標(biāo)變成實(shí)心的“釘”圖標(biāo)（代表該功能已經(jīng)加入“快捷入口”）。
- 點(diǎn)擊任何功能右側(cè)的實(shí)心“釘”圖標(biāo)，則該功能將從“快捷入口”列表中被移除。同時實(shí)心的“釘”圖標(biāo)將消失。
產(chǎn)品問題：
我們在測試時發(fā)現(xiàn)，新用戶在未經(jīng)過說明的情況下，根本無法理解“釘”圖標(biāo)的用意。因?yàn)辄c(diǎn)擊了“釘”圖標(biāo)后，左側(cè)“快捷入口”欄的功能只是瞬間被增加了一條，不仔細(xì)盯著左邊看根本不知道頁面上發(fā)生了什么。
當(dāng)左側(cè)“快捷入口”中功能很多的時候，瞬間移除一條也不知道是到底移除了哪一條。最關(guān)鍵是用戶根本就不知道左側(cè)“快捷入口”中的功能和“功能地圖”中的功能是產(chǎn)生聯(lián)動的。
關(guān)鍵切入點(diǎn)：
為了說清楚“釘”圖標(biāo)的用意，一般產(chǎn)品可以放一頁新手引導(dǎo)。然而在設(shè)計產(chǎn)品中，如果能用交互自然解決的問題，就盡量不要再做一個新手引導(dǎo)頁。畢竟，產(chǎn)品的目標(biāo)是簡單易上手，而不是使用之前還要看說明書。
信息模塊多，關(guān)聯(lián)度不明朗，這屬于結(jié)構(gòu)問題。我們運(yùn)用“斗轉(zhuǎn)星移”法，點(diǎn)擊空心的“釘”圖標(biāo)時，“釘”圖標(biāo)左邊的功能文字便作為關(guān)鍵聯(lián)動元素，引導(dǎo)用戶視線，從“功能地圖”中飛進(jìn)了“快捷入口”中，讓“功能地圖”模塊與“快捷入口”模塊聯(lián)動起來。
同時空心的“釘”圖標(biāo)以注水的形式，緩緩填充成實(shí)心“釘”圖標(biāo)，速率與功能文字飛入的速率保持一致，暗含此功能已被“釘”住，即加入“快捷入口”。
同理，點(diǎn)擊實(shí)心“釘”圖標(biāo)，相對應(yīng)的功能便會飛出“快捷入口”模塊，暗指該功能已被移除。
實(shí)現(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àng)的，在滑動到二屏的時候，是否可以把現(xiàn)貨、訂貨、分銷、拿樣統(tǒng)一收攏到頂部一級Tab的商品選項(xiàng)里面。
這樣問題來了，首屏是現(xiàn)貨、訂貨、分銷、拿樣，滑動到二屏?xí)r，Tab突然變成了現(xiàn)貨、詳情、參謀，用戶如何才能知道訂貨、分銷、拿樣功能去哪了呢？
關(guān)鍵切入點(diǎn)：
為此我們嘗試了兩種方案。此處演示demo為展示清楚，在關(guān)鍵變換處做了停頓，實(shí)際用戶瀏覽時為流暢動效，用戶手指滑到哪里，動效就變動到哪里。
- 方案1、直接切換，用戶若滑動頁面較快，Tab切換感知不明顯。
- 方案2、運(yùn)用“斗轉(zhuǎn)星移”法，在用戶滑動頁面至二屏?xí)r，將現(xiàn)貨、訂貨、分銷、拿樣作為關(guān)鍵聯(lián)動元素，整體收攏至頂部Tab欄，并最后出現(xiàn)下拉小三角，告訴用戶，原先的四個類目已經(jīng)統(tǒng)一被收攏到一個類目中。這個收攏的動作雖然在動效表現(xiàn)層上，動靜大了些，但是對新版本功能傳遞，避免用戶誤操作有良好的效果。
最后我們在現(xiàn)貨、訂貨、分銷、拿樣文字上部加入了圖標(biāo)，增加用戶對新功能Tab的感知，讓一級Tab與二級Tab差異更加顯性化。
實(shí)現(xiàn)價值：
幫助產(chǎn)品強(qiáng)化新功能認(rèn)知，幫助用戶理清兩個層級間的關(guān)系，避免用戶誤操作誤下單。
案例3
產(chǎn)品問題：
為促進(jìn)貨品下單轉(zhuǎn)化率，收藏夾中的全部貨品增加了降價貨品和促銷貨品分類。然而B類用戶很忙，進(jìn)入收藏夾時并不會每次打開全部貨品分類欄。若每次都打開全部貨品欄，沒有降價和促銷貨品的話，就是在浪費(fèi)時間。
關(guān)鍵切入點(diǎn)：
我們在用戶第一次進(jìn)入收藏夾時，加入利益點(diǎn)透傳小黃條，比如“您收藏的貨品有9件正在參與促銷”，并運(yùn)用“斗轉(zhuǎn)星移”法，把利益點(diǎn)小黃條作為關(guān)鍵聯(lián)動元素，慢慢飄逸縮小成提醒小圓點(diǎn)，點(diǎn)在全部貨品欄上，提醒用戶點(diǎn)開此處可查看9件促銷商品。
實(shí)現(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ìn)來需根據(jù)自己的身份選擇買家端或者賣家端。但有些用戶是買賣家同號的，即是買家也是賣家，需要頻繁在兩個端之間切換。
關(guān)鍵切入點(diǎn)：
我們加入買賣家切換手柄，用“魔方復(fù)原”法，順應(yīng)兩端各自的布局，把買家端布局依次扭轉(zhuǎn)成賣家端布局。
實(shí)現(xiàn)價值：
優(yōu)化布局切換順暢度，優(yōu)化產(chǎn)品操作體驗(yàn)。
4、表現(xiàn)層：氛圍渲染法。
氛圍渲染，即把專業(yè)度高、略枯燥、瀏覽易倦怠的B類產(chǎn)品，加入適當(dāng)友好的氛圍動效。可以提升產(chǎn)品趣味性，增強(qiáng)用戶對產(chǎn)品的情緒共鳴。也可以通過對專業(yè)數(shù)據(jù)的渲染，增加產(chǎn)品信賴感，科技感等。
案例1
產(chǎn)品問題：平臺提供商家7項(xiàng)能力，需商家完成任務(wù)才能獲得相關(guān)能力，但商家目前的任務(wù)參與度不高。
關(guān)鍵切入點(diǎn)：通過用“氛圍渲染”法，提取物像特征，讓商務(wù)人物奔跑來表現(xiàn)商家成長進(jìn)度，調(diào)動用戶的直觀情緒感知。
實(shí)現(xiàn)價值：提高任務(wù)參與度，便于用戶進(jìn)行成長任務(wù)連貫操作，提高成長效率。
案例2
產(chǎn)品問題：B類后臺產(chǎn)品專業(yè)度高、略枯燥、瀏覽易倦怠。
關(guān)鍵切入點(diǎn)：通過用“氛圍渲染”法，對新加載的模塊進(jìn)行數(shù)據(jù)強(qiáng)化，提高平臺專業(yè)感的同時，打破用戶的倦怠感。
實(shí)現(xiàn)價值：增強(qiáng)平臺專業(yè)感知，提高產(chǎn)品瀏覽體驗(yàn)。
四、后記
演員王寶強(qiáng)曾說過：沒做過導(dǎo)演的演員，可能會給自己加戲，其實(shí)不是的，戲不在多，在于準(zhǔn)確。
動效也是如此，我們并不需要為了表達(dá)自己的動效能力而在頁面中加入各種動效。巧妙而精準(zhǔn)的動效并不需要太多動作，卻能真正的作用于產(chǎn)品。
當(dāng)下時代，設(shè)計師是產(chǎn)品的共同締造者，我們做的每一項(xiàng)設(shè)計，都得經(jīng)過思考，用盡我們?nèi)康闹腔郏?wù)于我們的用戶，實(shí)現(xiàn)產(chǎn)品的價值。全局化思考產(chǎn)品問題，把在業(yè)務(wù)協(xié)同過程中遇到的產(chǎn)品問題分層拆解，洞見設(shè)計發(fā)力點(diǎn)，最終以最合適的動效創(chuàng)新手段，實(shí)現(xiàn)設(shè)計賦能。
以上觀點(diǎn)并非絕對，僅希望帶給大家一些幫助。希望大家都能以小支點(diǎn)撬動大價值。
作者：顧佳
來源：阿里巴巴UED
題圖來自unsplash，基于CC0協(xié)議
- 目前還沒評論，等你發(fā)揮！
