線框圖設計對於UX/UI設計師來講一定不會陌生，無論你已經是一名UX/UI設計師，還是想要向成為一名UX/UI設計師，能畫出不錯的線框圖，都是一個必備的技能。簡單來講，線框圖就是一個網站或者APP的一個圖形化的骨架，能夠引導一個頁面的內容及概念，並且能夠幫助設計師和客戶討論具體的網站層次和導向。

線框圖看似簡單，一個簡單的線框圖可能只有線條、方框和灰階色彩。但是簡單並不意味著畫出一個出色的線框圖是件易事。其實，關於線框圖的知識還很多。你真的弄懂線框圖是什麼了嗎？為什麼要畫線框圖？需要使用哪些線框圖工具？如何畫出一個線框圖？

以上問題都是我在本文裡想要和大家分享的東西。希望你們喜歡。

一. 什麼是線框圖？

線框圖是整個交互式設計過程中的一個必要步驟，它通常在項目生命週期的早期階段進行。線框圖可以簡單的理解為是網站的一個圖形框架，這就好比建築的藍圖。

通常，線框圖需要實現三個核心目標：

1.在進行視覺設計和交互設計之前呈現頁面的內容和功能。

2.在項目早期幫助設計師與客戶交流設計理念。

3.建立網站設計的信息層次結構。

基本上，線框圖可以分解成以下3個主要元素：

4.信息設計元素 - 包含網站的結構和佈局輪廓的主要信息。

5.導航設計元素 - 創建導航以確保網站結構符合用戶期望。

6.界面設計元素 - 用戶界面的視覺設計和描述，主要用灰階色塊。

二. 為什麼需要畫線框圖？

作為設計過程的一個關鍵部分，線框圖在以下幾個方面具有重要意義。

1.線框圖比抽象的設計概念更容易理解

試想一下，如果你只用你的概念性的設計向客戶解釋，他們如果不具備一定的專業知識，理解起來有多困難？在這種情形下，要想獲得他們的贊同之後只會難上加難。而如果使用線框圖，你可以將抽象站點地圖變為可視的網站界面。這樣，對於客戶還是老闆，他們審閱和理解起來也會更容易和快速。

用戶，團隊成員和客戶可以在早期階段查看你的設計，並提供反饋意見以提升用戶體驗。這還有助於使設計過程快速迭代。而如果你忽略線框圖這個步驟，以後發現問題要付出的成本將會高出早期很多。

3.線框圖有助於定義網站功能

線框圖可以根據用戶和業務需求來正確定位頁面內容和功能。並且，隨著項目的進展，項目團隊成員之間可以進行有效的溝通，就項目目標達成一致意見。

4.線框圖繪製速度快，成本低

建立線框圖非常快速，並且成本低。最簡單的方法是使用筆和紙。現在還有更多的線框圖工具可供使用，你可以在幾分鐘內使用工具快速構建線框圖。

三. 好用的線框工具有哪些？

線框圖的優勢已經討論了，如果你是要畫線框圖，有哪些工具可以使用呢？以下是一些工具推薦，可以嘗試。

1.Mockplus - 快速線框圖工具

Mockplus是一個更快，更簡單的線框和原型工具，它可以讓UX / UI設計人員在5分鐘內創建交互式原型圖或線框圖。如果你的需求是一個可快速實現產品設計和迭代的工具，Mockplus絕對是你的第一選擇。

2.Wireframe CC - 最輕量的線框圖工具

Wireframe.cc是一個在線線框圖工具，它有簡單的界面，可以快速繪製線框。最大的特點就是簡潔，甚至連一些工具欄和圖標都沒有，你可以自由設計，無拘無束。但目前沒有桌面端，不能夠離線操作。

3.Balsamiq Mockups - 具有獨特素描風格的線框圖工具

如果你偏愛紙張的設計感覺，那麼可以考慮Balsamiq Mockups。由於它有“特意粗糙和低保真”的風格，因此在同類工具中很是特別，你明明在電腦界面操作，但是卻彷彿用著紙筆。但是如果你是要進一步設計線框圖，這款工具就不太受用，因為它不支持任何交互和動畫。

4.Pencil project - 注重圖表和GUI的線框圖工具

Pencil project是一個免費的線框工具，曾在2008年贏得了Mozilla的“最佳新插件”獎，因為它可作為Firefox的插件使用。但如果你不是Firefox的用戶，這款工具的優勢就會大打折扣。

5.Fireworks - 完整的線框圖工具

Fireworks可以用於整個設計流程，從基本線框到完整的視覺效果，是比較符合產品發展和推進的一款工具。可以在後期進行交互設計，創建交互原型。

四. 哪裡可以找到線框圖設計的靈感？

線框圖的概念理解了，工具也有了，那麼，如何進行高效的線框圖設計？如何把自己的設計靈感展示出來？如果你是初入設計行業，建議多看多學，這裡有一些網站線框圖設計的例子，或許可以為你帶來靈感。並且，大多數文件支持下載，可以直接在你的設計中使用。

1.Fedena

類型：一體化的管理軟件

Fedena是一個管理類的軟件原型圖，主要是學院管理軟件和管理系統，頁面信息豐富，主次突出，主要頁面包含註冊，登錄，論壇，下載，聯繫等。使用了大量的灰色階塊來突出界面的層次。

2.StyleXstyle

類型：時尚類網站

StyleXstyle是一個時尚行業的網站線框原型圖例子。頁面內容比較豐富，包含細節，登錄，慈善拍賣，個人資料等。使用矩形框組件和圖標展示界面信息和層次，使用灰色階塊突出重點，也使用文本和標題等元素進一步突出界面的信息層次。

3.EdX

類型：教育

Edx是一個教育行業網站的線框圖例子。這個線框圖設計相對而言更加簡單，僅使用了最基本的框架和線條等元素組合而成。但也很好的突出了界面的內容和層次，主要主頁包括創業、課程、計劃、學校、合作伙伴、logo以及關於我們等。

類型：音樂

So Stereo 是一個音樂類線框圖例子。使用了大板塊的灰色結塊突出和劃分出界面的佈局，整個界面幾乎一分為二。不同層次的標題極大的突出了界面信息設計的層次。其主要頁面包含主頁，搜索，發現，常見問題，隱私政策，服務條款等。

5.Global Sources

類型：電子商務

Global Sources 是一個比較典型的電子商務網站線框圖。整個界面又矩形框，列表組件，和文本組件以及一些線條等元素組成，包含了幾個主要界面：主頁，類別頁面，登錄頁面和消息頁面等。中心區域展示的商品詳情可以通過格子組件快速完成。

五. 如何創建網站線框圖？

接下來，我將展示一個比較完整的線框圖設計是如何從始至終呈現的。這裡僅是個人的設計過程，不是唯一流程，但是，對於學習設計的小夥伴而言，或許可以有一定幫助。

1.獲得一些啟發和設計靈感

網站設計其實可以說是一個從靈感到高保真的過程。在設計網站線框圖之前，如果你的經驗還不夠豐富，可以看看同類的網站線框圖設計是怎樣的。上面我也有推薦一些網站線框圖的最佳示例，希望在開始線框圖設計之前，您可以從中找到靈感。

2.弄清楚你應該在什麼時候畫線框圖

比較常見的一個完整設計過程可以包含這些環節：草圖=>線框圖=>低保真原型圖=>高保真模型圖=>高保真原型圖=>代碼。正如你所看到的，線框圖幾乎是在設計過程的最早期就需要，所以需要儘早做。

3.用線框圖工具開始設計

正如我之前提到的，有很多工具可供您選擇。由於我使用Mockplus很多，在這裡我會向你展示如何在Mockplus中創建一個網站線框圖。

首先，先看看使用Mockplus製作的線框圖是什麼樣子。

第1步：打開Mockplus並創建一個Web項目

在啟動頁面，你可以選擇個人項目或者團隊項目，選擇後，在彈出窗口裡選擇網頁項目，在這裡，你還可以自由設置網站頁面大小。

第2步：在Mockplus中設計線框圖

這裡從幾個關鍵點上展開說明如何在mockplus快速設計線框圖。

1）使用參考線和矩形框來快速定義界面框架，使用高度封裝的組件和矢量圖標快速佈局界面元素

拖拽參考線在畫布上直接劃分大概的網頁區域，然後快速放置矩形框和線條等組件實現界面佈局。比如導航欄、登錄按鈕、標題部分、文本部分、訂閱按鈕、logo、搜索框等等，都可以通過鼠標直接拖拽組件實現。利用參考線則可以快速定位組件到準確位置。

2）使用文本和標籤組件進行信息設計並創建信息層次結構

如圖，導航欄的文本，主標題的文本，副標題的文本，主體部分的文本大小有所不同，這裡需要使用不同的字號等元素來突出信息層次。這裡只需使用Mockplus的單行文本組件和多行文本組件，並設置文本大小就可以。還可以使用格式刷、數據自動填充等工具，格式刷可以快速使具有相同層次的文本信息呈現出同一格式，數據自動填充則可以填充文本數據和圖片數據。

3）使用Repeater等組件快速創建重複元素，迅速呈現界面設計

如圖，設計中有很多複用的界面元素，這裡可以使用格子組件，可以快速複製頁面元素，又能做到靈活修改所有相同元素屬性的功能，幫助你批量處理頁面元素，大幅度縮短工作時間。

4）使用組件屬性樣式使界面設計更加直觀簡潔（利用色彩屬性添加灰階色彩）

如前所講，一個簡單的線框圖可能只有線條、方框和灰階色彩，這裡可以利用Mockplus右側的屬性面板，設置組件的色彩為灰色，使用組件樣式則可以快速複用組件的這種風格，同時還可以將組件風格保存到庫中，方便多次使用。

5）進一步設計成交互式原型（非必要步驟）

Mockplus也是交互設計的有效工具，Mockplus目前支持3種交互方式：頁面交互，組件交互和屬性交互，可以快速創建可交互的線框圖和原型圖。如果你是想深入設計，可以嘗試。

第3步：導出和分享線框圖

Mockplus擁有8種快速測試和演示方式，支持手機端、瀏覽器及桌面端的線框圖演示。在線預覽和離線演示都可輕鬆實現，就算你的客戶遠在千里之外，也可以及時查看，並且支持批註和審閱，可以快速收集客戶意見。

總結

以上就是我和大家分享的一些關於線框圖的信息，希望能夠對你有所幫助。

閱讀更多 Mockplus摹客 的文章

關鍵字: 框圖 軟件 設計師