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

如果說 SaaS 軟件產品卷，那么通過其門戶官網可窺一斑。

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

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

本文調研的 10 個案例研究對象:

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

搶先了解十大的官網設計變化趨勢：

一、漸變

2024年再次流行漸變顏色。

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

1.1 添加背景圖像漸變

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

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

1.2 添加背景顏色漸變

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

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

1.3 網站內頁添加漸變

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

二、網格化設計

與漸變相反的布局：網格

網格化布局是一種將頁面劃分為一系列等寬列的布局方式，通過這些列來組織頁面上的內容。這種布局方式能使頁面具有更好的結構感、層次感和可讀性，從而提升用戶體驗。

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

2.1 首頁整體網格化布局

突出邊框有序分割。網格化布局，明顯的邊框網格化設計

Magnolia 的首頁整個頁面以網格作為布局

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

內容清晰的等寬等比的分布在不同的網格當中顯得非常的合理有序。

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

2.3 頁腳部分也通過網格化布局

有序的排列諸如Logo、導航、快捷方式等內容版塊。

Sitecore 頁腳部分采用明顯的線條網格區(qū)分內容版塊

三、突出 AI 相關的信息

無 AI，不 SaaS。

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

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

3.1 將網站的 Slogan 添加“AI”關鍵詞：

eGain 直接在 Slogan上添加了 AI 關鍵詞

3.2 增加“AI”對篇幅

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

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

四、平鋪菜單導航

一目了然，一鍵直達。

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

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

五、首頁大屏產品截圖

原生截圖，不加修飾。

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

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

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

Atlassian 將設計圖改成了后臺界面截圖

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

六、微動效和微交互

細節(jié)決定體驗。

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

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

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

七、在線文檔

Self-service 才是 SaaS 的精髓。

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

Magnolia 的在線文檔中心

Baklib采用了獨立的文檔二級域名

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

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

八、競品對比

Alternative.

在官網上直接赤裸裸的爭鋒相對的添加競品對比/替換選擇，也是SaaS產品獨有的特點。

Notion的競品平替展示

Baklib 開辟單獨競品對比欄目

九、數據說話

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

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

Slack 的數據看板

Atlassian 的數據版塊

十、更多

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

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