能滿足設計師控制慾的架站服務，連新手也能輕鬆設計並同時開發網站。
嗨囉，我是設計師 Riven 🙂
今天想要跟大家講講 Webflow 這個得到許多設計師好評的網頁架設框架，不僅可以做出俱有設計感的網頁，同時它的介面與操作邏輯，是與設計軟體很相似的，所以我們在創建網頁的過程中，會感到更多地舒適與熟悉。
那之所以說適合設計師，有個很重要的關鍵在於 Webflow 的自由度，可以有效滿足設計師們的控制欲。試想看看，在此之前有沒有自學網站架設，但卻連簡單換個顏色、字體，或只是按鈕要改成圓角，就搞了半天趨近放棄狀態的時候呢？
在體驗 Webflow 架站之後，你會發現它可以跟設計軟體一樣去調整樣式與細節，一切都跟平常熟悉的設計流程相同，並可以做成是真正上線的網站，而不是 UI 設計稿而已。
那相對地，我覺得 Webflow 不適合對網頁設計完全不懂的同學，甚至還要一點前端語言基礎較好，而這也是為什麼我在 hahow 新的募資線上課程《不小心就學會！用 UI 設計方法製作網站》中，會安排先學會 Adobe Xd 軟體、UI 設計方法之後，才進入真正的 Webflow 架設網站流程。
接著，我們來看看 Webflow 的後台介面，看看是不是有種熟悉的感覺。
熟悉的圖層排列與巢狀結構
如果是用習慣 Illustrator 或 Photoshop 的朋友，應該都對圖層(Layer)很熟悉，這是包含 Adobe 在內的許多電腦繪圖軟體都會有的關係結構。
簡單來說就是讓網頁上的物件能夠有「群組」的編制，以及具備「上下層級」的關係，可以讓我們很直觀地進行操作。
而 Webflow 就是用這樣的架構進行設計，因此我們可以在下圖中左側 Navigator 的位置，進行所有東西的整理與排列。
熟悉的右側樣式調整欄位
而我們通常在 Adobe Xd、Sketch 等 UI 設計軟體中，習慣用右側的控制欄來調整樣式細節，比如說字型、顏色、間距等等。
在 Webflow 也還原了這樣的介面設計，對於設計師來說，可以說是無痛上手，學習門檻很低。
獨立排版響應式設計(RWD)
現在的網頁幾乎都有響應式設計(Responsive web design, RWD)，可以簡單理解成是一種能夠自動適應各類型裝置尺寸與解析度的技術，讓瀏覽者不論是用筆電、桌電、手機、平板電腦看你的網站，網頁都能夠有最適合的呈現。
而在開發上，通常我們都還是只做一個網站，讓網頁的介面可以去自己變化；而設計上呢？我們很常用所謂的 斷點(BreakPoint) 來規劃網頁，比如說分別作出 1440px, 1280px, 768px, 320px 的版面規劃，來讓網站能夠在這些尺寸之中達到最理想的外觀。
Tips: 通常斷點(BreakPoint)會是當時最常見裝置與尺寸，以滿足大多數人的使用情景。可以直接編輯畫面（所見即所得）
所見即所得 (What You See Is What You Get) 是一種電腦編輯器的技術，可以讓你直覺地對畫面進行設計，並且也是最終成果。
這個技術在現在已經很常見了，比如說小畫家、Word 文件或 Keynote 簡報都是，我們已經很習慣在畫面上直接進行編輯，然後儲存、輸出。
但在以前的網頁語言 HTML 可不是這樣，傳統的寫網頁需要先撰寫 HTML5 或 CSS3 這類前端語言，儲存並上傳到站點（例如 FTP）再重新刷新瀏覽器，才會看到調整過的網頁。
這樣的來回會花掉不少時間，而且不適合設計師。設計師需要的是看得見、摸得著的改變，而且視覺上的最佳比例有時候靠的是一種感覺。
而所見即所得的編輯器才能符合這樣的需求，剛好 Webflow 就是這樣的設計，我們可以直接在真實的網頁上進行編輯，包含文字修改與樣式調整，都是相當符合直覺的設計體驗。
支援 Command(Ctrl) + Z 回到上一步
Webflow 能夠使用快捷鍵 Command(Ctrl) + Z 來回到上一步驟，這對設計師來說可真是個好消息，應該不用多解釋了。
更值得開心的是，這裡並不是瀏覽器內建的回到上一步驟，而是 Webflow 本身的快捷鍵，所以支援更完整，包括回到上上上一步，以及 Redo（再做一次）。
可使用網格系統(Grid)
網格系統對於平面設計師、網頁設計師來說，是個相當熟悉的設計作法；而以 UI 設計來說，這些格線不只能讓版面變得更整齊，更是可以讓網站開發上更有效率的方式。
Webflow 內建的 Grid Overlay 則可以輔助我們網頁編排，同時讓程式碼更有效率，也符合我們在 Adobe Xd 等 UI 設計軟體中的使用習慣。
不用寫程式做出網頁動態效果
現在的網頁可以說是一個比一個還要酷炫，仰賴著前端語言的日新月異，現在網站可以加入各種動態效果與轉場動畫，而這也通常是設計師接觸網頁設計時，會很想要嘗試的功能。
而 Webflow 內建的 Interaction Animate 功能可以滿足我們，在不用寫程式的狀態就可以做出網頁動態效果，而如果你會寫前端的話，則可以更客製想要的畫面呈現。
說這麼多，不如直接看 Webflow 官方的範例吧！下面這個是介紹網頁歷史的網頁，而整個都是由 Webflow 技術所製作而成：
能直接輸出網頁前端程式碼
Webflow 雖然主打不需要寫程式碼就能夠製作網頁，但如果今天設計師透過 Webflow 完成了自己的網站，而日後想要以此作為基礎，更進階地擴充網站的話，我們也可以透過內建的 Export 功能，匯出 HTML, CSS, JS 等網頁程式碼，讓自己或工程師能夠接續進行網站開發。
只是需要注意的是，若要導出程式碼，需要將帳號升級 Account Plan，這是 Webflow 的付費方案之一，關於這部分我們在更後面會聊到。
輕鬆套用 Webfont 網頁字型
網頁字型(Webfont)是個讓網站呈現更多設計細節的好方法，但是在中文的使用上並不普遍，其中很大的原因是因為繁體中文的網頁字型選擇比起英文少了很多（中文字製作非常艱困，且檔案大不方便內嵌）。
而 Webflow 可以用很簡單的方式，就能讓你的網站直接使用 Webfont 網頁字型，以下圖範例來說，我們可以直接在 Fonts 的設定找到思源黑體。
接著，就能到網頁編輯器使用這套字體了。
如果 Google Fonts 上的字體滿足不了你，你也可以透過上傳字型檔（只是中文不建議這麼做）或是使用 Adobe Fonts（需開通 Site Plan 付費方案）。
要用 Adobe Fonts 需先有 Adobe Creative Cloud 訂閱並使用帳號中的 Fonts API。而包含上面提到匯出網頁程式碼，以及使用 Adobe Fonts 等進階功能，都是需要開通 Webflow 的付費方案，接下來我們就來講講吧。
Webflow 與所有網站架設平台一樣，都是要錢的；可以這麼說，只要你想要架設一個網站，不論是不是使用 Webflow，就都會需要租賃主機、購買網域授權等等，這些都是建置一個網站需要的成本。
Webflow 收費機制
Account Plan
這是帳號本身的升級，可以開通更多的專案數量與一些額外功能（像是匯出程式碼）可以視自己的需要決定要不要購買。
帳號計畫目前每個月是 16 美金，詳細方案與差別可以看下圖：
Site Plan
而 Webflow 除了剛說的 Account Plan（帳號計畫）之外，還有另一個叫 Site Plan（網頁方案）可以理解成是跟 Webflow 租主機(Host) 來用，跟 Godaddy 或 SiteGround 一樣是租虛擬主機。
只要你的網站要發佈並套用自己的網域，都需要購買這個 Site Plan，多數的設計師都會購買這個方案，來讓網站得到更多的功能。
而以下面這張價格來看，我覺得是相當合理的收費，其實跟自己在外面架網站需要的主機月費差不多，但 Webflow 多了更多網頁設計上的功能可以用。
從方案可以看出來有基本的網站，CMS 內容管理系統（適合部落格）與功能更齊全的企業方案等等。
那如果今天只是網站新手，想先玩玩看網站的製作以及體驗設計網頁，放心～Webflow 就算是初始的免費帳號，也可以享有完整的網頁架設功能。
重點總結
Webflow 是網站架設新手的好選擇。
Webflow 是一個可以在上面設計網頁，同時能直接發佈網站的一站式大平台。
而好處是在免費的方案就可以使用完整功能，這很適合學習階段使用，而在真的需要上線網站時，可以直接升級 Site Plan 就能夠使用主機與解鎖進階功能。
以這樣的流程來說 Webflow 對網站新手相當友善，如果今天要架設的是 WordPress 好了，你可能要先花一筆錢租一年份虛擬主機，再買一年份的網域授權，然後再買一個佈景主題來用，可能光是開始設計網頁之前，就要花好上幾千塊甚至破萬的學習成本。
而這也是我在 hahow 《不小心就學會！用 UI 設計方法製作網站》 線上課程中選用 Webflow 的原因，即便我對 WordPress 是更熟悉使用的。
Webflow 最初就是為了設計師而誕生。
「有沒有可能，能讓網頁設計就像 Photoshop 那樣拖曳就好一樣簡單？」
Webflow 的創辦人是設計師 Sergie 和工程師 Vlad Magdalin，他們平常做專案的方式，就跟一般的網頁開發流程相同，設計師把網頁稿弄好，丟給工程師開發。
這說起來很簡單，但實際做起來真的是不容易的事情。
於是，他們決定來開發一個網站開發工具，讓設計師或不懂程式的人，可以在不 Coding 的狀況下，靠著修改設定跟拖曳物件來完成網頁，就像 Photoshop 或 Adobe Xd 那樣。
並且，Webflow 的匯出程式功能，可以將設計並製作好的基本網頁，交付給工程師做更進階的開發，將能更專注在重點項目的開發上，也因此 Webflow 的程式碼做得相當乾淨，比起 Wix, Weebly 等模板為主的網站工具來說，可以說有更大的彈性。
而我覺得這也許也是未來的 UI 設計趨勢，能夠將設計稿直接轉成 Code，雖然現在已經有一些工具能做到，但其完成度總是令人感到⋯⋯稍微有點不足。
而 UI 設計師要略懂寫 Code 這件事情，在將來也會愈來愈普遍，並不是要設計師自己身兼多職，一個人當兩個人用然後領一份薪水 😅 而是當你知道網頁是怎麼構成、功能邏輯是怎樣運作的時候，才能夠將 UI 設計的可能性提到最高，做出更理想的作品與最佳化團隊溝通效率。
好啦，今天的文章就差不多到這邊，我是 林育正 Riven，如果喜歡這邊的內容可以 Follow 一下 Medium，或是到這幾個社群平台逛逛噢！🙂
Facebook 個人 / 臉書粉專頁面 / Instagram / YouTube / Podcast / Telegram /..更多關於我
