編輯導(dǎo)語(yǔ)：B端想必大家都聽(tīng)過(guò)，那你了解B端產(chǎn)品運(yùn)營(yíng)視覺(jué)設(shè)計(jì)嗎？本文作者通過(guò)參加百度負(fù)責(zé)B端產(chǎn)品運(yùn)營(yíng)設(shè)計(jì)的高錦龍的工作經(jīng)驗(yàn)分享活動(dòng)，來(lái)為大家分享一些干貨，希望能夠給B端產(chǎn)品的設(shè)計(jì)師們一些啟發(fā)。

近兩年越來(lái)越的學(xué)員從事B端產(chǎn)品設(shè)計(jì)，2020年的就業(yè)情況也顯示，公司比較青睞有B端產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)的學(xué)員。

但市面上關(guān)于B端產(chǎn)品設(shè)計(jì)方向的文章及視頻內(nèi)容較為貧瘠，導(dǎo)致很多學(xué)員“談B色變”，所以本周且曼設(shè)計(jì)學(xué)院請(qǐng)來(lái)了百度負(fù)責(zé)B端產(chǎn)品運(yùn)營(yíng)設(shè)計(jì)的高錦龍給大家分享他的實(shí)際工作經(jīng)驗(yàn)。

活動(dòng)非常成功，這里也分享一些這次的干貨，希望給更多設(shè)計(jì)師帶來(lái)啟發(fā)。

一、什么是B端產(chǎn)品

B端產(chǎn)品已經(jīng)被很多設(shè)計(jì)師掛在嘴邊，但是問(wèn)其B端產(chǎn)品到底啥意思，很多人都支支吾吾說(shuō)不出個(gè)所以然。在百度里查到的定義如下：

Business：通常為企業(yè)或商家為工作或商業(yè)目的而使用的系統(tǒng)型軟件、工具或平臺(tái)。解決客戶在辦公或經(jīng)營(yíng)過(guò)程中遇到的問(wèn)題，為客戶提高效率、增加收入、減少成本，一句話概括就是“為客戶賺的更多，省的更多”。

市面上常見(jiàn)的B端產(chǎn)品按部署方式分為四類(lèi)：

1. 本地部署
2. IaaS
3. PaaS
4. SaaS

這里可以解釋為，B端產(chǎn)品由基礎(chǔ)設(shè)施層、平臺(tái)層和軟件層三層構(gòu)成。

根據(jù)提供部署的層面分為本地部署、IaaS、PaaS、SaaS，這幾個(gè)名稱(chēng)對(duì)應(yīng)的服務(wù)如上圖所示。為了方便大家理解，舉個(gè)例子：

比如這個(gè)B端產(chǎn)品是一個(gè)披薩：

• 本地部署=你完全自己做：你需要面粉等基礎(chǔ)食材，學(xué)習(xí)披薩的制作方法；購(gòu)買(mǎi)烤箱；此外還要有個(gè)餐具才能吃到披薩；比較費(fèi)事費(fèi)錢(qián)費(fèi)力。
• IaaS=速凍披薩：你從披薩店里買(mǎi)回半成品，不需要準(zhǔn)備食材和學(xué)習(xí)做法備；回家烘焙就好了，在自己的餐桌上吃。
• PaaS=披薩外賣(mài)：你打電話叫外賣(mài)，不需要準(zhǔn)備食材和學(xué)習(xí)做法備，也不需要在家烘焙，你負(fù)責(zé)在自己的餐桌上吃。
• SaaS=披薩店堂食：你什么都不需要準(zhǔn)備，連餐桌也是披薩店的，啥都有了，這時(shí)候你就負(fù)責(zé)吃就行了。

市面上比較常見(jiàn)的B端產(chǎn)品，是PaaS（Platform as a Service）和SaaS（Software as a Service）。

百度的愛(ài)番番提供的服務(wù)也分為PaaS端和SaaS端，對(duì)應(yīng)的產(chǎn)品如上圖所示。

作為運(yùn)營(yíng)設(shè)計(jì)師，高錦龍的日常工作內(nèi)容覆蓋了彈窗、引導(dǎo)、banner、空狀態(tài)、開(kāi)屏、icon及DM頁(yè)。

針對(duì)于不同類(lèi)型的B端產(chǎn)品，運(yùn)營(yíng)設(shè)計(jì)的側(cè)重點(diǎn)不同，下面分享下實(shí)際工作中這兩類(lèi)產(chǎn)品的運(yùn)營(yíng)設(shè)計(jì)方案。

二、Paas產(chǎn)品視覺(jué)產(chǎn)品復(fù)盤(pán)

這個(gè)項(xiàng)目中接到的需求是，要設(shè)計(jì)一個(gè)能應(yīng)用于愛(ài)番番PaaS官網(wǎng)和企業(yè)大腦的主視覺(jué)，同時(shí)也可以應(yīng)用于開(kāi)發(fā)分發(fā)應(yīng)用功能。

提取關(guān)鍵詞的思路是：

1. 應(yīng)用于愛(ài)番番的PaaS官網(wǎng)，體現(xiàn)平臺(tái)即服務(wù)，主視覺(jué)需要突出品牌品質(zhì)感；
2. 企業(yè)大腦是人工智能產(chǎn)品，主視覺(jué)需要突出互聯(lián)科技感；
3. 應(yīng)用開(kāi)發(fā)分發(fā)功能，需要引導(dǎo)用戶下載及試用，主視覺(jué)需要體現(xiàn)產(chǎn)品的安全、穩(wěn)定和易用的特性。

確定好關(guān)鍵詞后，龍龍做出了以下視覺(jué)稿（動(dòng)態(tài)稿，但是這里只能靜態(tài)呈現(xiàn)）：

接下來(lái)是圍繞這個(gè)主視覺(jué)進(jìn)行一系列延展：

三、SaaS產(chǎn)品視覺(jué)產(chǎn)品復(fù)盤(pán)

這個(gè)項(xiàng)目有別于PaaS產(chǎn)品，雖然都是愛(ài)番番的品牌，但是這個(gè)項(xiàng)目需要突出的視覺(jué)重點(diǎn)略有不同。

需求是要設(shè)計(jì)一個(gè)能應(yīng)用于愛(ài)番番應(yīng)用市場(chǎng)平臺(tái)的主視覺(jué)，突出簡(jiǎn)單、高效；給客戶傳遞親和力，體現(xiàn)產(chǎn)品商業(yè)特征。

提取關(guān)鍵詞的思路是：

1. 愛(ài)番番應(yīng)用市場(chǎng)平臺(tái)屬于SaaS產(chǎn)品，體現(xiàn)軟件即服務(wù)，主視覺(jué)需要突出服務(wù)性
2. 需要突出產(chǎn)品簡(jiǎn)單，高效的特征
3. 給用戶親和力，要使用同理心設(shè)計(jì)法則，還原客戶真實(shí)使用場(chǎng)景

確定好關(guān)鍵詞后，龍龍做出了以下視覺(jué)稿及相關(guān)延展：

可以看到雖然是同一品牌，但是PaaS和SaaS的側(cè)重點(diǎn)不同，PaaS要突出品牌，而SaaS要體現(xiàn)功能性。

其實(shí)在分享中，龍龍介紹了愛(ài)番番PaaS端的第一稿是沒(méi)有通過(guò)的，也是視覺(jué)非常棒的設(shè)計(jì)，這里為了避免混淆視聽(tīng)，就沒(méi)展示出來(lái)，感興趣的小伙伴，可以在文章地步掃碼聽(tīng)取分享的完整版。

四、愛(ài)番番官網(wǎng)改版復(fù)盤(pán)

這個(gè)項(xiàng)目涵蓋了B端產(chǎn)品實(shí)際設(shè)計(jì)流程，非常具有借鑒意義。

首先也是需要競(jìng)品分析，龍龍主要從產(chǎn)品結(jié)構(gòu)、產(chǎn)品功能、交互及視覺(jué)等幾個(gè)方向?qū)κ忻嫱?lèi)競(jìng)品進(jìn)行分析：

這里省去了繁雜的競(jìng)品分析過(guò)程，如果大家感興趣可以留言，后續(xù)可以專(zhuān)門(mén)出一篇競(jìng)品分析相關(guān)文章。分析后的結(jié)果如下圖所示：

最終確認(rèn)設(shè)計(jì)策略是：愛(ài)番番官網(wǎng)以扁平、2.5D或3D為主視覺(jué)，顏色以產(chǎn)品Logo色為主，需要考慮跟市面上產(chǎn)品拉開(kāi)差異性。

接下來(lái)視覺(jué)嘗試初期，試用了今年很流行的輕擬態(tài)和扁平風(fēng)，而這兩個(gè)風(fēng)格在手繪稿初級(jí)階段就夭折了。原因如下所示：

3D風(fēng)格的嘗試非常成功，但是在軟件層有存在一定的風(fēng)險(xiǎn)，為了避免設(shè)計(jì)風(fēng)險(xiǎn)，龍龍決定采用跟3D類(lèi)似的2.5D風(fēng)格，從而提高整個(gè)團(tuán)隊(duì)的效率。

設(shè)計(jì)稿評(píng)審階段如下圖所示，這里細(xì)心的小伙伴會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，愛(ài)番番的品牌色是紅色，這里卻用了一個(gè)藍(lán)色，冷色和暖色同時(shí)使用的原因是什么呢？

太多的紅色會(huì)給人緊迫感，而愛(ài)番番想給客戶傳遞的是嚴(yán)謹(jǐn)?shù)漠a(chǎn)品特征，這里引入的冷色正好可以中和暖色帶來(lái)的這種不穩(wěn)定感。

此外，百度的品牌色為藍(lán)色，愛(ài)番番作為百度旗下產(chǎn)品，用藍(lán)色也更能突顯產(chǎn)品間關(guān)聯(lián)性。

確定好風(fēng)格后龍龍做的幾版官網(wǎng)的主banner，但這三稿都沒(méi)有過(guò)，原因如下圖所示：

發(fā)現(xiàn)問(wèn)題，修正問(wèn)題，修改后的主視覺(jué)如下圖所示（動(dòng)態(tài)稿，這里只能靜態(tài)呈現(xiàn)）：

無(wú)疑，這是一個(gè)非常貼近需求的設(shè)計(jì)結(jié)果，既能體現(xiàn)愛(ài)番番品牌調(diào)性、產(chǎn)品特性，也能跟同類(lèi)產(chǎn)品拉開(kāi)顯著的差異。這個(gè)主視覺(jué)基礎(chǔ)上的延展如下圖所示：

本文由 @Doria 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。