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