Webflow 由 Vlad Magdalin( Intuit Brainstorm 的創辦人)、Sergie Magdalin 和 Bryant Chou(前 Vungle Inc. 的首席技術官)於 2013 年創立。Webflow 這個線上平台給工程師、網頁設計師和初學者留下了非常深刻的印象。

Why? 因為設計師再也不用把設計稿丟給工程師完成開發,自己一個人就可以完成大部分的專案。Wow!講起來容易,但做起來還真的很困難,裡面有非常多的眉角需要注意。

網頁設計師面臨的典型問題

首先了解網頁設計團隊在創建網站時面臨的挑戰很重要:

  • UI/ UX 設計師和工程師之間的溝通成本
    通常網頁設計的流程是將 UI/ UX 設計師的 Figma 中製作 prototype 交付給前端開發人員,再由開發人員必須進行額外的編碼迭代,不斷產生額外的來回溝通。
  • 難以編寫複雜的交互動畫
    設計師雖然可以在 prototype 中製作漂亮的動畫效果,但往往開發人員很難在代碼中重現相同的佈局或效果。
  • 優化各種螢幕的設計
    設計師往往準備 prototype 時需要製作各種版本尺寸的設計稿給工程師,也就是為了響應式網頁做的準備。

Webflow 是做什麼的?

Webflow 用於製作各種網站類型、功能和頁面,例如 Landing Page、電子商務網站、Blog、B2B、D2C 網站。而 Webflow最棒的功能就是他 CMS(內容管理系統)並且可作為網頁的託管平台。

為什麼大家都開始用 Webflow?

  • Webflow 讓你有機會在沒有開發人員的情況下編輯及發佈網站,這也意味著你無需擔心成為網頁設計專家,因為Webflow 已將過程簡化。
  • 你可以直接在頁面上操作內容,包括文字和圖像。
  • 任何員工都可以登錄並進行更改,並且可以控制員工可以編輯的內容。
  • Webflow 大學和論壇為剛起步的人提供了大量資源,可以讓你查找答案。

是否需要知道如何寫 code 才能使用 Webflow?

不需要!

Webflow 雖然不要求需要寫 Code 的基礎即可開始製作,但它同時也提供自定義代碼,讓會寫 Code 的人有更多彈性及自由的空間。由於這樣的特性 Webflow 對於不管是剛接觸網頁設計師或是有經驗的設計師來說都是一個很棒的選擇。

雖然 Webflow 提供完整可視化網頁設計的 CMS 功能,但因為他的設定方式有點困難且不易上手,因此我們會建議你找一位具有編碼經驗的 Webflow Agency 或設計師來處理這個部分。

而 Webflow 最大的優點是在你的項目外包給設計師完成並及交付給你後,基本上無需再委託原開發人員進行修改,因為大部分的情況下都是可以自己進行調整的。

Webflow 使用什麼程式語言?

Webflow 使用 HTML、CSS 和 JavaScript 來寫代碼,而這些代碼大部分都是藏後台,在前台是看不到這些複雜的代碼。但這也不代表不需要任何代碼就可以直接編輯,設計師需要在每個組件的命名上注意,由此一來避免語法或命名的錯誤。這部分講起來有點複雜,因為我們發現很多專案內的組件因為命名錯誤,導致無法將 Webflow 的功能發揮到最大效益。

HTML(超文本標記語言)用於生成頁面內容——頁面上的所有標題、段落、按鈕和鏈接。這是在視覺設計器中向網站添加元素和文本時所做的更改。而 CSS(層疊樣式表)定義了所有這些元素在加載時的外觀,包括大小、字體、顏色等等。這由 Webflow 編輯器中的樣式面板處理。

JavaScript 為網站添加了功能和交互性,從下拉菜單或圖像滑塊等簡單功能到 3D 動畫效果等更複雜的元素。Webflow 的組件庫使用 JavaScript 使你的網站為用戶服務,從而使用 Webflow 輕鬆快速地構建交互式和獨特的網站。

此外,使用 Webflow 代碼編輯器,經驗豐富的設計人員可以利用 JavaScript 庫向網站添加自定義元素。將這些元素直接添加到代碼中的能力意味著 Webflow 設計人員將永遠不會受到平臺本身的限制,使其非常適合經驗豐富的網頁設計團隊。

Webflow 產出的網頁代碼乾淨嗎?

Webflow 產出的網頁是非常乾淨的,因此你無需花費數小時學習編程語言。而 Webflow 的搜索引擎優化和可訪問性的最佳實踐為你的網站自動創建 HTML、CSS 和 JavaScript,讓設計師可以更專注的在產出客戶滿意的設計上。

但對於我們這些列印過 “hello worlds” 的人來說,Webflow 使你能夠在網站的tag和tag之前或在單個頁面上編輯代碼。若你選擇不使用 Webflow 網域發布工具,也可以將整個站點的代碼直接導出到一個 zip 文件,其中包含你的 HTML、CSS 和 JavaScript,準備好上傳到你指定的網域。(但要注意的是若你有使用到 Webflow 的 CMS 功能,打包後就沒辦法使用囉!)

Webflow 是免費的嗎?

是的。Webflow 提供的 Starter plan 是永遠免費的,而 Starter plan允許使用者在 Webflow 中構建最多兩個網站,但網域會是掛在 webflow.io下面。而付費的方案從每月 12 美元到 212 美元不等。這使得 Webflow 成為一個極具成本效益的選擇,因為你可以等到設計完全滿意時,你才需要付費。

總而言之, Webflow 的定價取決於你需要的託管功能。更多關於 Webflow 的定價方式可以參考下面篇文章。

Weblow 定價,費用,方案指南:我應該選哪個計畫?每個計畫差異到是什麼?
Webflow 的定價可能有令人不知所措。因爲它有超多種不同的計劃可供選擇,要找出最適合自己項目的計畫可能會有點無頭緒,為了幫助你更輕鬆地做出決定,我們整理了這份Webflow定價指南。請繼續閱讀以了解如何為你的 Webflow 網站選擇正確的計劃。
https://tenten.co/learning/pricing-of-webflow/

Webflow 是 CMS 嗎?

是的。CMS (Customer Management System) 代表內容管理系統,CMS 的本質上是一個幫助你在建立網站時的數據庫,而 Webflow 是最可定制的線上內容管理系統之一。

為什麼人們選擇 Webflow 的 CMS?

  • 用戶可以創建、編輯、更新和發布。
  • 允許多個用戶同時使用。
  • 不需要編碼知識。
  • 在成本上有效。
  • 高級 SEO 工具和插件。
  • 通過視覺設計工具易於學習。
  • 可以提高你的網站在主要搜索引擎(例如 Google)中的排名。
  • 所提供的安全性會定期進行測試。
  • 企業無需開發人員即可立即進行這些更改。
  • 無需編碼即可更改視覺元素。
  • 將所有 Web 內容存儲在一個地方。

Webflow 可製作電子商務網站嗎?

可以的!但與 Shopify 相比,許多人忽略了 Webflow 提供的 Shopify 集成。也就是著人們可以在嵌入 Shopify 小部件的同時,在 Webflow 上構建一個功能強大且有吸引力的網站。若你已經有 Shopify 頁面,也可以輕鬆地將其轉換為 Webflow。

Webflow電子商務經常被選擇的原因:

  • Webflow 電子商務功能允許使用預製模板或按照你的意願自定義商店的默認路徑。
  • 可以與 Zapier 等其他服務集成。
  • 電子商務默認設置允許你更快地開始銷售 - 例如,自動應用當地稅率。
  • 自動接收電子郵件/連接到 Mailchimp 以進行電子郵件營銷活動。
  • 與 Google Analytics 集成以進行電子商務跟踪,從而輕鬆跟踪在線流量並確定需要改進的地方。

Webflow 的 SEO 效果好嗎?

搜索引擎優化我們都成稱為SEO,而它對網站來說超級重要。Webflow 有許多功能可以幫助網站獲得更好的搜索引擎排名。那麼,為什麼 Webflow 在 SEO 方面是一個不錯的選擇?

  • 優先考慮乾淨的代碼,搜索引擎爬蟲可以輕鬆掃描了解網站的內容。允許像谷歌這樣的搜索引擎對頁面進行適當的排名。
  • 與 Google 分析和搜索控制台集成。
  • 可用的設計功能有助於在搜索中獲得“Mobile friendly”的標籤。
  • Webflow 的功能支持使 SEO 變得更容易,這意味著增加了你網站的參與度、流量和轉化率。

關於 Webflow 的託管功能

Webflow 提供便宜且快速的託管平台,例如:

  • 自動備份和版本控制。
  • 發佈後可以從任何裝置上確認。

Webflow 將所有這些元素結合在全球託管基礎設施中,只需單擊一個按鈕即可使用,也就是在 Webflow 點下發佈專案時,全世界的人都看得到。

Webflow 託管速度快嗎?

Webflow 的網站針對 HTTP/2 開箱即用進行了優化,也就是說它可以在網絡上盡可能快地加載。若你選擇了 Webflow 企業計劃(專為大型國際企業設計),它每月可處理多達 500,000 名訪問者。而這使得 Webflow 成為中小型在線企業的完美選擇,Webflow 能夠為任何站點提供快速有效的託管。

最重要的是,Webflow 的設計工具旨在確保你的網站針對快速加載時間進行了優化,並且可以突出顯示錯誤,或建議對你的網站進行更改以輕鬆縮短加載時間 - 確保你可以獲得最佳速度你的網站很容易。在人們時間越來越緊迫的世界中,Webflow 非常適合提供人們在瀏覽時所需的速度和效率

Webflow 託管提供多少存儲空間?

Webflow 的託管服務最多可以在你的網站上存儲多達 100 個獨特的靜態頁面,其內容管理系統可以根據 CMS 信息自動生成多達 500,000 個頁面的內容。這使得 Webflow 成為Blog、線上商店和擁有大量產品和服務的企業的理想、無代碼解決方案。利用 Webflow 的服務器,你可以購買自定義域名,然後單擊按鈕將整個站點發佈到網絡上,而無需擔心設置外部託管或使用第三方服務為服務器託管付費。

Webflow 與其他競爭對手的差異?

1. Webflow 與 WordPress:Webflow 和 WordPress 哪個更好?

這兩種工具都受到許多人的歡迎,因此並不是哪個更好,而是你喜歡的網站體驗類型。WordPress 提供了一項相對簡單易用的免費服務,具有多種功能和選項。但Webflow 可能更適合那些完全不熟悉網站建設的人,可以讓設計師更直覺性的製作網站。

Webflow vs WordPress 都幾? 超詳解比較
在遇到 Weblfow 之前,tenten 大部分協助客戶建立網站都是使用 Wordpress 實現,同時我們也會定期為客戶維護網站、增加 Google Core Web Vitals 等分數。後來當我們使用了 Webflow 後,一切都變了!我們甚至將 tenten.co 的主網站移到了 Webflow,它讓我們可以實現更漂亮的設計及動畫,最重要的是節省了非常多的時間。當然 WordPress 和 Webflow 兩種 CMS平台都有好與壞,其旨都在簡化您的線上體驗的網站。


2. Webflow vs Squarespace:Webflow 和 Squarespace 哪個更好

Squarespace 非常適合需要簡單功能和基本設計和特性的企業。由於用戶僅限於他們選擇的模板,但簡單、實惠和智能的外觀 Squarespace 非常適合首次使用的網站。若你需要一個功能強大的網站,具有特定頁面、功能等,Webflow 可能是企業最好的選擇。Webflow 更大的可定制性可能使其更適合那些尋求更大靈活性的人。

Webflow 與 Squarespace 都幾?超詳解比較
這麼多年來,我們一直在使用且比較眾多 CMS 網站建置平台,Webflow 與 Squarespace 都是兩個令人印象深刻的且對設計友好的平台。如果你正在閱讀本指南,那麼你可能已經略知幾點。我們將直接跳到它們之間的區別:Webflow 使用難度高,但提供了更大的靈活性,而 Squarespace 提供了易用性、高質量的功能和令人驚嘆的模板—以完全設計自由為代價。

3. Squarespace vs Wix: Wix 和 Squarespace 哪個更好

Wix 在全球擁有 1.25 億註冊用戶,但 Squarespace 仍是初階網頁設計師的熱門選擇。對於那些幾乎沒有網頁設計經驗的人來說,Wix 是一種更簡單、更實惠的選擇。但對於有一點設計要求的人來說,Squarespace是一個更好的工具,因為它提供模板是 Wix 完全沒辦法相比的。

Wix vs Squarespace都幾?超詳解比較
身為設計師想要製作作品集或是個人網站,該使用哪個 CMS 平台好?相信正在閱讀這篇的你來這裡是為了找出這兩個網站平台中,哪一個將是更好選擇。在分別使用 Wix 和 Squarespace 建立了幾個網站後,我們有一些心得可以分享給你。

哪種類型的業務需要製作網站?

不同類型的網站可以滿足企業的不同需求。你可以利用 Webflow 創建適合你業務的樣式和功能,包括特性、佈局和樣式。下面是一些可以在 Webflow 上構建的一些網站類型:

  • 電子商務網站:如果你是銷售產品或服務的企業,那麼你絕對需要一個電商網站。而你的線上商城需要具有互動性、吸引力、信息量大、易於導航且安全。Webflow 提供電子商務網站所需的一切。提供所需的最簡單功能,例如可定制的購物車和結賬體驗、管理產品和訂單、智能分類和產品過濾。無需任何代碼即可創建完全自定義的在線商店。‍
  • 作品集網站:用於創意或藝術家的專業人士。(攝影師/攝像師/設計師/藝術家/作家)展示他們的作品。可能包含的設計功能是幻燈片/畫廊,因為重點是如何最好地展示作品。 ‍
  • Blog : Webflow 對 Blog 有用嗎?Blog 是文章/影片的渠道,目的是告知和娛樂觀眾,可能是個人或公司。利用集客式行銷 inbound marketing 來增加你的網站流量,提供優質的內容,讓大家對你的網站印象深刻。
  • 商業網站:想要擁有新顧客或客戶的企業都需要有一個網站。因為幾乎所有消費者在嘗試其他方法之前,都會先從網路搜尋相關資訊。而該網站擁有豐富的品牌,需要提供強大的用戶體驗,因為它代表了公司的專業精神和整體形象。 ‍

結論

我們對 Webflow 的設計架構及費用邏輯已經算是分析得非常透徹,簡單來說Webflow 是為那些不想要太便宜又簡單,但又不想失去控製權或在網站上花大筆金錢的企業而設計的,它可以在不依賴開發人員進行微小更改的情況下獲得更多結果,而企業也可收回控制權並可以自己進行編輯。

Webflow 能夠還原 Figma 設計的 prototype 真實度,並且能夠讓團隊成員一起編輯反饋,完全簡化了從原型到完整 UI 的轉換所需要的時間。

https://tenten.co/zh/services/webflow-service

我們同時提供免費資源和 Webflow 模板可以幫助你學習 Webflow,目前 tenten 也正在積極準備 Webflow Masterclass的課程,預計今年八月份會推出。

以下是我們目前的一些免費資源,對 Webflow 有興趣的朋友們可以仔細閱讀。


更多閱讀

Tenten - Webflow 認證的專業夥伴|Webflow作品集
Webflow 目前已經成為我們最喜歡的 CMS 開發平台,它讓我們能夠以超高速度及質量進行開發網站及應用程式程式軟體,而今年 9 月份我們也非常自豪地宣布 tenten.co 也已成為台灣第一間的 Webflow 專家夥伴!這篇文章會告訴你,為什麼我們這麼喜愛 Webflow。
最適合設計師的 No-code 自架網站工具 — Webflow
「No-code」是近兩年在網站、app 製作中很流行的新概念。透過簡單易懂的UI 設計,讓複雜的程式碼,被幾個按鈕或欄位取代。只要有基本的 HTML、CSS 觀念讓你不需要寫任何 Code 也可以完成一個網站!今天要介紹的 Webflow 就是目前使用下來我覺得最適合設計師的網站架設工具。
Webflow 必學的五大技巧 | Webflow 中文教學
當開始回想起我剛開始學習如何使用 Webflow 時,有一些技巧是希望自己能早點知道,而這些 tips 絕對會讓我的 Webflow 學習之旅變得更加輕鬆!Webflow 並不像 Squarespace 或 Wix 那樣簡單的工作方式,這也是它神奇的原因。簡單來說 Squarespace 和 Wix 等網站建設者採用基於模板拖拉的方法,它們可以輕鬆快速地選擇模板、刪除一些內容並快速的發佈網站。
7 個超好用的 Webflow 資源站,讓你的下一個專案網站飛天
tenten 喜歡使用 Webflow 來構建網站,因為它既快速又簡單,我們更追求學習,因此常常會花時來探索一些很酷的網站及創新的模板來使用。本篇我們會分享一些在製作 Webflow 時你需要知道的最佳資源網站,你絕對可以利用這些出色的工具資源來進一步改善你的網站構建體驗。
Share this post