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

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

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

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

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

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

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

本文重點

許多設計項目是從線框圖的設計開始的,但是真正專業的線框圖到底要經歷哪些步驟呢?今天這篇來自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

熱門推薦

本文由 愛創意 提供 原文連結

愛創意
寫了3813篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦