B端市場的春天，設計層該有哪些轉變，本篇用實戰一一爲你闡述。

近來，各大公司業務從 C 端到 B 端的轉型頗有些「農村包圍城市」的戰術。一來 C 端產品市場日趨飽和，而 B 端市場的開發仍是冰山一角；二來用戶早已被各類 C 端產品調教得非常成熟，無需花大把經歷來培養用戶習慣。簡而言之，To C（Customer）還是To B（Business）都是To P（People），P 端行爲被養成了，B 端的到來則水到渠成。

本篇以途牛商旅（專爲企業打造的差旅APP）爲例，分享由 C 到 B 設計層的轉變。

思維模式

流量思維：黑話「舔式」設計，即引導用戶像玩喫雞遊戲一樣舔遍每個角落，C 端產品最常見的思維模式。

效率思維：很好理解，用戶目標明確，設計儘量做到不干擾不打擾。

舉例1：途牛主APP登錄VS途牛商旅登錄

在B端，個人賬號往往是企業授予，登錄途徑單一化。所以我們可以巧用界面留白位置來保持鍵盤始終喚起狀態──減少步驟，一頁只做一件事。

終極理想效果：識別手機號一鍵登錄，因運營商限制暫未覆蓋。

舉例2：商旅首頁原型設計

我們一共出了 3 版原型大方向：

• 方案1：中規中矩的主次層級佈局；
• 方案2：類 Material Design，塊狀錯落佈局；
• 方案3：功能二級入口直接外露 Tab 形式佈局。

當時從設計角度我們最推崇的是方案B，最大程度的保留了設計感；而方案C看上去操作路徑最短也是個不錯的選擇。

這時，我們用思維模式來印證，答案顯而易見：設計目的是爲了用戶更高效完成操作，不是爲了炫技，更不是想當然的操作。方案A的平白直敘最終當選。

設計思維模式的變化離不開業務的核心的變化：

ToC 的盈利來源有很多種：商品售賣、情景化營銷、廣告位、資源置換等，所以在頁面佈局上多采用一專多能式（一個主要內容，多個關聯入口）。ToB 產品本身往往就是一種商品：企業付費購買產品從而達到讓工作效率提高、管理便捷、業務提升等目的，如釘釘、OA、數據雲，所以設計目標是如何讓用戶以最短路徑走完此流程。

用戶分析方法

ToC 產品通常面對的是特定的一類人羣，進行分析此類人羣的年齡、興趣愛好等人文維度的分析。

ToB 產品的用戶分析與其說是對個人分析，不如說是對企業的分析，如企業所屬行業、企業層級架構、管理層訴求、終端層訴求等。

我們可以較容易的獲取 C 端用戶畫像，因爲我們自身或者所熟悉的人都在扮演着 C 端的角色，也就意味着設計過程中也很容易進行角色代入。而 B 端用戶畫像的獲取往往艱難得多，最快捷的方式就是和公司的業務層交流，業務部門是最直接與客戶打交道的，他們熟知大量的典型客戶案例，可以幫助我們快速高效的描繪出用戶畫像。

由於我們自身與 B 端用戶的相剝離性，用戶畫像的作用顯得尤爲關鍵，可以時刻提醒我們是在爲誰做設計，每一個關鍵訴求都在產品設計中有對應的抓手。

下文，我們將從品牌感、降噪設計、輕擬物、縮短體驗路徑和人性化設計分別闡述設計抓手下的解決方案。

品牌感

1. 顏色

作爲獨立子 B2B 子品牌，我們賦予了他商務藍作爲主色調，輔助色的靈感來源是路牌，在路上一眼望去非常醒目而不突兀。同樣，綠色也是途牛色，與品牌背書耦合。

2. logo

延續途牛 logo 外形，在保留識別度的基礎上使用圓切使其更精準簡練；將飛機飛行軌跡與牛臉弧度進行融合，最終經過多方投票選用了更有張力的剪影飛機造型。

縮短體驗路徑

前面說過 B 端產品的成型是多維的，決策層與管理層都會對終端層的操作產生直接影響。

我們來看看用戶使用最高頻次的預訂流程和查看行程：

預訂會被「申請單」、「差旅標準」等中斷；而「查看行程」的操作路徑又極爲繁瑣。

優化後：

• 我們對用戶有無公務出行做了預判斷：在有公務出行時，優先彈出申請單，申請單自動帶出符合要求的商品列表（機票、酒店等），用戶篩選後可以一鍵下單；無公務出行時正常瀏覽篩選下單。
• 將「訂單詳情」及「差旅事項」整合成「行程」一欄，填補了用戶下單後出行前的空白，也爲 APP 增加了粘性。

1. 交互流程

在交互流程設計上，我們也是花心思的。日期選擇，彈層而不是全屏，利用背板的伸縮不間斷頁面操作，沉浸式完成所有步驟。

降噪設計

冗雜的表單頁離不開降噪設計，和縮短路徑相輔相成達到 1+1>2 的絲滑體驗。

1. 輕擬物

降噪不意味着只是減法，部分組件擬物化也是不錯的想法。貼近生活場景的設計可以舒緩程序化頁面的壓迫感，擬物元素與表單的穿插交互更能帶來層層推進的愉悅體驗。

同樣採用擬物手法的還有審批單，無紙登機，授權列表：

值得注意的一點是擬物的用法在界面設計中太多反而喧賓奪主，恰到好處的同構或替換是點睛之筆。

人性化設計

1. 容錯設計

錯誤消息會帶給用戶很多壓力，讓用戶感覺他們搞砸了或者沒有完成任務。核心邏輯一般是必須要全部成功的，但是有些非核心邏輯，失敗了也並不打緊，或者成功一部分即可。這個時候要把這些非核心邏輯和核心邏輯之間進行隔離。

原理來源於船舶隔板設計，一個隔板內漏水不至於整條船沉沒。

2. 錯誤補償

原理同樣來源於隔板設計，對於錯誤的步驟有合理的引導，使其迴歸正確。

3. 情感轉移

當錯誤無法挽回，還可以通過視覺對錯誤的場景進行情感層的轉移。

4. 智能化設計

按理說從「隔板設計」→「錯誤補償」→「情感慰藉」這套連環招數我們已經讓用戶體驗暢通無阻。但我們並不滿足於用戶的主動寵幸，開始主動出擊發掘用戶需求，以下這款途牛智能化機器人──途牛小智開始營業。

通過大數據和歷史記錄對用戶行爲進行預判斷，精準推送出用戶潛在需求，並對差旅進行日程管理。

最後

最後國際慣例上一波設計圖吧。

B 端設計師在設計過程中常常感到不甘與委屈：各種炫技手法均無用武之地，長期打交道的都是無盡的表單……

記得《後會無期》有一句話：「喜歡是放肆，而愛是剋制」。

保持熱愛設計的初心，剋制而有招數的表達──我相信塵埃裏也能開出花兒來。

歡迎關注「途牛UED」公衆號：

相關文章