Wireframe，Prototype，Mockup 三者經(jīng)常被混用，很多人把三者都叫原型，真的是這樣嗎？今天這篇文章，我們來(lái)幫你看看三者到底有何不同。
Wireframe，Prototype，Mockup 三者經(jīng)常被混用，很多人把三者都叫原型，真的是這樣嗎？今天這篇文章，我們來(lái)幫你看看三者到底有何不同。
先來(lái)做一道選擇題：
從這張圖可以看出，prototype 和其他兩者的不同之處在于是否可交互，可點(diǎn)擊，prototype 是動(dòng)態(tài)的；而 wireframe 和 mockup 則是靜態(tài)的。wireframe 和 mockup 之間的區(qū)別則在于是否高保真。
wireframe 之于 prototype 就像建筑藍(lán)圖之于樣板房。
Wireframe——不關(guān)注外觀，只關(guān)注功能
wireframe 中文稱「線框圖」，用來(lái)表達(dá)產(chǎn)品的概念、產(chǎn)品架構(gòu)、內(nèi)容優(yōu)先級(jí)、頁(yè)面布局和操作邏輯。它專注于產(chǎn)品的主要功能和在不同的場(chǎng)景中該如何操作，因此視覺(jué)元素應(yīng)盡量簡(jiǎn)化，甚至不需要考慮，用色以黑白灰為主，最多再加上藍(lán)色，藍(lán)色通常用于導(dǎo)航欄與下方區(qū)塊的區(qū)分。它是低保真的。
可以在紙上手繪：
可以白板上隨便涂鴉：
也可以用軟件工具制作：
它就像是一個(gè)城市的地圖導(dǎo)覽，只負(fù)責(zé)展示這個(gè)城市的大體框架，用它導(dǎo)航，可以清楚整個(gè)城市的布局，但無(wú)法領(lǐng)略具體的美，那些深藏在城市各個(gè)角落中的細(xì)節(jié)之美。
wireframe 是一種溝通工具，主要任務(wù)是快速視覺(jué)化產(chǎn)品概念，讓團(tuán)隊(duì)成員快速了解產(chǎn)品概念，進(jìn)而展開(kāi)討論，迅速搜集到來(lái)自大家的反饋。搜集反饋是為了改進(jìn)產(chǎn)品，因此它不是產(chǎn)品的最終版本，討論中搜集到的反饋可能會(huì)讓產(chǎn)品改動(dòng)很大，這也是為什么不需要太多考慮視覺(jué)細(xì)節(jié)部分的原因，因?yàn)榉凑€要改的。
wireframe 關(guān)鍵詞：
Mockup——呈現(xiàn)豐富的視覺(jué)細(xì)節(jié)
Mockup 為「視覺(jué)稿」，用于呈現(xiàn)產(chǎn)品整體的視覺(jué)設(shè)計(jì)，在 wireframe（線框圖）的基礎(chǔ)上增加了更豐富的視覺(jué)元素，包含圖形、排版、配色等比較細(xì)節(jié)的視覺(jué)呈現(xiàn)，基本上就是等同于產(chǎn)品的最終設(shè)計(jì)稿了。
和 wireframe（線框圖）一樣，Mockup 也是靜態(tài)的，不可操作。它專注產(chǎn)品的外觀，加入了豐富的視覺(jué)元素，保真度高。
Mockup 呈現(xiàn)豐富的細(xì)節(jié)，經(jīng)常用于視覺(jué)設(shè)計(jì)討論中，用于快速搜集產(chǎn)品視覺(jué)設(shè)計(jì)方面的反饋并加以改進(jìn)。
在 dribbble 上搜了一下，長(zhǎng)這樣：
Mockup 關(guān)鍵詞：
Prototype——可操作的原型
Prototype 中文「原型」，是指可操作的原型，比較真實(shí)地模擬了用戶與 UI 界面之間的互動(dòng)，通過(guò)這種方式在產(chǎn)品早期挖掘存在的潛在問(wèn)題，并及時(shí)進(jìn)行修正，幫助設(shè)計(jì)師不斷驗(yàn)證-修正自己對(duì)于產(chǎn)品的想法。
高保真原型 vs 低保真原型
*當(dāng)把多張 Mockup （視覺(jué)稿）圖制作成可操作的模型，這時(shí)候 Mockup 就化為了 prototype，我們稱作是高保真原型。
*當(dāng)把多張 wireframe（線框圖）制作成可操作的模型，這時(shí)候 wireframe 就化為了 prototype。我們稱作是低保真原型。
通常制作原型不必過(guò)多地糾結(jié)細(xì)節(jié)，只需要講清楚重點(diǎn)即可，比如用戶流、內(nèi)容流、頁(yè)面層級(jí)之間的交互關(guān)系，講明白事情最重要了。
Prototype最重要的特性就是可操作性，判斷是不是 prototype 的標(biāo)準(zhǔn)就是是不是可以動(dòng)可操作。
因?yàn)樵偷年P(guān)鍵詞是可動(dòng)可操作，因此像 ps 做出來(lái)的輸出稿一般不是原型，而用墨刀實(shí)現(xiàn)的輸出稿就是原型了，如下圖所示：
prototype 關(guān)鍵詞：
Wireframe，prototype，mockup 各有優(yōu)缺點(diǎn)和不盡相同的使用場(chǎng)景，無(wú)論是產(chǎn)品經(jīng)理還是產(chǎn)品設(shè)計(jì)師，在對(duì)的階段做對(duì)的事至關(guān)重要。在產(chǎn)品的不同階段使用不同的輸出稿，避免時(shí)間精力的浪費(fèi)，快速輸出想法，迅速接受反饋及時(shí)對(duì)產(chǎn)品設(shè)計(jì)進(jìn)行修正和驗(yàn)證，加快產(chǎn)品的迭代流程，降低大規(guī)模地回頭修改，是作為一名合格產(chǎn)品經(jīng)理的基本素養(yǎng)。
