如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

在無限的信息體量和有限的用戶瀏覽范圍之間求得平衡，讓用戶看到全部創(chuàng)作中他最想看到的那一面。

在B端產(chǎn)品的設(shè)計(jì)過程中，我深切體會(huì)到動(dòng)效能在很多體驗(yàn)領(lǐng)域起到四兩撥千斤的作用。于是我將自己這些年來做動(dòng)效的思考，結(jié)合B端產(chǎn)品的一些固有特點(diǎn)，來和大家聊一聊動(dòng)效設(shè)計(jì)在B端產(chǎn)品體驗(yàn)設(shè)計(jì)中的意義。

既然是談B端產(chǎn)品的體驗(yàn)設(shè)計(jì)，那么就免不了要與C端產(chǎn)品做對比。在我看來，B端產(chǎn)品與C端產(chǎn)品在大的體驗(yàn)趨勢上是趨同的。對于大多數(shù)用戶而言，都希望自己在工作與生活中是順利、愉悅的，而用戶體驗(yàn)就是為了讓用戶順利、愉悅而生的。也就是說，不管是B端產(chǎn)品還是C端產(chǎn)品，其體驗(yàn)的本質(zhì)都是圍繞著使用的效率與愉悅感為核心展開的。那么這次我們就將目光聚焦在B端產(chǎn)品，來看看在這個(gè)領(lǐng)域都有哪些亟待解決的設(shè)計(jì)難點(diǎn)。

針對這四個(gè)特點(diǎn)，我沉淀出一套解決B端產(chǎn)品體驗(yàn)問題的方法，它們分別是：信息折疊、路徑梳理、提升效率、概念物化。接下來，我將通過具體的案例，來詳細(xì)展現(xiàn)動(dòng)效在B端產(chǎn)品體驗(yàn)設(shè)計(jì)中的意義。

涉及案例簡述：

• Dataphin：一款將阿里建設(shè)數(shù)據(jù)中臺(tái)的能力商業(yè)化的產(chǎn)品
• QuickBI：一款用于數(shù)據(jù)可視化分析的BI工具

信息折疊

1. 切換式：不同信息共用同一區(qū)域

案例1:

問題分析：初次進(jìn)入 Dataphin，我們會(huì)提供一張業(yè)務(wù)流程圖來解釋 Dataphin 的工作流程。為了降低理解成本，我們對每個(gè)流程都添加了文字說明。然而由于流程本身已經(jīng)很復(fù)雜，頁面排版中加入說明性文字會(huì)使得流程的排版拉長，用戶很難通過一屏瀏覽完整的功能流程，體驗(yàn)不佳。

解決方法：我們發(fā)現(xiàn)用戶一開始關(guān)注業(yè)務(wù)的全流程展示，然后才會(huì)仔細(xì)查看每個(gè)業(yè)務(wù)的詳細(xì)說明。當(dāng)用戶將注意力放在查看詳細(xì)說明的時(shí)候，是顧不上看全流程的。因此我們將「看流程」和「看說明」的場景區(qū)分開，共用同一塊區(qū)域，從而優(yōu)化信息排布。

案例2：

問題分析：在QuickBI中，同一套 icon 需要應(yīng)對兩種不同的使用場景，當(dāng)用戶沒有選中任何圖表的時(shí)候，點(diǎn)擊任意類型的圖表icon，即可新建一個(gè)圖表；當(dāng)用戶選中某一創(chuàng)建好的圖表時(shí)，再點(diǎn)擊圖表icon，則是為該圖表切換類型。所以為了確保用戶的認(rèn)知清晰，我們需要將兩套使用場景區(qū)分開。

下圖中，我們嘗試了靜態(tài)的布局思維，雖然可以區(qū)分場景，但也造成了導(dǎo)航條過高，導(dǎo)致空間冗余，壓縮了創(chuàng)作空間。

其實(shí)這個(gè)問題不止我們家有，用過 AE 的同學(xué)應(yīng)該清楚，AE里面的形狀工具體驗(yàn)也很鬼畜，用戶不選擇任何圖層的時(shí)候，使用形狀工具可以新建形狀，當(dāng)用戶選中某個(gè)圖層的時(shí)候，使用形狀工具是針對該圖層創(chuàng)建蒙版，兩種不同的功能卻沒有任何樣式或操作上的區(qū)分，對新手用戶來說是相當(dāng)不友好的。

解決方法：用戶創(chuàng)建圖表和切換類型是兩種不同的場景，不可能同時(shí)存在，在布局上沒有必要讓兩套 icon 同時(shí)存在于界面。因此使用切換式，利用鼠標(biāo)對圖表的點(diǎn)擊、失焦可以靈活切換兩套使用場景。

2. 交疊式：不同入口內(nèi)容共用同一區(qū)域

問題分析：圖1是用戶在 Dataphin 中所創(chuàng)建的一張邏輯表，我們需要保證用戶在屏幕內(nèi)盡可能多的獲取信息，因此邏輯表中的空間利用就顯得很重要。在原有交互中，我們?yōu)橛脩籼峁┝怂阉鞴δ埽瑫r(shí)我們也在思考有沒有更優(yōu)的信息布局方案，可以為用戶展示更多的數(shù)據(jù)。

解決方法：在圖2中，我們需要在頂部區(qū)域?qū)ふ遗c用戶搜索操作不重合的場景，并把它們重疊起來。這里我用到交疊式的思路，即將搜索框收起來，只在頂部保留搜索入口，這樣在布局上就可以讓搜索與標(biāo)題交疊使用同一塊區(qū)域，優(yōu)化了布局。

3. 衣柜式：在原有入口上擴(kuò)展出更多信息

問題分析：在下圖中，側(cè)邊導(dǎo)航的信息過多，壓縮了創(chuàng)作區(qū)域，我們需要為導(dǎo)航「瘦瘦身」。

解決方法：通過用戶調(diào)研，我們發(fā)現(xiàn)導(dǎo)航的名稱對于新用戶來說很有必要，但隨著用戶對產(chǎn)品的逐漸熟悉，名稱重要性漸漸下降。我們需要通過動(dòng)效，找到合理的展示形式，來兼顧新老用戶的使用需求。

4. 設(shè)計(jì)的價(jià)值

通過動(dòng)效優(yōu)化信息布局，既保證了單位面積內(nèi)盡可能多的展示有效信息，又避免了信息過載帶來的干擾與閱讀疲勞，使得用戶每次只需要專注眼前的使用場景，提高了獲取數(shù)據(jù)的效率，這便是視覺設(shè)計(jì)師在項(xiàng)目中的價(jià)值。

路徑梳理

1. 層級(jí)路徑梳理：解釋類目之間的層級(jí)嵌套關(guān)系

問題分析：在 Dataphin 中一共包含了80多個(gè)功能點(diǎn)，我們將這些功能點(diǎn)梳理歸納成5個(gè)大類目和20個(gè)子類目。因此我們既希望用戶能明確每個(gè)類目下包含的子類目，又希望用戶在選中子類目的同時(shí)，也能明確感知自己處在哪個(gè)大類目下。

下圖中，用戶從首頁切換到數(shù)據(jù)資產(chǎn)版圖，我們想要讓用戶明確信息的嵌套層級(jí)，靜態(tài)的思維只能用雙Tab 形式展現(xiàn)。雖然解釋了層級(jí)關(guān)系，但也使得導(dǎo)航高度過高，壓縮內(nèi)容區(qū)域，加之案例中的資產(chǎn)版圖本身還包含三個(gè)子類目，于是，同一個(gè)頁面出現(xiàn)了三層 Tab。

解決方法：將嵌套路徑通過動(dòng)效的方式展現(xiàn)，運(yùn)動(dòng)軌跡可以暗示用戶子類目從哪里展開，其余類目被收到了哪里，用動(dòng)效的方式解釋了層級(jí)嵌套路徑。明確了層級(jí)嵌套關(guān)系，節(jié)約了為解釋嵌套路徑而鋪展出的信息所浪費(fèi)的頁面空間。

2. 操作路徑梳理：解釋操作流程的遞進(jìn)關(guān)系

在 Dataphin 中，用戶在創(chuàng)建邏輯表之前，會(huì)經(jīng)過一系列繁瑣的配置工作，如下圖中，用戶需要經(jīng)過「定義維度」-「定義主鍵&來源邏輯」-「定義層級(jí)」三個(gè)步驟。由于操作流程復(fù)雜，我們?yōu)橛脩粼O(shè)計(jì)了鉛筆線動(dòng)效，讓用戶時(shí)刻明確自己操作所處的位置，也方便回退操作。

3. 設(shè)計(jì)的價(jià)值

通過動(dòng)效梳理路徑，使得B端產(chǎn)品復(fù)雜的產(chǎn)品邏輯更為清晰，降低用戶的理解成本，縮短因查找路徑浪費(fèi)的時(shí)間，提升工作效率。同時(shí)，將操作路徑巧妙地隱藏在運(yùn)動(dòng)路徑當(dāng)中，可以節(jié)約為了展示路徑關(guān)系而浪費(fèi)的頁面空間。

提升效率

1. 借位式：盡可能多的展示信息，縮短操作路徑

問題分析：在 QuickBI 儀表板中，用戶需要導(dǎo)入已有的數(shù)據(jù)集以配置圖表內(nèi)容。數(shù)據(jù)集由用戶自行創(chuàng)建，一般來說，B端產(chǎn)品用戶文件命名比較偏長，正常情況下下拉框很難直接把名稱顯示完全，用戶還需要將鼠標(biāo)hover 到名稱上才能查看完整的名稱，操作路徑被拉長了。

解決方法：我們在側(cè)邊欄展開的一瞬間向兩側(cè)借一部分空間，使得名稱獲得了更多展示空間。盡可能多的展示信息，縮短操作路徑，提率。

2. 響應(yīng)式：每一步操作都有回應(yīng)，引導(dǎo)式的體驗(yàn)

問題分析：在 QuickBI 儀表板中，用戶創(chuàng)建圖表的操作為，先拖動(dòng)字段進(jìn)入對應(yīng)軸區(qū)，軸區(qū)便能讀取字段內(nèi)的信息并生成數(shù)據(jù)可視化。這一所見即所得的操作對老用戶而言是的，但對于新用戶而言認(rèn)知成本卻有些高。

設(shè)計(jì)思路：我們需要通過響應(yīng)式的設(shè)計(jì)來引導(dǎo)用戶學(xué)會(huì)這樣一個(gè)操作。首先，用戶的鼠標(biāo)滑過字段，字段會(huì)高亮響應(yīng)，提示用戶此處可點(diǎn)擊，從而吸引用戶學(xué)會(huì)點(diǎn)擊拖動(dòng)字段。接下來，我們通過軸區(qū)內(nèi)的文字提示，告訴用戶字段可以被拖入該軸區(qū)。用戶將字段拖入軸區(qū)的時(shí)候，對應(yīng)的軸區(qū)會(huì)高亮響應(yīng)告訴用戶字段可以被拖入軸區(qū)，同時(shí)字段會(huì)根據(jù)拖入路徑是否正確給出響應(yīng)。如果正確，字段會(huì)劃入軸區(qū)；如果錯(cuò)誤，會(huì)給出錯(cuò)誤提示；如果用戶執(zhí)意操作，字段會(huì)彈回原處。這樣我便構(gòu)建了一套完整的響應(yīng)流程。通過層層響應(yīng)的方式，減少用戶在每一步操作上的困惑時(shí)間，幫助用戶快速掌握這一操作手法，提升工作效率。

3. 元素聯(lián)動(dòng)：強(qiáng)化元素間的關(guān)聯(lián)關(guān)系

工具型產(chǎn)品中很多操作是相互關(guān)聯(lián)的，而且這樣的關(guān)聯(lián)關(guān)系通常是細(xì)微的，因此需要我們通過動(dòng)效強(qiáng)化元素之間的關(guān)聯(lián)關(guān)系。案例中圖表的每一列指標(biāo)可以自由配置，通過微動(dòng)效，讓用戶一眼就能找到新增的指標(biāo)，提升操作效率。（蘋果在新版的 Mac 系統(tǒng)中也有采用類似的設(shè)計(jì)，體驗(yàn)很棒）

4. 框架聯(lián)動(dòng)：強(qiáng)化框架層面的關(guān)聯(lián)關(guān)系

聯(lián)動(dòng)關(guān)系在框架層面也同樣適用，比如導(dǎo)航區(qū)域與創(chuàng)作區(qū)域之間就存在拉伸聯(lián)動(dòng)。這樣的動(dòng)效前提，建立一整套元素的適配規(guī)范，便于開發(fā)與團(tuán)隊(duì)協(xié)作。這個(gè)過程會(huì)很繁瑣，也是B端產(chǎn)品看不見的巨大工作量。

5. 設(shè)計(jì)的價(jià)值

每一個(gè)微小細(xì)節(jié)的打磨才能匯聚成的用戶體驗(yàn)。提升效率的點(diǎn)小而且零散，總結(jié)起來即是用戶的操作是強(qiáng)反饋的，從而增加用戶嘗試的信心；用戶的操作是有引導(dǎo)性的，即增加用戶繼續(xù)探索的信心；用戶的操作路徑是盡可能被縮短的，以節(jié)約時(shí)間。滿足這三點(diǎn)均可被看作是設(shè)計(jì)在提升效率方面的價(jià)值。

概念物化

1. 視效運(yùn)用：運(yùn)用視覺設(shè)計(jì)的能力，物化抽象的概念

問題分析：QuickBI 中有一個(gè)叫「創(chuàng)作區(qū)」的模塊，是用來介紹 QuickBI 產(chǎn)品能力的。我們需要在這個(gè)區(qū)域向用戶展示 QuickBI 所具備的能力與工作流程。由于 QuickBI 是面向行業(yè)分析師的 BI工具，其所要傳達(dá)的概念對于新用戶來說比較生澀復(fù)雜，這就需要我們在產(chǎn)品流程展示設(shè)計(jì)上盡可能簡單易懂。

下圖是1.0版本中的效果，其對流程的設(shè)計(jì)僅停留在圖形的堆砌，對業(yè)務(wù)的表述不夠清晰，也就很難向用戶傳遞我們的產(chǎn)品價(jià)值。

那我們來看看視覺設(shè)計(jì)是如何物化抽象的概念的。

首先我梳理出 QuickBI 工作的四個(gè)步驟：獲取數(shù)據(jù)、創(chuàng)建數(shù)據(jù)集、數(shù)據(jù)分析、數(shù)據(jù)展示。

接下來我們思考一下，當(dāng)我們需要對某人講述一個(gè)很復(fù)雜的概念的時(shí)候，我們通常會(huì)打個(gè)比方。那么我接下來要做的，就是為這套抽象的概念「打個(gè)比方」，因此我要為它們構(gòu)建一個(gè)有故事性的場景，那么這四個(gè)步驟應(yīng)該是某種靜止且持續(xù)運(yùn)轉(zhuǎn)的工廠，它們之間需要某些動(dòng)態(tài)的介質(zhì)將其串聯(lián)起來。

于是我進(jìn)一步挖掘視覺樣式，構(gòu)建出了場景原型圖。

進(jìn)一步完善視覺效果，得到了最終的成品：零散的代碼被收集車間收集，產(chǎn)出數(shù)據(jù)表進(jìn)入加工工廠，工廠將其加工成數(shù)據(jù)集，運(yùn)輸進(jìn)分析臺(tái)，分析臺(tái)通過「儀表板、電子表格、數(shù)據(jù)全屏」三種方式對數(shù)據(jù)進(jìn)行可視化分析，最后將分析結(jié)果通過數(shù)據(jù)門戶和郵件訂閱的方式對外分享。

2. 設(shè)計(jì)的價(jià)值

通過動(dòng)效設(shè)計(jì)，將抽象的概念具象化，將復(fù)雜的流程簡單化，大大降低了新用戶的學(xué)習(xí)成本，使之可以快速上手。

最后，我將我的動(dòng)效設(shè)計(jì)方法沉淀成一套以方盒為載體的方法論——方盒理論：「置身于三維空間下，信息的體量是無窮的，我們需要為其尋找合適的載體，在無限的信息體量和有限的用戶瀏覽范圍之間求得平衡。即讓用戶看到全部創(chuàng)作中他最想看到的那一面。」這即是我所構(gòu)建的以六面方盒為基礎(chǔ)的信息載體，并為我的一切動(dòng)效解決方案提供了理論支點(diǎn)。

B端產(chǎn)品并非大家印象中那樣的索然無味，其中有很多體驗(yàn)是值得深挖的。動(dòng)效僅僅是其中的一個(gè)層面。隨著近幾年B端領(lǐng)域功能點(diǎn)逐步完善，用戶對體驗(yàn)提出了更高的要求，B端產(chǎn)品的體驗(yàn)設(shè)計(jì)需求也會(huì)漸漸升溫，也希望有更多這個(gè)領(lǐng)域的優(yōu)秀設(shè)計(jì)師能和我做朋友。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。