做互聯網産品的小夥伴一定不會對“原型”這個詞感到陌生。它就像“用戶體驗”一樣經常被各類人挂在嘴邊。原型是一種讓用戶提前體驗産品、交流設計構想、展示複雜系統的方式。就本質而言，原型是一種溝通工具。在這裡為大家介紹最常用的6種原型圖文件格式以及各自的優缺點。

一、Mockplus的原型圖格式（.mp）

Mockplus是一款快速原型設計工具。一拖一拽之間，便可完成原型交互設置，且交互完全可視化，極為簡單直觀。大量封裝的組件及圖标資源，也是一大特色。

優點：

• 制作效率很高，适合用“傻瓜式”方式來制作原型的設計師和産品經理，幾乎不用學習；

• 最全面、便捷的原型演示支持，包括：直接演示、導出圖片演示、導出可以獨立運行的演示包（Win/Mac）、在線和離線的HTML演示。在手機端，可以通過手機浏覽器演示和手機App直接演示；

• 獨特的彈出面闆和内容面闆組件，可靈活編輯，輕易完成常用交互；

• 團隊項目的編輯方式，易懂好用。在線審閱對于協作很有幫助。

缺點：

• 需要Mockplus的軟件支持，才能編輯和演示；

• 一些複雜的交互效果，暫時不支持；

• 對PRD（産品需求文檔）的支持，還不足。

實用度：★★★★

二、Sketch格式的原型圖（.sketch）

Sketch 是一款适用于所有設計師的矢量繪圖應用。矢量繪圖也是目前進行網頁、圖标以及界面設計的常用方式。

優點：

• 人性化的、創新的設計方式和編輯操作，使用很順手；

• 支持導出多種(PDF，JPG，TIFF，SVG等)格式的原型設計圖，可一鍵導出自定義的各種尺寸；

• 豐富的三方插件，強化了整體功能。

缺點：

• 需要自己制作每個細節，不适合希望快速表達思想的原型設計者；

• 目前隻有Mac版本；

• 需要Sketch的軟件支持。當然目前不少其它軟件也可以支持導入和導出；

• 不支持PSD，AI格式的文件導出；

• 如果不借助三方插件，無法在手機端直接演示Sketch原型圖。

實用度：★★★

三、HTML網頁格式的原型圖（.html）

HTML格式的原型圖，也是特别常見和實用度原型文件格式。目前，主流的原型圖設計工具都支持.html格式的原型圖導出，這裡以Mockplus為例：

優點：

• 可以在任何電腦或手機端，用浏覽器打開直接演示HTML原型圖；

• 支持在浏覽器左側顯示網頁的目錄；

• 在電腦浏覽器中，可以通過手機掃描二維碼，立即在手機上演示；

• 支持完整的頁面跳轉和交互；

• 支持多人在原型頁面上添加評論；

• 支持多人在原型頁面上添加批注，發表詳細的審閱意見。

缺點：

• 不支持HTML網頁原型圖的再次編輯。

實用度：★★★★

四、圖片格式的原型圖（.png 或 .jpg）

各大主流的原型圖工具均支持，導出為png或jpg圖片。一般是導出單張頁面。據悉，Mockplus在不久之後的版本中，可以直接導出多個頁面（包括頁面的注釋和連接線）組成的UIFlow圖片。

優點：

• 可以在任何設備上查看和編輯；

• 當用于交付時，具有很高的視覺保真度；

• 使用UIFlow，可以直觀地展示多個頁面，并了解原型項目的流程和邏輯關系。

缺點：

• 無法演示交互；

• 無法持續編輯；

• 由于這兩種格式都非矢量，因此如果經過縮放，原型圖清晰度容易受到影響。

實用度：★★★

五、PDF格式的原型圖(.pdf)

優點：

• pdf格式比較通用；

• 支持矢量縮放。

缺點：

• 需要在電腦或手機中，先安裝pdf查看器；

• 無法實現完整的交互演示，利用pdf中的鍊接插入，僅僅支持一些簡單頁面交互跳轉；

• pdf的頁面尺寸和比例，比較難以和手機自動匹配；

• 很難持續編輯。如果需要重新編輯pdf裡面的某一頁，那麼就要提取多頁pdf文件中的某一頁，待修改好之後，再合并到多頁PDF文件裡。

實用度：★

六、幻燈片格式的原型圖(.ppt 或 .key)

可以利用Windows的Powerpoint，或者Mac的Keynote軟件來制作原型。

優點：

• 制作非常簡單，任何人都可以直接上手，學習成本為零；

• 由于内置了大量的動效，在某些時候，實現交互動效很容易，效果也不錯；

• 适合書寫大量的備注，形成說明文檔。

缺點：

• 很難完整表達交互；

• 如果做真機演示，頁面很難自适應，操作不便；

• 更适合做報告和演講。

實用度：★

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!