線框圖(Wireframe) 跟樣張(Mockup)跟原型(Prototype)有什麼不同? 線框圖(Wireframe) 跟樣張(Mockup)跟原型(Prototype)有什麼不同?
      ez      2013-01-25

就一個網站新手企劃來說,線框圖(Wireframe) 跟樣張(Mockup)跟原型(Prototype)總是讓人傻傻分不清楚 到底這三者有什麼不同呢? 這三者之間其實有很高的相似度,當然,有時候也可以交互使用,在一個網站開發的過程當中也不必然三者一定都會出現,不過三者之間還是有不同層次上的差異

  • 線框圖(Wireframe),主要拿來圖示網頁整體結構與組成基本元件,通常出現在網站開發的初始討論階段。
  • 樣張(Mockup),通常來說樣張只是一張圖檔 ,主要在呈現、討論網站的整體視覺設計,包含圖形、排版、以及網頁上大大大小的元素等的視覺表現。
  • 原型(Prototype),通常已經加入HTML、CSS甚至一些JavaScript,已經非常接近完成狀態,雖然功能尚未完全,但基本上已經支援使用者在網頁上進行點擊、Mouseover等動作。

上面的說明如果還是讓你覺得當複雜,你也可以這樣理解

  • 線框圖(Wireframe)=空白的網頁框架
  • 樣張(Mockup)=空白的網頁框架加上彩繪
  • 原型(Prototype)=空白的網頁框架加上彩繪再加上動態效果

說穿了,其實三者就是因應不同階段的任務需求所使用的不同工具。當然,這樣子最主要的目的是在幫助整個網站在建制更加順利,在不同的階段能夠聚焦處理當前重點任務。


標籤:   Mockup、  Prototype、  Wireframe、  原型、  網站新手企劃、  線框圖

我要留言