PC的官網(wǎng)一直是Saas類產(chǎn)品獲取線索的一個重要入口，而官網(wǎng)的更新情況，往往也反應(yīng)品牌的情況。本文對數(shù)十款B2B產(chǎn)品的官網(wǎng)進(jìn)行了分析，一起來看看明年都有哪些發(fā)展趨勢。

如果說 SaaS 軟件產(chǎn)品卷，那么通過其門戶官網(wǎng)可窺一斑。

首先是 SaaS 軟件的官網(wǎng)往往更新及時，強(qiáng)調(diào)品牌個性，而且是銷售線索獲取的重要入口，公司產(chǎn)品部門和市場部門都非常重視。設(shè)計好一個漂亮?xí)r尚的門戶網(wǎng)站，有利于提升產(chǎn)品品牌形象，吸引客戶，并獲得更多的訂單和效益。

本文通過調(diào)研不同領(lǐng)域的 B2B SaaS 軟件門戶官網(wǎng)，在其中發(fā)現(xiàn)了一些規(guī)律，這些規(guī)律都是作者通過跟蹤觀察這幾家門戶官網(wǎng)在最近的改版升級當(dāng)中有突出變化的版塊提煉出來的，代表了通用的 B2B SaaS 軟件門戶官網(wǎng)的發(fā)展趨勢，具有一定的參考價值。

本文調(diào)研的 10 個案例研究對象:

• Atlassian
• Baklib
• ClickUp
• eGain
• Intercom
• Sitecore
• Magnolia
• Pendo
• Slack
• Notion

搶先了解十大的官網(wǎng)設(shè)計變化趨勢：

一、漸變

2024年再次流行漸變顏色。

SaaS 門戶網(wǎng)站首頁背景漸變是一種靈活多變的設(shè)計手法，通過合理運(yùn)用，可以提升網(wǎng)站的視覺吸引力，增強(qiáng)用戶體驗(yàn)。2025年越來越多的SaaS門戶網(wǎng)站，通過添加背景漸變的方式來提升網(wǎng)站的時尚度。

1.1 添加背景圖像漸變

通過添加跟品牌色一致，但顏色比較淺的背景圖來增加漸變效果是常用的辦法。如下圖 Baklib 官網(wǎng)，添加的背景漸變圖形有效地實(shí)現(xiàn)了整個網(wǎng)頁的層次感，同時給背景上面的圖形添加上下浮動的微交互動畫，從而讓整個界面充滿了科技感和未來感。

Baklib 通過添加漸變的背景圖片，突出層次感

1.2 添加背景顏色漸變

顏色漸變往往通過三種顏色的疊加漸變作為首頁某個區(qū)塊的背景，從而實(shí)現(xiàn)與其他區(qū)塊之間的區(qū)隔，又沒有那么生硬的區(qū)別開，實(shí)現(xiàn)有效的過渡。

Clickup 通過三色漸變背景平滑過渡版塊

1.3 網(wǎng)站內(nèi)頁添加漸變

給文章和內(nèi)容頁面增加淺淺的背景漸變。通過這樣也可以實(shí)現(xiàn)大面積文字內(nèi)容的頁面，具有相對柔和的畫面，不至于那么尖銳和屬性分明。

二、網(wǎng)格化設(shè)計

與漸變相反的布局：網(wǎng)格

網(wǎng)格化布局是一種將頁面劃分為一系列等寬列的布局方式，通過這些列來組織頁面上的內(nèi)容。這種布局方式能使頁面具有更好的結(jié)構(gòu)感、層次感和可讀性，從而提升用戶體驗(yàn)。

網(wǎng)格化布局恰恰跟上面的漸變布局走向反相反的方向。網(wǎng)格化布局更多是采用鮮明的表格邊框來區(qū)分每一個板塊的內(nèi)容，這樣的設(shè)計在2024年也得到了非常多的SaaS門戶網(wǎng)站的青睞。

2.1 首頁整體網(wǎng)格化布局

突出邊框有序分割。網(wǎng)格化布局，明顯的邊框網(wǎng)格化設(shè)計

Magnolia 的首頁整個頁面以網(wǎng)格作為布局

2.2 新聞、博客、案例等資源列表也通過網(wǎng)格化明顯的區(qū)分開

內(nèi)容清晰的等寬等比的分布在不同的網(wǎng)格當(dāng)中顯得非常的合理有序。

Intercom 采用明顯的線條來區(qū)分不同類型的數(shù)字內(nèi)容

2.3 頁腳部分也通過網(wǎng)格化布局

有序的排列諸如Logo、導(dǎo)航、快捷方式等內(nèi)容版塊。

Sitecore 頁腳部分采用明顯的線條網(wǎng)格區(qū)分內(nèi)容版塊

三、突出 AI 相關(guān)的信息

無 AI，不 SaaS。

今年還有個很大的變化就是許多的SaaS門戶網(wǎng)站上都突出了AI相關(guān)的內(nèi)容，這足以證明AI對SaaS軟件的影響和滲透。

AI 技術(shù)的快速發(fā)展正在深刻地改變著各個行業(yè)的面貌，SaaS 也不例外。隨著 AI 技術(shù)的不斷成熟，越來越多的 SaaS 企業(yè)開始將 AI 應(yīng)用到產(chǎn)品和服務(wù)中，以提升用戶體驗(yàn)、提高效率、降低成本。

3.1 將網(wǎng)站的 Slogan 添加“AI”關(guān)鍵詞：

eGain 直接在 Slogan上添加了 AI 關(guān)鍵詞

3.2 增加“AI”對篇幅

增加獨(dú)立的頁面版塊來介紹“AI”，比如Intercom則通過添加一份創(chuàng)始人致辭，用強(qiáng)調(diào)色標(biāo)記 AI 內(nèi)容，以突出 AI 相關(guān)的信息，以及領(lǐng)導(dǎo)者對擁抱 AI 的決心。

Clickup則是增加了單獨(dú)的 Section 頁面塊來介紹“AI”，同時給 AI 增加的新的品牌名稱。

四、平鋪菜單導(dǎo)航

一目了然，一鍵直達(dá)。

菜單導(dǎo)航對于一個 SaaS 門戶網(wǎng)站來說顯得非常的重要，它可以直觀的告訴用戶，你的產(chǎn)品是什么？解決方案有哪些？輔助資源有哪些等等。

調(diào)研的幾個 SaaS 平臺都采用了折疊+展開平鋪的菜單導(dǎo)航方式，增加足夠豐富的菜單導(dǎo)航，方便用戶一目了然，一鍵直達(dá)。

五、首頁大屏產(chǎn)品截圖

原生截圖，不加修飾。

今年SaaS門戶官網(wǎng)都非常流行添加軟件產(chǎn)品的全屏截圖，通過大圖直觀的讓用戶感受到后臺的操作功能，以快速讓用戶體驗(yàn)（UX）優(yōu)勢凸顯出來。

Clickup 將后臺核心頁面直接截圖展示

Baklib 也是將后臺頁面完整截圖

Atlassian 將設(shè)計圖改成了后臺界面截圖

Notion通過后臺截圖展示三大核心功能

六、微動效和微交互

細(xì)節(jié)決定體驗(yàn)。

研究的 8 個網(wǎng)站都添加了微動效和微交互效果，基于時間軸的上下滑動折疊/展開，基于功能版塊的左右折疊/展開等。節(jié)約了頁面版塊空間的同時，又把豐富的功能展現(xiàn)得淋漓盡致。

Pendo的首頁采用時間線滾動輪播效果

Magnolia 的功能特性版塊采用滾動折疊的微交互效果

七、在線文檔

Self-service 才是 SaaS 的精髓。

B2B SaaS 官網(wǎng)都添加有內(nèi)容豐富的文檔資源鏈接。核心目的是降低支持成本，用戶能通過自服務(wù)解決大部分問題，減少對客服的依賴，降低支持成本。

Magnolia 的在線文檔中心

Baklib采用了獨(dú)立的文檔二級域名

在線文檔內(nèi)容規(guī)劃包括：

• 用戶指南：詳細(xì)介紹產(chǎn)品的功能、操作步驟和常見問題。
• API文檔：提供詳細(xì)的 API 接口文檔，方便開發(fā)者進(jìn)行二次開發(fā)。
• 教程和案例：提供豐富的教程和案例，幫助用戶快速上手。
• 常見問題解答（FAQ）：收集用戶常見問題，并提供詳細(xì)解答。
• 視頻教程：配合文字說明，提供更直觀的教學(xué)。
• 社區(qū)論壇：建立用戶社區(qū)，鼓勵用戶交流，共同解決問題

八、競品對比

Alternative.

在官網(wǎng)上直接赤裸裸的爭鋒相對的添加競品對比/替換選擇，也是SaaS產(chǎn)品獨(dú)有的特點(diǎn)。

Notion的競品平替展示

Baklib 開辟單獨(dú)競品對比欄目

九、數(shù)據(jù)說話

SaaS 的邏輯是“降本增效”。

用數(shù)據(jù)說話，往往也是SaaS產(chǎn)品必有的版塊，因?yàn)?SaaS 軟件的核心作用是提高工作效率，降低生產(chǎn)成本，所以用數(shù)據(jù)說話顯得直接，也方便用戶算賬，加快選擇軟件的決策速度。

Slack 的數(shù)據(jù)看板

Atlassian 的數(shù)據(jù)版塊

十、更多

總結(jié)一下，優(yōu)秀的 SaaS 門戶網(wǎng)站往往都是與時俱進(jìn)的，在注重自身品牌的打造外，也都非常精通數(shù)據(jù)分析和用戶體驗(yàn)研究，隨時跟蹤用戶體驗(yàn)的反饋進(jìn)行改進(jìn)。

2025 年 SaaS 門戶官網(wǎng)設(shè)計將更加注重用戶體驗(yàn)、個性化和智能化，同時也會融合更多新興技術(shù)元素。企業(yè)需要不斷關(guān)注市場變化和用戶需求，及時調(diào)整官網(wǎng)設(shè)計策略，才能在激烈的競爭中脫穎而出。