在B端業(yè)務(wù)中，官網(wǎng)通常承載著業(yè)務(wù)方的行業(yè)解決方案，其迭代頻率相對較低，而更多的迭代需求則源自于運(yùn)營方面的調(diào)整。因此，我們很難像總結(jié)組件和典型頁面那樣，輕易提煉出一份官網(wǎng)的設(shè)計(jì)方法。這一度讓我陷入迷茫和猶豫。經(jīng)過不斷的嘗試和積累，也終于窺見了一些規(guī)律和心得。本文將結(jié)合具體的案例，與大家一起深入探討B(tài)端官網(wǎng)設(shè)計(jì)的方法論，希望能夠?yàn)榇蠹姨峁┮恍﹩⑹竞蛶椭?/span>
B端產(chǎn)品的官網(wǎng)，是集產(chǎn)品展示、動(dòng)態(tài)新聞以及線上銷售為一體的產(chǎn)業(yè)銷售平臺(tái)，也是企業(yè)與潛在客戶溝通的橋梁。企業(yè)可以通過官網(wǎng)為客戶提供各種在線服務(wù)和自助信息導(dǎo)航，比如產(chǎn)品體驗(yàn)、網(wǎng)上表單、人工客戶服務(wù)等，這不僅方便了企業(yè)，也為企業(yè)節(jié)省了大量的勞動(dòng)力成本。
然而，在同質(zhì)化現(xiàn)象嚴(yán)重的當(dāng)下，B端官網(wǎng)設(shè)計(jì)的需求不僅需要完成企業(yè)和產(chǎn)品的展示宣傳，更需要塑造獨(dú)特的品牌形象。如果想讓自己的網(wǎng)站領(lǐng)先于同行，就必須在制作網(wǎng)站時(shí)打造差異化。當(dāng)然，盲目追求差異化也是不可取的，充滿“個(gè)性”的網(wǎng)站可能導(dǎo)致訪客瀏覽體驗(yàn)較差，不利于展示品牌內(nèi)容。因此，B端產(chǎn)品的官網(wǎng)設(shè)計(jì)不僅要確保一定的獨(dú)特性，同時(shí)也要關(guān)注到客戶的瀏覽體驗(yàn)，通過設(shè)計(jì)更好地“講述”產(chǎn)品、“吸引”用戶，將盡量多的潛在客戶轉(zhuǎn)化為注冊用戶并完成購買。
心流理論是認(rèn)知心理學(xué)的成果，最早是由心理學(xué)家Csikszent mihalyi在1975年初步提出和研究的。“心流”，指的是人們從事某種事物或活動(dòng)時(shí)表現(xiàn)出濃厚的興趣并促使個(gè)體完全投入其中。當(dāng)具有較高技能水平的個(gè)體進(jìn)行難度適中的活動(dòng)時(shí)，用戶一般心境愉悅且輕松，容易沉浸其中，將諸多干擾排除，置身于眾多事物之外，往往忘記時(shí)間的存在，超出一般預(yù)期的完成相關(guān)的任務(wù)。如果以潛在客戶在瀏覽產(chǎn)品官網(wǎng)為例，心流，即潛在客戶集中全部精力瀏覽信息的時(shí)刻，并且能獲取較多的有益信息和注冊通道。
心流模型中橫軸表示個(gè)人“技能/認(rèn)知”水平，縱軸表示任務(wù)的“挑戰(zhàn)/掌控”難度，影響心流的兩大重要因素包括個(gè)人“技能/認(rèn)知”水平和任務(wù)的“挑戰(zhàn)/掌控”難度。根據(jù)“技能/認(rèn)知”和“挑戰(zhàn)/掌控”高低的對應(yīng)關(guān)系，可得到覺醒、心流、控制、厭倦、放松、擔(dān)憂、冷漠、焦慮這8種體驗(yàn)。
當(dāng)任務(wù)挑戰(zhàn)難度過大，但個(gè)人技能水平較低的時(shí)候，導(dǎo)致難以應(yīng)對的局面，會(huì)表現(xiàn)為焦慮的情緒；當(dāng)挑戰(zhàn)難度較小，反而技能較高時(shí)，會(huì)隨之產(chǎn)生厭倦的情緒；當(dāng)挑戰(zhàn)難度低，技能水平也低時(shí)，會(huì)出現(xiàn)淡漠的情緒，甚至選擇放棄。在“高技能/認(rèn)知，高挑戰(zhàn)/掌控”的區(qū)域，兩者相匹配更容易激發(fā)心流的體驗(yàn)。
Csikszentmihalyi 把心流體驗(yàn)的概念概括出了9個(gè)特征。
后來，Novak和Hoffman在研究心流體驗(yàn)的過程中，進(jìn)一步將9個(gè)特征歸納成心流產(chǎn)生的3類因素，即條件因素、體驗(yàn)因素和結(jié)果因素。
基于條件因素、體驗(yàn)因素和結(jié)果因素，我們也可以出官網(wǎng)設(shè)計(jì)的多個(gè)設(shè)計(jì)方向。
|首先，條件因素要求為用戶建立清晰明確的目標(biāo)。即在官網(wǎng)設(shè)計(jì)的內(nèi)容層面，需要有足夠飽滿詳實(shí)的內(nèi)容、易于解讀的信息、足夠直觀的目標(biāo)通道。這也是唯一可控的因素。
|其次，體驗(yàn)因素要求為用戶帶來引人入勝的體驗(yàn)。即在官網(wǎng)設(shè)計(jì)的形式層面，可以在基本一致性的前提下進(jìn)行適當(dāng)差異化，保持潛在的閱讀節(jié)奏感，使用戶注意力更加集中。
|最后，結(jié)果因素要求為用戶提供符合期待的服務(wù)。結(jié)果因素更多體現(xiàn)在用戶最后的轉(zhuǎn)化階段，需要設(shè)計(jì)高效簡潔的操作流程，促進(jìn)用戶自主參與并開啟接下來的使用旅程。
信息分層本質(zhì)上是信息組織的一種方式，通過對信息的大小、位置進(jìn)行排布?xì)w類，能夠?qū)?fù)雜的信息分為不同的模塊呈現(xiàn)在我們的視野中。
官網(wǎng)中常見的信息分層基本為：導(dǎo)航、首焦、核心優(yōu)勢、產(chǎn)品介紹、業(yè)務(wù)數(shù)據(jù)、案例佐證、售后服務(wù)、產(chǎn)品背書、免費(fèi)試用以及footer。
這種分層不單是介紹產(chǎn)品，同時(shí)還站在用戶角度關(guān)注了用戶需求。
|首先，在首焦吸引用戶對產(chǎn)品初步進(jìn)行了解，并在核心優(yōu)勢板塊趁勢讓用戶
進(jìn)一步了解產(chǎn)品價(jià)值；
|其次，在產(chǎn)品介紹、售后服務(wù)及業(yè)務(wù)數(shù)據(jù)的版塊加深用戶對產(chǎn)品的信任
，并且展示一定的案例佐證和 品牌背書以打消用戶的疑慮；
|最后，通過免費(fèi)試用等CTA按鈕來實(shí)現(xiàn)快速轉(zhuǎn)化。
CTA是英文
Call-to-Action
的簡寫，又名行為召喚按鈕。在網(wǎng)頁中，CTA按鈕往往是最顯眼的。通常使用醒目的顏色，搭配誘人的文字，以吸引用戶的注意力并促使他們執(zhí)行特定的行動(dòng)。
例如C端產(chǎn)品中的“立即購買”按鈕，B端官網(wǎng)中的“注冊賬戶”“免費(fèi)體驗(yàn)”按鈕。其主要作用就是引導(dǎo)用戶作出特定操作，從而提高產(chǎn)品的點(diǎn)擊率和來轉(zhuǎn)化率。
要想提高CTA按鈕的點(diǎn)擊率，也有一些小tips可以總結(jié)。
|首先就是按鈕樣式需要符合用戶認(rèn)知，提高可辨識度；
|其次按鈕上的文案最好使用清晰簡潔且有價(jià)值的提示文案，如“注冊/領(lǐng)取”等傳達(dá)明確的目的，而非“提交/發(fā)送服務(wù)申請”等含義過于寬泛；
|
再次我們還可以通過漸變、圓角等效果為CTA按鈕增加一些豐富質(zhì)感，引導(dǎo)用戶互動(dòng)、點(diǎn)擊；
|最后不要忘了確保CTA按鈕較大的觸發(fā)區(qū)域，在用戶有限的注意力里給予更多的防錯(cuò)點(diǎn)擊。
在于官網(wǎng)設(shè)計(jì)的規(guī)范方面，保證了體系化設(shè)計(jì)的起點(diǎn)，是官網(wǎng)的“骨”。例如布局形式、內(nèi)容密度、色彩與字體體系等。其中官網(wǎng)的常見布局有固定版心、寬度自適應(yīng)、單屏切換三種；在選用各種布局和用色的過程中，需要貼合企業(yè)產(chǎn)品的主要性，樹立品牌特點(diǎn)。
|固定版心：能夠以更低成本實(shí)現(xiàn)開發(fā)，且布局適配度更廣，但缺點(diǎn)是屏效較低；
|布局自適應(yīng)：能夠展示更多內(nèi)容，擁有更高的屏效，因此自適應(yīng)布局的適配機(jī)制也較為復(fù)雜；
|單屏切換：能夠?qū)崿F(xiàn)用戶的沉浸式瀏覽，將其注意力聚焦至當(dāng)前內(nèi)容，更具儀式感，但單屏切換也有無法快速滾動(dòng)瀏覽的缺點(diǎn)。
大家在選用布局形式時(shí)，可以權(quán)衡利弊，最大限度展示出產(chǎn)品優(yōu)勢與風(fēng)格。
不同的視覺規(guī)范配合不同的插圖元素也會(huì)形成較為鮮明的視覺風(fēng)格，適用于不同場景。
例如，各類云平臺(tái)偏好于3D元素風(fēng)格，數(shù)碼電子行業(yè)則偏好實(shí)景圖，OA協(xié)同辦公類則常用簡筆畫突出簡潔高效的氣質(zhì)。
“破”
在于打造視覺差異化。恰到好處的差異化會(huì)塑造合適的閱讀節(jié)奏，讓用戶明晰重點(diǎn)且不乏耐心。打造差異化，可以通過對“破形”“破色”“破域”“破靜”四種形式來實(shí)現(xiàn)。
| 破形：
破形設(shè)計(jì)通過打破規(guī)矩的設(shè)計(jì)布局，使頁面更具層次感和空間感，同時(shí)可結(jié)合品牌元素提升品牌識別度，增強(qiáng)用戶對品牌的印象與記憶。例如下圖的CODING，將人物形象與品牌符號結(jié)合，“一枝紅杏出墻來”，頗具形式感。
| 破色：
破色設(shè)計(jì)通過色彩的運(yùn)用來強(qiáng)化信息傳達(dá)的效果，在多個(gè)相似模塊中使用醒目的顏色來突出重要的信息或按鈕，引導(dǎo)用戶的注意力。例如下圖的騰訊云，通過使用強(qiáng)烈且有差異的紫色來激發(fā)用戶的探索欲望，提高點(diǎn)擊率。
| 破域：
人們在日常生活中習(xí)慣了節(jié)奏感的存在，如音樂、舞蹈等藝術(shù)形式中的節(jié)奏感。在官網(wǎng)設(shè)計(jì)中融入節(jié)奏感，可以更好地符合用戶的認(rèn)知習(xí)慣，提高用戶對頁面的接受度和認(rèn)同感。破域設(shè)計(jì)可以在頁面整體瀏覽過程中創(chuàng)造出有節(jié)奏的區(qū)域視覺變化，有助于構(gòu)建清晰的信息瀏覽次序，使用戶能夠更輕松地理解和吸收官網(wǎng)冗長的頁面內(nèi)容。例如下圖的火山引擎與?？?，上下相鄰的區(qū)域模塊彼此界限分明，在統(tǒng)一的視覺中利用輕重緩急向用戶清晰講述產(chǎn)品。
| 破靜：
破靜設(shè)計(jì)可以理解為使用動(dòng)態(tài)元素，可在頁面的關(guān)鍵區(qū)域動(dòng)展示創(chuàng)意和活力，提升頁面的整體吸引力。例如下圖的輕流，首焦區(qū)域通過動(dòng)態(tài)banner讓用戶非常直觀地了解該平臺(tái)的核心價(jià)值與功能，兼具生動(dòng)性與豐富度。
微小的互動(dòng)感知，常常需要投入很多設(shè)計(jì)嘗試，才能獲取最佳的用戶體驗(yàn)。用戶在微小的細(xì)節(jié)中，可以獲取傳達(dá)反饋或行動(dòng)的結(jié)果、增強(qiáng)直接操縱感和掌控感。那么這種效果有什么好處呢？想想看，微交互是觸發(fā)—反饋組，觸發(fā)功能元素后通過用戶界面變化向用戶傳達(dá)相關(guān)信息，是否就像對話一樣呢，幫助用戶聚焦于當(dāng)下任務(wù)或輔助其完成某個(gè)目標(biāo)。
官網(wǎng)中對微交互的適當(dāng)使用，可以讓用戶更加積極地參與到實(shí)際交互中。
同時(shí)，對于承載眾多內(nèi)容的官網(wǎng)界面，微交互也可以用設(shè)計(jì)元素來保證操作之間的連貫性，達(dá)到整體體驗(yàn)的流暢度，降低用戶注意力被打斷的幾率。這種微交互通常是通過類似的元素來維持操作邏輯。
心流來到最后的結(jié)果階段，用戶已經(jīng)通過條件因素開啟瀏覽、通過體驗(yàn)因素保持專注，接下來則需要高效完成注冊，在順暢、簡潔的結(jié)果因素中完成心流閉環(huán)。
實(shí)際場景中，繁瑣冗長的表單是勸退很多用戶進(jìn)行注冊的主要原因，我們可以通過降低門檻和友好文案來解決這個(gè)問題。
通過簡化表單降低門檻，我們可以最大限度地減少填寫量，節(jié)省用戶填寫的時(shí)間和精力，讓其感到操作方便，不會(huì)因復(fù)雜的流程而感到沮喪或困惑。這種順暢的體驗(yàn)可以顯著提升用戶的滿意度和忠誠度。而通過友好的文案，則能夠讓用戶感到被尊重和關(guān)懷，提升整體的使用體驗(yàn)和滿意度。同時(shí)友好的文案還可以減少用戶在填寫過程中的挫敗感和困惑感，提高他們完成表單的意愿和可能性，從而提高表單的提交率。例如下圖的teambition與miro，直接外露一個(gè)注冊/使用的必填項(xiàng)，輔以醒目友好的介紹文字，點(diǎn)擊CTA直接進(jìn)入轉(zhuǎn)化流程，通過此類方法可有效提高轉(zhuǎn)化率。
在本篇中，我們通過心流理論對B端官網(wǎng)設(shè)計(jì)進(jìn)行了深入解析，希望這些洞見能為大家的設(shè)計(jì)實(shí)踐帶來啟發(fā)與幫助。在不斷變化的商業(yè)環(huán)境中，構(gòu)建能夠引導(dǎo)用戶進(jìn)入心流狀態(tài)的官網(wǎng)，既是業(yè)務(wù)目標(biāo)，也是對用戶體驗(yàn)設(shè)計(jì)的專業(yè)要求。心流狀態(tài)不僅能夠提升用戶的專注度和滿意度，還能有效促進(jìn)業(yè)務(wù)目標(biāo)的實(shí)現(xiàn)。
感謝您的閱讀和關(guān)注，也歡迎大家的留言與討論，通過本文的探討，希望能和大家一同獲得一些實(shí)用的設(shè)計(jì)策略和新的思考方式。設(shè)途漫漫，偶有星光，愿我們在設(shè)計(jì)之路上不斷前行，共同進(jìn)步。
作者：美工靚仔鏈接：https://www.zcool.com.cn/article/ZMTYyNDcwNA==.html來源：站酷著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
