產(chǎn)品的好壞取決于其結(jié)構(gòu)。您的線框是基礎(chǔ)。

良好的結(jié)構(gòu)是一個基本的網(wǎng)頁設(shè)計原則。當建筑師規(guī)劃新房子時，他們首先要創(chuàng)建一個傳達房屋結(jié)構(gòu)的藍圖。產(chǎn)品設(shè)計人員需要一個類似的藍圖 — 它稱為線框。

究竟什么是線框圖？

線框是您的想法的準系統(tǒng)可視化。線框的首要目標是描述用戶流的結(jié)構(gòu)和功能。功能是用戶與之交互的任何內(nèi)容，例如按鈕、菜單和下拉菜單。

在不涉及視覺細節(jié)或 UI 設(shè)計的情況下，線框演示了產(chǎn)品的總體布局，并說明了每個頁面上需要包含哪些元素。有許多可用的線框工具供設(shè)計人員選擇。

為什么線框圖如此重要？

線框在映射接口的基本部分時是必需的。它可以幫助所有相關(guān)人員在流程開始時全面了解產(chǎn)品。沒有這個基礎(chǔ)，幾乎不可能繼續(xù)進行產(chǎn)品的編碼或設(shè)計。它還提供了一種簡單且低成本的方法來比較一些設(shè)計概念并盡早做出決策。

由于線框非常直觀，因此它們比看似抽象的書面想法更容易理解。向開發(fā)人員或您的客戶展示線框?qū)椭麄兦宄乩斫饽囊鈭D，使您能夠接收相關(guān)反饋并將其實施到您的設(shè)計中。

線框和模型有什么區(qū)別？

這一切都與細節(jié)水平有關(guān)。 您從線框開始，線框更多地涉及結(jié)構(gòu)和布局，然后發(fā)展到模型，其中包括更接近最終產(chǎn)品的圖像和內(nèi)容。

創(chuàng)建實際產(chǎn)品之前的最后一步是通過使其可點擊來將您的模型變成原型。 如果您想知道原型與模型相比如何，這歸結(jié)為交互性水平。線框是靜態(tài)設(shè)計工件，而原型是交互式的。原型的復雜程度各不相同，從精心設(shè)計的網(wǎng)站模型到使用真正行為和感覺與實際產(chǎn)品相同的代碼創(chuàng)建的 UX 原型。 線框通常是原型的第一步。

不同類型的線框

像任何好朋友一樣，線框在整個過程中都陪伴在您身邊。隨著您對產(chǎn)品有了更好的了解，您可以逐漸實現(xiàn)更高級的線框形式，當您從一個階段進入下一個階段時，從各個角度構(gòu)建它們。以下是對不同類型線框的簡要說明。另請查看這些線框示例以了解更多詳細信息。

低保真線框與高保真線框

線框的細節(jié)級別（也稱為保真度）可能會有所不同。主要有三種類型：

低保真線框。 低保真線框是頁面或屏幕的基本視覺表示形式，使用簡單的形狀（如線條和框）創(chuàng)建。由于它們在視覺上簡單，這種類型的線框以其創(chuàng)建速度而聞名。它們可以在頭腦風暴會議期間創(chuàng)建，并有助于更有效地交流想法。但是，低保真線框往往更抽象，可能需要解釋。

中等保真線框。 這些線框比低保真線框要詳細一些。您不會找到網(wǎng)站動畫、視差滾動、照片、花哨的字體或圖形，但您會看到更逼真的間距、按鈕等。

高保真線框。 高保真線框的細節(jié)級別更高 — 它們可能包括真實副本并提供更準確的布局表示（例如，可以使用不同的字體大小來分隔標題和正文內(nèi)容）。由于創(chuàng)建高保真線框需要更長的時間，因此它們通常保留用于產(chǎn)品設(shè)計過程的后期階段（例如，當您有兩個版本的頁面布局并希望并排比較它們時）。

如何有效地生成線框

線框的生產(chǎn)可能會有所不同。有手繪線框，它們是在紙或白板上的草圖，還有數(shù)字線框，它們是計算機繪制的或在線框工具上創(chuàng)建的。

有幾種方法可以開始使用線框：

直接在畫布上打開并開始編輯我們的線框模板之一

如果您是 Figma 粉絲，請使用我們的 Figma 插件訪問完全可定制的模板，然后無縫導入到您的 Studio 網(wǎng)站

使用我們 AI 驅(qū)動的可視化站點地圖和線框生成器生成為您的項目定制的線框

最佳實踐使用線框

• 01. 保持線框簡單

  速度和簡單性是線框的兩個主要屬性。您可以應(yīng)用一些視覺約定來輕松地將您的想法傳達給其他設(shè)計人員。

  輸入字段：輸入字段可以表示為矩形。

  按鈕：按鈕可以表示為中心有文本的矩形。

  圖像：圖像可以表示為帶有“X”的矩形框。

  文本：根據(jù)保真度級別，可以使用占位符文本（如 Lorem Ipsum）或真實文本。

• 02. 將造型保持在最低限度

  線框的目標是確定界面的預期內(nèi)容和功能，而不是描述視覺設(shè)計。這就是為什么線框通常以黑白或灰度創(chuàng)建的原因。缺少顏色、圖像、排版或任何其他視覺屬性有助于最大限度地減少干擾并將討論集中在布局和結(jié)構(gòu)上。

  這種方法的另一個好處是設(shè)計看起來并未完成。當其他人知道視覺資產(chǎn)的創(chuàng)建時間不長并且可以快速修改時，他們可以更輕松地共享設(shè)計反饋。

  請記住，雖然設(shè)計應(yīng)該是最小的，但這并不意味著禁止使用顏色。您可以使用對比色將用戶的注意力引導至線框的特定元素。例如，使用藍色來傳達行動號召按鈕等動元素。

• 03. 為線框添加注釋

  由于線框是二維和靜態(tài)的，因此其他人可能很難理解某物應(yīng)該如何運作。例如，如果您的界面中有復雜的交互功能，例如拖放對象，則其他人可能需要發(fā)揮他們的想象力來了解其工作原理。在 UI 控件旁邊添加一個簡短的注釋，以解釋預期行為。

• 04. 確保利益相關(guān)者了解在線框中尋找什么

  雖然設(shè)計人員和開發(fā)人員了解什么是線框以及為什么它們看起來是某種方式，但客戶可能在掌握這個概念時遇到問題。企業(yè)主可能很容易假設(shè)最終的視覺設(shè)計看起來與他們面前看到的線框相同，并提出諸如“為什么這個設(shè)計如此黑白分明”之類的問題，或者更糟糕的是，完全拒絕解決方案。確保只與精通產(chǎn)品設(shè)計領(lǐng)域的利益相關(guān)者共享線框，或清楚地傳達此步驟的本質(zhì)。在某些情況下，創(chuàng)建高保真模型更安全。

• 05. 使用高保真線框作為文檔

  許多團隊將線框視為被原型替換的臨時工件。這并不總是正確的。高保真線框可用于記錄復雜的概念，例如導航系統(tǒng)或特定用戶流（如用戶經(jīng)過的一系列屏幕）。

• 06. 在低保真階段為同一屏幕創(chuàng)建幾次迭代

  此時，您仍然應(yīng)該保持開放的選擇。隨著您繼續(xù)前進，您將對產(chǎn)品有更好的了解，您的選擇也會更加明智。確定流程后，您可以了解更詳細的信息。

• 07. 知道何時描述而不是設(shè)計

  根據(jù)間距、大小和布局來描述層次結(jié)構(gòu)，同時注意不要在設(shè)計 UI 時進行設(shè)計。確定要傳遞的最重要的信息，并考慮用戶將在該特定頁面上尋找什么。他們是否打算訂閱時事通訊、為照片添加濾鏡或進行購買？不管它是什么，只需陳述它，而不是設(shè)計它。

• 08. 不要跳過線框階段！

  除了讓您有機會專注于開發(fā)全面的積極用戶體驗之外，線框還可以節(jié)省時間，因為它們可以幫助您在流程的早期識別和處理任何可用性問題。當然，就像生活中的一切一樣，規(guī)則也有例外。您可能會遇到不需要創(chuàng)建整個線框的情況，例如在調(diào)整預先存在的功能或向已經(jīng)具有定義語言的產(chǎn)品添加簡單屏幕時。但總的來說，將線框視為為您的客戶創(chuàng)造令人驚嘆的作品的早期步驟。

了解有關(guān) Thinkart 網(wǎng)站設(shè)計的更多信息，并立即開始構(gòu)建您的下一個網(wǎng)站。