成人亚洲综合,日韩高清一区二区三区五区七区,三级网址日本,亚洲激情成人,av成人在线电影,亚洲免费成人在线,超清首页国产亚洲丝袜

WIREFRAME,PROTOTYPE,MOCKUP到底有何

作者:
2016-09-12
2141

Wireframe,Prototype,Mockup 三者經(jīng)常被混用,很多人把三者都叫原型,真的是這樣嗎?今天這篇文章,我們來幫你看看三者到底有何不同。

Wireframe,Prototype,Mockup 三者經(jīng)常被混用,很多人把三者都叫原型,真的是這樣嗎?今天這篇文章,我們來幫你看看三者到底有何不同。

先來做一道選擇題:

1.jpg

從這張圖可以看出,prototype 和其他兩者的不同之處在于是否可交互,可點擊,prototype 是動態(tài)的;而 wireframe 和 mockup 則是靜態(tài)的。wireframe 和 mockup 之間的區(qū)別則在于是否高保真。

wireframe 之于 prototype 就像建筑藍圖之于樣板房。

2.jpg

Wireframe——不關(guān)注外觀,只關(guān)注功能

wireframe 中文稱「線框圖」,用來表達產(chǎn)品的概念、產(chǎn)品架構(gòu)、內(nèi)容優(yōu)先級、頁面布局和操作邏輯。它專注于產(chǎn)品的主要功能和在不同的場景中該如何操作,因此視覺元素應盡量簡化,甚至不需要考慮,用色以黑白灰為主,最多再加上藍色,藍色通常用于導航欄與下方區(qū)塊的區(qū)分。它是低保真的。

可以在紙上手繪:

3.jpg

可以白板上隨便涂鴉:

4.jpg

也可以用軟件工具制作:

5.jpg

它就像是一個城市的地圖導覽,只負責展示這個城市的大體框架,用它導航,可以清楚整個城市的布局,但無法領(lǐng)略具體的美,那些深藏在城市各個角落中的細節(jié)之美。

wireframe 是一種溝通工具,主要任務(wù)是快速視覺化產(chǎn)品概念,讓團隊成員快速了解產(chǎn)品概念,進而展開討論,迅速搜集到來自大家的反饋。搜集反饋是為了改進產(chǎn)品,因此它不是產(chǎn)品的最終版本,討論中搜集到的反饋可能會讓產(chǎn)品改動很大,這也是為什么不需要太多考慮視覺細節(jié)部分的原因,因為反正還要改的。

wireframe 關(guān)鍵詞:

6.jpg

Mockup——呈現(xiàn)豐富的視覺細節(jié)

Mockup 為「視覺稿」,用于呈現(xiàn)產(chǎn)品整體的視覺設(shè)計,在 wireframe(線框圖)的基礎(chǔ)上增加了更豐富的視覺元素,包含圖形、排版、配色等比較細節(jié)的視覺呈現(xiàn),基本上就是等同于產(chǎn)品的最終設(shè)計稿了。

和 wireframe(線框圖)一樣,Mockup 也是靜態(tài)的,不可操作。它專注產(chǎn)品的外觀,加入了豐富的視覺元素,保真度高。

Mockup 呈現(xiàn)豐富的細節(jié),經(jīng)常用于視覺設(shè)計討論中,用于快速搜集產(chǎn)品視覺設(shè)計方面的反饋并加以改進。

在 dribbble 上搜了一下,長這樣:

7.jpg

Mockup 關(guān)鍵詞:

8.jpg

Prototype——可操作的原型

Prototype 中文「原型」,是指可操作的原型,比較真實地模擬了用戶與 UI 界面之間的互動,通過這種方式在產(chǎn)品早期挖掘存在的潛在問題,并及時進行修正,幫助設(shè)計師不斷驗證-修正自己對于產(chǎn)品的想法。
高保真原型 vs 低保真原型

*當把多張 Mockup (視覺稿)圖制作成可操作的模型,這時候 Mockup 就化為了 prototype,我們稱作是高保真原型。

*當把多張 wireframe(線框圖)制作成可操作的模型,這時候 wireframe 就化為了 prototype。我們稱作是低保真原型。

通常制作原型不必過多地糾結(jié)細節(jié),只需要講清楚重點即可,比如用戶流、內(nèi)容流、頁面層級之間的交互關(guān)系,講明白事情最重要了。

Prototype最重要的特性就是可操作性,判斷是不是 prototype 的標準就是是不是可以動可操作。

因為原型的關(guān)鍵詞是可動可操作,因此像 ps 做出來的輸出稿一般不是原型,而用墨刀實現(xiàn)的輸出稿就是原型了,如下圖所示:

8auisdc-ml-201609102.gif

prototype 關(guān)鍵詞:

9.jpg

Wireframe,prototype,mockup 各有優(yōu)缺點和不盡相同的使用場景,無論是產(chǎn)品經(jīng)理還是產(chǎn)品設(shè)計師,在對的階段做對的事至關(guān)重要。在產(chǎn)品的不同階段使用不同的輸出稿,避免時間精力的浪費,快速輸出想法,迅速接受反饋及時對產(chǎn)品設(shè)計進行修正和驗證,加快產(chǎn)品的迭代流程,降低大規(guī)模地回頭修改,是作為一名合格產(chǎn)品經(jīng)理的基本素養(yǎng)。

0
5
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學科技園東區(qū)9號樓2層

版權(quán)信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網(wǎng)安備 41019702002261號