2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

?

做互聯(lián)網(wǎng)產(chǎn)品的小伙伴一定不會(huì)對(duì)“原型”這個(gè)詞感到陌生。它就像“用戶體驗(yàn)”一樣經(jīng)常被各類人掛在嘴邊。原型是一種讓用戶提前體驗(yàn)產(chǎn)品、交流設(shè)計(jì)構(gòu)想、展示復(fù)雜系統(tǒng)的方式。就本質(zhì)而言，原型是一種溝通工具。在這里為大家介紹最常用的6種原型圖文件格式以及各自的優(yōu)缺點(diǎn)。

?

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

?

Mockplus是一款快速原型設(shè)計(jì)工具。一拖一拽之間，便可完成原型交互設(shè)置，且交互完全可視化，極為簡(jiǎn)單直觀。大量封裝的組件及圖標(biāo)資源，也是一大特色。

?

?

優(yōu)點(diǎn)：

?

• 制作效率很高，適合用“傻瓜式”方式來制作原型的設(shè)計(jì)師和產(chǎn)品經(jīng)理，幾乎不用學(xué)習(xí)；
• 最全面、便捷的原型演示支持，包括：直接演示、導(dǎo)出圖片演示、導(dǎo)出可以獨(dú)立運(yùn)行的演示包（Win/Mac）、在線和離線的HTML演示。在手機(jī)端，可以通過手機(jī)瀏覽器演示和手機(jī)App直接演示；
• 獨(dú)特的彈出面板和內(nèi)容面板組件，可靈活編輯，輕易完成常用交互；
• 團(tuán)隊(duì)項(xiàng)目的編輯方式，易懂好用。在線審閱對(duì)于協(xié)作很有幫助。

?

缺點(diǎn)：

?

• 需要Mockplus的軟件支持，才能編輯和演示；
• 一些復(fù)雜的交互效果，暫時(shí)不支持；
• 對(duì)PRD（產(chǎn)品需求文檔）的支持，還不足。

?

實(shí)用度：★★★★

?

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

?

Sketch 是一款適用于所有設(shè)計(jì)師的矢量繪圖應(yīng)用。矢量繪圖也是目前進(jìn)行網(wǎng)頁、圖標(biāo)以及界面設(shè)計(jì)的常用方式。

?

?

優(yōu)點(diǎn)：

?

• 人性化的、創(chuàng)新的設(shè)計(jì)方式和編輯操作，使用很順手；
• 支持導(dǎo)出多種(PDF，JPG，TIFF，SVG等)格式的原型設(shè)計(jì)圖，可一鍵導(dǎo)出自定義的各種尺寸；
• 豐富的三方插件，強(qiáng)化了整體功能。

?

缺點(diǎn)：

?

• 需要自己制作每個(gè)細(xì)節(jié)，不適合希望快速表達(dá)思想的原型設(shè)計(jì)者；
• 目前只有Mac版本；
• 需要Sketch的軟件支持。當(dāng)然目前不少其它軟件也可以支持導(dǎo)入和導(dǎo)出；
• 不支持PSD，AI格式的文件導(dǎo)出；
• 如果不借助三方插件，無法在手機(jī)端直接演示Sketch原型圖。

?

實(shí)用度：★★★

?

三、HTML網(wǎng)頁格式的原型圖（.html）

?

HTML格式的原型圖，也是特別常見和實(shí)用度原型文件格式。目前，主流的原型圖設(shè)計(jì)工具都支持.html格式的原型圖導(dǎo)出，這里以Mockplus為例：

?

?

優(yōu)點(diǎn)：

?

• 可以在任何電腦或手機(jī)端，用瀏覽器打開直接演示HTML原型圖；
• 支持在瀏覽器左側(cè)顯示網(wǎng)頁的目錄；
• 在電腦瀏覽器中，可以通過手機(jī)掃描二維碼，立即在手機(jī)上演示；
• 支持完整的頁面跳轉(zhuǎn)和交互；
• 支持多人在原型頁面上添加評(píng)論；
• 支持多人在原型頁面上添加批注，發(fā)表詳細(xì)的審閱意見。

?

缺點(diǎn)：

?

• 不支持HTML網(wǎng)頁原型圖的再次編輯。

?

實(shí)用度：★★★★

?

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

?

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

?

?

優(yōu)點(diǎn)：

?

• 可以在任何設(shè)備上查看和編輯；
• 當(dāng)用于交付時(shí)，具有很高的視覺保真度；
• 使用UIFlow，可以直觀地展示多個(gè)頁面，并了解原型項(xiàng)目的流程和邏輯關(guān)系。

?

缺點(diǎn)：

?

• 無法演示交互；
• 無法持續(xù)編輯；
• 由于這兩種格式都非矢量，因此如果經(jīng)過縮放，原型圖清晰度容易受到影響。

?

實(shí)用度：★★★

?

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

?

?

優(yōu)點(diǎn)：

?

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

?

缺點(diǎn)：

?

• 需要在電腦或手機(jī)中，先安裝pdf查看器；
• 無法實(shí)現(xiàn)完整的交互演示，利用pdf中的鏈接插入，僅僅支持一些簡(jiǎn)單頁面交互跳轉(zhuǎn)；
• pdf的頁面尺寸和比例，比較難以和手機(jī)自動(dòng)匹配；
• 很難持續(xù)編輯。如果需要重新編輯pdf里面的某一頁，那么就要提取多頁pdf文件中的某一頁，待修改好之后，再合并到多頁P(yáng)DF文件里。

?

實(shí)用度：★

?

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

?

可以利用Windows的Powerpoint，或者M(jìn)ac的Keynote軟件來制作原型。

?

?

優(yōu)點(diǎn)：

?

• 制作非常簡(jiǎn)單，任何人都可以直接上手，學(xué)習(xí)成本為零；
• 由于內(nèi)置了大量的動(dòng)效，在某些時(shí)候，實(shí)現(xiàn)交互動(dòng)效很容易，效果也不錯(cuò)；
• 適合書寫大量的備注，形成說明文檔。

?

缺點(diǎn)：

?

• 很難完整表達(dá)交互；
• 如果做真機(jī)演示，頁面很難自適應(yīng)，操作不便；
• 更適合做報(bào)告和演講。

?

實(shí)用度：★

更多設(shè)計(jì)類干貨（教程及經(jīng)驗(yàn)分享），盡在：博客 | 精選最佳產(chǎn)品設(shè)計(jì)和UX/UI設(shè)計(jì)資源

轉(zhuǎn)載于:https://my.oschina.net/u/3519468/blog/1186735

總結(jié)

以上是生活随笔為你收集整理的最常用的6种原型文件格式对比的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。