什麼是 Webflow ?｜設計師必學的網頁架站平台

Q: 是否需要知道如何寫 code 才能使用 Webflow？

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

Q: Webflow 是免費的嗎？

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

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 的定價方式可以參考下面篇文章。

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 可能更適合那些完全不熟悉網站建設的人，可以讓設計師更直覺性的製作網站。

2. Webflow vs Squarespace：Webflow 和 Squarespace 哪個更好？

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

3. Squarespace vs Wix： Wix 和 Squarespace 哪個更好？

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

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

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

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