近兩年越來越的學員從事B端產品設計，2020年的就業情況也顯示，公司比較青睞有B端產品設計經驗的學員。但市面上關於B端產品設計方向的文章及視頻內容較爲貧瘠。導致很多學員“談B色變”，所以本週且曼設計學院請來了百度負責B端產品運營設計的高錦龍給大家分享他的實際工作經驗。
活動非常成功，這裏也分享一些這次的乾貨，希望給更多設計師帶來啓發。
1⃣️ 什麼是B端產品
B端產品已經被很多設計師掛在嘴邊，但是問其B端產品到底啥意思，很多人都支支吾吾說不出個所以然。在百度裏查到的定義如下：
「Business：通常爲企業或商家爲工作或商業目的而使用的系統型軟件、工具或平臺。解決客戶在辦公或經營過程中遇到的問題，爲客戶提高效率、增加收入、減少成本，一句話概括就是“爲客戶賺的更多，省的更多”。」
市面上常見的B端產品按部署方式分爲四類：本地部署、LaaS、PaaS、SaaS。
這裏可以解釋爲，B端產品由基礎設施層、平臺層和軟件層三層構成。根據提供部署的層面分爲本地部署、LaaS、PaaS、SaaS。這幾個名稱對應的服務如上圖所示。爲了方便大家理解，這裏舉個例子：
比如這個B端產品是一個披薩
本地部署=你完全自己做
你需要麪粉等基礎食材，學習披薩的製作方法；購買烤箱；此外還要有個餐具才能喫到披薩；比較費事費錢費力。
LaaS=速凍披薩
你從披薩店裏買回半成品，不需要準備食材和學習做法備；回家烘焙就好了，在自己的餐桌上喫。
PaaS=披薩外賣
你打電話叫外賣，不需要準備食材和學習做法備，也不需要在家烘焙，你負責在自己的餐桌上喫。
SaaS=披薩店堂食
你什麼都不需要準備，連餐桌也是披薩店的，啥都有了，這時候你就負責喫就行了。
市面上比較常見的B端產品是PaaS（Platform as a Service）和SaaS（Software as a Service）。
百度的愛番番提供的服務也分爲PaaS端和SaaS端，對應的產品如上圖所示。
作爲運營設計師，高錦龍的日常工作內容覆蓋了彈窗、引導、banner、空狀態、開屏、icon及DM頁。
針對於不同類型的B端產品，運營設計的側重點不同，下面分享下實際工作中這兩類產品的運營設計方案。
2⃣️ Paas產品視覺產品覆盤
這個項目中接到的需求是要設計一個能應用於【愛番番PaaS官網和企業大腦的主視覺，同時也可以應用於開發分發應用功能】。
提取關鍵詞的思路是：
1.應用於愛番番的PaaS官網，體現平臺即服務，主視覺需要突出品牌品質感
2.企業大腦是人工智能產品，主視覺需要突出互聯科技感
3.應用開發分發功能，需要引導用戶下載及試用，主視覺需要體現產品的安全、穩定和易用的特性
確定好關鍵詞後，龍龍做出了以下視覺稿（動態稿，但是這裏只能靜態呈現咯）
接下來是圍繞這個主視覺進行一系列延展。
3⃣️ Saas產品視覺產品覆盤
這個項目有別於PaaS產品，雖然都是愛番番的品牌，但是這個項目需要突出的視覺重點略有不同。需求是要設計一個能應用於【愛番番應用市場平臺的主視覺，突出簡單、高效；給客戶傳遞親和力，體現產品商業特徵】。
提取關鍵詞的思路是：
1.愛番番應用市場平臺屬於SaaS產品，體現軟件即服務，主視覺需要突出服務性
2.需要突出產品簡單，高效的特徵
3.給用戶親和力，要使用同理心設計法則，還原客戶真實使用場景
確定好關鍵詞後，龍龍做出了以下視覺稿及相關延展。
可以看到雖然是同一品牌，但是PaaS和SaaS的側重點不同，PaaS要突出品牌，而SaaS要體現功能性。其實在分享中，龍龍介紹了愛番番PaaS端的第一稿是沒有通過的，也是視覺非常棒的設計，這裏爲了避免混淆視聽，就沒展示出來，感興趣的小夥伴，可以在文章地步掃碼聽取分享的完整版。
4⃣️ 愛番番官網改版覆盤
這個項目涵蓋了B端產品實際設計流程，非常具有借鑑意義。
首先也是需要競品分析，龍龍主要從產品結構、產品功能、交互及視覺等幾個方向對市面同類競品進行分析。
這裏省去了繁雜的競品分析過程，如果大家感興趣可以留言，後續可以專門出一篇競品分析相關文章。分析後的結果如下圖所示。最終確認設計策略是：愛番番官網以扁平、2.5D或3D爲主視覺，顏色以產品Logo色爲主，需要考慮跟市面上產品拉開差異性。
接下來視覺嘗試初期，試用了今年很流行的輕擬態和扁平風，而這兩個風格在手繪稿初級階段就夭折了。原因如下所示，這裏就不贅述了。
3D風格的嘗試非常成功，但是在軟件層有存在一定的風險，爲了避免設計風險，龍龍決定採用跟3D類似的2.5D風格，從而提高整個團隊的效率。
設計稿評審階段如下圖所示，這裏細心的小夥伴會發現一個問題，愛番番的品牌色是紅色，這裏卻用了一個藍色，冷色和暖色同時使用的原因是什麼呢？
太多的紅色會給人緊迫感，而愛番番想給客戶傳遞的是嚴謹的產品特徵，這裏引入的冷色正好可以中和暖色帶來的這種不穩定感。此外，百度的品牌色爲藍色，愛番番作爲百度旗下產品，用藍色也更能突顯產品間關聯性。
確定好風格後龍龍做的幾版官網的主banner，但這三稿都沒有過，原因如下圖所示。
發現問題，修正問題，修改後的主視覺如下圖所示（動態稿，這裏只能靜態呈現）
無疑，這是一個非常貼近需求的設計結果，既能體現愛番番品牌調性、產品特性，也能跟同類產品拉開顯著的差異。這個主視覺基礎上的延展如下圖所示。
分享裏最令觀衆和我喫驚的是，大家看到的所有設計，無論靜態還是動態，都是龍龍一人使用PS完成的，大家都驚歎：跟大神其實差的是一個PS😁。
由於篇幅的限制，就介紹到這裏，大家如果對愛番番或者B端設計感興趣，可以通過以下渠道聯繫到龍龍。
如果想看分享的完整版可以掃描下方海報的二維碼，加入且曼設計學院知識星球。當然這裏還有更多的精彩等着你哦～
