編輯導語：B端想必大家都聽過，那你了解B端產品運營視覺設計嗎？本文作者通過參加百度負責B端產品運營設計的高錦龍的工作經驗分享活動，來為大家分享一些干貨，希望能夠給B端產品的設計師們一些啟發。

近兩年越來越的學員從事B端產品設計，2020年的就業情況也顯示，公司比較青睞有B端產品設計經驗的學員。

但市面上關于B端產品設計方向的文章及視頻內容較為貧瘠，導致很多學員“談B色變”，所以本周且曼設計學院請來了百度負責B端產品運營設計的高錦龍給大家分享他的實際工作經驗。

活動非常成功，這里也分享一些這次的干貨，希望給更多設計師帶來啟發。

一、什么是B端產品

B端產品已經被很多設計師掛在嘴邊，但是問其B端產品到底啥意思，很多人都支支吾吾說不出個所以然。在百度里查到的定義如下：

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

市面上常見的B端產品按部署方式分為四類：

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

這里可以解釋為，B端產品由基礎設施層、平臺層和軟件層三層構成。

根據提供部署的層面分為本地部署、IaaS、PaaS、SaaS，這幾個名稱對應的服務如上圖所示。為了方便大家理解，舉個例子：

比如這個B端產品是一個披薩：

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

市面上比較常見的B端產品，是PaaS（Platform as a Service）和SaaS（Software as a Service）。

百度的愛番番提供的服務也分為PaaS端和SaaS端，對應的產品如上圖所示。

作為運營設計師，高錦龍的日常工作內容覆蓋了彈窗、引導、banner、空狀態、開屏、icon及DM頁。

針對于不同類型的B端產品，運營設計的側重點不同，下面分享下實際工作中這兩類產品的運營設計方案。

二、Paas產品視覺產品復盤

這個項目中接到的需求是，要設計一個能應用于愛番番PaaS官網和企業大腦的主視覺，同時也可以應用于開發分發應用功能。

提取關鍵詞的思路是：

1. 應用于愛番番的PaaS官網，體現平臺即服務，主視覺需要突出品牌品質感；
2. 企業大腦是人工智能產品，主視覺需要突出互聯科技感；
3. 應用開發分發功能，需要引導用戶下載及試用，主視覺需要體現產品的安全、穩定和易用的特性。

確定好關鍵詞后，龍龍做出了以下視覺稿（動態稿，但是這里只能靜態呈現）：

接下來是圍繞這個主視覺進行一系列延展：

三、SaaS產品視覺產品復盤

這個項目有別于PaaS產品，雖然都是愛番番的品牌，但是這個項目需要突出的視覺重點略有不同。

需求是要設計一個能應用于愛番番應用市場平臺的主視覺，突出簡單、高效；給客戶傳遞親和力，體現產品商業特征。

提取關鍵詞的思路是：

1. 愛番番應用市場平臺屬于SaaS產品，體現軟件即服務，主視覺需要突出服務性
2. 需要突出產品簡單，高效的特征
3. 給用戶親和力，要使用同理心設計法則，還原客戶真實使用場景

確定好關鍵詞后，龍龍做出了以下視覺稿及相關延展：

可以看到雖然是同一品牌，但是PaaS和SaaS的側重點不同，PaaS要突出品牌，而SaaS要體現功能性。

其實在分享中，龍龍介紹了愛番番PaaS端的第一稿是沒有通過的，也是視覺非常棒的設計，這里為了避免混淆視聽，就沒展示出來，感興趣的小伙伴，可以在文章地步掃碼聽取分享的完整版。

四、愛番番官網改版復盤

這個項目涵蓋了B端產品實際設計流程，非常具有借鑒意義。

首先也是需要競品分析，龍龍主要從產品結構、產品功能、交互及視覺等幾個方向對市面同類競品進行分析：

這里省去了繁雜的競品分析過程，如果大家感興趣可以留言，后續可以專門出一篇競品分析相關文章。分析后的結果如下圖所示：

最終確認設計策略是：愛番番官網以扁平、2.5D或3D為主視覺，顏色以產品Logo色為主，需要考慮跟市面上產品拉開差異性。

接下來視覺嘗試初期，試用了今年很流行的輕擬態和扁平風，而這兩個風格在手繪稿初級階段就夭折了。原因如下所示：

3D風格的嘗試非常成功，但是在軟件層有存在一定的風險，為了避免設計風險，龍龍決定采用跟3D類似的2.5D風格，從而提高整個團隊的效率。

設計稿評審階段如下圖所示，這里細心的小伙伴會發現一個問題，愛番番的品牌色是紅色，這里卻用了一個藍色，冷色和暖色同時使用的原因是什么呢？

太多的紅色會給人緊迫感，而愛番番想給客戶傳遞的是嚴謹的產品特征，這里引入的冷色正好可以中和暖色帶來的這種不穩定感。

此外，百度的品牌色為藍色，愛番番作為百度旗下產品，用藍色也更能突顯產品間關聯性。

確定好風格后龍龍做的幾版官網的主banner，但這三稿都沒有過，原因如下圖所示：

發現問題，修正問題，修改后的主視覺如下圖所示（動態稿，這里只能靜態呈現）：

無疑，這是一個非常貼近需求的設計結果，既能體現愛番番品牌調性、產品特性，也能跟同類產品拉開顯著的差異。這個主視覺基礎上的延展如下圖所示：

本文由 @Doria 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。