百度小說是百度APP內的垂直頻道，擁有過億月活和行業最全的正版書籍。隨著著作權保護意識逐步上升，越來越多的用戶愿意為優質的資源和閱讀體驗付費。2019年底，為了滿足用戶消費升級所產生的一系列需求，百度小說初步建立了會員體系。經過兩年多的打磨，我們不斷提升會員的服務體驗，并進行了多次優化升級，現在將我們的設計經驗分享給大家。

一、設計背景

2021年我國數字閱讀用戶規模達到5.06億，同比增長2.43%，半數以上用戶愿意為電子閱讀付費，占比最重的人群為19~25歲用戶，達到44.63%（數據來源《中國數字閱讀報告》），“Z世代”已經成為我國數字閱讀的主要群體。隨著消費升級，用戶對服務的需求不斷提升，更看重信息之上的附加價值，如認同感、歸屬感和儀式感。

二、改版原因

2019年，由于時間緊、任務重，我們完成了小說會員從無到有、從0-1的基礎場景搭建。但隨著設計趨勢的變化，當時小說會員的設計風格與主流用戶的喜好不完全匹配，在使用場景中也存在易用性不足、內容缺乏吸引力等問題。下圖是2019年小說會員的界面。

同時，我們對小說用戶進行了視頻訪談，搜集了用戶在使用會員服務中遇到的問題，如會員福利少、找不到會員專屬內容、購買過程有卡頓等，最終梳理為的三大核心問題：身份感知弱、購買路徑長和資源內容少。

三、設計目標

在小說會員亟待改版的背景下，我們結合業務目標、舊版核心問題和用戶訴求，推導出了本次改版的設計目標—品牌化、鏈路化和服務化。

1、品牌化—強化會員品牌

小說會員作為百度APP眾多會員之一，設計團隊希望能帶給閱讀用戶一些不同的品牌記憶點。

1）設計關鍵詞

基于會員的主流用戶、產品屬性和用戶訴求，我們衍生出以下關鍵詞：年輕、品質、尊貴、超值。年輕用戶群體的占比越來越高，新版的設計風格力求更好滿足年輕用戶的審美需求。

2）會員符號

符號是最直觀的視覺元素之一，能夠以最快的方式傳遞產品記憶點。在會員品牌符號設計的草圖階段，我們從字母V、VIP、鉆石、王冠和小說IP白嘟嘟等多個方向進行了方案發散。最終采用了白嘟嘟圖形與尊貴感的V形符號相結合的形式。該方案既延續了小說的視覺符號，又與競品的會員標識形成差異，從而加深用戶的品牌感知和視覺記憶。

3）會員色彩

為了確定更加獨特的品牌色，設計團隊搜集了大量的尊貴氛圍圖片，提煉出了玫瑰金，牙金，赤墨等8個具有品質感的顏色。在視覺初稿階段，我們選擇了玫瑰金和黃金兩種主色進行了方案嘗試。最終根據整體效果確定主色為明亮、高貴的玫瑰金，輔色為黑茶棕，深支子和漆黑的配色方案。新的配色方案讓用戶感受到新穎、現代，煥然一新。

4）會員圖標

在圖形元素上，為了增強親和感，我們選擇了圓潤的面形圖標樣式，通過大圓弧和小圓角的細節處理，傳遞給用戶一種年輕、品質的品牌印記。

5）信息傳達

我們對會員購買頁和權益詳情頁進行了布局重構，采用深色的背景襯托卡片信息，使得產品框架層和內容信息層更加明確，突出核心內容。

在各類場景中，我們通過會員品牌色彩、圖形、符號和IP形象的滲透，強化會員品牌印記。

經過分析研究和實踐，我們完成了主場景的設計升級。

2、鏈路化—精細化運營

就會員體驗而言，我們需要關注用戶在各種時間和各類場合下的需求，因此我們將會員的全鏈路狀態分為時機、場景和人群三個維度。

1）時機

在不同的時機狀態下，我們需要傳遞給用戶不同的信息。只有深入剖析不同狀態下的用戶訴求，才能為其提供更好的服務。接下來我們從購買前、購買中、購買后和即將過期四個階段闡述：

①購買前—權益/優惠信息引導

在用戶購買前，我們強化了低價和省錢信息，讓用戶直觀的感受到購買會員后的價格福利。為此我們從三個方向上進行優化，在開通購買頁，外露省錢金額，幫助用戶了解開通會員可享受的收益；在會員頻道頁，采用外露多項權益，讓用戶快速了解會員權益；在章節購買頁，采用突出會員折扣和會員優惠價，讓用戶感受到開通會員的折扣福利。

②購買中—優化路徑流程

在用戶購買中，我們在會員購買鏈路環節進行簡化，采用當前頁彈出半層面板替代跳轉至會員聚合頁的方式，縮短等待加載時間；在章節付費鏈路環節，將商品選擇區信息結構進行優化，減少多章購買的頁面跳轉，使得用戶能夠更流暢的完成支付，提升付費體驗。

③購買后—強化權益感知

在用戶購買后，鑒于付費用戶對商品和服務品質有著更高追求，為此我們通過在各類重要入口展示會員權益，包括省錢金額、去廣告次數以及各類場景VIP狀態提示等方法，以達到強化用戶的權益感知。

④即將過期—輕引導續費

在即將過期前，為了避免對用戶造成強付費的不友好感知。過期前3天，我們采用了輕量化的形式告知用戶續費，通過各類引導信息的提示，讓用戶知曉會員服務期限屆滿。

2）場景

我們在入口和功能場景中也進行了精細化設計，讓用戶更便捷地使用會員服務。為了突出會員優質內容和服務，我們設置了會員專屬的頻道和書庫，方便用戶選擇。

在各類功能場景中，為了方便用戶在使用功能的過程中隨時購買，我們設置了多個功能場景的會員開通入口。讓用戶快捷享受會員服務。

3）人群

通過小說用戶數據分析，我們將用戶人群分為會員用戶、潛在用戶、新用戶和過期用戶。

為了讓會員用戶能夠體驗到區分于普通用戶的尊貴感，我們在付費頁、批量離線、TTS播放頁和簽到頁等場景均采用了會員定制化的配色方案和引導提示，這樣使得會員用戶在體驗服務的各類場景中有更強的身份專屬性。

所謂潛在用戶，是指仍在猶豫是否購買會員的用戶。我們通過限時優惠券、激勵視頻試用15分鐘、書架省錢提示、挽留彈窗和降級版免廣告權益等方式，讓潛在用戶不僅可以先試后買了解會員權益，而且可以通過各類信息提示通曉會員體驗，更好地判斷是否通過會員服務減少付費金額和提升閱讀體驗。

我們針對新用戶建立了新人見面禮活動，用戶在新手福利活動期內可享受超值折扣開通會員，低價體驗會員權益。而針對已過期的用戶，我們通過下發優惠券、強化特權等形式喚醒用戶，以免錯過各類福利和特權。

3、服務化—提升會員服務

在內容為王的時代背景下，為了增加會員產品的核心競爭力，我們持續擴充會員書庫的數量和類目、拓展會員權益，讓用戶閱讀到更加豐富的小說內容和體驗到更多權益的會員服務。小說書庫的付費和免費書數量大幅擴充，且書籍類型新增了有聲書和短篇故事，增添了小說資源的多樣性。

在權益上，對內我們持續拓展會員特權，從最初的4項擴展為10項，新增了有聲免費聽、免費讀故事、整本離線、專屬字體、簽到1.5倍書幣等權益；對外我們聯合其他產品，推出了會員贈禮和聯合會員服務，用戶可以根據自己的需求進行購買，享受組合購買的優惠。

通過多個版本的迭代，我們完成了會員體系的設計升級和落地，用戶體驗得到了顯著提升。

四、未來規劃

提升付費產品的用戶體驗是一個體系化的研究課題，需要各個角色通力合作，合力同行，開拓革新。將來我們還會不斷探索，通過不斷優化體驗細節，不斷增加用戶權益感知，不斷嘗試方案創新，形成設計組合拳，為用戶提供更好的服務。

一、項目背景

語音搜索場景在功能不斷迭代的同時，也在探索更年輕化的玩法、傳遞更多元的體驗感受。在產品初期，我們嘗試在語音搜索場景下增加AI伙伴的形象，雖然線上版本已經實現，但從產品形態以及用戶反饋上看，還沒有達到可情感互動的效果。所以在本次迭代上，我們著重從情感聯結、閑聊互動的維度，對語音搜索進行創新性嘗試。

二、設計挑戰與目標

圍繞項目背景，從現在語音搜索的用戶行為與框架來看，有幾個比較明確的問題：

• 數字人引入后，發現用戶對人物的點擊行為和聊天訴求均有增加，但由于功能受限，數字人沒有辦法給到及時回應。用戶情感抒發得不到反饋；
• 用戶一搜即走，不會停留在語音搜索場景探索其他可玩功能。

因為前期在語音搜索的優化中，已經嘗試在面板中引入AI形象，上線后用戶反響強烈，用戶的行為中聊天、互動的訴求也明顯增加。由此可見，滿足用戶對AI伙伴的情感化訴求是十分有必要的，同時語音搜索引入AI伙伴是體現同行業差異化的有力創新點，從行業報告《2021年中國智能語音市場分析報告》中，也闡述了打造沉浸感語音搜索體驗與引入AI是目前智能語音市場的發展趨勢。

綜合以上原因，設計團隊在與產品討論過后，達成本次升級的核心目標：

• 構建伙伴認知：強化“AI伙伴”認知，激發語音搜索行為。
• 滿足情感互動：完善語音搜索場景情感化互動體驗，滿足用戶期待。
• 增強沉浸體驗：打造可搜索、可互動、可操控、可定制等沉浸式語音搜索場景。

三、設計舉措

1、構建認知 - 語音搜索基礎框架升級

在舊頁面中，語音面板限制了人物與按鈕的展現，人物既要承載功能反饋又需要作為物理操作按鍵進行點擊操作，與用戶認知相悖且也不利于功能擴展。因此在新版本設計中，需要明確“人”在語音搜索里的屬性，以及AI伙伴與語音搜索的關系。

我們將語音搜索頁面框架分為主要功能與輔助功能區。從舊語音面板中剝離出人物，并保留收音球在面板中做物理交互功能（發起收音、停止收音操作），利用AI伙伴的人物屬性，打造智能擬人的交互反饋，滿足用戶情感訴求。以“人”為中心，最大化展示AI形象，增強情緒傳遞感的同時保證框架可拓展性。

同時，將原堆積在面板中的功能與信息按優先級歸位，確保頁面信息清晰易讀、功能操作熱區無重疊、信息反饋區無干擾。新框架上線后，AI伙伴互動與語音搜索的認知關系更加清晰，語音搜索跳框量明顯增加，AI伙伴帶動面板整體導流增加，面板退出率下降。

2、引入情感 - 全場景情感化體驗提升

除了通過框架層面進行認知優化之外，為營造更貼合“人”的互動體驗與情感建立，我們又根據語音場景對每個狀態進行了情感體驗升級。改版上線后，用戶閑聊訴求和互動點擊行為均有所提升，從而驗證情感化的體驗提升，滿足了用戶互動訴求。

1）情感化引導提示：視覺上人物破框展示配合AI招手/比心的動作展示，不再是圖片，而是可以對話的實體，同時使用年輕化的引導語氣拉近與用戶間的距離，增加數字人曝光，建立新用戶心理預期，激發興趣點提轉化。

2）互動提示規則升級：圍繞“人”的真實情感，通過彈出氣泡的方式模擬AI伙伴狀態，比如聽歌、讀書、游戲。以此引發用戶點擊或進行互動行為嘗試。并且配合AI伙伴升級引導規則，使引導能夠根據不同場景進行適配，保證其既可以承接語音常規引導功能，又可以承接負一樓聊天互動，點擊氣泡可跳轉對應負一樓場景、聯動數字人語境內容，避免造成場景情感化割裂。 

3）增加“AI伙伴”情感反饋：增加人物動作、豐富情感化動態反饋，想要模擬更真實的“人”的狀態，就需要滿足更多擬人反饋。將語音搜索常見場景劃分為聆聽、識別解析、異常狀態、指令響應、引導等5種狀態。對應不同的狀態，規劃相應的數字人反饋動作或組合使用方式，可復用拓展其他相關場景，為設計與開發提效。

3、感知升級 - 營造沉浸視覺氛圍

確定了產品主要改版方向后，通過對目標的提煉，提取設計關鍵點「年輕化」與「情感化」，配合AI伙伴形象，需要呈現出輕松活力的氛圍感，設計中運用了大面積的毛玻璃質感，使場景更加輕盈、沉浸。通過對色彩的運用來演繹年輕的視覺效果，詮釋語音搜索年輕化的設計突破。

1）定義視覺風格：圍繞改版目標，定義設計關鍵詞，由關鍵詞延伸設計風格要點。

2）形色字構質動：從「形色字質構」5個方面提煉設計特征。

基于視覺方向及特征提煉，在質感、形狀、顏色三個設計中改動最大的方向詳細描述。

• 質感：設計趨勢不斷變化，半透明磨砂質感是近期流行的視覺風格，透過表層可看到背景模糊形態，有強化品質感、突出層級以及營銷氛圍感的特點，同時匹配視覺方向「輕盈」的特征。

• 形狀：在形狀的設計上，整體界面元素保持大量帶有弧度的形狀運用，提高面板、按鈕、圖標、彈窗等元素的曲線比例，讓界面始終保持年輕態，給人圓潤、親和的感受。

• 顏色：顏色的運用為本次改版的重中之重，是打造年輕化氛圍感知的基石。

考慮到語音搜索場景日后的拓展，色彩上希望可以營造給用戶一種輕松柔和的視覺氛圍，并且元素的色彩需要與AI伙伴服飾相呼應，從而使AI伙伴形象更加靈動、場景搭配更加和諧生動。

①基礎色彩范圍制定：

以度曉曉為示例，遍歷目前線上所有度曉曉服飾裝扮，對色彩進行歸類處理，從中提取主題色系，從搜索色庫中對應選出主題色環。

②如何在數字人裝扮中提取主體色：

我們需要把色彩量化，建立特定場景取色規則，根據規則層層篩選，我們可以從中獲取N種主體侯選色。

③校正主體色，與搜索智庫色彩形成映射關系：

通過對數字人裝扮的色彩分類，我們以H值為標準，通過調整S值與B值，劃分了12個色相，設定對應色系的H值區間范圍，如智能取色色值在該色相區間范圍內，且吸取到的候選色個數最多，就在對應的色庫卡中選取主體色。

校正原則：色相必須保持是同類色、保持感官明度同頻、保證視障人群的識別度

④建立輔助色搭配規則：

為了保持背景層的色彩氛圍營造，保證其具有清晰的識別度，我們以主體色為起點，選擇了顏色相對較多的鄰近色，在色溫上保持整體色調的一致性，其次利用對比色和互補色，選擇更加豐富多元的色相，制造更強烈的色彩對比，以保證滿足各種使用場景下對色彩的需求。

⑤組件化思維拆解頁面元素：

在梳理了智能取色機制后，我們也在思考，語音面板涉及到的元素過多，往往會面臨不同場景不同適配的情況出現，那么在做到視覺減負的同時，如何能靈活的替換對應元素呢？

我們以組件化思維去拆分設計，進行立體化的分層，將引導層（熱詞推薦引導關注）、信息展示層（承接語音各類狀態與信息）、形象層（強化AI伙伴智能感知）、背景層（烘托視覺氛圍感）羅列出來，各場景可根據需要進行顏色延展，保證視覺樣式達成橫向統一，呈現出更加豐富的視覺內容，避免審美疲勞。

總結本次語音搜索的改版升級，我們通過“構建伙伴認知、滿足情感互動、增強沉浸體驗”等手段，增強AI伙伴的曝光率，進一步向用戶傳達智能搜索的感知，從而促進搜索行為轉化。

構建認知過程中強化AI伙伴形象，增強語音搜索功能拓展性；同時結合“情感化”等全場景引導手段，營造更貼合“人”的互動體驗與情感建立，對每個狀態進行了情感體驗升級；最后重新定制視覺風格，圍繞「年輕化」關鍵點對整體氛圍進行強化，讓語音搜索場景更加年輕、有氛圍感。本次改版上線后，搜索行為、互動行為均有所提升，用戶體驗也得到了顯著提升。

四、寫在最后

我們正處于數字化快速變革的時代，傳統工具的基礎功能已不再滿足用戶的訴求，人們的感官也從現實空間延伸到虛擬空間，AI伙伴會逐漸融入人們的生活，未來語音搜索將不再是一個信息輸入-結果輸出的傳統搜索工具，引入AI伙伴，可以讓搜索更加智能，擁有人類一樣的思維、表達、情感和學習能力，滿足人們更高層次的情感訴求的同時，也可以讓搜索更加簡單有趣。

未來我們持續對語音搜索進行升級，將AI伙伴與搜索鏈接的更加緊密，提升用戶體驗，創造出更多有趣的、創新的、別出心裁的年輕化設計。

可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺中經常遇到對統計的數據分析總結的呈現。我們設計師在設計圖表的過程中，如果沒有系統的可視化知識，會出現設計的圖表雖然美觀但圖表不能很好的反應數據的情況。那么，在復雜的數據關系中如何設計和選用圖表，如何在好看的同時提升信息傳達效率，看完這篇文章希望對你的設計過程有所幫助。

// 為什么要數據可視化

數據可視化就是用圖表來表示數據信息，它所傳達的信息包括你所拿到的數據源和你分析后的結果，再通過圖形強化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息，是我們可視化的最終目的。

舉個例子，同樣一組數據，用表格的形式呈現是很難有所洞察的；如果將各個地區維度的數據聚合以柱圖形式呈現，很容易就能看出各個地區間數據的差異，并從中洞察規律

關于如何設計好數據可視化圖表，這邊總結了三個步驟：選擇適合的圖表，強化視覺層次，圖表響應式適配。

一、選擇適合的圖表

數據可視化的圖表種類繁多，當我們真的開始作圖，往往會遇到一個困境：有這么多類型，要如何選擇正確的圖表呢？首要依據是考慮所要傳達的信息意圖，即所要制作的圖表它的任務是什么，再通過分析數據關系來選擇表達方式；第二層意圖是圖表傳達內容，這時候我們就需要根據數據的特征去突出和強化。

1. 分析數據關系

根據數據分析的方式來看，每一種圖表都對應了一種數據關系。從數據的維度出發弄清呈現結構，再結合數據關系作出選擇。了解圖表的可能知道，一般圖表的數據關系有構成、比較、分布，以商業數據為例，常見的還有流轉關系。

構成關系

構成關系的圖表表達的是部分和整體的關系，用于分析總體和各部分的占比比例，構成關系一般局部元素加起來為總數。如果只是想對比個別組成部分的大小，也可以使用比較關系的圖表。

常用圖表：餅/環圖、堆疊圖、面積圖等，如涉及到層級結構，還會用矩形樹圖或旭日圖等特殊結構圖表。

關鍵詞：“占比、比例、百分比”

比較關系

比較關系是基礎分析中常用的一種圖表類型。在一定的取值范圍內，通過對兩個或兩個以上的指標分析，可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式，趨勢對比用于表示一段時間內數據的變化，分類對比用于比較數據規模。

常用圖表：趨勢對比常用圖表有折線圖、散點圖等；分類對比常用條形圖、柱狀圖、氣泡圖等。

關鍵詞：“增減、升降、漲跌、波動”

分布關系

利用空間分區來展示數據之間的分布關系，常用于體現兩個或以上數據的相關性。

常用圖表：散點圖、熱力圖、雷達圖等

關鍵詞：“隨著……而變化、A/B之間的相關性、交/并集”等

關聯與流轉

流轉關系是B端數據常用的一種關系，它可以動態的體現相關路徑下對象之間的關系、狀態、數據量的流轉變化等，以面積或顏色深淺展示了多個狀態或對象之間的流動量或流動強度。

常用圖表：關系圖、?；鶊D、漏斗圖、進度圖等

關鍵詞：“流程步驟、留存、轉化、關系”

2. 分析數據特征

按數據關系和分析目的選擇好圖表類型后，第二步是根據數據特征選擇更加適合的展示方式。從數據分析的角度常見數據特征有：變量特征、維度特征、層級特征、流程特征。

變量特征

分辨一個指標通常有兩類特征，按變量值是否連續可分為連續數據與離散數據兩種。連續數據通常會統計一組數據的變化趨勢，離散數據通常統計各分類下數量的變化。

• 連續型數據：指在一定區間內可以任意取值的數據叫連續數據，其數值是連續不斷的。如身高、體重等帶有時間因素變量的數據等，通常用折線圖體現變化趨勢。
• 離散型數據：指其數值只能用自然數或整數單位計算的數據。如當天銷量、進店人數等表示分類類型的數據，用柱圖表現更加體現變量的特征。

維度特征

多維度分析需要將多個變量在同一平面上直觀的表示，可以選擇使用極坐標系去展示多個維度變量。如果希望對比多組數據，可使用不同顏色進行分類

• 根據分析視角選擇圖表：對于多維度變量的數據我們需要明確分析的視角，去找準對應的數據映射。如案例中多個班級的科目成績的這組數據，如需要全局視角查看個班的綜合素質，推薦使用雷達圖；對比單科成績的變化分布，則推薦使用堆積圖。

層級特征

多層級數據由多個部分構成一個整體，又稱樹形結構數據。除了用結構樹圖表表現以外，還可以考慮以下兩種圖表類型：

• 矩形樹圖：突出子層級占比大小。最初是用來顯示計算機硬盤驅動器上文件的結構和大小，它以面積的形式突出展現各個子層級節點的占比，可幫助用戶看到數據的層次結構以及各層級之間的關系。

例如：上圖顯示了市場銷售額的來源結構。長方形的大小取決于各國家的平均銷售額，通過色調來區分不同類型，顏色的深淺代表分類下的子集，面積體現銷售占比。對比一般結構樹圖表，它的優勢在于可以有效利用空間。

• 旭日圖：突出細分層級關系。由多個圓環圖嵌套而成，也稱為徑向樹圖，它既能像餅圖一樣表現局部和整體的占比，又能像矩形樹圖一樣表現層級關系。常用于細分分析方法，將事物從大到小進行拆解。每個級別的數據通過1個圓環表示，離原點越近代表圓環級別越高。 旭日圖在顯示一個環如何被劃分為多個層級時最有效，而矩形樹圖適合比較相對大小。

流程特征

流轉關系是表達數據轉化流程的重要類型，不僅包含統計意義上的數據總和，同時還表達了信息流轉的路徑；其中?；鶊D和漏斗圖都可以表達路徑中流量的變化，不同的是?；鶊D重點強調流量的強度和走向，漏斗圖更加注重突出轉化率和效果，根據不同的表達目的選用。

二、強化視覺層次

選擇合適的圖表后，在信息傳達上也需要正確的表達，展示形式美觀的同時能夠清晰的體現數據特點。

1. 強化數據特性

使用圖表正確的表達信息，需要設計師在強化數據特性的同時避免偏差

• 趨勢易感知：折線圖數值如過于平均導致趨勢平緩，有時候無法體現偏差；在強調數據趨勢的場景下，推薦用動態取值范圍讓波動保持在一定范圍內，放大波動占比更突出趨勢。

• 展示更準確：柱狀圖依靠柱體面積體現最終數值，使用動態范圍截斷將會導致數據解讀不完整；始終將 y 軸從 0 開始，才能更準確的反映柱圖中的值。

2. 色彩視覺傳達

除了在設計構圖上優化以外，顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數據的感知，錯誤的取色會讓信息讀取產生誤解。我們可以通過不同的分析目的設置意圖色板，精確傳達信息同時后續的項目在選用時也可以達到用色的統一。

我們在之前的文章里有介紹過圖表的取色模型，通過調整顏色HSL值的區間，可以得到以下三種意圖色板：

• 定性型-分類色板：用于區分不同的類型，又稱為無序色板。適合區分沒有內在順序的類別
• 定量分歧型-發散色板：通過兩邊互補色來體現，具有明亮的中間值，然后以不同的色調在刻度的兩端變暗。通常用于可視化負值和正值
• 定量順序型-順序色板：從亮到暗或相反的漸變。適合可視化從低到高的數字。

那么我們要怎么樣去使用這些色板呢？下面幾個案例將帶你了解其中的差異。

定性型：使用色調來進行分類

數據內在沒有順序差別時，建議使用色調值（H）進行區分；如定義國家、行業等類型。如果希望圖表看起來更加專業，以下有幾項分類色板的小建議：

• 選取盡量少的色調：取色時無需使用整個色環，使用鄰近色或互補色的取色方式顯得更加專業。

• 色板適度明暗交替：一些視障人士無法區分色相，主要靠顏色的明暗差異來識別，通過飽和度和暗度的調整，創造明暗交替的色板。

定量型：使用深淺色板強調內在順序

如果在同一個分類下包含子類別，或者數據本身具有排名屬性，那么建議使用連續色板來突出他們內在的順序，使圖表更加易讀。

• 順序色板-選擇合適的插值：根據數據的分布情況選擇不同的的插值斷點，突出數據的差異。如以下案例中，根據統計學概念設定不同的取值區間，左側示例使用的是平均線性差值，反映的是數據的集中趨勢；右側示例使用的是中位數插值，能更好的體現數據分布的形態。

• 發散色板-關注對比色的識別性：盡量避免紅綠配色，如需使用綠色，偏黃或偏藍的綠色更易分辨，對視障人士也更加友好。

三、圖表中的響應式設計

B端圖表可視化的數據一般是在網頁或移動端上動態顯示。不同于平面展示或匯報，在基礎設計完成后還需要考慮到圖表展示的環境，根據不同端去適配顯示效果，以適應各種復雜情況。而動態顯示帶來的交互特性也讓數據展示有了更多的可能性。

1. 布局框架適配

在網頁端顯示時，有時候同一個圖表需要考慮不同容器下的適配方式。根據數據相關性變化元素的適應形態，將非必要的的元素轉化或隱藏，保留重要的圖形元素去適應當前空間；元素隱藏后使用懸浮交互來保證信息的展示，保持圖表的可讀性同時也避免產生元素的重疊。

如案例中的圖表，在不同尺寸下通過改變和隱藏圖表元素，以達到適配當前空間的效果。

2. 圖表元素適配

要適配移動端，網頁端橫向延展的顯示方式需要適應移動端縱向空間的顯示。除了呈現角度的改變外，還需要考慮手機屏幕的尺寸和圖表元素的適配性，去兼容相關的交互操作。

• 信息浮層：在圖表中，信息卡元素是傳達信息內容的重要組件，在網頁端中懸浮展示，通常會占據很大空間；圖表適配移動端后，信息浮層改動到圖表上方常駐顯示，并跟隨手指的滑動變化響應數值，完整展示信息的同時也避免了頁面抖動。

• 坐標軸標簽：過長的坐標標簽在適配過程中會產生重疊，而省略也會造成信息展示的不完整。我們需要針對不同的坐標軸類型給出響應的規范。如文本類軸標簽我們可以采用省略、換行、旋轉等方式適配，避免信息的缺失。針對有連續型的數據類坐標軸我們可以使用抽樣、轉化單位等方式適配，精簡空間避免堆疊。

3. 極值適配

因B端平臺的特性，我們無法預知客戶傳入的數據量，可能會遇到因數據量過多，造成圖表顯示不佳，數據讀取困難等問題。這種情況下，提前考慮數據極限場景，通過交互的形式變化的方式讓用戶獲取完整信息，提升理解同時信息展示更靈活。

• 縮放和平移：在數據范圍過多時增加取值范圍的縮略軸組件，通過限制展示范圍讓數據量顯示可控。

• 互動切換視圖：如果折線的類別過多且無法省略的，建議分組查看。默認狀態僅當前組折線高亮，其他數據以淺色顯示，通過切換的方式查看其他組別的信息。

• 懸浮鼠標高亮：在分類過多不好分辨時，可使用懸浮高亮的交互方式突出相關聯的數據組。

還有懸浮放大、點擊下鉆、聯動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨立介紹。

// 結語

數據可視化在B端設計場景中發揮著重要作用。設計師在表達數據之美的同時更加準確，才能更直觀地向用戶傳達數據的價值。使業務人員能夠從復雜的業務數據中快速、直接地找到重要數據，確保用戶能夠更好的接收信息，才是可視化的關鍵。

寫在最前

B端界面的元素眾多，視窗范圍大，布局設計多種多樣，為了簡化布局思維，我們通常給界面添加三個方向上的軸-X、Y、Z。X軸指水平方向上的軸線，Y軸指豎直方向上的軸線，以及Z軸指在三維空間中垂直于視窗平面的軸線。當設計B端界面時，讓元素沿著這三個軸進行布局，既能理清我們的設計思路，頁面的元素也能展示得更有邏輯。

本文圍繞這三個軸，來看看在B端界面的三維空間里，都有哪些設計規律。

一、X軸的布局與適應

B端界面在PC視窗下展示，范圍更大，如常見的分辨率尺寸有1280x1024、1440x900、1920x1080等，且瀏覽器還支持動態拖拽改變視窗寬度。所以B端界面在X軸上應該更注重內容的延展和適配，合理利用橫向增長的空間。根據這一特點，在這一部分中，我們分業務場景來探討都有哪些典型布局，并針對每一種布局給出合適的適配方式。

B端典型的業務場景，可大致分為表格、圖表、表單、卡片、文字詳情五大類頁面。這幾類界面在X軸上排列的方式為單欄型、雙欄型、多欄型。如果有側導航，則在頁面最左側增加側導航即可，內容區的布局不受影響。

1.單欄型

表格、圖表，這類需要較大展示空間的場景，一般一個頁面只有一欄，不再在橫向空間進行切割。當視窗橫向拉伸時，也為了預覽更多的內容，表格和圖表進行橫向拉伸，保持撐滿視窗的狀態。

2.雙欄型

表單、文字詳情類的頁面，采用雙欄結構的概率較大。因為表單頁除了表單本身的內容外，往往還有右側的輔助說明面板，或者是預覽面板。文字詳情頁的右側也經常出現其它閱讀內容的推薦列表。當這兩類頁面視窗在橫向拉伸時，適應的方式通常有兩種。

1）主模塊寬度拉伸，始終撐滿視窗，副模塊寬度固定。如果主模塊每行內容都比較多，推薦使用這種方式，能更大化地瀏覽主模塊的內容，減少不必要的換行。但缺點是，由于內容本身如表單項、詳情文字等在X軸上占用的空間不多，他們所在的模塊橫向拉伸后，會出現很多留白。

2）各模塊保持寬度固定并居中展示，不跟隨視窗伸縮而變化。如果主模塊每行內容不多，又需要頻繁的左右對照，推薦使用這種方式。

3.多欄型

多欄型頁面一般用于數據看板、媒體卡片(視頻/圖片)的展示。因為這類業務場景，卡片數量多，無法簡單地將頁面進行區塊的分割，所以以卡片為單元來填充頁面。當視窗橫向拉伸時，這里也會出現2種適應的方式。

1）數據看板類頁面，每個卡片等比拉伸（也可僅橫向拉伸），列數不增加，讓圖表能展示地更清晰。

2）媒體卡類頁面，卡片需要設定一個最佳展示的寬度如w，當視窗拉寬時，卡片等比放大。當頁面拉寬到能增加一列寬度為w的卡片時，所有卡片寬度都恢復到w，增加一列。

上述說了這么多適配的規則，當然我們也可以給視窗設定一個統一的適配上限，避免當視窗非常寬時，頁面的元素過于左右分離，反而不方便瀏覽。比如我們可以設置當視窗寬度＞1920px后，頁面元素就不再跟隨撐滿，達到內容區寬度上限值，居中展示在界面中。

二、Y軸的空間利用

B端界面，面對復雜的信息，我們往往會面對兩類問題，如何承載大量的信息，如何區分強弱主次。這就涉及到頁面Y軸的空間利用了。這里我們提供4個小辦法來解決上面的問題。當出現大量信息時，應該注重Y軸空間的擴展，合理搭配翻頁、加載等邏輯。當希望對頁面元素區分強弱時，可以搭配滾動吸頂、局部折疊等交互，有序展示更多信息。

1.如何承載大量信息

1）替換型對于表格類頁面，為了方便快速查找所需信息，采用分頁器的方式展示更多的數據內容，即把當前頁內容做替換。即頁面Y軸的高度是固定的，僅做內容的變更。

2）向下延展型

對于瀑布流類頁面，由于數據量大，且沒有快速定位的訴求，使用無限加載的方式，向下加載更多的數據，這種類型的頁面Y軸可無限延展。

2.如何區分強弱主次

1）強-滾動吸頂當頁面滾動到某個位置，需要去強調一些導航性質的內容時，我們可以使用滾動吸頂的交互，即當把這個元素（如標題）滾動至當前視窗的頂部時，發生吸頂事件，始終停留在頁面中，該元素所引領的模塊在其下方滾動瀏覽。當把這個模塊滾動完，吸頂交互失效。這樣即能臨時性地強調某些內容，還不會影響其它模塊在Y軸上的展示。

2）弱-局部展開對于表單類頁面，若在某個選項下還存在二級內容，則在初始展示時，優先突出主選項本身，當選中后再展開二級內容。這樣即能節省首屏空間，也能順應使用者的學習、使用心智，在合適的時機展示細節內容。

三、Z軸的疊加順序

說完X軸、Y軸的布局設計，我們最后來看看Z軸。這里，我們需要把視角從二維平面轉為三維空間，比如吸頂的導航，菜單浮層，模態彈窗這些都屬于出現在Z軸上的元素，他們之間可以進行層層疊加和嵌套，于是會出現疊加沖突的場景，導致發生錯誤的遮擋現象。所以Z軸設計的關鍵點在于不同元素的疊加排序設計。那么怎樣才能有一個貫穿全局的合理排序，讓元素們能乖乖排在自己的隊列中呢？此處，我們將頁面的所有可能出現的元素按照Z軸的特點歸類到三大區間里。每個區間內給出相應元素的排序順序指導，并配合動態計算的邏輯，Z軸上的元素就能整齊地疊加起來啦。

1.基礎區間

a.展示類-頁面中默認就存在的、不會對其它元素造成遮擋的元素（表單、表格、文字、按鈕、圖表、圖片等）。

b.固定類-固定在頁面某處的元素，滑動頁面時會對a的元素產生遮擋（如吸頂導航、固定表頭/列、錨點、返回頂部按鈕等）。

c.浮層類-由a中的元素觸發出的、指向該元素的臨時浮層元素。會對a以及固定元素產生遮擋。臨時浮層之間的z軸層級遵守觸發的時間先后順序，若臨時浮層可以同時存在在界面中，則后觸發的層級更高（下拉浮層、氣泡）。

2.模態區間

d.模態層-由基礎區間的元素觸發的，覆蓋整個視窗的模態元素，當該元素出現后，至于基礎區間所有元素層級之上，基礎區間的所有功能無法交互(抽屜、對話框和全屏預覽等).

e.臨時浮層-在模態元素上出現的臨時浮層，計算高度時，可把d層想象成基礎區間的c層（下拉浮層、氣泡等）.

f.第二層模態層-在d出現之后出現的覆蓋整個視窗的模態元素。不特指第二層，也可以是第三、或更多。

模態區間內，多個模態層可進行疊加（即上文的f），疊加時一樣需要遵守觸發時間的先后順序，后觸發的層級更高出現在更上層。但是我們也應注意，模態層不能疊加太多，會導致當前頁面覆蓋過多內容，一般最多用到兩層模態層就能滿足大部分場景了。

3.頂層區間

g.全局層-全局的、不被模態元素遮擋的元素?？梢猿ｑv在頁面中，也可臨時出現。

h.臨時層-由g觸發出的臨時浮層

max.最高層-始終動態高于當前頁面所有層的元素（比較典型的是Toast組件）。

四、寫在最后

到這里，我們就淺談完關于B端界面的X、Y、Z軸上的設計特點了，雖然是一些高度抽象的內容，真正按照業務需求執行設計的時候，遇到的界面一定比我們這里談論的更復雜，但是只要我們清楚底層的空間布局、適應方式、擴展手段和疊加邏輯，再復雜的界面無非就是規則的嵌套，希望這篇文章能帶給大家一些小小的啟發。

百度酒店以比價為核心特色，經歷多次設計探索，初步建立了用戶認知。

設計中通過“核心流程分析-明確用戶關注信息-探索比價價值”的方式去制定設計策略，并在方案探索與落地階段，通過思路發散、多輪數據驗證與方案迭代，驗證了“氛圍感知強化、價值信息傳達、聚合比價”等設計手段的作用，希望給服務和電商等比價類產品的設計師一些啟發和參考。

一、項目背景

酒店住宿在線預訂市場中，各個平臺基于用戶權益、運營補貼等差異進行著激烈的價格競爭，導致行業存在天然的價差。而在我們進行的一次酒店預訂訪談中發現，超過半數的用戶在預訂酒店時會進行比價，而比價的用戶中多數會使用2個以上的酒店APP。因此，在市場存在價差且用戶有比價訴求的背景下，百度酒店通過接入多家供給及會員低價，旨在建立酒店聚合比價平臺，為用戶提供性價比最高的酒店搜索服務。

二、設計策略與落地觸點

1.目標和策略制定

在上述背景下，我們與產品側對齊業務目標，結合對用戶訴求的分析，確定了設計目標。

為了達成設計目標，需要明確比價在酒店預訂的各個觸點下對用戶的價值是什么，以探索比價如何發揮作用。下圖列出了酒店預訂的核心流程、核心模塊及用戶關注信息，由于用戶在各個環節關注的信息不同，比價所能發揮的價值也就不同，因此基于比價是否影響用戶進行選擇和決策，我們又將核心流程分成服務報價選擇前、服務報價選擇時、服務報價選擇后。

設計目標的實現也對應上述3個環節如下圖：

• 在服務報價選擇前，比價還未對用戶決策、預訂體驗產生直接的影響，此時要去傳達比價的概念和價值，并盡可能的強化這種氛圍感知，讓用戶清晰地認識到百度酒店可以比價，以吸引用戶使用比價。
• 在服務報價選擇時，用戶會利用比價進行選擇和預訂，此時要突出低價、輔助用戶進行高效的對比和預訂。
• 在服務報價選擇后的下單環節，可以進一步強化比價的感知和價值，以加深用戶對百度酒店比價的印象。

2.明確落地觸點

為了找到一些好的比價概念和價值的傳達方式，以及提升比價體驗的方式，我們進行了競品調研，競品包含酒店、商品等不同行業，調研結論歸納如下：

• 利用流程中的主要模塊，傳達比價概念以及“享低價”、“省錢”等比價價值認知；
• 結合“產品縫隙”滲透比價概念，具體指“當前內容”到“下一個閱讀內容”的停頓時間，包括跳轉時的過渡頁、閱讀完結的結束過程等，在用戶不排斥的狀況下，給用戶帶來一些基礎的認知教育；
• “聚合比價”模式，將針對同一商品或服務的報價由低到高排列，以便用戶快速對比和選擇低價。

結合競品調研結論，我們根據百度酒店的核心流程和觸點進行了設計策略的拆解，建立了策略和落地的映射關系。

三、方案探索與落地

1.提升感知-讓用戶知道百度酒店可以比價

這一環節的設計目標是要讓用戶知道百度酒店可以比價，以吸引用戶在百度酒店完成下單行為，因此清晰、有吸引力的比價元素設計十分重要?；诟偲氛{研內容，我們進行了設計探索。

1）酒店列表-氛圍感知強化及價值信息傳達

下圖所示為酒店列表比價設計的探索過程，最初的方案，為了保證酒店信息的獲取體驗，采用了與傳統酒店預訂平臺采用一致的結構和信息優先級，僅結合圖片區域和價格做了比價信息的結合，但這種設計與傳統酒店預訂平臺差異很小，比價感知和價值的傳達效果并不好。因此設計側轉變思路，在酒店列表中通過更強化的模塊來突出比價的感知，同時結合“比某平臺低xx”的文案說明比價結果，傳達“比價獲得更低價”的感知。

酒店列表覆蓋多個場景，為了建立百度酒店一致的體驗和認知，我們將列表的設計覆蓋到了搜索結果頁和小程序的多個頁面，如圖所示。

2）房型及服務報價-基于低價推薦去強化比價

房型及服務報價模塊對應酒店精準需求和酒店詳情頁，與酒店列表思路一致，方案在逐漸與傳統酒店預訂平臺產生差異化，去強化比價、低價的感知，形成記憶點。

下圖為搜索結果頁的方案，最初外露了多個房型，以滿足用戶的選擇訴求，但從用戶行為數據來看，百度酒店的絕大多數用戶會選擇酒店的最低價房型及報價，因此我們調整設計方案，結合最低報價，用模塊式的對比方式去強化比價，并通過“低價立省xx”的信息去傳達低價感知。另外，這一部分的設計也和聚合比價有所結合，后面會進行詳細的說明。

詳情頁的主要模塊設計與搜索結果頁基本一致，如下圖所示，詳情頁中將最低報價作為低價房型推薦，以建立一致的比價認知同時便于用戶快捷預訂低價。另外，在常規的報價列表中，為了提升用戶查找報價的效率，相比于最低價房型，采用了弱化的形式。最終方案上線后，數據上也取得了正向的效果，報價展現到預訂點擊的轉化得到了提升。

3）“產品縫隙”中的比價概念滲透

“產品縫隙”并不像上述列表模塊那樣感知強烈，設計的目的是為了進一步加深“百度酒店可以比價”的用戶印象。結合百度酒店的核心頁面，我們重新設計了酒店列表和房型報價列表的加載態，利用“多資源方交替動效+文案說明”的方式，構建動態的比價感知，在用戶進入頁面或者進行篩選等場景時會出現。另外，我們也利用了小程序首頁和詳情頁的頁尾，在閱讀結束時去傳達全網比價的概念。

2.建立認知-聚合比價模式的構建

在競品調研部分，我們提到了聚合比價模式，百度酒店由于報價復雜，也適合用這種方式去簡化報價。

如圖所示，常規酒店預訂平臺，同一房型（如標準大床房）會存在不同服務政策（早餐服務、取消規則、支付方式）的報價，而在百度酒店中，由于又加入了預訂平臺的差異，報價會更加復雜，數量更多且同質化嚴重，即服務政策相同，僅預訂平臺不同的報價多次出現，這就導致了報價列表的查看和選擇效率較低。

聚合比價模式就是要將這些服務政策相同的報價聚合在一起進行比價，以簡化報價列表提升選擇效率，同時在服務相同的情況下，絕大部分用戶會更傾向于低價，在報價聚合后，可以突出低價以便用戶預訂。

我們也在探索如何讓聚合比價更簡單，初始方案采用點擊展開的形式，用戶可以保持滑動瀏覽的交互體驗，整個過程的交互體驗比較流暢，但頁面的層級關系較為復雜，用戶認知成本高。因此我們又嘗試了調起面板展示比價詳情，讓用戶聚焦在當前報價的對比，并通過模塊式的設計，清晰羅列了每個平臺的服務、優惠明細等差異信息，讓信息的對比更高效，同時強化低價平臺，與前面的比價模塊保持認知一致。

聚合比價模式下，存在了兩種用戶路徑，如圖所示。用戶可以直接選擇最低價資源方完成預訂，也可以通過比價詳情彈層，查看針對同一服務的所有平臺報價，對比平臺的詳細服務、優惠差異后再選擇預訂。

這種預訂模式的目的，一方面在教育用戶建立百度酒店可以比價、可以買到低價的認知，另一方面也提升了用戶選擇低價平臺的效率。另外，聚合比價要具有清晰的規則才能被理解和信任，在比價詳情中，為了進一步降低認知成本，我們通過標題突出了聚合項，并增加了比價說明入口，讓聚合規則更明確。聚合比價的方案上線后，報價的預訂點擊到成單轉化也得到了提升。

另外，前文提到的精準需求搜索結果頁和詳情頁的低價房型推薦也利用了這種模式，不過在比價感知上做了更強化的處理。用戶可以在詳情頁直接點擊各個平臺報價完成預訂，也可以點擊文字部分查看房型詳情，在頁面底部的比價詳情中完成報價的對比和預訂。

3.強化記憶-比價價值感的再次強化

填單場景是在預訂完成后，這個環節我們可以將比價的概念和價值再次展示給用戶，以加深用戶對比價的認知。這里的設計手段與“提升感知”階段類似，如圖所示為一些方案探索，在用戶選擇低價平臺預訂，點擊跳轉至填單頁后，我們會強化用戶“預訂到最低價”以及“為用戶節省xx元”的感知。另外，在用戶提交訂單時，會存在一定的加載時間，我們也利用了這里的“產品縫隙”，結合加載態繼續傳遞低價、省錢的認知。

四、結語

回顧百度酒店的比價設計過程，我們以比價及低價感知傳達、高效預訂低價為設計目標，基于百度酒店的核心預訂流程，探索比價在各個環節如何發揮作用，進而將設計目標的實現劃分為了“提升感知、建立認知、強化記憶”三個階段，并為業務帶來轉化提升。

提升感知過程結合流程中的主要模塊，通過模塊式對比形式、傳達比價價值感、基于低價推薦強化比價、以及利用“產品縫隙”等手段，去吸引用戶了解和使用比價；建立認知過程利用“聚合比價”模式去精簡報價，同時結合對低價報價、低價平臺的強化，讓用戶更便捷的預訂低價；最后強化記憶的環節，我們進行了一些方案嘗試，再次強調比價的價值。另外，為了建立一致的比價認知，整體的設計中也堅持一致性的原則。百度酒店的比價設計也在不斷地嘗試和優化中，希望能給用戶創造更好的使用體驗。