詳解草圖、線框、模型和原型

1 評論 5702 瀏覽 35 收藏 9 分鐘

編輯導語:如果你從事設計工作,你經常會聽到草圖、線框、模型和原型等術語;許多設計師交替使用這幾個術語,雖然術語是相關的,但它們是不同的;在本文中,將回顧四種類型的可交付設計,并探索哪些工具可以幫助我們去創建它。

一、草圖

草圖是在一張紙上或用數字工具徒手畫的,給你一個基本的概念表現。

1. 什么時候?

草圖在設計過程的概念化和初始可視化階段非常有用。

一圖勝千言——人們是視覺學習者,視覺比文字更能解釋想法。

2. 如何做?

草圖可以用紙和筆或者任何設計工具來創建。

畫草圖時要記住的事情:

  • 不要試圖深入你的草圖,可以繪制粗略的草圖,只要它們能幫助你傳達中心思想。
  • 使用模具畫得更快。

練習瘋狂的八分法:這是是Google Ventures Design的sprint技術,可讓產品團隊在短時間內可視化很多創意,該過程要求每個團隊成員在五分鐘內勾勒出八個想法。

給你的草圖拍照,有三個原因:

  • 圖像可以用作項目的文檔;
  • 你可以將這些照片用于你的作品集;
  • 像Marvel POP這樣的工具可以幫助你把筆和紙上的想法轉換成交互式的iPhone或Android原型。

二、線框圖

線框圖是一種低保真度的設計產物,它只代表UI的基本元素(線框圖看起來就像是用線設計的,這就是它的名字的由來)。

線框圖是你設計的骨架——它們描繪了基本的UI,成為你產品的藍圖。

一文詳解草圖,線框,模型和原型1. 什么時候?

線框圖在產品設計過程的初始階段最為重要。

線框圖適用于:

  • 評估個別頁面/屏幕的結構;
  • 理解相關屏幕/頁面是如何一起工作的(從用戶的角度);
  • 準備詳細的項目需求文檔(線框圖可以作為很好的參考)。

2. 如何做?

與草圖類似,線框圖也可以用紙和筆來創建;說到數字工具,Balsamiq可能是最有用的工具。

線框圖繪制時要記住的事情:

  • 不要給線框圖添加太多的細節,線框圖是產品的骨架結構;線框圖的目的是評估設計,而不是修飾細節;因此,只添加將在頁面/屏幕上顯示的基本元素。
  • 使用顏色來吸引注意力,線框圖通常是用黑色和白色創建的,但也可以使用有限數量的顏色(比如一種或兩種對比色)來創建視覺重音。
  • 添加簡短的“指向重點”注釋;如果你計劃向團隊展示線框,請始終包含注釋,注釋幫助創建上下文并快速傳遞關鍵思想。
  • 從靜態線框創建可單擊的線框,可點擊的線框可以幫助其他人更好地理解您的想法。

一文詳解草圖,線框,模型和原型

 

三、模型

模型是設計的中高保真可視化,模型提供了產品設計的視覺外觀,并且對于評估設計的外觀和感覺非常有用。

一文詳解草圖,線框,模型和原型

1. 什么時候?

在設計過程的視覺設計階段,模型是非常有用的。

模型在設計新產品和重新設計現有產品時都可以使用。

當團隊想要:

  • 評估視覺設計決策:看看顏色、排版和圖像是如何協同工作的。
  • 嘗試不同的風格:設計師可以嘗試不同的顏色組合,看看什么配色方案最適合用戶。
  • 評估設計的視覺一致性:確保產品中的所有屏幕看起來像整個產品的一部分,而不是單個屏幕的集合。
  • 評估設計的可訪問性:您的設計應該允許具有各種能力的用戶導航、理解和使用您的產品;關注色彩對比。
  • 向涉眾展示用戶界面:草圖和線框圖通常需要澄清,而實物模型對人們來說更容易理解。

2. 如何做?

模型可以在Photoshop、Sketch、Figma和許多其他設計工具中創建。

創建模型時要記住的事情:

  • 小心Lorem Ipsum:許多設計人員使用偽文本(也稱為Lorem Ipsum)填充模型;盡管這種方法可以節省設計時間,但當設計人員用真實內容替換虛擬內容時,可能會引起很多問題;內容容器的設計可能不適合實際的內容,這會導致布局的計劃外工作。
  • 不要為你的模型選擇一個單一的設計思路,誘使你愛上第一個似乎是正確的想法,并開始改進模型;但是,這不是最佳的設計方法,設計新產品時,我們需要進行試驗并嘗試各種解決方案;因此,最好嘗試盡可能多的不同想法,然后再選擇你喜歡的想法。

四、原型

原型是一個應用程序/網頁的工作模型,原型允許設計師模擬用戶交互;與我上面提到的所有其他工件不同,原型總是交互的,原型的目標是模擬用戶和界面之間的交互。

一文詳解草圖,線框,模型和原型

1. 什么時候?

原型在設計過程的功能設計階段非常有用。

原型可以幫助你:

  • 評估用戶旅程。原型將幫助產品團隊識別交互流的潛在問題。
  • 可用性測試。通過在用戶中測試你的設計,你可以在編碼之前建立信心。

2. 如何做?

adobexd和InVision可以幫助你創建web、移動、智能手表甚至語音體驗的原型(adobexd)。

原型制作時要記住的事情:

  • 為原型選擇正確的保真度,一些設計師認為原型始終是高保真的人工制品,這不是真的;原型的逼真度應與思維的逼真度相匹配,并且原型可以是低、中、高逼真度。
  • 使用高保真原型來可視化復雜的過渡,當你需要顯示動畫狀態轉換時,Hi-fi原型非常有用。
  • 使用高保真原型與用戶一起測試概念,您的設計越類似于真實產品,你將從測試參與者那里得到的反饋越詳細。
  • 創建編碼的原型,幾乎所有產品都存在技術可行性問題,并非設計人員創建的所有內容都可以輕松地轉換為代碼;但是對于設計人員進行編碼和創建本機原型的項目,面臨技術可行性問題的風險較低。

一文詳解草圖,線框,模型和原型

五、總結

在設計過程中,決定使用何種交付成果,都需要考慮您的產品和團隊的需求,嘗試與項目的利益相關者進行溝通;例如:開發人員、項目經理、產品營銷人員,了解最適合他們的方案。

在許多情況下,同一個設計項目可能需要創建所有包含以上三種設計交付成果;在合適的場合運用它們,將幫助您更接近“完美”的設計。

 

作者:LDesign1,公眾號ID:LDesign1

本文由@LDesign1 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash, 基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 在許多情況下,同一個設計項目可能需要創建所有包含以上三種設計交付成果;在合適的場合運用它們,將幫助您更接近“完美”的設計。

    回復