Webflow：未來的 Web 開發平台

（這是一篇贊助文章。）上市時間在現代網頁設計中起著至關重要的作用。 大多數產品團隊都希望在不犧牲設計質量的情況下，最大限度地縮短從構思到現成產品所需的時間。

在創建網站時，團隊經常使用幾種不同的工具：一種用於圖形和視覺設計，另一種用於原型設計，另一種用於編碼。 Webflow 試圖通過讓您同時進行設計和開發來簡化網頁設計過程。

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

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

• 視覺設計和編碼之間的脫節。
  視覺設計師在視覺工具（如 Sketch）中創建模擬/原型，並將它們交給需要編寫代碼的開發人員。 由於開發人員必須進行額外的編碼迭代，因此它會產生額外的來回循環。
• 很難編寫複雜的交互（尤其是動畫過渡）。
  設計師可以在高保真原型中引入漂亮的效果，但開發人員很難在代碼中重現相同的佈局或效果。
• 優化各種屏幕的設計。
  您的設計應該從一開始就具有響應性。

什麼是網絡流？

Webflow 是一種瀏覽器內設計工具，可讓您直觀地設計、構建和啟動響應式網站。 它基本上是一個多合一的設計平台，您可以使用它從最初的想法變成現成的產品。

以下是使 Webflow 與眾不同的幾件事：

• 視覺設計和代碼沒有分開。
  您在可視化編輯器中創建的內容由 HTML、CSS 和 JavaScript 提供支持。
• 它允許您重用 CSS 類。
  定義後，您可以將類用於應該具有相同樣式的任何元素，或者將其用作變體（基類）的起點。
• 它是一個平台，因此它提供託管計劃。
  每月 12 美元，它允許您連接自定義域並託管您的 HTML 網站。 每月額外支付 4 美元，您就可以使用 Webflow CMS。

使用 Webflow 構建單頁網站

了解該工具功能的最佳方法是使用它構建一個真正的產品。 在本次審查中，我將使用 Webflow 為虛構的智能揚聲器設備創建一個簡單的登錄頁面。

定義未來頁面的結構

雖然可以使用 Webflow 來創建佈局結構，但最好使用其他工具。 為什麼？ 因為您需要嘗試各種方法，然後才能找到您認為最好的方法。 最好使用一張紙或任何原型製作工具來定義頁面的骨骼。

清楚地了解您要實現的目標也很重要。 找到一個你想要的例子，然後在紙上或你最喜歡的設計工具中畫出來。

提示：您不需要一直創建高保真設計。 在許多情況下，可以使用 lo-fi 線框。 這個想法是在您在網站上工作時使用草圖/原型作為參考。

對於我們的網站，我們將需要以下結構：

• 帶有大型產品圖片、副本和號召性用語按鈕的英雄部分。
• 介紹使用我們產品的好處的部分。 我們將使用之字形佈局（此佈局將圖像與文本部分配對）。
• 帶有快速語音命令的部分，可以更好地了解如何與設備交互。
• 包含聯繫信息的部分。 為了使訪問者更容易進行聯繫查詢，我們將提供聯繫表格而不是常規電子郵件地址。

在 Webflow 中創建一個新項目

當您第一次打開 Webflow 儀表板時，您會立即註意到一個有趣的插圖，其中包含簡短但有用的文本行。 這是一個很好的空狀態示例，用於引導用戶並從一開始就創造正確的情緒。 很難抗拒點擊“新建項目”的誘惑。

當您單擊“新建項目”時，Webflow 將為您提供一些開始的選項：一個空白站點、三個常用預設和一個令人印象深刻的現成模板列表。 您在此頁面上找到的一些模板與 CMS 集成，這意味著您可以在 Webflow 中創建基於 CMS 的內容。

當您想快速啟動和運行時，模板非常有用，但由於我們的目標是學習如何自己創建設計，我們將選擇“空白站點”。

一旦你創建了一個新項目，我們就會看到 Webflow 的前端設計界面。 Webflow 提供了一系列快速操作視頻。 對於第一次使用 Webflow 的任何人來說，它們都很方便。

看完介紹視頻後，您將看到一個空白畫布，畫布兩側都有菜單。 左側面板包含有助於定義佈局結構和添加功能元素的元素。 右側面板包含元素的樣式設置。

讓我們首先定義頁面的結構。 帶有加號 ( + ) 的左上角按鈕用於向畫布添加元素或符號。 引入元素/視覺塊我們所要做的就是將適當的項目拖到畫布上。

雖然任何構建網站的人都應該熟悉元素，但符號對於許多人來說仍然是一個新概念。 符號類似於其他流行設計工具的功能，例如 Figma 和 XD 中的組件。 符號將任何元素（包括其子元素）變成可重用的組件。 每當您更改 Symbol 的一個實例時，其他實例也會更新。 如果您有類似導航菜單之類的東西想要在網站上不斷重複使用，那麼符號就很棒。

Webflow 提供了一些允許我們定義佈局結構的元素：

• 部分。 部分劃分了頁面的不同部分。 當我們設計一個頁面時，我們通常傾向於根據部分來考慮。 例如，您可以將 Sections 用於英雄區域、正文區域和頁腳區域。
• 網格、列、div 塊和容器用於劃分 Sections 內的區域。
• 組件。 一些元素（例如導航欄）在即用型組件中提供。

讓我們使用預製組件 Navbar 添加一個頂部菜單，該組件包含三個導航選項和站點徽標的佔位符：

讓我們為導航菜單​​創建一個符號，以便我們可以重用它。 我們可以通過轉到“符號”並單擊“創建新符號”來做到這一點。 我們將給它命名為“導航”。

請注意，部分顏色變為綠色。 我們還看到它在一個項目中使用了多少次（1 個實例）。 現在，當我們在新創建的頁面上需要一個菜單時，我們可以轉到 Symbols 面板並選擇一個現成的“導航”。 如果我們決定對 Symbol 進行更改（即重命名菜單選項），所有實例都會自動進行此更改。

接下來，我們需要定義我們的英雄部分的結構。 讓我們為此使用 Grid。 Webflow 有一個非常強大的網格編輯器，它簡化了創建正確網格的過程——您可以自定義列數和行數，以及每個單元格之間的間隙。 Webflow 還支持嵌套網格結構，即一個網格內另一個網格。 我們將為英雄部分使用嵌套網格：父網格將定義圖像，而子網格將用於標題、文本段落和號召性用語按鈕。

現在讓我們將元素放在單元格中。 我們需要使用Heading 、 Paragraph 、 Button和Image元素。 默認情況下，當您將元素拖放到網格中時，這些元素將自動填充可用的單元格。

雖然可以自定義文本和圖像的樣式並添加真實內容而不是虛擬佔位符，但我們將跳過此步驟並轉到佈局的其他部分：之字形佈局。

對於這種佈局，我們將使用 2×3 網格（2 列 × 3 行），其中每個包含文本的單元格將被分成 3 行。 我們可以輕鬆地創建具有 3 行網格的第一個單元格，但是當為主網格的第三個單元格使用相同的結構時，我們遇到了問題。 由於 Webflow 會自動用新元素填充空單元格，因此它將嘗試將 3 行子網格應用於第三個元素。 要改變這種行為，我們需要使用 Manual。 將網格選擇設置為手動後，我們將能夠創建正確的佈局。

與英雄部分類似，我們將虛擬上下文添加到網格部分。 完成可視化佈局後，我們將更改數據。

現在我們需要定義一個帶有語音命令的部分。 為了節省空間，我們將使用旋轉木馬。 Webflow 有一個為此目的的特殊元素： Slider 。

一旦我們準備好所有必需的元素，我們就可以通過調整我們使用的每個項目的位置來創建垂直節奏。 首先，我們需要調整網格中元素的間距。 更改圖像的邊距和填充並對齊自身，以便將其放置在單元格的中心。

現在是時候用真實內容替換虛擬內容了。 要開始添加圖像，我們需要單擊圖像元素的齒輪圖標並選擇我們選擇的圖像。

請注意，Webflow 將所有圖像存儲在一個名為Assets的特殊區域中。 我們添加的任何媒體，無論是視頻還是圖像，都會直接進入該區域。

在我們將圖像引入佈局後，我們需要修改 Heading 和 Text 部分。

Webflow 為我們在設計中使用的每個元素提供了視覺樣式。 讓我們以標題部分為例：可以使用該對象的字體顏色、字體、粗細、間距、陰影和其他視覺屬性。 這是我們在添加真實副本和使用字體顏色時將擁有的內容。

一旦我們有一個漂亮而乾淨的英雄部分，我們就可以將內容添加到我們的之字形佈局中。

請注意，每次我們設置樣式時，我們都會給它一個Selector （一個類），這樣 Webflow 就會知道應該專門為這個元素應用樣式。 我們可以使用同一個類來設置其他元素的樣式。 在我們的例子中，我們需要與鋸齒形佈局中相同的圖像、標題、描述和鏈接樣式。

Webflow 還允許創建組合類——當一個類用作基類，而另一個類用於覆蓋基類的樣式選項時。 在下面的示例中，我們使用“Zig-Heading-Second”類覆蓋標題的默認字體顏色。 組合類可以為您節省大量時間，因為您不需要從頭開始創建樣式。

這是更改後我們的佈局的樣子：

Webflow 提供了一個非常有用的功能來對齊名為“guide overlay”的內容，它可以位於左側菜單面板中。 啟用指南後，您將看到破壞網格的元素。

完成之字形佈局後，我們需要在 Slider 中添加有關語音命令的信息。 在相關幻燈片中添加標題部分並更改此對象的視覺樣式選項。

就是這麼簡單！

最後但並非最不重要的一點是，我們需要在我們的網站上添加聯繫表格。 讓我們在 Slider 的正下方添加一個部分。

我們可以通過兩種方式向頁面添加表單。 首先，Webflow 有一個用於 Web 表單的特殊元素，稱為Form Block 。 使用表單塊創建的表單具有三個元素：名稱、電子郵件地址和提交按鈕。 對於我們的表單，我們需要一個 Message 字段。 我們可以通過複製元素電子郵件地址並重命名它來輕鬆創建一個。 默認情況下，表單塊具有 100% 寬度對齊，這意味著它將佔據容器的整個寬度。 我們將使用網格設置來調整表單寬度。

其次，Webflow 允許直接在頁面中集成自定義代碼。 這意味著我們可以在像 Typeform 這樣的工具中創建一個表單，複製它提供的嵌入代碼並將其放置到我們放置到該部分的名為Embed的組件中。 請注意，嵌入只會在網站發布或導出後出現，而不是在您設計網站時出現。

一旦所有元素都到位，我們需要優化我們的移動設計。 幾乎一半的用戶（全球）通過移動設備訪問網站。 你可以在 Webflow 中做的是調整瀏覽器窗口的大小，這樣你就可以看到你的設計在不同斷點下的樣子。

讓我們通過單擊Mobile - Portrait圖標將視圖更改為 Mobile。

如您所見，該設計在移動設備上看起來很糟糕。 但是使用 Webflow 優化設計相對容易：它允許您更改元素的順序、元素之間的間距以及其他視覺設置，以使設計在移動設備上看起來很棒。

在我們完成對設計的更改後，我們有兩種選擇：我們可以導出設計並在我們自己的網絡託管上使用它（即，將其集成到您現有的 CMS 中），或者我們可以使用 Webflow 自己提供的託管。 如果我們決定使用第二個選項，我們需要單擊發布按鈕並選擇相關的發布選項，即在 webflow.io 域或自定義域上發布它。

如果您決定導出代碼，Webflow 將準備一個完整的 zip，其中包含 HTML、CSS 以及您用於創建設計的所有資產。 導出的代碼將幫助您為產品打下堅實的基礎。

結論

Webflow 是構建高保真原型和邀請團隊成員和利益相關者反饋的優秀工具。 審查您的原型的人不需要想像成品的行為和外觀 - 他們可以體驗它！

該工具簡化了從原型到完整 UI 的轉換，因為您正在使用真實代碼設計產品，而不是在 Sketch 或任何其他原型設計工具中創建可點擊的模擬。 您不會浪費時間使用一個軟件來構建原型，而另一個軟件將這些原型變成真正的產品。 Webflow 為您解決了這個問題。