如何在 WordPress 內部進行線框設計：介紹 Kadence 線框模塊！

已發表: 2021-08-20

在為新頁面設計線框圖時，如果您想完成任務，通常必須使用單獨的工具或應用程序（甚至可能是老式的素描本！）。但是，如果您可以直接從塊編輯器中使用 WordPress 進行線框設計，而無需關閉瀏覽器呢？

WordPress 內的線框圖開闢了許多可能性，同時為您節省了大量時間。

與其猜測設計是否可以輕鬆開發或想知道如何實際實現頁面佈局，您可以在實際的 WordPress 頁面中開始設計的基礎。
您的線框將位於 WordPress 中，而不是使用單獨的工具然後傳輸線框模型，從而為您節省了額外的步驟。
您可以輕鬆地在客戶現有站點內或在 WordPress 臨時站點上為客戶提供線框預覽，而無需使用單獨類型的文件使流程複雜化。

在本指南中，我們將介紹什麼是線框圖、網站線框圖如何加快您的網頁設計工作流程，以及如何快速開始使用新的 Kadence Blocks 線框圖集合（完全免費！）我們將首先展示您將了解線框的構成並解釋線框如何融入整個網頁設計過程。您還將了解線框應包含哪些功能。讓我們潛入吧！

第一件事：什麼是線框圖？

如果您涉足用戶體驗設計的複雜世界，那麼您可能至少聽說過“線框圖”這個詞。但究竟什麼是線框，為什麼它們是網站用戶體驗設計過程中如此重要的一部分？

簡而言之，線框與建築師使用的藍圖並沒有什麼不同。線框是網頁或應用程序的二維輪廓，設計師將使用它來構建最終產品。

線框的目的是讓設計師對網站的以下內容有一個明顯的概述：

佈局
結構
用戶流程
預期行為
信息架構
功能

線框幾乎總是代表設計項目的初始概念。因此，圖形、顏色和样式等內容都保持在最低限度。

在某些情況下，甚至可以在一張紙上用手勾勒出線框。其他線框是在數字領域中創建的。這實際上取決於特定線框中所需的細節。它還取決於網頁或應用程序的最終設計將包含多少細節。換句話說，網頁越詳細，線框就需要越詳細。

UX 設計團隊最常使用線框圖的做法。完成該過程將使所有相關方（利益相關者）在項目移交給開發人員進行構建之前就信息在頁面上的位置達成一致。

在將網頁設計項目移交給開發人員之前對其進行線框化，通常可以省去很多麻煩。這是因為項目的初始藍圖（線框）可以（並且應該）始終是最終結果應該是什麼樣子的第一個參考點。

線框圖如何加速網頁設計

線框圖最好的事情之一是能夠加快設計過程。以下是線框圖如何加快網頁設計過程的快速瀏覽。

1. 整理好大創意

使用線框，您只處理初始概念，而不是完成項目附帶的所有細節和批量。換句話說，您可以在迷失在設計的小細節中之前獲得重要的事情。擁有正確的大創意可以讓您通過首先擁有線框元素然後添加真實內容而無需重新開始來加快流程。

2. 輕鬆調整

線框圖的使用可幫助您將您的想法組織到屏幕上，然後您可以隨時輕鬆地進行修改。您可以輕鬆調整您擁有的內容和擁有的位置。

3. 客戶輸入的空間

線框圖是網站設計的藍圖版本——您的設計的黑白二維表示。您將能夠看到您的設計並衡量該設計的功能。在一切都被鎖定之前，客戶可以添加他們的想法。在實際建造建築物之前移動建築物要容易得多。

您需要處理的元素越少，您就能越快地將鴨子連成一排。

警告：混合隱喻很像嘗試使用所有元素來設計您的網站。線框圖將其全部剝離為最簡單的形式。

介紹 Kadence Blocks 線框集合

免費的 Kadence Blocks 插件包括一個全新的預構建塊或元素集合，稱為 W ireframes 。這些乾淨的部分旨在幫助您構建和規劃您的網站，而不會被設計細節所困擾，這樣您就可以專注於方式。使用 Kadence Blocks，您不需要單獨的工具或應用程序來對新頁面設計進行線框設計——您可以直接從原生 WordPress 塊編輯器在WordPress內部進行線框設計。

如果您不熟悉網頁設計過程的線框圖階段，我們希望您能很快看到它在涉及新設計或現有內容修訂時可以加快工作流程的方式。

下載 Kadence Blocks 插件，免費！

什麼是線框塊？

那麼究竟什麼是線框塊？很高興你問了！

來自 Kadence Blocks 的線框圖塊是一組新的 WordPress 塊，可為您提供預先構建的、乾淨的部分，以幫助您構建站點……就在本機 WordPress 塊編輯器中。

假設您需要為客戶模擬一個新的頁面設計。無需使用單獨的應用程序或使用單獨的工具繪製設計草圖，現在您可以直接在 WordPress 內提供線框模型。

或者，您可能想在頁面中添加常見問題解答部分。無需創建行佈局並使用不同的塊來確定如何最好地設置它，您只需直接從“線框塊”選項卡中導入常見問題解答線框即可。

通過這種方式，您可以構建並專注於優化您的內容，將結構留給預先構建的線框元素庫。

用於構建 WordPress 頁面設計的 50 多個線框塊

假設免費的 Kadence Wireframe Blocks 庫是強大的。您可以使用 50 多個線框塊，每週都會添加更多。

您甚至可以按類別過濾線框塊，讓您的搜索更加輕鬆。

查看您可以在 Kadence Blocks 設計庫中使用的所有不同線框模塊：

內容線框塊– 使用這組線框塊來佈置站點內容豐富的區域，例如常見問題解答部分、樣式化的項目符號列表，甚至電子郵件註冊。
價格表線框塊– 具有最小樣式的線框定價表，以更好地掌握定價選項
頁腳線框塊- 這些線框塊可以輕鬆規劃您網站的頁腳區域
卡片線框塊– 將這些線框塊用於站點的簡單“卡片”部分。
推薦線框塊– 不要忘記您的客戶不得不說的所有好話！這些有用的塊有助於頁面上的線框推薦部分。
倒計時線框塊– 倒計時有助於提高緊迫感，但當您第一次開始使用新設計時，所有樣式選項都可能變得難以駕馭。這些塊為線框倒數計時器提供了幾個選項。
投資組合線框塊——這些線框塊為投資組合提供了一個起點。
表單線框塊——表單是另一種可以提供大量設計選項的元素，因此這些簡單的表單塊為您在線框設計時提供了幾個基本的起點。
定價表（深色） – 如果您正在尋找三層薪酬計劃選項，那麼此定價表線框非常適合幫助您建設。
定價表（淺色） – 此定價線框還將為您提供三種付款方式，但頂部的背景顏色為白色。您有一個地方可以為每個計劃上傳自定義圖像，而不是圖標。
內容佈局- 此內容線框元素提供兩列和一個位置，用於放置圖像和標題。此塊可能有助於突出產品功能、價值主張、團隊信息等。
帶有特色內容框的內容佈局- 此內容線框還提供兩列，但在左側有一個框（類似於側邊欄）。一個盒子會吸引眼球並引起您對您選擇放置在其中的文字或設計元素的注意。
內容（不同的對齊方式） ——另一個很棒的內容線框，它允許以不同的對齊方式呈現您所呈現的內容的編號方法。它還包括圖像幀。內容的拆分有助於保持讀者的注意力。
頁腳– 頁腳是添加法律要求、其他社交按鈕和其他聯繫信息的好方法。這個線框提供了所有這些以及一個標誌。
畫廊– 此畫廊線框提供了一種簡單的方式，您可以共享多個圖像。它非常適合回顧活動、分享新產品或突出新產品線。
網格（卡片） ——網格允許您以易於掃描的格式將信息放在一起。您可以使用此線框來展示您的服務、產品或程序的基礎知識。
網格（與圖標的高對比度） ——另一個很棒的網格選項，帶有不同的色塊，可以讓信息更加突出。
網格（淺色） – 此網格提供空間來添加有關您正在共享的元素的附加信息。此線框為您的讀者提供了一個正式的模塊，非常適合律師、教育組織和健康行業。
網格（深色背景） ——這是展示包含多個元素的產品或服務的完美網格。帶有按鈕和圖像的大塊可用於定向到登錄頁面，而較小的塊提供有關三個主要組件的更多信息。
帶引用的內容部分- 當您為博客文章撰寫內容時，將某些信息分開會很有幫助。該線框提供兩列，均勻分佈，一側是醒目的大字體。
帶有拉式引用的內容部分——另一個內容線框有兩列，但有一個陰影塊，用於引用或突出顯示信息。
內容部分（居中引用） ——另一種突出引用或特色內容的方法是在內容本身中使用一個塊。當您想引起對內容最重要部分的注意時，此線框效果最佳。
內容註釋（深色背景） – 此線框塊非常適合定義內容元素或為讀者分享信息的花絮。
內容註釋（淺色背景） – 您是否要添加與內容正文不一定相關的信息？此筆記線框可用於向讀者提供標註，分享內容之外的隨機信息，或提供尖刻智慧的話語。
目錄（左） – 目錄可讓您的讀者查看內容的重點，而無需掃描整個文檔。此線框將 TOC 放置在內容的一側。
目錄（內聯） - 此線框將目錄置於內容的頂部，並將內容分解為主要副標題之外的內容。
簡單卡片——另一種突出信息的方法是使用簡單卡片。此線框為您提供了自定義圖標和信息的塊。
簡單卡片（3 列） – 另一張簡單卡片，可讓您突出顯示點、產品或分層信息。
更多！ 我們的計劃是提供總共 50 個有用的線框塊，請繼續關注添加更多！