前言

在 B 端業(yè)務中，官網通常承載著業(yè)務方的行業(yè)解決方案，其迭代頻率相對較低，而更多的迭代需求則源自于運營方面的調整。因此，我們很難像總結組件和典型頁面那樣，輕易提煉出一份官網的設計方法。這一度讓我陷入迷茫和猶豫。經過不斷的嘗試和積累，也終于窺見了一些規(guī)律和心得。本文將結合具體的案例，與大家一起深入探討 B 端官網設計的方法論，希望能夠為大家提供一些啟示和幫助。

一、B 端官網的定義

B 端產品的官網，是集產品展示、動態(tài)新聞以及線上銷售為一體的產業(yè)銷售平臺，也是企業(yè)與潛在客戶溝通的橋梁。企業(yè)可以通過官網為客戶提供各種在線服務和自助信息導航，比如產品體驗、網上表單、人工客戶服務等，這不僅方便了企業(yè)，也為企業(yè)節(jié)省了大量的勞動力成本。

二、B 端官網設計的目標

然而，在同質化現象嚴重的當下，B 端官網設計的需求不僅需要完成企業(yè)和產品的展示宣傳，更需要塑造獨特的品牌形象。如果想讓自己的網站領先于同行，就必須在制作網站時打造差異化。

當然，盲目追求差異化也是不可取的，充滿"個性"的網站可能導致訪客瀏覽體驗較差，不利于展示品牌內容。

因此，B 端產品的官網設計不僅要確保一定的獨特性，同時也要關注到客戶的瀏覽體驗，通過設計更好地"講述"產品、"吸引"用戶，將盡量多的潛在客戶轉化為注冊用戶并完成購買。

三、基于心流理論解析官網設計

1. 心流的定義

心流理論是認知心理學的成果，最早是由心理學家 Csikszent mihalyi 在 1975 年初步提出和研究的。"心流"，指的是人們從事某種事物或活動時表現出濃厚的興趣并促使個體完全投入其中。當具有較高技能水平的個體進行難度適中的活動時，用戶一般心境愉悅且輕松，容易沉浸其中，將諸多干擾排除，置身于眾多事物之外，往往忘記時間的存在，超出一般預期的完成相關的任務。

如果以潛在客戶在瀏覽產品官網為例，心流，即潛在客戶集中全部精力瀏覽信息的時刻，并且能獲取較多的有益信息和注冊通道。

2. 心流模型

心流模型中橫軸表示個人"技能/認知"水平，縱軸表示任務的"挑戰(zhàn)/掌控"難度，影響心流的兩大重要因素包括個人"技能/認知"水平和任務的"挑戰(zhàn)/掌控"難度。根據"技能/認知"和"挑戰(zhàn)/掌控"高低的對應關系，可得到覺醒、心流、控制、厭倦、放松、擔憂、冷漠、焦慮這 8 種體驗。

當任務挑戰(zhàn)難度過大，但個人技能水平較低的時候，導致難以應對的局面，會表現為焦慮的情緒；當挑戰(zhàn)難度較小，反而技能較高時，會隨之產生厭倦的情緒；當挑戰(zhàn)難度低，技能水平也低時，會出現淡漠的情緒，甚至選擇放棄。在"高技能/認知，高挑戰(zhàn)/掌控"的區(qū)域，兩者相匹配更容易激發(fā)心流的體驗。

3. 心流體驗的關鍵因素

Csikszentmihalyi 把心流體驗的概念概括出了 9 個特征。

后來，Novak 和 Hoffman 在研究心流體驗的過程中，進一步將 9 個特征歸納成心流產生的 3 類因素，即條件因素、體驗因素和結果因素。

4. 心流體驗與官網設計

基于條件因素、體驗因素和結果因素，我們也可以出官網設計的多個設計方向。

首先，條件因素要求為用戶建立清晰明確的目標。即在官網設計的內容層面，需要有足夠飽滿詳實的內容、易于解讀的信息、足夠直觀的目標通道。這也是唯一可控的因素。

其次，體驗因素要求為用戶帶來引人入勝的體驗。即在官網設計的形式層面，可以在基本一致性的前提下進行適當差異化，保持潛在的閱讀節(jié)奏感，使用戶注意力更加集中。

最后，結果因素要求為用戶提供符合期待的服務。結果因素更多體現在用戶最后的轉化階段，需要設計高效簡潔的操作流程，促進用戶自主參與并開啟接下來的使用旅程。

四、B 端官網設計的兩大條件因素

1. 信息分層——需求轉化

信息分層本質上是信息組織的一種方式，通過對信息的大小、位置進行排布歸類，能夠將復雜的信息分為不同的模塊呈現在我們的視野中。

官網中常見的信息分層基本為：導航、首焦、核心優(yōu)勢、產品介紹、業(yè)務數據、案例佐證、售后服務、產品背書、免費試用以及 footer。

這種分層不單是介紹產品，同時還站在用戶角度關注了用戶需求。

首先，在首焦吸引用戶對產品初步進行了解，并在核心優(yōu)勢板塊趁勢讓用戶進一步了解產品價值；

其次，在產品介紹、售后服務及業(yè)務數據的版塊加深用戶對產品的信任，并且展示一定的案例佐證和 品牌背書以打消用戶的疑慮；

最后，通過免費試用等 CTA 按鈕來實現快速轉化。

2. 直觀目標——促進轉化

CTA 是英文 Call-to-Action 的簡寫，又名行為召喚按鈕。在網頁中，CTA 按鈕往往是最顯眼的。通常使用醒目的顏色，搭配誘人的文字，以吸引用戶的注意力并促使他們執(zhí)行特定的行動。

例如 C 端產品中的"立即購買"按鈕，B 端官網中的"注冊賬戶""免費體驗"按鈕。其主要作用就是引導用戶作出特定操作，從而提高產品的點擊率和來轉化率。

要想提高 CTA 按鈕的點擊率，也有一些小 tips 可以總結。

首先就是按鈕樣式需要符合用戶認知，提高可辨識度；

其次按鈕上的文案最好使用清晰簡潔且有價值的提示文案，如"注冊/領取"等傳達明確的目的，而非"提交/發(fā)送服務申請"等含義過于寬泛；

再次我們還可以通過漸變、圓角等效果為 CTA 按鈕增加一些豐富質感，引導用戶互動、點擊；

最后不要忘了確保 CTA 按鈕較大的觸發(fā)區(qū)域，在用戶有限的注意力里給予更多的防錯點擊。

五、B 端官網設計的兩大體驗因素

1. 形式節(jié)奏——"立"與"破"

形式的"立"

"立"在于官網設計的規(guī)范方面，保證了體系化設計的起點，是官網的"骨"。例如布局形式、內容密度、色彩與字體體系等。其中官網的常見布局有固定版心、寬度自適應、單屏切換三種；在選用各種布局和用色的過程中，需要貼合企業(yè)產品的主要調性，樹立品牌特點。

1. 固定版心：能夠以更低成本實現開發(fā)，且布局適配度更廣，但缺點是屏效較低；
2. 布局自適應：能夠展示更多內容，擁有更高的屏效，因此自適應布局的適配機制也較為復雜；
3. 單屏切換：能夠實現用戶的沉浸式瀏覽，將其注意力聚焦至當前內容，更具儀式感，但單屏切換也有無法快速滾動瀏覽的缺點。

大家在選用布局形式時，可以權衡利弊，最大限度展示出產品優(yōu)勢與風格。

固定版心

自適應布局

不同的視覺規(guī)范配合不同的插圖元素也會形成較為鮮明的視覺風格，適用于不同場景。

例如，各類云平臺偏好于 3D 元素風格，數碼電子行業(yè)則偏好實景圖，OA 協(xié)同辦公類則常用簡筆畫突出簡潔高效的氣質。

形式的"破"

"破"在于打造視覺差異化。恰到好處的差異化會塑造合適的閱讀節(jié)奏，讓用戶明晰重點且不乏耐心。打造差異化，可以通過對"破形""破色""破域""破靜"四種形式來實現。

破形：破形設計通過打破規(guī)矩的設計布局，使頁面更具層次感和空間感，同時可結合品牌元素提升品牌識別度，增強用戶對品牌的印象與記憶。例如下圖的 CODING，將人物形象與品牌符號結合，"一枝紅杏出墻來"，頗具形式感。

破色：破色設計通過色彩的運用來強化信息傳達的效果，在多個相似模塊中使用醒目的顏色來突出重要的信息或按鈕，引導用戶的注意力。例如下圖的騰訊云，通過使用強烈且有差異的紫色來激發(fā)用戶的探索欲望，提高點擊率。

破域：人們在日常生活中習慣了節(jié)奏感的存在，如音樂、舞蹈等藝術形式中的節(jié)奏感。在官網設計中融入節(jié)奏感，可以更好地符合用戶的認知習慣，提高用戶對頁面的接受度和認同感。破域設計可以在頁面整體瀏覽過程中創(chuàng)造出有節(jié)奏的區(qū)域視覺變化，有助于構建清晰的信息瀏覽次序，使用戶能夠更輕松地理解和吸收官網冗長的頁面內容。例如下圖的火山引擎與?？?，上下相鄰的區(qū)域模塊彼此界限分明，在統(tǒng)一的視覺中利用輕重緩急向用戶清晰講述產品。

破靜：破靜設計可以理解為使用動態(tài)元素，可在頁面的關鍵區(qū)域動展示創(chuàng)意和活力，提升頁面的整體吸引力。例如下圖的輕流，首焦區(qū)域通過動態(tài) banner 讓用戶非常直觀地了解該平臺的核心價值與功能，兼具生動性與豐富度。

2. 互動感知——集中注意

微小的互動感知，常常需要投入很多設計嘗試，才能獲取最佳的用戶體驗。用戶在微小的細節(jié)中，可以獲取傳達反饋或行動的結果、增強直接操縱感和掌控感。那么這種效果有什么好處呢？想想看，微交互是觸發(fā)—反饋組，觸發(fā)功能元素后通過用戶界面變化向用戶傳達相關信息，是否就像對話一樣呢，幫助用戶聚焦于當下任務或輔助其完成某個目標。

官網中對微交互的適當使用，可以讓用戶更加積極地參與到實際交互中。

同時，對于承載眾多內容的官網界面，微交互也可以用設計元素來保證操作之間的連貫性，達到整體體驗的流暢度，降低用戶注意力被打斷的幾率。這種微交互通常是通過類似的元素來維持操作邏輯。

六、B 端官網設計的結果因素

降低門檻——高效簡潔

心流來到最后的結果階段，用戶已經通過條件因素開啟瀏覽、通過體驗因素保持專注，接下來則需要高效完成注冊，在順暢、簡潔的結果因素中完成心流閉環(huán)。

實際場景中，繁瑣冗長的表單是勸退很多用戶進行注冊的主要原因，我們可以通過降低門檻和友好文案來解決這個問題。

通過簡化表單降低門檻，我們可以最大限度地減少填寫量，節(jié)省用戶填寫的時間和精力，讓其感到操作方便，不會因復雜的流程而感到沮喪或困惑。這種順暢的體驗可以顯著提升用戶的滿意度和忠誠度。而通過友好的文案，則能夠讓用戶感到被尊重和關懷，提升整體的使用體驗和滿意度。同時友好的文案還可以減少用戶在填寫過程中的挫敗感和困惑感，提高他們完成表單的意愿和可能性，從而提高表單的提交率。例如下圖的 teambition 與 miro，直接外露一個注冊/使用的必填項，輔以醒目友好的介紹文字，點擊 CTA 直接進入轉化流程，通過此類方法可有效提高轉化率。

寫在最后

在本篇中，我們通過心流理論對 B 端官網設計進行了深入解析，希望這些洞見能為大家的設計實踐帶來啟發(fā)與幫助。在不斷變化的商業(yè)環(huán)境中，構建能夠引導用戶進入心流狀態(tài)的官網，既是業(yè)務目標，也是對用戶體驗設計的專業(yè)要求。心流狀態(tài)不僅能夠提升用戶的專注度和滿意度，還能有效促進業(yè)務目標的實現。

感謝您的閱讀和關注，也歡迎大家的留言與討論，通過本文的探討，希望能和大家一同獲得一些實用的設計策略和新的思考方式。設途漫漫，偶有星光，愿我們在設計之路上不斷前行，共同進步。

作者：iFlytek STC UXD