[ 平面理論教程 ] 幫你奠定設計項目基礎的線框圖五步法- 設計教程 - 骨子愛創意

教學主題: 幫你奠定設計項目基礎的線框圖五步法

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 幫你奠定設計項目基礎的線框圖五步法

這教學的重點為這幾點 [ 基礎,項目,設計,奠定,內容,可以,原型,創建,視覺,不同, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

許多設計項目是從線框圖的設計開始的，但是真正專業的線框圖到底要經歷哪些步驟呢?今天這篇來自UXPin設計師Faye Bridge的文章，幫你總結了一套實用的線框圖設計五步法，幫你從最早的階段奠定整個項目的基礎。

許多設計項目是從線框圖的設計開始的，但是真正專業的線框圖到底要經歷哪些步驟呢?今天這篇來自UXPin設計師Faye Bridge的文章，幫你總結了一套實用的線框圖設計五步法，幫你從最早的階段奠定整個項目的基礎。

想要讓整個數字產品或者設計項目結構化，線框圖是它最早也是最重要的組成部分。線框圖向整個團隊展示了布局、導航、視覺層次、信息架構和內容優先級等關鍵的問題，它勾勒出了整個項目的基本輪廓，呈現了關鍵信息。

而今天的文章會幫你了解提升線框圖設計品質的所需要知道的一切。繼續讀下去，你會知道線框圖為什麼這麼重要，不同的工具要如何使用，並且如何通過一步步的操作最終完成線框圖的設計。

線框圖為何如此實用

在形式上，線框圖使用了大量的佔位符，比如帶標記的框圖，它們隨後會被實際的內容填充起來。在絕大多數情況，設計師會出於下面的考慮來使用和設計線框圖：

·結構化的設計：在細化到具體技術細節之前，明確整個界面的運作方式和交互走向

·構建基礎：導航和布局的搭建幾乎決定了整個項目的大體走向。如果有亟待解決的問題，最好打一開始就着手解決，而不是到高保真原型階段再尋求方案。

·以內容為中心的設計：線框圖的設計思路是以內容為中心，它鼓勵你思考頁面哪些部分更重要，進而設計合理的布局。

·更多的創意和嘗試：由於線框圖足夠簡單，這意味着你可以更容易創建，不用耗費太多精力便可嘗試不同的思路，拿出多種多樣富有創意的方案。

線框圖是設計的框架。

線框圖設計思路

線框圖的設計並沒有一種固定的形態，你可以在圖片編輯器中完成，也可以通過專門的線框圖工具來製作，甚至可以直接在紙上繪製。接下來，我們看看各種不同方式的優劣。

·紙：最基本的線框圖和草圖也相去不遠。如果你想嘗試探索不同的思路來尋求最佳的方案，你可以忽略視覺的精準度，在紙上快速勾勒出來以做探索。

來源：UXPin

·專業平台：諸如UXPin這樣的可以製作線框圖和高保真原型的設計平台，它們大多適宜於團隊協作。

來源：UXPin

·展示軟件：如果你不想使用使用UXPin這類收費的平台，也可以使用Keynote 和Powerpoint 這樣的軟件來展示。好處自然是更加省錢，但是缺點是它們多數時候必須通過郵件來回傳遞再做編輯，溝通和設計成本都偏高。

來源：Keynote

·圖片編輯器：有些設計師喜歡在Photoshop和Sketch這樣的圖片編輯軟件中搞定一切設計問題。如果你也是這類工具的重度用戶的話，創建線框圖所用的形狀和視覺元素絕對夠輕鬆。不過要記住，後續的高保真原型你需要重新創建(在UXPin這類工具中則不然，線框圖在後續創建高保真原型的時候是可以復用的)。

媒介的選取僅僅只是個開始，接下來我們看看設計的具體步驟。

線框圖5步流程

雖然線框圖的設計並沒有一個標準規範，但是我們發現下面的五步設計流程是最實用的：

1、內容清單

2、視覺層次

3、內容線框圖

4、打磨線框圖

5、低保真原型

接下來我們看看每個步驟都是怎麼操作的。

1、內容清單

首先你得創建一個內容清單，其中聚合了所有相關的素材，在創建線框圖之前得合理地整理起來。

來源：Maadmob

內容清單最好是製作成為電子表格，其中根據頁面來劃分，將所有需要單獨呈現的內容都清楚地羅列出來。內容清單有助於你進行以內容為中心的設計，在這樣的思路下，你會更精準的判斷哪些元素更加重要。

最好是按照下面的流程來製作內容清單：

·列出所有的內容，附上URL和簡短的描述

·根據主題組織整理出內容條目

·將每條內容條目分配到最合理的頁面，將出現在多個不同頁面上的內容條目標註出來

·篩選出冗餘內容，將你不需要的內容刪除掉，你刪除掉的內容越多，那麼你留下的內容就越有價值

·如果你願意的話，可以將你的團隊分割為不同的小組，並且將特定的人分配到特定的頁面或者目錄

接下來，你需要基於你的內容列表來創建視覺層次。

2、視覺層次

當你的內容清單整理出所有可用的條目之後，再篩選出每個頁面的優先級就不難了。

隨後，你可以在電子表格中按照優先級的高低，分別標記出每個項目一級、二級和三級的內容條目，而這就是我們要的視覺層次的劃定依據了。

3、內容線框圖

這個部分將會將你之前所規劃的內容劃分到不同的區塊當中去。

正如同UXPin所創建的案例，內容線框圖僅僅是關乎內容的走向，而非展示方式。如果你的工具支持，柵格系統可以很好的幫到你，尤其是當多個頁面都牽涉到相同的布局之時。

線框圖在絕大多數情況下都同移動端優先的設計相適應。當你的線框圖要優先適配小屏幕的時候，只需要優先考慮最重要的部分，然後隨着尺寸的增加而添加細節和元素。另外一種處理方式是打一開頭就將所有元素都設計出來，然後隨着屏幕尺寸的縮小而對元素進行刪減，但是這種方法的問題在於，費時費事，而且容易讓界面元素之間出現割裂。

4、打磨線框圖

完成了基本結構的搭建之後，下一步就是要將它們塑造成可識別的組件。這意味着你需要為圖片預留空間，考慮鏈接和圖標的交互走向，並且計算各個組件之間的尺寸比例。

當然，千萬要控制好度，不要設計得太過細緻。線框圖本質上還是界面的框架，其中的控件是佔位符，不用做的那麼精確。

當然，在打磨線框圖細節的過程中，也別忘了用戶流程的設計。在這個階段，你可以適當地將交互和設計模式納入到其中，並且更準確地定義整個界面的視覺層次。

5、低保真原型

我們強烈建議當你設計好線框圖之後，將其轉化為低保真的原型，這樣你就可以儘早開始測試。

挑對了設計平台，你可以輕鬆地基於線框圖來加入交互，許多優秀的工具甚至可以通過簡單拖放來實現這一點。即使你的低保真模型僅僅具有最基本的交互，也可以及早地幫你造出可用性問題，特別是在整體布局和導航上。

快速原型設計的思路核心在於儘可能快地完成原型設計，加入交互，開始測試，然後獲取反饋，迭代升級。這種思路之下，你無需一次完成全部的測試內容，而是逐步完成，分段完善的。

隨着低保真原型的逐步推進，你的整個項目的基礎就逐步完善了起來，隨後，你便可以開始移動端的視覺設計了。

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 幫你奠定設計項目基礎的線框圖五步法 這教學會喜歡

文章標題: 骨子愛創意- 幫你奠定設計項目基礎的線框圖五步法–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 基礎,項目,設計,奠定,內容,可以,原型,創建,視覺,不同,

本文永久連結 :幫你奠定設計項目基礎的線框圖五步法

本文轉載自 :VIA