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

1 評(píng)論 7185 瀏覽 39 收藏 9 分鐘

編輯導(dǎo)語(yǔ):如果你從事設(shè)計(jì)工作,你經(jīng)常會(huì)聽到草圖、線框、模型和原型等術(shù)語(yǔ);許多設(shè)計(jì)師交替使用這幾個(gè)術(shù)語(yǔ),雖然術(shù)語(yǔ)是相關(guān)的,但它們是不同的;在本文中,將回顧四種類型的可交付設(shè)計(jì),并探索哪些工具可以幫助我們?nèi)?chuàng)建它。

一、草圖

草圖是在一張紙上或用數(shù)字工具徒手畫的,給你一個(gè)基本的概念表現(xiàn)。

1. 什么時(shí)候?

草圖在設(shè)計(jì)過(guò)程的概念化和初始可視化階段非常有用。

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

2. 如何做?

草圖可以用紙和筆或者任何設(shè)計(jì)工具來(lái)創(chuàng)建。

畫草圖時(shí)要記住的事情:

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

練習(xí)瘋狂的八分法:這是是Google Ventures Design的sprint技術(shù),可讓產(chǎn)品團(tuán)隊(duì)在短時(shí)間內(nèi)可視化很多創(chuàng)意,該過(guò)程要求每個(gè)團(tuán)隊(duì)成員在五分鐘內(nèi)勾勒出八個(gè)想法。

給你的草圖拍照,有三個(gè)原因:

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

二、線框圖

線框圖是一種低保真度的設(shè)計(jì)產(chǎn)物,它只代表UI的基本元素(線框圖看起來(lái)就像是用線設(shè)計(jì)的,這就是它的名字的由來(lái))。

線框圖是你設(shè)計(jì)的骨架——它們描繪了基本的UI,成為你產(chǎn)品的藍(lán)圖。

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

線框圖在產(chǎn)品設(shè)計(jì)過(guò)程的初始階段最為重要。

線框圖適用于:

  • 評(píng)估個(gè)別頁(yè)面/屏幕的結(jié)構(gòu);
  • 理解相關(guān)屏幕/頁(yè)面是如何一起工作的(從用戶的角度);
  • 準(zhǔn)備詳細(xì)的項(xiàng)目需求文檔(線框圖可以作為很好的參考)。

2. 如何做?

與草圖類似,線框圖也可以用紙和筆來(lái)創(chuàng)建;說(shuō)到數(shù)字工具,Balsamiq可能是最有用的工具。

線框圖繪制時(shí)要記住的事情:

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

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

 

三、模型

模型是設(shè)計(jì)的中高保真可視化,模型提供了產(chǎn)品設(shè)計(jì)的視覺外觀,并且對(duì)于評(píng)估設(shè)計(jì)的外觀和感覺非常有用。

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

1. 什么時(shí)候?

在設(shè)計(jì)過(guò)程的視覺設(shè)計(jì)階段,模型是非常有用的。

模型在設(shè)計(jì)新產(chǎn)品和重新設(shè)計(jì)現(xiàn)有產(chǎn)品時(shí)都可以使用。

當(dāng)團(tuán)隊(duì)想要:

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

2. 如何做?

模型可以在Photoshop、Sketch、Figma和許多其他設(shè)計(jì)工具中創(chuàng)建。

創(chuàng)建模型時(shí)要記住的事情:

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

四、原型

原型是一個(gè)應(yīng)用程序/網(wǎng)頁(yè)的工作模型,原型允許設(shè)計(jì)師模擬用戶交互;與我上面提到的所有其他工件不同,原型總是交互的,原型的目標(biāo)是模擬用戶和界面之間的交互。

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

1. 什么時(shí)候?

原型在設(shè)計(jì)過(guò)程的功能設(shè)計(jì)階段非常有用。

原型可以幫助你:

  • 評(píng)估用戶旅程。原型將幫助產(chǎn)品團(tuán)隊(duì)識(shí)別交互流的潛在問題。
  • 可用性測(cè)試。通過(guò)在用戶中測(cè)試你的設(shè)計(jì),你可以在編碼之前建立信心。

2. 如何做?

adobexd和InVision可以幫助你創(chuàng)建web、移動(dòng)、智能手表甚至語(yǔ)音體驗(yàn)的原型(adobexd)。

原型制作時(shí)要記住的事情:

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

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

五、總結(jié)

在設(shè)計(jì)過(guò)程中,決定使用何種交付成果,都需要考慮您的產(chǎn)品和團(tuán)隊(duì)的需求,嘗試與項(xiàng)目的利益相關(guān)者進(jìn)行溝通;例如:開發(fā)人員、項(xiàng)目經(jīng)理、產(chǎn)品營(yíng)銷人員,了解最適合他們的方案。

在許多情況下,同一個(gè)設(shè)計(jì)項(xiàng)目可能需要?jiǎng)?chuàng)建所有包含以上三種設(shè)計(jì)交付成果;在合適的場(chǎng)合運(yùn)用它們,將幫助您更接近“完美”的設(shè)計(jì)。

 

作者:LDesign1,公眾號(hào)ID:LDesign1

本文由@LDesign1 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash, 基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 在許多情況下,同一個(gè)設(shè)計(jì)項(xiàng)目可能需要?jiǎng)?chuàng)建所有包含以上三種設(shè)計(jì)交付成果;在合適的場(chǎng)合運(yùn)用它們,將幫助您更接近“完美”的設(shè)計(jì)。

    來(lái)自上海 回復(fù)