如何建立線框圖：終極指南

取得關於如何為您的行動應用程式或網站建立線框圖的逐步指南

從空白頁面開始進行產品設計是令人卻步的。但是，與其嘗試從頭開始建立完美的設計，為什麼不利用您最有用的設計工具之一 - 線框圖來激發您的創造力呢？

在本文中，我們將探討如何從頭開始建立線框圖，以及您可能需要它的原因。

為什麼要建立線框圖？

當您處於設計流程的構思階段時，擁有一種快速溝通您最大膽想法的方法非常有用。想像一下，在沒有藍圖的情況下開始建造房屋 - 這永遠不會成功。在您投入大量資源進行專案之前，您需要微調您的計劃，並清楚地了解最終結果會是什麼樣子。

通過以簡約的結構設計來構建您的設計概念，您可以快速進行調整。此外，您可以讓每個人都了解您未來的設計將會是什麼樣子。最重要的是，這意味著您可以及早分享您的想法，而無需擔心更複雜的設計元素，例如顏色、陰影或複雜的菜單。

如果您想進一步了解什麼是線框圖或想查看一些線框圖範例，請查看我們的網誌。

我們將特別關注如何建立中等逼真度的線框圖。您可以使用數位設計工具來設計它們，而我們將在指南中使用 Sketch。您可以按照這些步驟建立自己的線框圖 - 但在本範例中，我們將為旅遊應用程式建立藍圖。

在您開始任何設計專案之前，重要的是要真正思考您想要實現什麼。而研究可以幫助您。首先，查看其他類似的產品 - 重點關注哪些有效、哪些無效，以及您想做哪些不同的事情。

使用者研究也是開始產品探索的好方法。調查潛在使用者可以幫助您找出產品可以解決的痛點。它還可以幫助您專注於產品的主要用例。不要忘記記錄您學到的所有內容 - 您以後肯定會想要參考它。

現在您已經了解了您想要建立的內容以及使用者的痛點，是時候將您的想法付諸行動了。目標是確定最終產品中螢幕應該是什麼樣子。問問自己 - 從使用者打開應用程式的那一刻起，他們將如何達到他們想要的目標？這就是您所說的使用者旅程。

以我們的旅遊 app 為例，我們知道使用者會想要搜尋旅遊目的地、飯店資訊和價格。他們也會想要一個個人檔案來記錄他們的旅遊經歷。我們可以利用這些資訊來規劃使用者旅程並建立線框稿。首先，在紙上畫出你的線框稿草圖。這並非必要步驟，但它可以幫助你將低擬真度的草圖視覺化並轉化為線框稿。

完成準備工作後，就可以開始製作線框稿了。在本指南中，我們將使用 Sketch 來製作線框稿。開啟 Mac app 並建立一個新文件以開始作業。但在開始繪製之前，有一些製作線框稿的基本規則你應該牢記在心：

**僅使用灰階：**線框稿不使用任何顏色，並將陰影使用降至最低。
**不使用圖片：**同樣地，我們盡量保持簡潔，因此大多數圖片可以使用佔位符。你可以使用暫時的圖庫圖片，或是在圖片框架中加上一個十字記號，表示最終會在此放置圖片。
**限制或不使用文字：**有些設計師喜歡為主選單和任何對 app 功能重要的元素添加文字。除此之外，你應該避免使用文字或使用佔位符文字。
**限制字體：**如果你要添加任何文字，請將字體限制在兩種以內，一種用於標題，一種用於內文。
**注意比例，但不需精確測量：**重要的是要考慮比例，例如圖塊、圖示或圖片的大小，但不必擔心精確的測量。在你擁有最終的圖片和文字之前，你的設計仍然需要修改和調整。

現在，讓我們繼續製作線框稿所需的建構區塊。