最經常使用的6種原型文件格式對比

 

作互聯網產品的小夥伴必定不會對「原型」這個詞感到陌生。它就像「用戶體驗」同樣常常被各種人掛在嘴邊。原型是一種讓用戶提早體驗產品、交流設計構想、展現複雜系統的方式。就本質而言，原型是一種溝通工具。在這裏爲你們介紹最經常使用的6種原型圖文件格式以及各自的優缺點。

 

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

 

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

 

 

優勢：

 

• 製做效率很高，適合用「傻瓜式」方式來製做原型的設計師和產品經理，幾乎不用學習；
• 最全面、便捷的原型演示支持，包括：直接演示、導出圖片演示、導出能夠獨立運行的演示包（Win/Mac）、在線和離線的HTML演示。在手機端，能夠經過手機瀏覽器演示和手機App直接演示；
• 獨特的彈出面板和內容面板組件，可靈活編輯，輕易完成經常使用交互；
• 團隊項目的編輯方式，易懂好用。在線審閱對於協做頗有幫助。

 

缺點：

 

• 須要Mockplus的軟件支持，才能編輯和演示；
• 一些複雜的交互效果，暫時不支持；
• 對PRD（產品需求文檔）的支持，還不足。

 

實用度：★★★★

 

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

 

Sketch 是一款適用於全部設計師的矢量繪圖應用。矢量繪圖也是目前進行網頁、圖標以及界面設計的經常使用方式。

 

 

優勢：

 

• 人性化的、創新的設計方式和編輯操做，使用很順手；
• 支持導出多種(PDF，JPG，TIFF，SVG等)格式的原型設計圖，可一鍵導出自定義的各類尺寸；
• 豐富的三方插件，強化了總體功能。

 

缺點：

 

• 須要本身製做每一個細節，不適合但願快速表達思想的原型設計者；
• 目前只有Mac版本；
• 須要Sketch的軟件支持。固然目前很多其它軟件也能夠支持導入和導出；
• 不支持PSD，AI格式的文件導出；
• 若是不借助三方插件，沒法在手機端直接演示Sketch原型圖。

 

實用度：★★★

 

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

 

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

 

 

優勢：

 

• 能夠在任何電腦或手機端，用瀏覽器打開直接演示HTML原型圖；
• 支持在瀏覽器左側顯示網頁的目錄；
• 在電腦瀏覽器中，能夠經過手機掃描二維碼，當即在手機上演示；
• 支持完整的頁面跳轉和交互；
• 支持多人在原型頁面上添加評論；
• 支持多人在原型頁面上添加批註，發表詳細的審閱意見。

 

缺點：

 

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

 

實用度：★★★★

 

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

 

各大主流的原型圖工具均支持，導出爲png或jpg圖片。通常是導出單張頁面。據悉，Mockplus在不久以後的版本中，能夠直接導出多個頁面（包括頁面的註釋和鏈接線）組成的UIFlow圖片。

 

 

優勢：

 

• 能夠在任何設備上查看和編輯；
• 當用於交付時，具備很高的視覺保真度；
• 使用UIFlow，能夠直觀地展現多個頁面，並瞭解原型項目的流程和邏輯關係。

 

缺點：

 

• 沒法演示交互；
• 沒法持續編輯；
• 因爲這兩種格式都非矢量，所以若是通過縮放，原型圖清晰度容易受到影響。

 

實用度：★★★

 

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

 

 

優勢：

 

• pdf格式比較通用；
• 支持矢量縮放。

 

缺點：

 

• 須要在電腦或手機中，先安裝pdf查看器；
• 沒法實現完整的交互演示，利用pdf中的連接插入，僅僅支持一些簡單頁面交互跳轉；
• pdf的頁面尺寸和比例，比較難以和手機自動匹配；
• 很難持續編輯。若是須要從新編輯pdf裏面的某一頁，那麼就要提取多頁pdf文件中的某一頁，待修改好以後，再合併到多頁PDF文件裏。

 

實用度：★

 

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

 

能夠利用Windows的Powerpoint，或者Mac的Keynote軟件來製做原型。

 

 

優勢：

 

• 製做很是簡單，任何人均可以直接上手，學習成本爲零；
• 因爲內置了大量的動效，在某些時候，實現交互動效很容易，效果也不錯；
• 適合書寫大量的備註，造成說明文檔。

 

缺點：

 

• 很難完整表達交互；
• 若是作真機演示，頁面很難自適應，操做不便；
• 更適合作報告和演講。

 

實用度：★

更多設計類乾貨（教程及經驗分享），盡在：博客 | 精選最佳產品設計和UX/UI設計資源