起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識一文搞定所有B端產品運營視覺設計
編輯導語：B端想必大家都聽過，那你了解B端產品運營視覺設計嗎？本文作者通過參加百度負責B端產品運營設計的高錦龍的工作經驗分享活動，來為大家分享一些干貨，希望能夠給B端產品的設計師們一些啟發。
近兩年越來越的學員從事B端產品設計，2020年的就業情況也顯示，公司比較青睞有B端產品設計經驗的學員。
但市面上關于B端產品設計方向的文章及視頻內容較為貧瘠，導致很多學員“談B色變”，所以本周且曼設計學院請來了百度負責B端產品運營設計的高錦龍給大家分享他的實際工作經驗。
活動非常成功，這里也分享一些這次的干貨，希望給更多設計師帶來啟發。
一、什么是B端產品
B端產品已經被很多設計師掛在嘴邊，但是問其B端產品到底啥意思，很多人都支支吾吾說不出個所以然。在百度里查到的定義如下：
Business：通常為企業或商家為工作或商業目的而使用的系統型軟件、工具或平臺。解決客戶在辦公或經營過程中遇到的問題，為客戶提高效率、增加收入、減少成本，一句話概括就是“為客戶賺的更多，省的更多”。
市面上常見的B端產品按部署方式分為四類：
- 本地部署
- IaaS
- PaaS
- 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官網和企業大腦的主視覺，同時也可以應用于開發分發應用功能。
提取關鍵詞的思路是：
- 應用于愛番番的PaaS官網，體現平臺即服務，主視覺需要突出品牌品質感；
- 企業大腦是人工智能產品，主視覺需要突出互聯科技感；
- 應用開發分發功能，需要引導用戶下載及試用，主視覺需要體現產品的安全、穩定和易用的特性。
確定好關鍵詞后，龍龍做出了以下視覺稿（動態稿，但是這里只能靜態呈現）：
接下來是圍繞這個主視覺進行一系列延展：
三、SaaS產品視覺產品復盤
這個項目有別于PaaS產品，雖然都是愛番番的品牌，但是這個項目需要突出的視覺重點略有不同。
需求是要設計一個能應用于愛番番應用市場平臺的主視覺，突出簡單、高效；給客戶傳遞親和力，體現產品商業特征。
提取關鍵詞的思路是：
- 愛番番應用市場平臺屬于SaaS產品，體現軟件即服務，主視覺需要突出服務性
- 需要突出產品簡單，高效的特征
- 給用戶親和力，要使用同理心設計法則，還原客戶真實使用場景
確定好關鍵詞后，龍龍做出了以下視覺稿及相關延展：
可以看到雖然是同一品牌，但是PaaS和SaaS的側重點不同，PaaS要突出品牌，而SaaS要體現功能性。
其實在分享中，龍龍介紹了愛番番PaaS端的第一稿是沒有通過的，也是視覺非常棒的設計，這里為了避免混淆視聽，就沒展示出來，感興趣的小伙伴，可以在文章地步掃碼聽取分享的完整版。
四、愛番番官網改版復盤
這個項目涵蓋了B端產品實際設計流程，非常具有借鑒意義。
首先也是需要競品分析，龍龍主要從產品結構、產品功能、交互及視覺等幾個方向對市面同類競品進行分析：
這里省去了繁雜的競品分析過程，如果大家感興趣可以留言，后續可以專門出一篇競品分析相關文章。分析后的結果如下圖所示：
最終確認設計策略是：愛番番官網以扁平、2.5D或3D為主視覺，顏色以產品Logo色為主，需要考慮跟市面上產品拉開差異性。
接下來視覺嘗試初期，試用了今年很流行的輕擬態和扁平風，而這兩個風格在手繪稿初級階段就夭折了。原因如下所示：
3D風格的嘗試非常成功，但是在軟件層有存在一定的風險，為了避免設計風險，龍龍決定采用跟3D類似的2.5D風格，從而提高整個團隊的效率。
設計稿評審階段如下圖所示，這里細心的小伙伴會發現一個問題，愛番番的品牌色是紅色，這里卻用了一個藍色，冷色和暖色同時使用的原因是什么呢？
太多的紅色會給人緊迫感，而愛番番想給客戶傳遞的是嚴謹的產品特征，這里引入的冷色正好可以中和暖色帶來的這種不穩定感。
此外，百度的品牌色為藍色，愛番番作為百度旗下產品，用藍色也更能突顯產品間關聯性。
確定好風格后龍龍做的幾版官網的主banner，但這三稿都沒有過，原因如下圖所示：
發現問題，修正問題，修改后的主視覺如下圖所示（動態稿，這里只能靜態呈現）：
無疑，這是一個非常貼近需求的設計結果，既能體現愛番番品牌調性、產品特性，也能跟同類產品拉開顯著的差異。這個主視覺基礎上的延展如下圖所示：
本文由 @Doria 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
- 目前還沒評論，等你發揮！
