詳解草圖、線框、模型和原型
編輯導語:如果你從事設(shè)計工作,你經(jīng)常會聽到草圖、線框、模型和原型等術(shù)語;許多設(shè)計師交替使用這幾個術(shù)語,雖然術(shù)語是相關(guān)的,但它們是不同的;在本文中,將回顧四種類型的可交付設(shè)計,并探索哪些工具可以幫助我們?nèi)?chuàng)建它。
一、草圖
草圖是在一張紙上或用數(shù)字工具徒手畫的,給你一個基本的概念表現(xiàn)。
1. 什么時候?
草圖在設(shè)計過程的概念化和初始可視化階段非常有用。
一圖勝千言——人們是視覺學習者,視覺比文字更能解釋想法。
2. 如何做?
草圖可以用紙和筆或者任何設(shè)計工具來創(chuàng)建。
畫草圖時要記住的事情:
- 不要試圖深入你的草圖,可以繪制粗略的草圖,只要它們能幫助你傳達中心思想。
- 使用模具畫得更快。
練習瘋狂的八分法:這是是Google Ventures Design的sprint技術(shù),可讓產(chǎn)品團隊在短時間內(nèi)可視化很多創(chuàng)意,該過程要求每個團隊成員在五分鐘內(nèi)勾勒出八個想法。
給你的草圖拍照,有三個原因:
- 圖像可以用作項目的文檔;
- 你可以將這些照片用于你的作品集;
- 像Marvel POP這樣的工具可以幫助你把筆和紙上的想法轉(zhuǎn)換成交互式的iPhone或Android原型。
二、線框圖
線框圖是一種低保真度的設(shè)計產(chǎn)物,它只代表UI的基本元素(線框圖看起來就像是用線設(shè)計的,這就是它的名字的由來)。
線框圖是你設(shè)計的骨架——它們描繪了基本的UI,成為你產(chǎn)品的藍圖。
1. 什么時候?
線框圖在產(chǎn)品設(shè)計過程的初始階段最為重要。
線框圖適用于:
- 評估個別頁面/屏幕的結(jié)構(gòu);
- 理解相關(guān)屏幕/頁面是如何一起工作的(從用戶的角度);
- 準備詳細的項目需求文檔(線框圖可以作為很好的參考)。
2. 如何做?
與草圖類似,線框圖也可以用紙和筆來創(chuàng)建;說到數(shù)字工具,Balsamiq可能是最有用的工具。
線框圖繪制時要記住的事情:
- 不要給線框圖添加太多的細節(jié),線框圖是產(chǎn)品的骨架結(jié)構(gòu);線框圖的目的是評估設(shè)計,而不是修飾細節(jié);因此,只添加將在頁面/屏幕上顯示的基本元素。
- 使用顏色來吸引注意力,線框圖通常是用黑色和白色創(chuàng)建的,但也可以使用有限數(shù)量的顏色(比如一種或兩種對比色)來創(chuàng)建視覺重音。
- 添加簡短的“指向重點”注釋;如果你計劃向團隊展示線框,請始終包含注釋,注釋幫助創(chuàng)建上下文并快速傳遞關(guān)鍵思想。
- 從靜態(tài)線框創(chuàng)建可單擊的線框,可點擊的線框可以幫助其他人更好地理解您的想法。
三、模型
模型是設(shè)計的中高保真可視化,模型提供了產(chǎn)品設(shè)計的視覺外觀,并且對于評估設(shè)計的外觀和感覺非常有用。
1. 什么時候?
在設(shè)計過程的視覺設(shè)計階段,模型是非常有用的。
模型在設(shè)計新產(chǎn)品和重新設(shè)計現(xiàn)有產(chǎn)品時都可以使用。
當團隊想要:
- 評估視覺設(shè)計決策:看看顏色、排版和圖像是如何協(xié)同工作的。
- 嘗試不同的風格:設(shè)計師可以嘗試不同的顏色組合,看看什么配色方案最適合用戶。
- 評估設(shè)計的視覺一致性:確保產(chǎn)品中的所有屏幕看起來像整個產(chǎn)品的一部分,而不是單個屏幕的集合。
- 評估設(shè)計的可訪問性:您的設(shè)計應該允許具有各種能力的用戶導航、理解和使用您的產(chǎn)品;關(guān)注色彩對比。
- 向涉眾展示用戶界面:草圖和線框圖通常需要澄清,而實物模型對人們來說更容易理解。
2. 如何做?
模型可以在Photoshop、Sketch、Figma和許多其他設(shè)計工具中創(chuàng)建。
創(chuàng)建模型時要記住的事情:
- 小心Lorem Ipsum:許多設(shè)計人員使用偽文本(也稱為Lorem Ipsum)填充模型;盡管這種方法可以節(jié)省設(shè)計時間,但當設(shè)計人員用真實內(nèi)容替換虛擬內(nèi)容時,可能會引起很多問題;內(nèi)容容器的設(shè)計可能不適合實際的內(nèi)容,這會導致布局的計劃外工作。
- 不要為你的模型選擇一個單一的設(shè)計思路,誘使你愛上第一個似乎是正確的想法,并開始改進模型;但是,這不是最佳的設(shè)計方法,設(shè)計新產(chǎn)品時,我們需要進行試驗并嘗試各種解決方案;因此,最好嘗試盡可能多的不同想法,然后再選擇你喜歡的想法。
四、原型
原型是一個應用程序/網(wǎng)頁的工作模型,原型允許設(shè)計師模擬用戶交互;與我上面提到的所有其他工件不同,原型總是交互的,原型的目標是模擬用戶和界面之間的交互。
1. 什么時候?
原型在設(shè)計過程的功能設(shè)計階段非常有用。
原型可以幫助你:
- 評估用戶旅程。原型將幫助產(chǎn)品團隊識別交互流的潛在問題。
- 可用性測試。通過在用戶中測試你的設(shè)計,你可以在編碼之前建立信心。
2. 如何做?
adobexd和InVision可以幫助你創(chuàng)建web、移動、智能手表甚至語音體驗的原型(adobexd)。
原型制作時要記住的事情:
- 為原型選擇正確的保真度,一些設(shè)計師認為原型始終是高保真的人工制品,這不是真的;原型的逼真度應與思維的逼真度相匹配,并且原型可以是低、中、高逼真度。
- 使用高保真原型來可視化復雜的過渡,當你需要顯示動畫狀態(tài)轉(zhuǎn)換時,Hi-fi原型非常有用。
- 使用高保真原型與用戶一起測試概念,您的設(shè)計越類似于真實產(chǎn)品,你將從測試參與者那里得到的反饋越詳細。
- 創(chuàng)建編碼的原型,幾乎所有產(chǎn)品都存在技術(shù)可行性問題,并非設(shè)計人員創(chuàng)建的所有內(nèi)容都可以輕松地轉(zhuǎn)換為代碼;但是對于設(shè)計人員進行編碼和創(chuàng)建本機原型的項目,面臨技術(shù)可行性問題的風險較低。
五、總結(jié)
在設(shè)計過程中,決定使用何種交付成果,都需要考慮您的產(chǎn)品和團隊的需求,嘗試與項目的利益相關(guān)者進行溝通;例如:開發(fā)人員、項目經(jīng)理、產(chǎn)品營銷人員,了解最適合他們的方案。
在許多情況下,同一個設(shè)計項目可能需要創(chuàng)建所有包含以上三種設(shè)計交付成果;在合適的場合運用它們,將幫助您更接近“完美”的設(shè)計。
作者:LDesign1,公眾號ID:LDesign1
本文由@LDesign1 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash, 基于CC0協(xié)議
在許多情況下,同一個設(shè)計項目可能需要創(chuàng)建所有包含以上三種設(shè)計交付成果;在合適的場合運用它們,將幫助您更接近“完美”的設(shè)計。