和群裡設計師聊天發現：Prototype、Wireframe、Mockup因翻譯常統稱「原型」導致大混淆，特說明三者不同，不清同學來漲姿勢。

最簡單分法：（擬真=模擬真實最後產出，非擬物風。）

Wireframe：靜態「線框圖」

除去視覺影響元素，只用線條方塊繪製，專注功能與操作。手繪或軟件均可。
手繪Wireframe
iPad亂撇Wireframe
軟件畫Wireframe
Wireframe通通靜態，不會動、不能被操作，只是圖片。

Mockup：靜態「視覺稿」

用PS、Sketch制作的視覺稿，下一步切圖交給RD套版的成品。視覺上與最終可操作產出一樣，只差Mockup是單張圖片（文件）。
很像最終產出Web設計，是Mockup
很像最終產出App設計，Dribbble上很多類似，叫Mockup。Mockup也是靜態，不會動、不能被操作（會不會動指有無串後台數據，非指動畫）。

Prototype：可操作「原型」

最重要一點：「它會動」——可被操作、有反應。有人分低/高保真原型，別想太複雜：只要會動、可操作、未正式發布上線的，都能稱Prototype。

• 低保真原型 = Wireframe + 可操作
• 高保真原型 = Mockup + 可操作
• 已切圖交RD套版、未套後台數據（用假數據）也稱高保真原型

Prototype核心是「可被操作」。手繪撇幾張Wireframe做成可操作模式，就能叫Prototype。幾張Mockup串起設置操作範圍，可被操作，也是Prototype。

結論

中文譯文奇葩，若跟著把三者通通喊「原型」，就分不清對方指哪種。硬翻不如稱「線框稿、視覺稿、原型」，最好仍用英文。
溝通對象開口就說「原型」，請一定問清是Wireframe? Mockup? 還是Prototype? 不然雞同鴨講後項目組雞飛狗跳。