本文將從心流理論出發(fā)，深入探討B(tài)端官網(wǎng)設計的方法論，旨在為設計師提供一套全面的策略，以打造既專業(yè)又具有吸引力的B端官網(wǎng)。

在B端業(yè)務中，官網(wǎng)通常承載著業(yè)務方的行業(yè)解決方案，其迭代頻率相對較低，而更多的迭代需求則源自于運營方面的調(diào)整。因此，我們很難像總結(jié)組件和典型頁面那樣，輕易提煉出一份官網(wǎng)的設計方法。這一度讓我陷入迷茫和猶豫。經(jīng)過不斷的嘗試和積累，也終于窺見了一些規(guī)律和心得。

一款产品无到有，产品经理需要做些什么？

在一个产品从无到有的过程中，要做好产品经理这个角色实在是不容易，除了大家都知道的写需求、写需求、写需求，要做的事多着呢。产品经理不是你眼中的只会找你麻烦，提要求..

查看详情 >

本文將結(jié)合具體的案例，與大家一起深入探討B(tài)端官網(wǎng)設計的方法論，希望能夠為大家提供一些啟示和幫助。

一、B端官網(wǎng)的定義

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

二、B端官網(wǎng)設計的目標

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

當然，盲目追求差異化也是不可取的，充滿“個性”的網(wǎng)站可能導致訪客瀏覽體驗較差，不利于展示品牌內(nèi)容。

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

三、基于心流理論解析官網(wǎng)設計

1. 心流的定義

心流理論是認知心理學的成果，最早是由心理學家Csikszent mihalyi在1975年初步提出和研究的?！靶牧鳌保傅氖侨藗儚氖履撤N事物或活動時表現(xiàn)出濃厚的興趣并促使個體完全投入其中。當具有較高技能水平的個體進行難度適中的活動時，用戶一般心境愉悅且輕松，容易沉浸其中，將諸多干擾排除，置身于眾多事物之外，往往忘記時間的存在，超出一般預期的完成相關的任務。

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

2. 心流模型

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

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

3. 心流體驗的關鍵因素

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

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

4. 心流體驗與官網(wǎng)設計

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

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

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

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

四、B端官網(wǎng)設計的兩大條件因素

1. 信息分層——需求轉(zhuǎn)化

信息分層本質(zhì)上是信息組織的一種方式，通過對信息的大小、位置進行排布歸類，能夠?qū)碗s的信息分為不同的模塊呈現(xiàn)在我們的視野中。

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

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

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

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

最后，通過免費試用等CTA按鈕來實現(xiàn)快速轉(zhuǎn)化。

2. 直觀目標——促進轉(zhuǎn)化

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

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

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

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

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

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

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

五、B端官網(wǎng)設計的兩大體驗因素

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

（1）形式的“立”

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

固定版心：能夠以更低成本實現(xiàn)開發(fā)，且布局適配度更廣，但缺點是屏效較低；

布局自適應：能夠展示更多內(nèi)容，擁有更高的屏效，因此自適應布局的適配機制也較為復雜；

單屏切換：能夠?qū)崿F(xiàn)用戶的沉浸式瀏覽，將其注意力聚焦至當前內(nèi)容，更具儀式感，但單屏切換也有無法快速滾動瀏覽的缺點。

大家在選用布局形式時，可以權(quán)衡利弊，最大限度展示出產(chǎn)品優(yōu)勢與風格。不同的視覺規(guī)范配合不同的插圖元素也會形成較為鮮明的視覺風格，適用于不同場景。例如，各類云平臺偏好于3D元素風格，數(shù)碼電子行業(yè)則偏好實景圖，OA協(xié)同辦公類則常用簡筆畫突出簡潔高效的氣質(zhì)。

（2）形式的“破”

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

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

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

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

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

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

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

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

?

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

六、B端官網(wǎng)設計的結(jié)果因素

降低門檻——高效簡潔。

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

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

通過簡化表單降低門檻，我們可以最大限度地減少填寫量，節(jié)省用戶填寫的時間和精力，讓其感到操作方便，不會因復雜的流程而感到沮喪或困惑。這種順暢的體驗可以顯著提升用戶的滿意度和忠誠度。而通過友好的文案，則能夠讓用戶感到被尊重和關懷，提升整體的使用體驗和滿意度。同時友好的文案還可以減少用戶在填寫過程中的挫敗感和困惑感，提高他們完成表單的意愿和可能性，從而提高表單的提交率。

例如下圖的teambition與miro，直接外露一個注冊/使用的必填項，輔以醒目友好的介紹文字，點擊CTA直接進入轉(zhuǎn)化流程，通過此類方法可有效提高轉(zhuǎn)化率。