什麼是線框稿？終極指南

如果您是 UI/UX 設計領域的新手，您可能不熟悉「線框稿」這個詞。但線框稿是產品設計過程中不可或缺的一部分，所以讓我們深入了解一下——什麼是線框稿？

在這篇部落格文章中，我們將解釋線框稿究竟是什麼、為什麼需要它們、何時可以使用它們，以及有哪些不同種類的線框稿。

什麼是線框稿？

首先從主要問題開始，線框稿究竟是什麼？廣義來說，線框稿是一種藍圖或示意圖，有助於將應用程式或網站的結構傳達給相關的利益關係人。

本質上，線框稿是產品的基本設計佈局。線框稿呈現您想要在頁面上顯示的關鍵資訊。它們也清楚地表明您的應用程式或網站頁面結構的樣貌。最後，線框稿提供有關使用者介面和使用者流程中特定元素的基本資訊，甚至突顯不同的 UI 功能。

為什麼需要線框稿？

在您的團隊編寫任何程式碼或投入大量資源來建構專案之前，重要的是讓每個人都對他們正在建構的內容達成共識。使用線框稿有助於每個人理解和溝通／解釋您想要達成的目標。透過以簡約的結構設計來構思您的設計概念，您可以快速進行調整。此外，您可以讓每個人都了解您未來的設計樣貌。最重要的是，這意味著您可以及早分享您的想法，而無需擔心更複雜的設計元素，例如顏色、陰影或複雜的選單。

何時應該使用線框稿？

線框稿的主要目的是分享有關產品設計的基本但關鍵的資訊。因此，越早將線框稿整合到流程中越好。線框稿應該快速、簡單，並且能夠與許多修改相容。

通常，您應該考慮在產品週期的探索階段建立線框稿。設計師使用線框稿與利益關係人合作，以識別業務需求、確定產品範圍等等。

線框稿的逼真度

並非所有線框稿都是一樣的。即使它們都具有相同的目的，但線框稿會根據您設計它們的逼真度而有所不同。讓我們來看看您的不同選擇。

低逼真度

通常，您應該考慮在產品週期的探索階段建立線框稿。它們傳達非常基本的頁面結構，並且不考慮網格、比例或準確性等細節。

您可以使用紙筆或素描應用程式設計低擬真線框圖。它們非常適合使用基本形狀、圖像和內容即時分享想法。它們在利害關係人會議中特別有用，可以幫助每個人就產品外觀達成共識。此外，它們對於想要展示不同選項的設計師來說也非常方便。當然，由於每個線框圖都很基本，因此設計團隊可以在不浪費時間建立像素完美的模型的情況下測試想法。

中度擬真

線框圖最受歡迎的選項是中度擬真。與低擬真線框圖相比，它們增加了更準確的結構和設計佈局。中度擬真線框圖仍然避免使用詳細元素，例如顏色、UX 文案、圖像和排版。但是，它們確實提供了更獨特的特徵和每個組件的更多細節。

另一個主要區別是您使用數位線框圖工具（如 Sketch）設計中度擬真線框圖，儘管您仍然應該在產品生命週期的早期使用它們來幫助塑造最終結果。通過使用線框圖工具，您可以更改字體粗細和灰色陰影，為您的設計增添更多細節。

高度擬真

最後，高度擬真線框圖（在某些情況下也稱為模型或原型）將細節提升到了一個新的水平。它們沒有使用佔位符文字和圖像，而是採用了更詳細和相關的組件。

它們保留用於產品設計週期的後期階段，可幫助設計師和利害關係人分解更複雜的想法。如果您正在設計菜單系統、互動式地圖，或者想要更進一步，為您的產品提供更詳細的模型，那麼高度擬真線框圖適合您。而且，就像中度擬真一樣，Sketch 等數位設計工具可以幫助您輕鬆建立一個。

現在您了解了什麼是線框圖。它們是產品設計過程中使用的重要工具，將使您的設計過程更加高效。您還可以查看我們的 免費入門課程，以了解更多關於在 Sketch 中設計的資訊。