為了成功在同類型產(chǎn)品中脫穎而出，并促進業(yè)務的長效增長，有時候，設計團隊需要做好設計革新。這篇文章里，作者就結(jié)合實際案例，拆解了設計團隊如何從體驗視角重塑內(nèi)容消費模式，并梳理了相應的設計策略，一起來看看吧。

導語

作為定義性知識平臺的行業(yè)領導者，百度百科市場份額及優(yōu)質(zhì)內(nèi)容占比均行業(yè)領先，但當前產(chǎn)品過于依賴搜索導流，在步入穩(wěn)定期后增長緩慢。另外，行業(yè)同類競品在體驗層面也有較多嘗試和主張。

為促進業(yè)務長效增長，嘗試探索新策略突圍，從「知識查找模式」向「知識探索模式」轉(zhuǎn)變。

面對這場挑戰(zhàn)，設計團隊率先探索革新，從體驗視角重塑百科詞條內(nèi)容消費模式。通過優(yōu)化頁面框架結(jié)構(gòu)、融入全新設計語言，探索從被動到主動的瀏覽模式，升級百科知識瀏覽新體驗，進一步建立品牌權威感知。

一、全方位分析產(chǎn)品體驗，探索正確的方向

首先，設計基于線上詞條頁場景，從產(chǎn)品層、體驗層深入剖析問題：

1. 百科詞條頁內(nèi)容體量龐大，頁面信息臃腫雜亂，內(nèi)容堆砌感強，導致用戶信息獲取效率低。
2. 舊版詞條頁的頁面設計風格陳舊、內(nèi)容堆疊感強等問題，與當前市場主流設計脫節(jié)，間接影響百科專業(yè)、權威用戶感知建立。
3. 詞條頁缺乏新穎的玩法和個性化功能，用戶在瀏覽學習的過程中，互動和探索欲較低。
4. 詞條之間的關聯(lián)性較弱，難以形成完整、連貫的知識網(wǎng)絡。

其次，針對以上4個核心問題，我們聚焦體驗、視覺、互動、內(nèi)容四個層面，探索設計發(fā)力點：

如何定义B端产品及B端产品经理方法论

相较于C端产品，B端产品最大的特点是：面向特定领域用户，且数量少得多，但更注重对用户专业领域操作流程的深度挖掘——也就是专业性更强，与业务的结合更紧密。

查看详情 >

通過升級瀏覽體驗、創(chuàng)新設計風格、豐富互動玩法和構(gòu)建詞條體系這四個設計手段，全面提升百科產(chǎn)品基礎體驗和專業(yè)感知，從而強化詞條品牌的滲透力。

二、拆解設計目標，全面規(guī)劃設計策略

為了滿足用戶在信息獲取和知識探索方面的多元需求，我們根據(jù)設計目標，從模式、框架、內(nèi)容三個方面出發(fā)，拆分了五個核心設計策略，進行了深入全面的設計規(guī)劃。

1. 優(yōu)化框架結(jié)構(gòu)，提高頁面承載力和瀏覽效率

舊版詞條頁內(nèi)容結(jié)構(gòu)扁平、元素分布混亂、信息堆砌，影響用戶的信息獲取效率。針對這些問題，我們在框架層對詞條頁進行系統(tǒng)性重構(gòu)，強化頁面結(jié)構(gòu)，去繁從簡使頁面更加清晰簡潔，提升頁面信息可讀性和瀏覽體驗，具體規(guī)劃為以下四個設計策略：

1）沉浸式容器????

為了提升頁面空間利用率，我們?nèi)コf版詞條頁頭部的多余元素，將頁面頭部整體升級為多功能沉浸式容器，提高用戶的多媒體內(nèi)容消費體驗，同時強化用戶閱覽的心流體驗。

2）信息結(jié)構(gòu)化????

詞條內(nèi)容具有客觀定義性，存在天然的信息邏輯性及信息整體性。針對詞條內(nèi)容這些屬性，我們重新對信息進行重組調(diào)優(yōu)，對詞條內(nèi)容進行分層，重組結(jié)構(gòu)布局，增強信息的條理性和結(jié)構(gòu)感，從而提升用戶獲取詞條重點信息的效率。

3）導航提權????

由于詞條篇幅較長，用戶很難快速感知內(nèi)容維度。通過調(diào)整目錄導航位置，前置曝光并在滑動中吸頂，提高用戶對內(nèi)容感知及掌控，進而提升內(nèi)容獲取效率。

4）底bar升級????

舊版詞條頁功能分布散亂，底bar和雙懸浮按鈕的設計打擾用戶瀏覽，無法形成統(tǒng)一操作感知。通過將常用功能整合，建立工具欄認知，方便統(tǒng)一查找及使用，提升操作便捷性。

2. 設計語言升級，提升產(chǎn)品體驗競爭力，促進品牌感知滲透

在重構(gòu)設計中，著重解決了視覺方面存在的問題，如設計風格老舊、文字堆砌感強、結(jié)構(gòu)展示不清晰等。我們從設計風格、信息排版、閱讀體驗三個方面著手，重點升級設計語言，減少視覺噪點、降低閱讀負擔，創(chuàng)造清晰、專業(yè)、沉浸的閱讀場景，從而促進品牌專業(yè)感知滲透。

1）卡片化設計????

將原來分散瑣碎的信息排版，升級為卡片化設計，創(chuàng)建清晰的視覺層次，增強信息傳達的有效性。另外，卡片化設計的靈活性，便于拓展不同的內(nèi)容模塊，為多種內(nèi)容類型提供統(tǒng)一的視覺，增強頁面整體性。

2）強化視覺表現(xiàn)?????

詞條內(nèi)容的全面詳盡，需要設計著重考慮頁面的信息傳達。通過圖形化的設計元素凸顯詞條的核心特征，同時使用分級的色彩策略，具像化表現(xiàn)保護等級，將核心知識點信息以可視化內(nèi)容形式呈現(xiàn)，有效提高用戶獲取信息的效率。

3）透傳品牌元素????

在主要視覺焦點位置融入品牌元素圖形，通過百科logo較強的用戶品牌感知度，強化信息內(nèi)容權威性透傳。

4）提升閱讀體驗????

通過簡化收斂字號行間距、重新優(yōu)化顏色色相及對比度，對整體閱讀體驗視覺降噪，確保用戶在閱讀過程中舒適友好。

3. 構(gòu)建滾軸式結(jié)構(gòu)化布局，打造全新互動體驗

詞條之間的串聯(lián)是構(gòu)建知識面的關鍵，通過增加創(chuàng)新性的滾軸式布局，實現(xiàn)關聯(lián)詞條的結(jié)構(gòu)化呈現(xiàn)，促進用戶對主題相關知識直觀、多維理解，有效引導用戶在復雜的知識體系中進行更深層次的探索。

4. 創(chuàng)新玩法，搭建豐富多維的知識探索體驗

為了讓用戶更容易找到感興趣的內(nèi)容，我們將詞條中的關鍵信息提煉為簡潔明了的特性要點，便于用戶快速獲取知識。并搭建知識點主題頁，匯總詞條精華內(nèi)容，幫助用戶發(fā)現(xiàn)相關知識，拓寬學習視野。通過擴展詞條內(nèi)容形式，設計知識探索路徑，吸引用戶深入探索詞條完整知識，從而獲得更豐富、多維的知識探索體驗。

5. 創(chuàng)新獨特的詞條知識體系，建立學科知識場域

通過構(gòu)建與詞條有機互聯(lián)的全面學科知識樹，我們希望塑造一個既高度結(jié)構(gòu)化又層次豐富的知識場域。在結(jié)構(gòu)化場景中，設計縱向串聯(lián)的卡片式視覺布局，實現(xiàn)知識點之間的快速串聯(lián)。并采用階梯式的顏色分類機制，以視覺方式區(qū)分不同層級的學科知識，進一步促使用戶在復雜的知識體系中建立清晰、有層次的認知結(jié)構(gòu)。

這一設計不僅解決了詞條關聯(lián)性弱的問題，也為用戶拓展了多維知識的瀏覽路徑。

三、總結(jié)

新版詞條頁上線后，客觀維度通過數(shù)據(jù)對比，得出頁面停留時間和瀏覽量均有顯著的增長。 主觀維度上通過用戶訪談，表明用戶對詞條改版體驗滿意度較高。用戶認可當前的新詞條設計形式新穎，瀏覽方便舒適，頁面內(nèi)容相較之前更專業(yè)可信，新增的內(nèi)容和功能能夠吸引人深入了解并體驗。

結(jié)合主客觀數(shù)據(jù)，有效驗證改版提升體驗，同時能有效激發(fā)用戶深入探索詞條的興趣，進而論證此次設計改版方案的有效性和價值性。

通過升級，我們與業(yè)務進一步明確百科未來發(fā)展新方向：未來的百科百科不僅是一個定義性知識平臺，而是要成為最具影響力的知識探索平臺。

此外，此次體驗升級，進一步建立起在行業(yè)競品中的體驗差異性。在提升用戶對百科內(nèi)容認可度和滿意度同時，鞏固了百科在知識行業(yè)中的領先地位。