在平時我們會遇到線框圖、原型、視覺稿等、高保真、低保真、PRD、UI、貼圖等不同的概念，那麼他們究竟有哪些細節方面的差異呢？
本文做一些簡單的分析和說明，如下：
==================================================
本文介紹了線框圖 (Wireframe)、原型 (Prototype) 和視覺稿 (Mockup) 它們三者之間嚴謹的功能差別。
對于很多搞資訊技術的朋友們（非設計師）在傳遞設計時，就混淆了這幾個詞彙，認為它們都代表同一樣東西：表達自己創意的線框手繪設計稿。那麼如果希望在工作中更好的表達自己的想法，我們需要對這三者有更好的認識。
混淆概念便帶來麻煩：他們分不清使用者體驗設計師的作品，常常感到困惑。「這按鈕他媽的怎麼點不了？」「我不知道這個地方可以按啊！」類似這樣的問題在使用者體驗的項目中屢見不鮮。誤把線框圖當成原型，有點像建築裡分不清藍圖（指導如何建築施工的方案）和示範廳。你完全可以試着在示範廳裡小住一會（它的妙處就在于能直覺傳達房間之美），但你沒法舒服地躺在藍圖上—藍圖不過是一張紙罷了。
在建築學上，示範廳和藍圖服務于不同的交流對象：
- 藍圖，即施工方案，較長的描述該如何建造建築
- 示範廳，給未來的居民提供測試和體驗的機會
示範廳和藍圖的共同之處是，它們都代表着最終的産品，即建築（房屋）。線框圖、原型和視覺稿亦是如此，這些文檔都是最終産品的不同展現方式。
不管你信不信，我向使用者體驗設計團隊授課的第一件事，就是告訴他們厘清這三個概念。因為，這實在太重要了。
接下來，讓我們詳細讨論三者的差別，以後你就懂得在什麼樣的場合下用什麼詞彙了。
線框圖
1、什麼是線框圖？
線框圖 (Wireframe) 是低保真的設計圖，當明确表達：
- 内容大綱（什麼東西）
- 資訊結構（在哪）
- 使用者的互動行為描述（怎麼操作）
線框圖不僅僅是無意義的線和框的集合；好吧，雖然看上去是的，囧。你可以把線框圖了解為設計圖的骨幹與核心，它承載着最終産品所有重要的部分。
線框圖可以幫你平衡保真度與速度。繪圖時不用在意細枝末節，但必須表達出設計思想，不能漏掉任何重要的部分。就像給項目以及一起協作的團隊成員（開發工程師、視覺設計師、文案作者和項目經理），開辟了一條輔助了解設計的通道。說得再明白點，你是在設計城市地圖，地圖上能展現出每一條街道，隻不過繪制上做了簡化。看地圖能看出城市的架構，但無法一覽城市的美感。
繪制線框圖，重點是「快」。大多數時間請和團隊成員溝通，多做思考。審美上的視覺效果則應當盡可能簡化。黑白灰是經典用色，你也可以用藍色代表超連結。如果你在準備線框圖時花了大把時間（比如，選擇圖示、上傳圖檔），請換個簡單的方式（比如，使用占位符：一個畫×的圖檔，再加上合适的描述文字）。我們習慣把線框圖稱為低保真設計圖。
切記，好的線框圖能像水晶一樣，清晰明了地表達設計創意，在成員中無縫傳達其思想。
2、何時使用線框圖
線框圖常常用來作項目說明。鑒于其靜态設計，一次隻能通過一張界面示範互動，是以，務必附上說明。（隻要有必要，簡短描述或附在複雜的技術文檔裡，都成）
也因為繪制起來快速、簡單，它也經常用于非正式場合，比如團隊内部交流。要是開發問起一個東西怎麼做，回複時不妨附上一張迅速繪制的線框圖。線框圖難以充當使用者測試的材料；倒也能收集些回報，如果你更關心使用者意見，而非測試方法。
雖然近些年遭人閑話，但線框圖在整個設計過程中發揮着驚人的效果，在複雜項目的初始階段必不可少。
原型
1、什麼是原型
原型 (Prototype) ，常常和線框圖混淆，是中等保真的設計圖，代表最終産品，模拟互動設計。原型當允許使用者：
- 從界面上，體驗内容與互動
- 像最終産品一樣，測試主要互動
原型應該盡可能模拟最終産品，就算長得不是一模一樣（絕對不能是灰色線框設計）。互動則應該精心子產品化，盡量在體驗上和最終産品保持一緻。
原型背後的邏輯不要依賴互動形式。減少制作原型的成本，加快開發速度。
2、何時使用原型
原型常用于做潛在使用者測試。在正式介入開發階段前，以最接近最終産品的形式考量産品可用性。
如你所想，原型一般難以成為上好的文檔；因為它得讓「讀者」費一些力氣來了解界面。但從另一個角度來看，作為界面，原型的直覺和易懂倒使它成為最高效的設計文檔。
請注意，相對其它交流媒介，原型成本高、費時。我建議繪制原型後，能在接下來的開發階段複用起來。（唔，你可能得親自編寫 HTML 和樣式表代碼）對于簡單的項目來說，相當好用。（一旦考慮「複用」，必将增加繪制成本，偏離原型的初衷。并不建議複用。——譯者注）
若設計得當，與使用者測試相結合，原型是物超所值的。
視覺稿
1、什麼是視覺稿
視覺稿 (Mockup) 是高保真的靜态設計圖。通常來說，視覺稿就是視覺設計的草稿或終稿。優秀的視覺稿當：
- 表達資訊架構，靜态示範内容和功能
- 幫助團隊成員以視覺的角度審閱項目
人們常年分不清什麼是視覺稿，什麼是線框圖，和某些軟體公司的名字不無關系。噗~
2、何時使用視覺稿
如果你想從股東手裡獲得認可，視覺稿尤其管用；收集使用者回報也相當好使。
把它添到設計文檔裡去吧，絕對是畫龍點睛之筆。
總結
原文連結：線框圖、原型和視覺稿的差別
本文摘自：http://www.leiphone.com/news/201406/0806-warlial-project.html