什麼是線框圖？ 初學者指南

什麼是線框圖？ 簡單地說，它是 UX（用戶體驗）設計過程中最重要的方面之一。 如果您涉足用戶體驗設計的複雜世界，那麼您可能至少聽說過“線框”這個詞。

但是線框到底是什麼，為什麼它們是用戶體驗設計過程中如此重要的一部分？

在本指南中，您將準確了解什麼是線框。 我們將首先向您展示線框的構成，並解釋線框如何融入整體設計過程。 您還將了解線框應包含哪些功能。

之後，我們將向您展示不同的線框類型以及構建您自己的線框所需的工具。

最後，你會從疑惑中解脫出來，“什麼是線框圖？” 能夠輕鬆創建和使用自己的線框。

現在，讓我們來看看。

什麼是線框？

讓我們從一個簡單的問題開始，“什麼是線框？”

實際上，它與建築師使用的藍圖並沒有什麼不同。 它是應用程序或網頁的二維輪廓，設計師將使用它來構建最終產品。 線框的目的是讓設計人員對頁面有一個明顯的概述：

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

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

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

換句話說，網頁越詳細，線框就需要越詳細。

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

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

線框的最佳時間是什麼時候？

在大多數情況下，線框圖的過程將發生在產品生命週期的階段，稱為探索階段。

探索階段是設計師：

• 就想法進行合作
• 識別與業務相關的需求
• 測試項目的整體範圍

換句話說，為網頁製作線框圖為其提供了第一次迭代，該迭代被用作項目整體設計的起點。

線框也很有價值，因為它們可以呈現給未來的網站用戶，以獲得有關設計有效性的反饋。 根據用戶反饋，項目的設計者將構建更詳細的設計迭代，如模型或原型。

從那裡開始，整個項目將開始展開。

為什麼線框很有用？

線框為設計過程帶來了三個重要目的和好處：

1. 它們價格便宜且易於創建。
2. 它們定義並幫助進一步闡明網站或網頁的特定功能。
3. 他們使設計過程專注於最終用戶。

為了進一步分解，讓我們詳細了解這些要點中的每一個。

1.它們便宜且易於創建

為什麼設計團隊在開始他們的項目時會做這麼多線框圖？ 答案很簡單：它們非常容易創建並且幾乎不需要任何成本。 實際上，如果您可以使用一支筆和一張紙，您就可以在不花任何錢的情況下勾勒出新線框的細節。

對於數字線框，您可以使用各種可用的工具，這意味著您只需幾分鐘即可構建自己的數字線框。

本指南稍後將詳細介紹這些工具。

線框的好處之一是它們裸露的外觀和感覺。 你看，向用戶展示一個完美的產品以獲得反饋的問題在於，當一個項目看起來已經完成時，人們不太可能誠實地表達他們的真實意見。

但是，當您使用線框來展示頁面佈局的絕對核心時，更容易識別和指出明顯的痛點和缺陷。 然後，設計團隊可以糾正這些問題，而無需花費大量金錢或時間進行重新開發。

畢竟，您在產品設計過程中越晚，進行本可以在線框圖階段輕鬆完成的更改就越昂貴和困難。

2. 他們定義並幫助進一步闡明網站或網頁的特定功能

當網頁設計師向他們的客戶傳達想法時，客戶可能並不總是對技術有很多了解。 設計師經常使用諸如“號召性用語”或“英雄形象”之類的詞，而許多客戶並沒有遵循這種語言。

通過線框圖特定的頁面功能，設計師可以更清楚地向客戶傳達這些功能將如何工作以及它們將服務的確切目的。

線框還允許利益相關者了解需要為每個頁面功能分配的空間量。 該過程有助於將視覺設計與網站的信息架構聯繫起來，並闡明頁面的整體功能。

當您看到線框圖上的所有頁面功能時，您還將更好地了解所有這些功能將如何協同工作。 如果您發現某些功能與頁面上的其餘元素無法正常工作，線框製作過程甚至可能會觸發您刪除一些功能。

隨著線框圖過程的進行，這可能會導致項目利益相關者之間出現一些重大分歧。 但是這些分歧現在發生（並得到解決）要好得多，而不是在設計過程的後期需要重新編寫代碼。

3. 線框讓設計過程專注於最終用戶

線框是很好的溝通工具。 這是因為它們促進了用戶的寶貴反饋，推動了設計師之間的想法分享，並在利益相關者之間發起了重要的對話。

通過在設計過程的早期階段參與用戶測試，線框圖可以促進更誠實的用戶反饋。 它更好地確定了有助於開發成功概念和最終產品的關鍵痛點。

對於網頁設計師來說，線框圖是一種非常寶貴的方​​式，可以準確地了解用戶將如何與建議的界面進行交互。 收集到的見解向設計師展示了對用戶來說似乎很直觀的東西。 然後，設計師可以根據用戶反饋創建易於使用且舒適的最終結果。

您可以使用哪些不同類型的線框？

共有三種不同類型的線框。 線框的類型取決於線框包含多少細節。

1. Lo-Fi 線框

這是一個簡單的骨架，非常基本的網頁表示。 它幾乎總是作為設計的起點。

因此，低保真線框通常非常粗糙。 它們是在沒有像素精度、網格或比例的情況下創建的。

低保真線框的目的是省略可能分散整體佈局的細節。 它將包括：

• 塊形狀
• 模擬內容（標題和標籤的填充文本）
• 簡單的圖像

低保真線框用於進行對話、映射用戶流並決定導航佈局。 簡單地說，當您有客戶或利益相關者與您坐在一個房間裡，並且您想在開會時快速繪製一些東西時，低保真線框是完美的解決方案。

它們也適用於正在考慮幾個不同概念並想要決定他們應該在項目中走向哪個方向的設計師。

2. 中保真線框

這是設計過程中最常用的線框。

中保真線框將顯示更全面的頁面佈局表示。 雖然它不包含諸如排版或圖像之類的東西，但為特定組件提供了更多細節。 並且頁面特徵被更清晰地定義和分離出來。

在大多數情況下，中保真線框將具有不同的文本權重，將正文內容與標題分開。 儘管中保真線框仍然是黑白的，但設計師通常會使用不同的灰色陰影來展示設計的不同元素。

使用 Balsamiq 或 Sketch 等數字線框工具創建中保真線框。

對於 WordPress 網站所有者，Kadence Blocks 插件中的線框塊功能為您提供了最簡單的線框方法。 稍後再談。

3. 高保真線框

最後但並非最不重要的是高保真線框。 這些具有特定於像素的佈局。 例如，一個 lo-fi 線框可能會有“lorem ipsum”文本填充和用 X 填充的灰色框，表示圖像位置。 然而，高保真線框將包括完整的書面內容和將在頁面上展示的實際圖像。

高保真線框圖中包含的細節使其非常適合記錄和探索複雜的設計概念，例如交互式地圖或菜單系統。 由於將高保真線框組合在一起需要時間，因此應將它們保留用於設計週期的後期階段。

線框中包含什麼？

線框包含的功能數量在很大程度上取決於它是低保真、中保真還是高保真。 但是，一般來說，每個線框將包含的主要元素是：

• 搜索字段
• 分享按鈕
• 標誌
• 標頭
• Lorem ipsum 佔位符文本

高保真線框還將包括聯繫信息、導航系統和頁腳。

請記住，圖像和排版永遠不需要包含在 lo 或 mid-fi 線框中。 但是，許多設計人員會嘗試使用文本大小來幫助表示信息的層次結構或指示標題的放置位置。

傳統上，線框總是以灰度創建。 因此，設計師還將通過使用淺灰色陰影來指示淺色來嘗試灰度陰影。 深灰色表示大膽的顏色。

在高保真線框中，一些設計師可能會偶爾添加一些顏色。 大多數情況下，它將僅限於紅色和深藍色。

使用紅色表示錯誤消息或警告，而深藍色表示稍後將成為活動鏈接。

線框總是二維的。 正因為如此，重要的是要記住，它們在展示所提議設計的交互功能方面做的不多，例如懸停狀態、下拉菜單或使用顯示隱藏功能的手風琴。

移動線框與網站線框

如果您像閱讀本指南的大多數人一樣，您可能主要考慮的是桌麵線框，而不是移動線框。 但實際上，移動線框需要自己的特殊考慮。

知道了，移動線框與網站線框之間到底有什麼區別？

1. 線框尺寸

由於桌面網站和移動網站/應用程序之間存在明顯的大小差異，因此必須考慮每個網站的佈局。

例如，桌面網站具有寬屏幕。 正因為如此，桌面網站的線框可能會具有分佈在幾個不同列中的佈局。

然而，在移動設備上，線框通常僅限於一列或兩列。 這意味著您必須決定用戶是否看到無限滾動，或者您是否寧願減少每頁顯示的項目數以在下方顯示其他內容。

2.行為

另一個核心區別是桌面網站或移動應用程序/網站的整體行為。 在桌面站點上，站點用戶使用觸控板或鼠標來瀏覽網頁。 此外，用戶可以單擊他們感興趣的功能以顯示更多信息。

在桌面上，用戶甚至可以將鼠標懸停在某些元素上以顯示站點菜單。

然而，當用戶在移動設備上時，用戶必須點擊他們的屏幕才能打開功能。

這意味著當您為移動設備進行線框圖設計時，您必須更加批判性地考慮如何鼓勵用戶點擊特定按鈕以實現特定目標。

3. 互動

用戶在您的移動網站或應用程序上的互動與在您的桌面網站上的互動方式截然不同。

雖然您網站的移動版本以與桌面網站相同的方式提取數據和內容，但移動應用程序和網站通常可以選擇讓用戶下載內容以供離線使用。

在為移動設備製作線框圖時，請務必考慮移動設備和桌面設備之間的交互方式。

WordPress中的線框圖

在當今看似可以想像的一切都擁有豐富技術的環境中，網頁設計師擁有許多先進的線框圖程序和工具可供使用。

總的來說，Sketch 可能是最著名的線框圖工具。 它使用矢量設計形狀和畫板的組合，使網頁設計師能夠在基於像素的畫布上創建自己的線框。

然而，對於 WordPress 用戶來說，最好的線框工具是 Kadence Blocks 插件中全新的線框塊功能。

Kadence Blocks 的線框圖塊是一組新的 WordPress 塊，可為您提供乾淨的預構建部分，幫助指導您的網站構建。 最重要的是，這一切都在 natvie WordPress 塊編輯器中完成。

線框塊為用戶提供了 30 多種不同的線框塊供用戶使用，包括：

• 內容
• 定價表
• 頁腳
• 感言
• 牌
• 倒計時
• 投資組合
• 形式
• 多很多

作為 WordPress 網站所有者，無需在原生 WordPress 塊編輯器之外進行接線。 Kadence Blocks 的 Wireframe Blocks 為您提供了在 WordPress 中進行線框製作所需的唯一工具。

而且使用起來再簡單不過了。

免費的 Kadence Blocks 插件中提供了新的 Wireframe 塊。 看看它可以為您的線框圖製作過程做些什麼。

什麼是線框圖？ 現在你知道了！

你有它：“什麼是線框圖？” 在 10 分鐘或更短的時間內解釋。

線框似乎很容易被忽視。 但它們將使設計人員能夠獲得與網站重要頁面的導航和佈局相關的清晰的客戶、利益相關者和用戶反饋。

當您在線框圖階段獲得客戶、利益相關者和用戶的認可時，您將能夠充滿信心地推進您的項目，因為您知道您正在創建用戶和客戶會認可的東西……並希望愛。

使用免費網站線框圖庫下載 Kadence Blocks

如果您喜歡用精美的設計創建引人入勝的內容，Kadence Blocks 提供了在原生 WordPress 編輯器中發揮創意的工具。 此外，享受大量可輕鬆包含在您的網站中的預構建內容，包括一個塊的線框庫，以幫助您開始您的下一個網頁設計。 非常適合靈感和快速發展！

現在下載

克里斯汀·賴特

Kristen 自 2011 年以來一直在編寫教程來幫助 WordPress 用戶。作為 iThemes 的營銷總監，她致力於幫助您找到構建、管理和維護有效 WordPress 網站的最佳方法。 克里斯汀還喜歡寫日記（看看她的業餘項目，轉型之年！）、遠足和露營、有氧運動、烹飪以及與家人的日常冒險，希望過上更真實的生活。