說(shuō)到B端后臺(tái)產(chǎn)品，我們會(huì)想到業(yè)務(wù)復(fù)雜、信息龐大、用戶(hù)角色多、頁(yè)面層級(jí)深、使用門(mén)檻高等特征。這些特征讓后臺(tái)產(chǎn)品在設(shè)計(jì)時(shí)更強(qiáng)調(diào)“簡(jiǎn)單直接”，無(wú)需多余的設(shè)計(jì)元素，相比之下，沒(méi)有C端產(chǎn)品有趣。而作為B端后臺(tái)設(shè)計(jì)師在工作中會(huì)面臨很多復(fù)雜場(chǎng)景的設(shè)計(jì)需求，有時(shí)候需求方未必能理解設(shè)計(jì)理念，會(huì)讓設(shè)計(jì)師陷入“頭禿”的狀態(tài)。 針對(duì)B端后臺(tái)產(chǎn)品某些體驗(yàn)問(wèn)題，我們可以借助動(dòng)效的力量去解決。
下面將結(jié)合工作經(jīng)驗(yàn)，以及線(xiàn)上文章，分享如何利用動(dòng)效來(lái)提升B端后臺(tái)產(chǎn)品的體驗(yàn)。
使用動(dòng)效不是為了炫技，而是輔助解決設(shè)計(jì)中發(fā)現(xiàn)的問(wèn)題。我們要思考的是，眼下的問(wèn)題結(jié)合動(dòng)效能否達(dá)到1+1>2的解決效果。設(shè)計(jì)方案除了要得到需求方的認(rèn)可，還要有開(kāi)發(fā)團(tuán)隊(duì)的支持。設(shè)計(jì)師做到從痛點(diǎn)中出發(fā)，于可行處落地，才是有效的設(shè)計(jì)。那什么場(chǎng)景下的問(wèn)題可以考慮結(jié)合動(dòng)效呢?
B端業(yè)務(wù)的復(fù)雜程度決定了產(chǎn)品的信息體量，這也考驗(yàn)著設(shè)計(jì)師設(shè)計(jì)頁(yè)面時(shí)，能為用戶(hù)在有限的空間里獲取多少信息。舉個(gè)例子，用戶(hù)的辦公設(shè)備是小型筆記本，它的屏幕小，用戶(hù)一屏看到的內(nèi)容有限。這時(shí)需求方建議減少留白，壓縮空間，信息往上堆積，頁(yè)面最后會(huì)擁擠不堪。龐大的信息體量力求對(duì)用戶(hù)的吸收效率，也對(duì)設(shè)計(jì)造成困擾，針對(duì)這種情況我們可運(yùn)用“折疊收納”法
如果一個(gè)頁(yè)面的按鈕太多，可“折疊”按鈕。以下面的科目樹(shù)為例，每個(gè)科目有若干個(gè)功能按鈕，如按鈕全部展示，不利于用戶(hù)聚焦重要信息。用戶(hù)必定是先看科目標(biāo)題，如有需要才對(duì)科目進(jìn)行操作，基于這個(gè)思路可把按鈕折疊起來(lái)，待用戶(hù)鼠標(biāo)懸浮至科目才出現(xiàn)按鈕。在恰當(dāng)?shù)膱?chǎng)景下將按鈕折疊，有助于精簡(jiǎn)頁(yè)面結(jié)構(gòu)。一個(gè)頁(yè)面按區(qū)域劃分功能區(qū)和信息區(qū)，信息區(qū)被文案鋪滿(mǎn)了，可簡(jiǎn)化功能區(qū)的表現(xiàn)形式。比如按鈕和解釋文案，可對(duì)解釋文案進(jìn)行收納，用戶(hù)鼠標(biāo)懸浮上去顯示。對(duì)于用戶(hù)來(lái)說(shuō)，一個(gè)按鈕的含義只要使用一次便清楚。
B端后臺(tái)因信息量大有很多長(zhǎng)頁(yè)面，這時(shí)可在用戶(hù)進(jìn)行頁(yè)面滾動(dòng)瀏覽時(shí)，根據(jù)用戶(hù)滾動(dòng)的內(nèi)容進(jìn)行折疊。如下的篩選項(xiàng)占據(jù)了頁(yè)面頭部一定的空間，用戶(hù)滑到結(jié)果列表內(nèi)容時(shí)，已選項(xiàng)固定在頂部精簡(jiǎn)展示。
小結(jié):通過(guò)“折疊收納法”優(yōu)化頁(yè)面布局，根據(jù)用戶(hù)的操作行為給予內(nèi)容變化，幫助用戶(hù)降低信息量過(guò)大帶來(lái)的閱讀疲勞，也讓設(shè)計(jì)師在有限的設(shè)計(jì)空間里“堆積”信息。
B端產(chǎn)品會(huì)有極其復(fù)雜的功能，這些功能通常用步驟條來(lái)拆分，引導(dǎo)用戶(hù)分步完成。面對(duì)復(fù)雜功能。需求方希望
在頁(yè)面的各個(gè)位置添加用法提示文案。但用戶(hù)并不想閱讀一串串文字，這時(shí)可結(jié)合用戶(hù)的操作行為，及時(shí)響應(yīng)引導(dǎo)下一步操作。
操作響應(yīng)如下的這個(gè)頁(yè)面需要用戶(hù)把左邊的字段拖拽到右邊生成卡片。當(dāng)用戶(hù)拖拽時(shí)，給予動(dòng)效反饋?zhàn)層脩?hù)感知字段拖拽方向。這種可視可感知的方式幫助用戶(hù)快速掌握用法，提升效率。
應(yīng)用案例2:引導(dǎo)響應(yīng)
在工作中我們也許會(huì)接到類(lèi)似的修改需求:“按鈕不夠突出，不夠大，要又大又突出”。你看完后心里想:“還不夠突出嗎，要這么大干什么呢?”這時(shí)沉住氣，分析修改的根本目的，它想要突出的目的是什么?
1、這個(gè)按鈕在整個(gè)頁(yè)面中承載極其重要的功能，視覺(jué)上用戶(hù)需立刻注意到2、點(diǎn)擊按鈕后的內(nèi)容十分重要，希望增強(qiáng)點(diǎn)擊欲。
當(dāng)用戶(hù)鼠標(biāo)懸浮至按鈕時(shí)，及時(shí)響應(yīng)引導(dǎo)，一個(gè)箭頭既起到醒目作用，也引導(dǎo)著用戶(hù)去往下一步。
小結(jié): B端后臺(tái)頁(yè)面信息繁雜，功能多。通過(guò)動(dòng)效幫助用戶(hù)在使用過(guò)程中增強(qiáng)反饋和引導(dǎo)，正確的引導(dǎo)能縮短用戶(hù)的操作路徑，提升效率。
B端后臺(tái)產(chǎn)品大部分是給專(zhuān)業(yè)人員使用的，信息表單居多，頁(yè)面內(nèi)容相似，比較單調(diào)。加入適當(dāng)友好的情感化式效可以提升產(chǎn)品的趣味性，減少用戶(hù)使用的倦怠感。
應(yīng)用案例1: Loading動(dòng)效
常規(guī)的Loading動(dòng)效通常是一個(gè)圓在轉(zhuǎn)圈，當(dāng)用戶(hù)面對(duì)長(zhǎng)時(shí)間加載時(shí)，一直盯著一個(gè)圈會(huì)產(chǎn)生焦慮感。情感化Loading動(dòng)效可總結(jié)為兩類(lèi):
1、產(chǎn)品本身有一個(gè)IP形象，可圍繞IP進(jìn)行創(chuàng)作。例如“加薪貓”，加載的時(shí)候貓咪追著錢(qián)幣奔跑，增加了跑步流汗的細(xì)節(jié)，提升它已經(jīng)在努力加載的形象感;
2、根據(jù)Loading的文案進(jìn)行拓展設(shè)計(jì)，提取文案元素，圖形場(chǎng)景化，分散用戶(hù)等待的焦慮。
有些B端產(chǎn)品的業(yè)務(wù)背景專(zhuān)業(yè)而又抽象，可借助動(dòng)效的力量化繁為簡(jiǎn)，化抽象為形象。以下面數(shù)據(jù)字典為例。用通過(guò)該字典進(jìn)行與業(yè)務(wù)相關(guān)的字段查詢(xún)。該頁(yè)結(jié)構(gòu)較簡(jiǎn)單:搜索欄和熱詞入口。我結(jié)合模塊名稱(chēng)，對(duì)特征進(jìn)行具體物化，在頁(yè)面加入字典和放大鏡元素。通過(guò)物化讓用戶(hù)快速感知該模塊的作用。類(lèi)似的大入口頁(yè)面也可以運(yùn)用3D效果，它能讓物化更加立體。
比較常用的動(dòng)效設(shè)計(jì)工具有: Ae、Principle、ProtoPie。這里分享一下我在工作中常用的并能解決大部分問(wèn)題的工具。
Principle是一款只能用于Mac OS系統(tǒng)的交互設(shè)計(jì)工具，它的操作界面跟Sketch類(lèi)似，學(xué)習(xí)成本較低。它搭配Sketch使用，能對(duì)界面做轉(zhuǎn)場(chǎng)過(guò)渡動(dòng)效和一些細(xì)節(jié)的交與動(dòng)效。當(dāng)你想提出某個(gè)交互動(dòng)效提案時(shí)，可用Princidle快速制成演示Demo，導(dǎo)出GIF或視頻給到需求方，讓他們快速明白你的想法及可行性后臺(tái)界面演示demo可直接選擇箭頭光標(biāo)，呈現(xiàn)效果更貼合真實(shí)場(chǎng)景。
2、After Effect: 適合各種場(chǎng)景下的動(dòng)效制作
AE是絕大UI設(shè)計(jì)師必備的動(dòng)效制作工具。它支持Mac OS和Windows系統(tǒng)，其自身有著強(qiáng)大而豐富的特效庫(kù)?，F(xiàn)在也能通過(guò)AEUX插件，把Sketch里的圖層直接導(dǎo)入到AE使用。AE的功能大而全，日堂工作中多用干制作情感化需要的圖形動(dòng)效，比如Loading、lcon點(diǎn)擊動(dòng)效等等。
小結(jié): 設(shè)計(jì)師需要學(xué)習(xí)和掌握的軟件很多，軟件更新迭代的速度也很快?？蛇x擇能解決工作中絕大設(shè)計(jì)需求的軟件精學(xué)，其余可在空閑時(shí)作為知識(shí)技能儲(chǔ)備來(lái)學(xué)習(xí)。
做適合的動(dòng)效為B端產(chǎn)品體驗(yàn)賦能
當(dāng)你在設(shè)計(jì)一款從0-1或是重構(gòu)的B端后臺(tái)產(chǎn)品，你可重新定義設(shè)計(jì)風(fēng)格、規(guī)范控件。當(dāng)你是半途介入一款風(fēng)格規(guī)范都已相當(dāng)成熟的B端產(chǎn)品，通常遇到的問(wèn)題較為繁瑣，可能是對(duì)一個(gè)按鈕、一個(gè)顏色、一句文案去精打細(xì)磨。這時(shí)設(shè)計(jì)師需提升產(chǎn)品全局觀，在設(shè)計(jì)過(guò)程中對(duì)遇到的問(wèn)題層層剖析，洞悉設(shè)計(jì)的發(fā)力點(diǎn)，并在恰當(dāng)?shù)膱?chǎng)景下緊貼產(chǎn)品特性和業(yè)務(wù)需求，提出恰到好處的動(dòng)效方案，以小點(diǎn)出發(fā)，真正為產(chǎn)品的體驗(yàn)賦能。
