WIREFRAME,PROTOTYPE,MOCKUP到底有何

      作者:
      分類: 觀點/經驗
      2016-09-12
      2212

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

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

      先來做一道選擇題:

      1.jpg

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

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

      2.jpg

      Wireframe——不關注外觀,只關注功能

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

      可以在紙上手繪:

      3.jpg

      可以白板上隨便涂鴉:

      4.jpg

      也可以用軟件工具制作:

      5.jpg

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

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

      wireframe 關鍵詞:

      6.jpg

      Mockup——呈現豐富的視覺細節

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

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

      Mockup 呈現豐富的細節,經常用于視覺設計討論中,用于快速搜集產品視覺設計方面的反饋并加以改進。

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

      7.jpg

      Mockup 關鍵詞:

      8.jpg

      Prototype——可操作的原型

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

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

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

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

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

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

      8auisdc-ml-201609102.gif

      prototype 關鍵詞:

      9.jpg

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

      0
      5
      分享到:

      0

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

      推薦閱讀

      ×

      賽事服務聯系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯系我們

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

      版權信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

      主站蜘蛛池模板: 国产精品亚洲不卡一区二区三区| 伊人久久精品一区二区三区| 亚洲综合无码一区二区痴汉| 亚洲日韩AV一区二区三区四区 | 国产aⅴ一区二区| 无码人妻一区二区三区av| 老熟妇高潮一区二区三区| 偷拍精品视频一区二区三区| 丰满人妻一区二区三区免费视频| 鲁丝片一区二区三区免费| 91精品国产一区二区三区左线| 2018高清国产一区二区三区| 国产乱码精品一区二区三区四川| 国产在线精品一区免费香蕉| 久久无码人妻一区二区三区午夜 | 亚洲综合无码一区二区三区| 97久久精品无码一区二区| 韩国精品福利一区二区三区| 一级毛片完整版免费播放一区| 色噜噜AV亚洲色一区二区| 精品深夜AV无码一区二区老年| 波多野结衣一区在线| 国产成人精品一区二区秒拍| 成人h动漫精品一区二区无码| 国产精品xxxx国产喷水亚洲国产精品无码久久一区 | 无码人妻精品一区二区在线视频| 精品国产乱子伦一区二区三区| 日韩三级一区二区| 国产一区二区福利| 国产精品美女一区二区| 国偷自产Av一区二区三区吞精| 亚洲性色精品一区二区在线| 狠狠做深爱婷婷综合一区| 精品视频一区二区三区四区| 国产日韩AV免费无码一区二区三区| 亚洲国产视频一区| 中文字幕在线无码一区二区三区| 亚洲国产精品无码第一区二区三区| 视频一区二区在线播放| 人妻内射一区二区在线视频| 中文乱码人妻系列一区二区|