Webflow讓設(shè)計(jì)師不寫代碼也能建網(wǎng)站
像用Photoshop那樣、托托拽拽就可以建好網(wǎng)站？對(duì)，就這么簡(jiǎn)單。但Webflow解決的卻是兩類人群的大問題。
Sergie和Vlad Magdalin兩兄弟，一個(gè)是設(shè)計(jì)師，一個(gè)是程序員。當(dāng)他們一起在一家公司工作時(shí)，Sergie負(fù)責(zé)設(shè)計(jì)，而Vlad則負(fù)責(zé)把Sergie做出來的PS圖片變成網(wǎng)頁?！澳钦媸亲屓私^望?！盫lad回憶起當(dāng)時(shí)的工作場(chǎng)景時(shí)說，“Sergie會(huì)不斷變動(dòng)他的設(shè)計(jì)，而我就不得不浪費(fèi)掉之前寫好的很多代碼。有時(shí)候他還會(huì)說，你難道不能再在這加一個(gè)按鈕嗎？那個(gè)時(shí)候我就想，天啊，你不知道這個(gè)按鈕背后有多復(fù)雜？！它不是一個(gè)按鈕，是一個(gè)數(shù)據(jù)庫，一個(gè)登錄系統(tǒng)！”
在痛苦了一段時(shí)間后，Sergie和Vlad決定自己做一個(gè)網(wǎng)站開發(fā)工具。一方面，讓設(shè)計(jì)師、或者不那么懂編程的人可以在不用寫代碼的情況下，依靠修改設(shè)定和拖拽來實(shí)現(xiàn)網(wǎng)站設(shè)計(jì)，就像是使用Photoshop一樣；另一方面，程序員們也不用再糾結(jié)難纏的設(shè)計(jì)工作，可以專心把精力放到產(chǎn)品上來。
于是，Webflow就這樣誕生了。盡管市場(chǎng)上已經(jīng)有了很多可以無需代碼就建立網(wǎng)站的工具，比如weebly，但是很多都是基于模板的體驗(yàn)，這對(duì)于真正的設(shè)計(jì)師來說，還是有太大的限制，無法讓他們傳達(dá)出自己的設(shè)計(jì)理念。而且，現(xiàn)在的網(wǎng)站設(shè)計(jì)越來越復(fù)雜、動(dòng)態(tài)交互越來越多，圖片加文字的組合已經(jīng)不能滿足人們的需要。所以，Webflow不僅主打響應(yīng)式的可視化網(wǎng)站設(shè)計(jì)工具，并且還在最近推出了一個(gè)新的功能：動(dòng)態(tài)交互設(shè)計(jì)。
也就是說，就算你完全不懂代碼，那種漂亮的邊欄彈出、鼠標(biāo)停留展示多層內(nèi)容等特效，也可以輕松和實(shí)現(xiàn)了。
“現(xiàn)在，很多網(wǎng)站設(shè)計(jì)還要求設(shè)計(jì)師必須了解HTML，CSS 和JavaScript。但是Webflow的愿景是希望能像博客和WordPress改變?nèi)藗冊(cè)诰W(wǎng)絡(luò)上書寫內(nèi)容的方式那樣，改變?nèi)藗兊木W(wǎng)站設(shè)計(jì)方式?！盫lad告訴PingWest。
Webflow的操作界面確實(shí)很像Photoshop等其他設(shè)計(jì)工具，頁面左邊會(huì)是網(wǎng)站的效果預(yù)覽，而右邊則是操作面板，上面有各種參數(shù)，以及很多核心的元素和組件。隨著拖拽模塊和修改參數(shù)，Webflow都會(huì)在后臺(tái)自動(dòng)生成相應(yīng)的代碼，它們甚至還會(huì)根據(jù)瀏覽器和設(shè)備的不同，來自動(dòng)渲染，實(shí)現(xiàn)響應(yīng)式的效果。當(dāng)然，如果想要實(shí)現(xiàn)的效果非常復(fù)雜，超出了Webflow提供的功能范圍，也可以在進(jìn)行初期的設(shè)計(jì)之后，轉(zhuǎn)交給程序員進(jìn)行進(jìn)一步完善。
雖然一方面認(rèn)為自己提供的網(wǎng)頁設(shè)計(jì)是像使用Photoshop一樣簡(jiǎn)單，但另外一方面，Webflow又希望結(jié)合代碼的特性，讓它的功能比Photoshop更強(qiáng)大。比如，依據(jù)他們?cè)贫朔?wù)的特點(diǎn)，用戶可以對(duì)網(wǎng)站的細(xì)節(jié)進(jìn)行最細(xì)致的修改，并且可以同時(shí)應(yīng)用到多個(gè)元素上。而諸如多頁面、自定義表格都可以實(shí)現(xiàn)。而且，在網(wǎng)站設(shè)計(jì)完成后，不需要再去找FTP客戶端，而是可以直接托管在他們的云平臺(tái)上，真正的實(shí)現(xiàn)了在世界范圍內(nèi)的一鍵發(fā)布。“為了保證訪問的速度，我們還會(huì)讓服務(wù)器在世界各地同步。這樣保證你的用戶打開網(wǎng)站的體驗(yàn)非常流暢?！盫lad說。
而上面提到的Webflow最新推出的Interactions功能，就讓設(shè)計(jì)師可以脫離平面的框框，而用可視化工具來創(chuàng)造動(dòng)態(tài)效果，而不需要和以往實(shí)現(xiàn)這些特效需要的JavaScript和jQuery斗爭(zhēng)。而為了實(shí)現(xiàn)這個(gè)效果，Webflow搭建了一個(gè)龐大的代碼庫，而且，Vlad說，這些代碼都是“干凈而漂亮的”，可以保證網(wǎng)站穩(wěn)定運(yùn)行。
Webflow在亞洲已經(jīng)有了不少客戶，尤其是在日本韓國(guó)和臺(tái)灣?！拔覀兟犝f在中國(guó)，設(shè)計(jì)師就有差不錯(cuò)1000萬。但是我們一點(diǎn)都不驚訝?！盫lad Magdalin說，“美國(guó)有50萬的設(shè)計(jì)師?！?/p>
就像上面說的那樣，Webflow針對(duì)的不僅僅是設(shè)計(jì)師，很多開發(fā)者也發(fā)現(xiàn)了這個(gè)工具的妙用。即使寫代碼不是問題，他們還是選擇用Webflow來設(shè)計(jì)UI，然后把代碼導(dǎo)出來，放到他們的應(yīng)用里去?！斑@很自然。很多開發(fā)者并不喜歡設(shè)計(jì)，但是很多時(shí)候不得不這么做，我們的快速成型即使也可以幫他們‘減輕’這種痛苦。”Vlad說。這也是他們認(rèn)為的未來UI設(shè)計(jì)的方向，“你不需要花兩天時(shí)間去設(shè)計(jì)，而是有Webflow這樣快捷的工具，幫你自動(dòng)生成代碼，然后開發(fā)者再深度定制就行了。”
由于還提供網(wǎng)站托管服務(wù)，Webflow采取的是免費(fèi)試用兩周，之后按月付費(fèi)的方式，定價(jià)從14-70美元不等。Vlad說，它們有三分之一的客戶就是獨(dú)立的創(chuàng)業(yè)者，不過，即使是大公司，也很喜歡用他們的服務(wù)。“當(dāng)大公司的團(tuán)隊(duì)內(nèi)部需要?jiǎng)?chuàng)建一些簡(jiǎn)單的頁面，比如市場(chǎng)活動(dòng)、招聘頁面等，他們更愿意用Webflow。老實(shí)說，這比去央求公司里的工程師們幫他們實(shí)現(xiàn)這個(gè)實(shí)現(xiàn)那個(gè)要方便快速多了?！?/p>
Webflow的增長(zhǎng)速度很快，此前，他們的聯(lián)合創(chuàng)始人Bryant Chou告訴PingWest，他們差不多每?jī)蓚€(gè)月用戶就會(huì)翻一倍，而由于采取的是收費(fèi)模式，所以對(duì)他們來說，取得盈利并不是困難的事情。但是，他們還在做一個(gè)非常有趣的新嘗試，有可能會(huì)改變未來創(chuàng)建網(wǎng)站的方式。
“我們希望的是，現(xiàn)在還需要一個(gè)團(tuán)隊(duì)來做的事情，比如說，一個(gè)動(dòng)態(tài)的、復(fù)雜的網(wǎng)站，將來，只需要一個(gè)設(shè)計(jì)師，就可以搞定了?！盫lad說。
關(guān)注我們
