我們其實沒有偏愛哪一個平台或是決定永遠只使用它,但到目前為止,Webflow 是我們排名第一的無代碼 CMS 網站構建器。值得一提的是,Webflow 不是像 Squarespace、Wix 和 Weebly 那樣的單純的“拖放式”網站構建器,它可以讓你使用現成的模塊來構建你的網站,而無需事先了解如何使用 HTML 和 CSS,但你需要了解基本的 HTML/CSS 觀念!因為您正在使用與編碼類似的技術來構建網站。最大的區別在於你不必編寫代碼,而是從圖形用戶界面(如 Photoshop)創建元素和样式。

所以可以說 Webflow 有更小的構建塊,但必須知道如何拼湊,而 Squarespace 有大塊,且任何人都可以弄清楚如何構建。也就是說,對於開發人員來說,使用 Webflow 構建並節省 50-80% 的開發時間非常容易。對於設計師來說,經過幾個小時的培訓,你應該可以快速上手。

如果你是一個沒有任何網絡設計或開發經驗的企業主,我們仍會建議你尋求專業的設計師或 Agecny 來用 Webflow 製作你的網站。或者也可以利用 Squarespace 自己建立一個網站,其自由度和控制力雖然較低,但仍可以在較低預算下自己動手進行完成。

好的!讓我們來看看為什麼 Webflow 是一個很棒的平台,雖然之前已經發過幾篇文章專門來寫 Webflow,我們也是 Webflow 台灣唯一合作的專業合作夥伴,我們也希望可以將平台推薦給所有對於網頁設計有興趣的設計師和開發人員。

1. 自動化編程 = 專注於內容、設計和用戶體驗

像 Webflow 這樣的無代碼 Web 構建器最明顯的優勢是該平台會在後台自動為你構建代碼,也就是你的工作平台上基本上永遠不必看到它,但若有需要,仍可以打開它甚至下載後在任何地方使用。

Webflow 導出整個網站的代碼。 圖片來源: represent.no/

無代碼方法顯著減少了任何自定義設計、動畫、交互和 CMS 設置的開發時間。大多數時候,我們仍然會使用傳統開發中可用的所有工具。若用 Webflow 架站的話,我們通常會告訴客戶,我們可以以 50% 的成本實現他們 80% 的夢想。如果你對此有先見之明,那麼這裡的限制就沒有問題。此外,Webflow 正在大力投資努力以將 奇這個 80% 推向 100%。

2. 在沒有模板限制的情況下創建令人驚嘆的設計和用戶體驗

使用 Webflow 的高級交互和動畫工具可以讓你的網站看起來很真實,只需滾動此頁面即可看到那些動畫,且不會花到太多時間去開發。這些類型的用戶體驗做起來又快又簡單。

使用 Webflow 可以快速輕鬆地創建豐富的動畫。 圖片來源: Webflow.com

3. 內容編輯器易於使用

在 Webflow 中編輯內容非常容易,登入 Webflow 的 Account 後,你可以直接點擊或編輯的任何文本或圖像,其內容和顯示不像在 WordPress 和其他 CMS 中那樣分離,可以從我們之前發布的基礎 UI 功能及版面介紹內容看到,編輯任何的文字都是非常方便容易的。

https://www.youtube.com/user/tentencreative/videos

Webflow 可以讓多個編輯 (editors)同時在網站上工作,你會看到誰在做什麼以及在哪裡做,但如果要進到symbo或是發布的選項,只有最主要的 designer 有控制權。

4. 在不同的 URL 上暫存/測試網站版本

Webflow 在 your-site.webflow.io 附帶網站的暫存(測試)版本,你可以在其中確認目前的網頁測試工作,然後再將內容或設計的任何更改推送到您的實時網站。若你是在 WordPress 中運行網站,若沒有登台服務器和站點設置,所犯的任何錯誤都會在你的正式網站上生效。所以一定要祈禱你的 WordPress是有備份的,不然會非常慘。

Webflow 發佈的暫存域,可以輕鬆將你的 Webflow 站點發佈到單獨的“暫存”域以在發布前進行測試。

5. 備份

說到備份,每次你在 Webflow 中進行更改時,都會創建一個新備份。如果你正忙於站點上工作,Webflow 的自動備份每隔 5 分鐘會進行一次,因此如果發生任何意外情況,你可以在幾秒鐘內立即恢復安全。從 Webflow 控制面板預覽並輕鬆恢復到站點的先前版本。

頻繁備份 - 易於預覽和恢復。

你可以輕鬆複製 Webflow 網站,再將其連接到自定義域之前,它都是免費的。如果你想基於現有網站之一創建新網站,則重複網站可能會很有用。或你希望在構建和啟動新版本時在不同的 URL 上可用當前網站,你都可以在幾秒鐘內復制現有的 Webflow 網站。

6. 經濟實惠的託管、維護和升級

對於 CMS 驅動的網站,使用 Webflow 託管的起價為 16 美元/月。該平台會自動持續升級,而不會為您提供有關新功能的通知。如果您需要更改或升級有關設計或結構的任何內容,它的速度非常快。我們過去花費數小時進行開發、測試和部署的工作,通常在 Webflow 中只需幾分鐘即可完成。

Webflow Hosting 計劃 圖片來源: Webflow.com

7. 卓越的性能和速度

網站的性能和速度真的很重要!如果你的網站速度很慢,用戶的觀感和 Google 排名都會受到影響。我們多年來一直在不知疲倦地努力嘗試完善服務器和代碼以提高性能和速度,並且在服務器上花費了數千美元,並花費了無數個小時來調整所有可以調整的東西。甚至還沒辦法像 Webflow 那樣提供的開箱即用功能。因此,當你的網站是在 Webflow 上設計使用時,你也正在享受他們世界級的全球服務器基礎設施和 CDN(內容交付網絡)。

8. 制定電子商務

Webflow 最近發布了自己的內置電子商務。因此,現在你可以在結賬的整個過程中建立完全定制的網上商店,與其他網站頁面一樣輕鬆和快速。不過,就目前而言,如果線上銷售是主要業務,那麼 Shopify 這樣的平台很可能更適合。在這邊千萬要注意的是,台灣地區因為金流尚未有解決的方案,因此還沒辦法使用 Webflow 來做電子商務網站。

9. 安全 (SSL)

Webflow 站點附帶免費的 SSL 證書 (https://)。無需設置,它只是工作。更好的用戶體驗和谷歌排名。

10. CMS API 和自定義代碼

我們可以訪問 Webflow CMS 的 API(應用程序編程接口),它允許我們從 CMS 中獲取內容並將內容推送到 CMS。這可用於將內容拉入其他應用程序或每次在不同平台上發生某些事情時將內容推送到 Webflow。

上面的屏幕截圖來自站點設置,可以在站點範圍內的頁首和 footer 中添加自定義代碼。圖片來源: represent.no/

我們還能夠將自定義代碼塊包含在整個頁面或網站中。我們已經使用它來填充一個容器,其中包含從客戶端 API 中提取的客戶名稱和 logo,為您提供一個示例。

單個 Webflow 頁面上的自定義頁及 footer 代碼。 圖片來源: represent.no/

11. 簡單的搜索引擎優化

使用 Webflow 編輯器,你可以查看及設定所需的基本SEO 工具。從頁面標題和元描述到 Open Graph(Facebook 等)設置,以輕鬆優化您的頁面以進行站點搜索和社交共享。

在 Webflow 中編輯 SEO 設定

可以參考這篇文章來獲得更多如何在 Webflow 中設定SEO

Webflow 設定 SEO怎麼做? | Webflow 中文教程
你希望你的網站看起來很棒且容易被搜尋,那麼 SEO 這塊一定要花點心思去設定。但是,Google 不會因為你的網站漂亮就讓排名跑到前面,而這是為什麼要花時間去優化 SEO 的原因。

12. Webflow 的限制

  • 你不能更改網站代碼,只能下載它。另一方面,你可以使用自定義代碼塊在網頁上和全局頁眉/頁腳中添加自定義 CSS 和 JS。你還可以向元素添加類、ID 和屬性,以從自定義代碼中引用它們。但是如果你想在後端調整一些東西,那就沒有辦法了。因此,我們通常會進行初步評估以確定未來的需求。如果需要任何後端集成,我們通常必須使用另一個平台。
  • Webflow 可能不適合需要大量重組和構建頁面和結構的內容密集型網站。至少不是從編輯器視圖。但是我們可以對你團隊中的某個人進行幾個小時的培訓,他們也可以很好地進入 Designer 介面。
  • Webflow 正在努力支持將於 2022 年發布的多語言網站(目前只支援英語)

13. Webflow 學習資源

Webflow大學 是一個資源超級豐富的免費資料庫!由於Webflow是一個專業的平台,通常新手不可能一下子就掌握所有的知識,必須透過長時間的學習、閱讀很多資料,以提高技能。以便在你的業務或網站上使用此平台。當然若你對於英文資料非常苦手,也歡迎你利用 Tendemy 推出的全中文 Webflow Masterclass 來學習關於 Webflow的相關知識。

Tendemy - Webflow Masterclass
想成為一名自由接案設計師? 無論你住在哪裡,或是您嚮往自由的遠端工作。tendemy將向您展示數位產品公司在我們的頂級客戶案例中使用的工具框架,教會您如何設計出跟專業設計師一樣所需的熱門技能

14. Webflow用Flexbox和CSS Grid

使用 Flexbox 和 CSS Grid 能夠快速幫助使用現代佈局,Webflow允許你按照想要的任何方式構建網站,並且不會限制或限制佈局選項。此外,每當更新任何佈局時,按下發布後都可以立即看到更改,可以節省更多時間。因為不需要在後端編寫代碼,然後在其他地方測試它以查看預覽。通過Webflow的Flexbox和CSS Grid工具,可以更改佈局並立即運行,而不會有任何延遲的問題。

15. Webflow是一條龍服務

Webflow不僅是一個視覺化的網站編程平台,還是一個可以發布和托管你的網站。構建的網站只需點擊即可立即發布。作為一名專業的開發人員,這是一個巨大的優勢,可以在幾分鐘內構建一個完全運作的網站。

16. Webflow允許立即對網站進行更改

Webflow編輯器允許在同一頁面上編輯和更新的網站,而不需要進入其他模式進行編輯,若你不是工程師也可以輕鬆更改網站內容資訊。

17. Webflow使網站互動體驗加分

Webflow的互動和動畫工具讓你的網站在滑鼠滾動、懸停或滑鼠位置等輕易製作出相關的動畫,它會讓你的網站看起來非常專業和有吸引力。

18. 不再需要管理大量插件所造成的bug問題

網站開發人員或是管理網站的人,當你的插件更新時,通常會帶來很大的問題。使用 Webflow 不再需要追踪插件何時會過時或過期。基本上輕易創建一個無需插件及易於管理的網站。

19. 開發費用降低

傳統在製作一個官網大則可能需要兩、三百萬甚至更高。但隨著網站開發的工具的越來越新且便利,網站弱勢建在 Webflow 上,你想要的吸引力、速度和互動性都能夠做到,且可能只需要花傳統的費用一半。

20. 減少不必要支出

以往在管理網站,你可能需要多請一位工程師或是團隊來專門管理,但 Webflow 減少了專業技術員工的需求。通常再我們轉交專案後,你不需要一整支團隊來管理即可更改你的網站細節。

21. 重複使用模板

當你收到專案整體管理權限後,你可以重複使用模板我們已經幫你設定好的模板來增加新的頁面,這項功能可以幫助你快速編輯模板,不必每次都從頭開始設計一切。當然 Webflow的討論區也有很多免費到動畫資源及模板,若對這個有興趣設計或是小夥伴們都可以花時間研究一下。

更多閱讀:

Webflow 必學的五大技巧 | Webflow 中文教程
當開始回想起我剛開始學習如何使用 Webflow 時,有一些技巧是希望自己能早點知道,而這些 tips 絕對會讓我的 Webflow 學習之旅變得更加輕鬆!Webflow 並不像 Squarespace 或 Wix 那樣簡單的工作方式,這也是它神奇的原因。簡單來說 Squarespace 和 Wix 等網站建設者採用基於模板拖拉的方法,它們可以輕鬆快速地選擇模板、刪除一些內容並快速的發佈網站。
Webflow vs WordPress 都幾? 超詳解比較
在遇到 Weblfow 之前,tenten 大部分協助客戶建立網站都是使用 Wordpress 實現,同時我們也會定期為客戶維護網站、增加 Google Core Web Vitals 等分數。後來當我們使用了 Webflow 後,一切都變了!我們甚至將 tenten.co 的主網站移到了 Webflow,它讓我們可以實現更漂亮的設計及動畫,最重要的是節省了非常多的時間。當然 WordPress 和 Webflow 兩種 CMS平台都有好與壞,其旨都在簡化您的線上體驗的網站。
Tenten - Webflow 認證的專業夥伴|Webflow作品集
Webflow 目前已經成為我們最喜歡的 CMS 開發平台,它讓我們能夠以超高速度及質量進行開發網站及應用程式程式軟體,而今年 9 月份我們也非常自豪地宣布 tenten.co 也已成為台灣第一間的 Webflow 專家夥伴!這篇文章會告訴你,為什麼我們這麼喜愛 Webflow。
最適合設計師的 No-code 自架網站工具 — Webflow
「No-code」是近兩年在網站、app 製作中很流行的新概念。透過簡單易懂的UI 設計,讓複雜的程式碼,被幾個按鈕或欄位取代。只要有基本的 HTML、CSS 觀念讓你不需要寫任何 Code 也可以完成一個網站!今天要介紹的 Webflow 就是目前使用下來我覺得最適合設計師的網站架設工具。
複雜的 Weblow 收費方式解釋
Webflow 是用於構建和設計響應式網站的下一代一體化網頁設計工具 (Nocode無代碼工具)。 在這裡,我們將探索並解釋了一些令人困惑的 Webflow定價計劃
Share this post