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

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

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

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

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