保持熱愛設(shè)計(jì)的初心，克制而有招數(shù)的表達(dá)——我相信塵埃里也能開出花兒來。

近來，各大公司業(yè)務(wù)從C端到B端的轉(zhuǎn)型頗有些“農(nóng)村包圍城市”的戰(zhàn)術(shù)：一來C端產(chǎn)品市場日趨飽和，而B端市場的開發(fā)仍是冰山一角；二來用戶早已被各類C端產(chǎn)品調(diào)教得非常成熟，無需花大把經(jīng)歷來培養(yǎng)用戶習(xí)慣。簡而言之，To C（Customer）還是To B（Business）都是To P（People）,P端行為被養(yǎng)成了，B端的到來則水到渠成。

本篇以途牛商旅（專為企業(yè)打造的差旅APP）為例，分享由C到B設(shè)計(jì)層的轉(zhuǎn)變。

思維模式

（1）流量思維：黑話“舔式”設(shè)計(jì)，即引導(dǎo)用戶像玩吃雞游戲一樣舔遍每個角落，C端產(chǎn)品最常見思維模式。

（2）效率思維：很好理解，用戶目標(biāo)明確，設(shè)計(jì)盡量做到不干擾不打擾。

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

在B端，個人賬號往往是企業(yè)授予，登錄途徑單一化。

所以我們可以巧用界面留白位置來保持鍵盤始終喚起狀態(tài)——減少步驟，一頁只做一件事。

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

舉例2：商旅首頁原型設(shè)計(jì)

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

• 方案A：中規(guī)中矩的主次層級布局；
• 方案B：類Material Design，塊狀錯落布局；
• 方案C：功能二級入口直接外露Tab形式布局。

當(dāng)時(shí)從設(shè)計(jì)角度我們最推崇的是方案B：最大程度的保留了設(shè)計(jì)感；而方案C看上去操作路徑最短也是個不錯的選擇。

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

設(shè)計(jì)思維模式的變化離不開業(yè)務(wù)的核心的變化：

ToC的盈利來源有很多種：商品售賣、情景化營銷、廣告位、資源置換等，所以在頁面布局上多采用一專多能式（一個主要內(nèi)容，多個關(guān)聯(lián)入口）。

ToB產(chǎn)品本身往往就就是一種商品：企業(yè)付費(fèi)購買產(chǎn)品從而達(dá)到讓工作效率提高、管理便捷、業(yè)務(wù)提升等目的。如釘釘、OA、數(shù)據(jù)云，所以設(shè)計(jì)目標(biāo)是如何讓用戶以最短路徑走完此流程。

用戶分析方法

ToC產(chǎn)品通常面對的是特定的一類人群，進(jìn)行分析此類人群的年齡、興趣愛好等人文維度的分析。

ToB產(chǎn)品的用戶分析與其說是對個人分析，不如說是對企業(yè)的分析，如企業(yè)所屬行業(yè)、企業(yè)層級架構(gòu)、管理層訴求、終端層訴求等。

我們可以較容易的獲取C端用戶畫像，因?yàn)槲覀冏陨砘蛘咚煜さ娜硕荚诎缪葜鳦端的角色，也就意味著設(shè)計(jì)過程中也很容易進(jìn)行角色代入。而B端用戶畫像的獲取往往艱難得多，最快捷的方式就是和公司的業(yè)務(wù)層交流，業(yè)務(wù)部門是最直接與客戶打交道的，他們熟知大量的典型客戶案例，可以幫助我們快速高效的描繪出用戶畫像。

由于我們自身與B端用戶的相剝離性，用戶畫像的作用顯得尤為關(guān)鍵，可以時(shí)刻提醒我們是在為誰做設(shè)計(jì)，每一個關(guān)鍵訴求都在產(chǎn)品設(shè)計(jì)中有對應(yīng)的抓手。

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

品牌感

（1）顏色

作為獨(dú)立子B2B子品牌，我們賦予了他商務(wù)藍(lán)作為主色調(diào)，輔助色靈感的來源于路牌，在路上一眼望去非常醒目而不突兀。同樣，綠色也是途牛色，與品牌背書耦合。

（2）logo

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

縮短體驗(yàn)路徑

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

我們來看看用戶使用最高頻次的預(yù)訂流程和查看行程：預(yù)訂會被“申請單”、“差旅標(biāo)準(zhǔn)”等中斷；而“查看行程”的操作路徑又極為繁瑣。

優(yōu)化后：

1. 我們對用戶有無公務(wù)出行做了預(yù)判斷：在有公務(wù)出行時(shí)，優(yōu)先彈出申請單，申請單自動帶出符合要求的商品列表（機(jī)票、酒店等），用戶篩選后可以一鍵下單；無公務(wù)出行時(shí)正常瀏覽篩選下單。
2. 將“訂單詳情”及“差旅事項(xiàng)”整合成“行程”一欄，填補(bǔ)了用戶下單后出行前的空白，也為APP增加了粘性。

交互流程：

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

降噪設(shè)計(jì)

冗雜的表單頁離不開降噪設(shè)計(jì)，和縮短路徑相輔相成達(dá)到1+1>2的絲滑體驗(yàn)。

輕擬物：

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

同樣采用擬物手法的還有審批單，無紙登機(jī)，授權(quán)列表：

值得注意的一點(diǎn)是擬物的用法在界面設(shè)計(jì)中太多反而喧賓奪主，恰到好處的同構(gòu)或替換是點(diǎn)睛之筆。

人性化設(shè)計(jì)

容錯設(shè)計(jì)：

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

原理來源于船舶隔板設(shè)計(jì)，一個隔板內(nèi)漏水不至于整條船沉沒。

錯誤補(bǔ)償：

原理同樣來源于隔板設(shè)計(jì)，對于錯誤的步驟有合理的引導(dǎo)，使其回歸正確。

情感轉(zhuǎn)移：

當(dāng)錯誤無法挽回，還可以通過視覺對錯誤的場景進(jìn)行情感層的轉(zhuǎn)移。

智能化設(shè)計(jì)：

按理說從「隔板設(shè)計(jì)」→「錯誤補(bǔ)償」→「情感慰藉」這套連環(huán)招數(shù)我們已經(jīng)將用戶安排得明明白白體驗(yàn)暢通無阻。但我們并不滿足于用戶的主動寵幸，開始主動出擊發(fā)掘用戶需求，以下這款途牛智能化機(jī)器人——途牛小智被迫開始營業(yè)。

通過大數(shù)據(jù)和歷史記錄對用戶行為進(jìn)行預(yù)判斷，精準(zhǔn)推送出用戶潛在需求，并對差旅進(jìn)行日程管理。

最后

最后國際慣例上一波設(shè)計(jì)圖吧~

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

記得《后會無期》有一句話：“喜歡是放肆，而愛是克制”。

保持熱愛設(shè)計(jì)的初心，克制而有招數(shù)的表達(dá)——我相信塵埃里也能開出花兒來：)

作者：Susan說，公眾號：途牛用戶體驗(yàn)中心（ID：tuniuued）

來源：https://mp.weixin.qq.com/s/FvYTChCJQsFg89yJHUFDjQ

本文由 @途牛用戶體驗(yàn)中心 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議