文 | 劉雨潔、王與桐
編輯 | 石亞瓊
封面來源｜IC photo
眼下，Webflow 已經成為全球無代碼搭建平台心中的 " 耶路撒冷 "。
Webflow 是一家專注于為設計師和開發人員提供無代碼建站和設計工具的美國軟件公司。自成立以來，Webflow 一直緻力于幫助用戶通過可視化界面快速創建專業網站，同時提供一系列強大的設計功能，如自定義布局、動畫效果、圖像處理等。
盡管成立于 2012 年，到今年也是 " 十年老店 " 了，但 Webflow 真正被大家認可價值，時間卻并不長。此前，Webflow 一直以 " 筚路藍縷 " 的狀态創業，創始人 Vlad Magdalin 曾公開表示 " 我承擔的最大風險是負債累累 "；甚至在 2014~2016 年移動互聯網繁榮期，還要不斷接受着來自資方的嘲諷。
這樣不被認可的狀态持續很久。直到去年，Webflow 拿到了 1.4 億美元 B 輪融資，估值達到了 21 億美元，終于跻身獨角獸陣營。在今年，Webflow 的價值進一步受到資本市場認可，3 月，Webflow 完成 1.2 億美元的 C 輪融資；11 月，Webflow Conference 大會舉辦，并上線更多功能，不少業内人士預測，在下一輪融資時，Webflow 将跻身百億美金估值陣營。
近 3 年，Webflow 的 ARR 增長十倍以上，同時擁有了來自 190+ 國家數百萬的用戶和超過 20 萬的付費客戶，業内對 Webflow 的共同認知是，2022 年，ARR 将達到 2 億美金。
估值和 ARR 隻能代表一部分商業價值，而 Webflow 早已在用戶價值層面得到了更多證明——在美國，會 Webflow 已經像會 C++、Java 一樣，值得被寫進簡曆裡；早前已經出現了 Webflow 的 Chrome 插件 ……
總之，Webflow 代表着是新一代的無代碼應用——如果說 Airtable 這類無代碼産品，更多是起到降本增效的效果，那麼 Webflow 想要實現的，就是切實改變生産方式。
01 由設計師取代前端工程師
在我們分析 Webflow 是如何找對路徑成長成明星公司之前，先要回答，Webflow 到底是做什麼的？
簡單來說，就是想要搭建網站的人，通過 Webflow，能夠在不編寫一行代碼的前提下，實現最接近 " 用代碼寫出來的 " 網站設計效果：本質是隻需要拖拉拽就可以搭建出一個可交互的網站，而 Webflow 更大的優勢在于支持一鍵導出代碼。也就是說，不但是沒有編程能力的人可以把做網站變得像做 PPT 一樣簡單，有前端開發能力的人也完全可以把它作為一個專業化的平台來使用，從而減少複雜的代碼工作。
沒有編程能力就能搭建網頁，聽起來就像不用走路就能移動一樣。
畢竟，在以往，一個網頁的誕生，要經過設計師和前端工程師兩個角色的共同打磨。就像一台手術一樣，醫生和護士的配合不可或缺。但在上一代網頁開發主流環境中，開發的角色更像是醫生，一個不懂前端開發的設計師設計水平再高也不可能造出一個網站，但一個不懂設計的前端開發卻擁有獨立上線網站的能力，即使代價是：它可能會很醜。
一切的話語權，來源于數字化的發生基于非可視化的編碼過程。但無代碼的出現，使得專業角色的價值流動，随着網頁開發的真正需求發生改變。
設計師，通過無代碼，也可以搭建出網頁。這就涉及到 Webflow 的亮點之一——留給設計師的審美空間。
在對 Webflow 進行相關采訪前，36 氪預設了很多關于 "Webflow 究竟好在哪裡 " 的回答，但最終在采訪時，大家首先會提到的并非是實用性、成本效益或效率方面，而是 "Webflow 更接近真正的前端開發，定制化空間非常大 "。
定制化之于設計師來說，就像耦合性之于開發人員一樣，對 " 創造 " 這一維度的衡量尤為看重。就像我們在玩《我的世界》、《動森》等遊戲時，最能延展樂趣和驅動我們長時間遊玩的也是其家居建築的高度可定制性。如果僅僅追逐效率和零門檻的 " 傻瓜式操作 "，産品專業性上限就會變得很低，其 " 平民化 " 的代價有可能是得不償失的。
毫無疑問，Webflow 在成立之初，相比同類可視化網頁編輯器，也曾受到過 " 不夠平民化 " 的質疑。由于學習門檻更高，也沒有像競品一樣内置大量的模版和預置好的樣式，Webflow 從一開始就将用戶畫像縮小到了平面 /UI 設計師人群。而這一群體的工作，原本就不是在單一追求降本增效，而是創造審美價值，引領設計趨勢。
但幾年過後，Webflow 的成功已經足以為我們證明，無論其他産品做得多麼低門檻，甚至能讓市場營銷人員在 3 分鐘内做出一個可以上線的頁面，但在大多數工作和獨立項目中，網頁設計仍然是一項需要符合設計标準和趨勢的創造性工作，每一個組件和配色都對應着品牌标準和設計文檔中的信息。因此，事實上，對于新一代無碼化網頁設計工具來說，也隻有設計師群體的口碑傳播，對于産品的價值增長，才能夠是指數級的。
總體來說，這是一個自上而下，從專業人群向大衆過渡的 PLG（産品為導向增長）領域，隻有吸引了活躍的設計師，讓他們自發地沉澱出自己的設計資産，并建立社群，才能夠讓更多人享有低成本、高效率的審美效果。
Webflow 頁面
Webflow 的 Made In Webflow 社區，在這裡，你可以一鍵克隆其他設計師在 Webflow 上制作的網站或 UI 标準，并将其修改成自己的作品。
基于此，甚至對于很多初涉前端開發領域的 UI/ 平面設計師來說，Webflow 完全可以成為他們的啟蒙老師。
02 可視化 + 無代碼，Web 開發的 " 版本答案 "？
想要簡化網頁開發流程，讓更多有 idea 而沒有開發能力的人設計出網頁，Webflow 并不是第一個，甚至此前，已經有不少人努力過了。自從 " 企業官網 " 的必要性深入人心，國人對大量分散的建站服務早已不陌生，而在這一代集成了電商、CMS 功能的建站服務中，除了比 Webflow 顯露鋒芒更早的 Spacesquare、Wix 等，阿裡雲等雲廠商也有配套雲主機出售的網站編輯器。
而在海外市場，截至目前為止，針對各類用戶群體的無碼化建站仍然是最熱的創業賽道之一。一邊是 Canva 等受衆更廣的創意效率廠商正在大力布局，另一邊，國外最大的産品發現社區 ProductHunt 上幾乎每隔幾天就會誕生一個新的建站産品。而即便如此，目前大多數企業建站仍然會選擇傳統的前端開發方式：交給内部開發人員或者服務商去編碼。
企業的決策動線不難理解。首先，網站開發是一項結果導向性的業務，開發的過程究竟是可視化還是代碼化，對于企業來說沒有太大區别。而且，企業管理者很少能全面了解網站開發的細節，如果設計師拍着胸脯表示 " 我們公司隻需要購買一套建站服務，就可以節省掉前端人員的成本 "，那也就意味着設計師自身在應對企業建站需求時需要承擔的責任更重。而在目前的建站環境下，除了原生的前端開發之外，目前的無碼化工具，即使是最專業的 Webflow，也很難做到完全解決某些 " 突如其來 " 的需求。
因此，相比産品發展到中後期才有可能實現爆發的企業服務，無碼化網頁設計工具前期所拓展的用戶勢必是大量的 C 端 freelancer 和設計師的獨立項目（如個人官網、作品集等）。在這一方面，Webflow 想得很清楚，如果從一開始就做成了企業服務風格的建站工具，Webflow 也許會成為下一個以定制化服務為主的公司，像諸多建站服務商一樣，圍繞着如電商賣家等一類固定類型的企業客戶，構建一體化平台。
那麼我們的科技世界就會少了一個讓無數設計師迸發出創造激情、專注于視覺本身的工具，又或者，最先跑通無碼化 PLG 的全球獨角獸就會花落别家。
從網站開發的進程來看，開發本身就一直在演進、發展，向着編寫更少的代碼進化，從最基本的純手工 html 編寫，到出現了 React、VUE 等靈活高效的 JS 框架，再到各個企業的設計團隊紛紛做出了适配這兩種主流框架的 " 開箱即用 " 的設計系統。如今，前端開發人員隻需要輸入兩句命令行就能在本地生成一個簡潔的 Web App（即一個可以搭配域名部署的網站），甚至可以直接請教 AI 如何編寫一些需求。
以流行的 React 設計框架 Next.js 為例，從上手到生成一個空白的 Web App 隻需要一步。
就像是做飯不再需要從執行紙質菜譜開始，而是可以直接選購份量科學的調料包，放入料理機。更少的操作布局意味着更少的代碼，即前端開發本身就已經符合 " 低代碼 " 的趨勢：最早機器語言 01，到彙編，再從彙編再到 C 再到 C+ 再到 Java 再到 Python，越來越簡單，代碼越來越少。
在這一趨勢下，近年來無代碼 / 低代碼開發的平台和工具也越來越多，比如 retool、universe 等。
低代碼 / 無代碼産業圖譜
而前端網頁設計，涉及到上文提到的非常重要的定制化和審美因素，因此還有另一條平行演進的路線：可視化。
本地前端開發固然已經越來越便捷，也有大量的設計系統和實例可以直接使用，但可視化程度還是不夠高，尤其是在 Web 開發兩大痛點：模塊嵌套、獨立于 html 之外的 CSS 樣式文件部署之下，由于缺乏實時的可視化反饋，開發人員經常會寫着寫着就陷入 " 我現在是在寫什麼 " 的狀态，從而需要刷新一下本地域名來重新确認。
談及 Web 開發可視化，上一代風靡全球的網頁設計軟件是 WordPress，是世界上使用最廣泛的博客系統之一，是一款開源的 PHP 軟件。最初的版本上線于 2003 年，是為了順應博客時代每個人都想搭建自己博客的需求而誕生的。WordPress 因為使用者衆多，所以社區非常活躍，有豐富的插件模闆資源。
從 2010 年左右開始，WordPress 就不僅僅用于博客開發了，作為一款 CMS，很多非博客網站也是用 WordPress 搭建的。目前，使用 WordPress 平台的發行商約占全球網站的 10%。而 WordPress 官方網站的每月獨立訪問用戶數則達到 3 億。
來源網絡
但是 WordPress 以博客建站為主，設計師可定制程度低，沒有統一的 CMS 接入方式，且前端頁面響應模式落後（與新一代建站工具最大的用戶體驗區别就是 WordPress 的頁面跳轉響應時間過長，且跳轉方式生硬）、不支持組件動态效果（而這一點恰恰是目前最流行的設計趨勢之一），因此盡管擁有最強大的插件市場，還是逐漸在被 "Web App+ 動效靜态 html" 為代表的時代所淘汰。
後來，又出現了颠覆 WordPress 的産品，Wix 與 Squarespace，後二者主要解決電商時代獨立站頁面的搭建需求。
Wix 頁面
盡管 Wix 與 Squarespace 這一類獨立站頁面搭建平台也可以幫助大家可視化搭建頁面，但是他們隻是在可視化單點上進行突破，且在電商系統上做得比 Webflow 更加強大、容易上手，其核心受衆明顯已經變成了電商賣家或市場營銷人員，不能稱之為是 " 為設計而生 " 的無碼化工具。未來，他們的主要對手或許會是 Canva 等更廣泛的創意服務商。
總體說來，Webflow 的意義在于，它将代碼和可視化兩條進化交叉，作為接點，他是以往任何工具或平台的降維打擊。
比如，Webflow 的某一個付費功能點就是，搭建好的網頁，可以再以代碼形式進行導出，交給開發去完成、修正。從這個角度來看，Webflow 就是一個以視覺形式幫助提升開發效率的開發工具，而其他建站工具隻能支撐視覺效果，而單純的開發流程又要重複以往開發 - 設計的繁瑣循環。
不僅如此，Webflow 的優勢還有很多，比如其雲建站服務更為便捷，采用全托管的方式，作為對比，傳統 html、JS、WordPress 的開發者往往搭載于自購服務器與域名，需要具有一定的技術知識，且在一次新的 deploy（部署）之後才能使用戶看到的頁面發生改變，對專注于視覺細節的設計師來說，操作流程極其冗雜。
另一個優勢也體現了 Webflow 的産品細節能力，同樣都是拖拉拽、所見即所得的頁面搭建方式，其他建站工具趨近于 " 做 PPT" 的體驗，Webflow 卻包含完整的前端設計思維、能夠使頁面完全實現前端化，并在付費版本中支持 html、CSS 等代碼文件的導出。
Webflow 編輯器
Webflow 編輯器：可以看到右側可自定義的屬性元素與前端構建原理基本一緻，并且有針對全局的 CSS 設置，下方狀态欄對應的是前端開發中最重要的模塊嵌套理念（可以理解成文件夾，在 html 代碼中每個閉合的 <><> 就是一層嵌套）。
Wix 編輯器
Wix 編輯器：相對來說更适合沒有前端經驗的設計師 / 市場運營人員，把很多前端組件進行了不同樣式與風格的标準化，可以一鍵添加。
Squarespace 編輯器
Squarespace 編輯器：自定義方式更加簡單直觀，适合制作設計師 / 攝影師的 portfolio 個人官網，因此理念是以大量的頁面留白凸顯作品本身為主，頁面設計表現為輔。
WordPress 下最流行的頁面設計插件 Elementor 的編輯器
WordPress 下最流行的頁面設計插件 Elementor 的編輯器：與 Wix 類似，可以自由添加組件，基本可以實現想要的靜态視覺效果，但還是以接近 PPT 的方式設計與呈現，不包含 CSS 與前端思維，也不太支持前端動效。
總結而言，Webflow 優勢可以概括為：
可視化界面：Webflow 使用可視化界面，讓用戶通過拖放功能快速創建網站，而無需寫代碼。這對于那些不會編寫代碼的人來說，是一個巨大的優勢。
強大的設計功能：Webflow 提供了一系列強大的設計功能，如自定義布局、動畫效果、圖像處理等，讓用戶能夠創建專業網站。
全面的教程和幫助資源：Webflow 提供了豐富的教程和幫助資源，幫助用戶更好地了解如何使用該平台。
先進的功能：Webflow 不斷更新和改進其功能，以滿足用戶的不斷變化的需求。
廣泛的社區支持：Webflow 有一個活躍的社區，可以為用戶提供幫助和支持。
相比于其他開發手段和網頁搭建工具，Webflow 是屬于下一個時代的降維打擊産品。這或許也是市場和資本願意買單的重要原因。
03 移動 App 時代開始做網頁，逆勢還是 " 放長線 "？
事實上，想要實現 Webflow 的這些降維打擊的功能點，說容易也容易，說難也難。
難是因為，在十年創業過程中，有無數次的壓力，迫使創始團隊不要做下去。
最初，難點來自于，Vlad Magdalin 多年來一直想做一個類似 Webflow 的産品，所以當真的開始時，他處在用愛發電的階段——創業剛開始時，他甚至背負了三萬美元的信用卡債務。最初，Vlad Magdalin 仍在 intuit 工作，用兼職時間完成 Webflow 的開發。2012 年夏天，Vlad Magdalin 拿着一萬美元離開了原來的公司，開始全職創業。也在這時，他說服了好兄弟 Sergie 的加入，而為了節省開支，Sergie 搬進了 Vlad Magdalin 和妻子的公寓。
Webflow 今年的資方 YC，也曾在 2012 年讓 Webflow 倍感壓力。在 2012 年 Webflow 剛成立沒多久，就申請了 YC 當時的冬令營，但最終沒有通過。緊接着 2013 年又申請了 YC 的夏令營，當時他們做出了産品的第一版原型，并且在 Hacker News 上做了發布，有了幾萬用戶申請加入 Beta 測試版的等候名單。
而 YC 的擔心是，Webflow 最終會因為産品對于非技術人員來說上手難度太高，對于技術人員來說又沒有太多價值，從而陷入一個進退兩難的尴尬境地，而導緻失敗。不過好在，Webflow 最終還是成功拿到了 YC 的夏令營 Offer，成為了 YC S13 的一員。
但是這個擔心的确是必要的，因為不止 Webflow，需要無代碼開發工具都面臨着這個問題。
其實在後來公司發展過程中，Webflow 找了很多方式解決這個問題，比如錄制了非常多的培訓視頻，搭建了自己的社區供大家交流，不斷寫博客在幫助設計師上手的同時提高曝光量。
來源 CEO 的推特
而在 2014~2018 年，Webflow 沒有拿到來自投資機構的錢。
據國内某創業者描述，在當時，Webflow 創始團隊在見投資人前都要做好被罵 " 腦子有問題 " 的心理建設，因為時值移動互聯網的蓬勃發展期，所有創業團隊和風投機構都一股腦在押注 APP，而 Webflow 還在卯着勁做網頁開發，并且對其未來堅信不疑——這當然會讓投資人産生懷疑。
而 Webflow 團隊之所以堅持相信網站設計的 " 未來價值 "，主要原因可以分為三點。
其一，Webflow 自身的定位是給企業或者個人提供 " 展示型 " 網站，這一類網站的價值停留在信息輸出和視覺交互，而不會成為一個像微信一樣的功能型 App。
其二，矽谷投資人昔日對于 App" 全面代替網站 " 的過高期望，是基于對當下技術與移動設備生态機制的不确定預估。目前來講，雖然也已經有一些支持一鍵多設備尺寸配置的 App 開發服務初露鋒芒，但 App 開發整體來說成本較高，設備兼容測試與商店審核都需要時間，且除了娛樂、社交等功能性領域及體量較大的信息載體（如 36 氪 App）之外，大多數的展示型網站，比如企業官網等，完全沒有被做成 App 的價值。此外，盡管大多數的生産力工具和效率軟件都在實現 " 雲化 "，但以網頁形式呈現的 Web App，比移動端 App 更加便于實現敏捷開發。同時，電腦比手機更适合專業、複雜的生産工作，目前為止還是人類數字進程中不可撼動的事實。
最後，用戶的需求也在近些年發生變化，對于 App 的需求不再旺盛。在移動互聯網蓬勃期，随着智能手機和 4G 的普及，用戶對于在手機上完成各種功能抱有極高的熱情，然而随着熱情冷卻，以及用戶對于 " 雁過無痕 " 的個人信息保護意識的加強，越來越多的 App 不再具備吸引力。這從近些年 App 拉新成本越來越高就可見一斑。當用戶對于 App 的新鮮感冷卻，手機屏幕尺寸限制在某些需求和功能上的掣肘就暴露了出來。其中，作為視覺藝術的一環，專業的網頁設計所體現的審美趨勢就很難在手機上完整表達：在很多網站進行響應式設計（針對移動端做尺寸适配）時，會選擇将複雜的模塊和動畫效果隐藏掉。
綜上所述，當移動互聯網的浪潮緩慢退去，網頁開發卻再度成為主流——沒有任何一家企業不想有自己的官網，也沒有一個設計師不想通過獨樹一幟的風格傳達創造的價值，而不必囿于 iOS 等系統生态對于 App 界面的單一化風格限制。
04 靠 SEO 撐起了百萬用戶
Webflow 的價值也在 App 熱潮冷卻的過程中逐漸體現。
因為融資不利，Webflow 隻能不停尋找商業化方法。在 2013 年，Webflow 加入 YC 時，就已經有了 2 萬個初始注冊——但，其中隻有大約 50 名付費會員。" 當時的轉化率非常令人失望。"Vlad Magdalin 表示。
Webflow 下定決心要讓付費用戶滿意。所以第一件事，就是建立了上文提到的社區，三位創始人在早期每天都要花幾個小時回答問題、支持請求。
在付費客戶滿意後，下一步是如何獲得更多付費客戶。Webflow 把目光投向了 SEO。Webflow 在内容方面主要會有 5 種類型，分别是 University（教程）、Blog（博客）、Customers（客戶故事）、Ebooks（電子書）和 Community（社區），而其中 Blog 的文章，在 SEO 優化上很關鍵的部分在于聚焦在長尾（long-tail）關鍵詞，這也意味着更小的競争壓力和更精準的目标客群。
" 人人都是産品經理 " 曾提到，以《8 best cheap domain registrars compared and reviewed（ https://webflow.com/blog/cheap-domains 》這篇文章為例，根據 Fundation 的數據表明，每個月有 1600 多人會在 Google 搜索 "cheapest domain registrations" 這個關鍵詞，而這些人的目的很明确的，就是想要購買便宜的域名，而購買了域名之後，很自然，下一步就是搭建網站了，那或許對于 Webflow 就會有需求。
因此 Webflow 很好地利用了這篇文章吸引到了這批精準的用戶，并通過在文章中插入 CTA（Call-To-Action）模塊的方式，引導用戶注冊轉化。
結果還不錯，從數據上看 Webflow 通過 SEO 每月可以吸引接近 100 萬的流量并産生 130 萬美元的有機收入。
圖源網絡
Webflow 在 3 年内，通過社區和 SEO，沒有花一分錢在營銷上，就獲取了 100 萬用戶、營收突破一千四百萬。
通過社區可以源源不斷用 UGC 的方式産出内容，而這些内容又給 SEO 提供了源源不斷的素材和動力，從而形成了自增長的飛輪。
這樣的數據，足以讓投資人動心。在被用戶市場認可後，Webflow 也再度被一級市場所認可。
不過，盡管此刻風頭無兩，Webflow 也還存在着一些問題。比如，目前來看，Webflow 面臨着和 WordPress 類似的問題，受衆很窄，如果不繼續改進，就會導緻增長瓶頸明顯。
首先，挑戰傳統和權威，道阻且長。目前，除了設計師的 portfolio 以及一些産品的 landing page 之外，主流前端開發由于需要結合大量的函數變量和數據庫功能，仍然是以 React、VUE 為代表的 Javascript 為主，開發流程為：UI 設計師通過 Figma、MasterGo、即時設計等原型設計工具畫頁面，通過插件标注或直接導出 html 和 CSS 代碼給前端工程師，前端工程師寫 JS 完成可視化效果，并接入後端數據庫，在此過程中為市場運營人員留出信息上傳的。在此過程中，自購雲服務器部署 + 自購域名仍然是主流選擇。
尤其是在 " 權威 " 也在不斷優化自身的情況下。如前文所述，Web 開發本身就在變得越來越簡單，且 UI 設計師的 " 職業自救 " 意識很強，不斷擴充技能，都在向具有一定代碼能力的前端開發轉型。相比 Web 開發的開源環境，Webflow 在定價劣勢的情況下，未來的用戶定位可能會被進一步縮小，從網頁設計師變為 " 對前端開發不熟練的初級網頁設計師 "，屆時局面将陷入被動。
當前，國内也存在幾家對标 Webflow 的公司，比如 Zion、towify、Dora 等。這幾家公司成立時間相差不大，目前也有各自擅長的領域。相比 Webflow 的大器晚成，也許他們的入局時機更為穩妥。
整體來看，中國無代碼網頁開發，和美國市場有一個較大的差别，就是中國的小程序開發正如火如荼。從今年騰訊第三季度數據來看，微信端小程序超過 700 萬，小程序日活達到了 6 億，因此，圍繞小程序的無代碼開發，是國内相關廠商努力的重點方向。
不過，對這些國内公司來說，盡管有着确定的方向，但是前進過程，不僅會面臨這 Webflow 面臨過和面臨中的困難，還要面對中國本土市場對于無代碼搭建熱情不高的大背景。
無論如何，我們可以确定的是，未來，越來越多的前端工程師，會被設計師或者有隻是有網頁開發 idea 的人取代。在任何國家，都會如此。
