原型設計|6種原型圖的優缺點

19 評論 57832 瀏覽 109 收藏 7 分鐘

原型圖的格式,屬于“道”,“法”,“器”,這3個層次中的“器”。如果想在用戶體驗上,走的更遠;那么就需要在“道”,“法”,這2個層次上,積累更多的項目經驗,還有不同崗位的思維方式和溝通思路。

互聯網產品設計過程中,原型圖的常用格式,我見過6種以上。

它們的優點和缺點,介紹如下:

1. Axure格式的原型圖

優點:

  • 可以在另一臺電腦上,閱讀和編輯Axure原型圖;
  • 在Axure預覽模式下,可以在瀏覽器左側顯示網頁的目錄;
  • Axure軟件有Mac版本和windows版本。

缺點:

  • 如果接收文件同事的電腦,沒安裝Axure,就打不開了;
  • 不能在手機微信聊天窗口上,直接閱讀Axure原型圖;
  • Axure低版本,不能打開高版本的Axure文件。

2. Sketch格式的原型圖

優點:

  • 可以在另一臺Mac電腦上,閱讀和編輯Sketch原型圖;
  • Ui設計師,可以直接在Sketch里面,把原型圖,做成高保真的Ui設計稿;
  • 可以導出PDF格式的多頁面PDF原型圖。

缺點:

  • Sketch軟件,目前只有Mac版本,沒有Windows版本;
  • 在手機微信App的聊天窗口上,不能直接閱讀Sketch原型圖;
  • Sketch低版本,不能打開高版本的Sketch文件。

3. PPT格式的原型圖

優點:

  • 可以在Mac或Windows電腦上,閱讀和編輯PPT格式的原型圖;
  • 在手機微信App的聊天窗口上,直接閱讀PPT格式的原型圖;
  • 可以通過其它軟件,將畫好的原型圖,導入PPT里面。

缺點:

  • ppt頁面的面積太小,不支持表達多個頁面之間的跳轉關系;頁面的縮放,難以操作;
  • PPT里面的畫圖控件太少,畫圖工具隱藏的比較深,操作起來,不方便;

4. Html網頁格式的原型圖

優點:

  • 可以在任何電腦上,用瀏覽器打開,直接閱讀Html原型圖;
  • 不能在手機微信聊天窗口上,直接閱讀Html壓縮包的原型圖;
  • 可以先用Axure設計原型圖,然后導出Html網頁格式。

缺點:

  • 不支持Html網頁原型圖的再次編輯,不支持在瀏覽器左側顯示網頁的目錄;
  • 郵件接收Html原型圖的壓縮包,需要解壓,然后還需要在眾多網頁文件中,一個個點開查看;
  • 頁面之間的跳轉關系,各種中間狀態的邏輯判斷,Html難以表達清楚。

5. 一大張jpg圖片格式的原型圖

優點:

  • 可以在任何電腦上,閱讀和編輯jpg圖片格式的原型圖;
  • 郵件發送jpg圖片格式的原型圖,文件可以很小;
  • 可以在手機微信聊天窗口上,直接閱讀jpg格式的原型圖;
  • 可以通過其它軟件,將畫好的原型圖,導出為jpg圖片格式。

缺點:

  • 在電腦上,jpg圖片格式的原型圖,比較難操作:比如:調整到100%大小,并左右移動查看頁面跳轉關系;
  • 在手機上,微信發送的時候,具有流程關系的一大張jpg圖片格式的原型圖,會壓縮,導致微信接收后不清晰。

6. PDF格式的原型圖

優點:

  • 可以通過其它軟件,將畫好的原型圖,導出為PDF格式。
  • 可以在Windows或Mac上閱讀;支持軟件:Adobe Reader,極速PDF,福昕pdf,Acrobat;
  • 可以在智能手機上,閱讀pdf格式的原型圖;支持手機APP軟件:WPS,極速PDF,福昕pdf,Acrobat,甚至微信app的聊天窗口,直接發送,對方直接打開。
  • 在電腦上,頁面容易調整到100%大小,并且左右移動查看頁面的跳轉關系;
  • Mac電腦自帶的預覽pdf軟件,可以合并多個pdf,旋轉pdf的某一張內頁;
  • 電腦版的福昕pdf軟件,可以給pdf內頁添加標注文本,可以在多頁面的pdf左側添加目錄鏈接;

缺點:

  • 如果需要重新編輯pdf里面的某一頁,那么就要提取多頁pdf文件中的某一頁,待修改好之后,再合并到多頁PDF文件里;
  • 電腦閱讀和手機閱讀pdf,最好是已經安裝了專業的PDF閱讀器。

總結:

APP產品設計的原型圖,重在表達意思,只要意思傳達到位了,那么格式可以不必在意。

原型圖的格式,屬于“道”,“法”,“器”,這3個層次中的“器”。

如果想在用戶體驗上,走的更遠;那么就需要在“道”,“法”,這2個層次上,積累更多的項目經驗,還有不同崗位的思維方式和溝通思路。

#專欄作家#

張云錢,人人都是產品經理專欄作家,百度簽約作者,Ui中國認證設計師;喜歡分析不同崗位的思維方式和溝通思路,偶爾網上冒泡,寫篇文章。

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 道和法又分別是什么呢

    來自湖北 回復
  2. 本文閱讀量已達4W。
    1篇4W+閱讀量的文章、等同于5篇上海銀行公眾號的文章、等同于30篇唐碩公眾號的文章。等同于16篇花瓣公眾號的文章。

    來自江蘇 回復
  3. Mockplus也不錯。最重要的還是熟悉用戶信息,熟悉產品數據;多了解用戶的反饋,收集用戶的需求,分析用戶的特性。

    來自上海 回復
  4. 真巧,我們兩名字就差一個字

    來自上海 回復
    1. ?? 同姓本家,云字同輩

      來自上海 回復
  5. 如果接收文件同事的電腦,沒安裝Axure,就打不開了–這種事情,不是一個共享鏈接就可以搞定了嗎,無須安裝啊,開發人員沒有必要用Axure工具打開看原型吧。我都是丟鏈接,打開直接網頁打開就是原型了。。。。

    來自廣東 回復
    1. Axure生成鏈接,操作是:點擊Axure右上角的Axure Share,然后就可以把原型圖發布成鏈接了。不過,對方打開的話,需要Wifi網絡很好才行。我在金融公司上班,網絡不好。原型圖的鏈接打開速度很慢的。

      來自上海 回復
    2. 那是因為Axure share 的服務器在國外,你可以借助翻墻,例如用火狐打開,速度就很溜了,即使不翻墻,其實正常的電腦網速也是可以的

      來自廣東 回復
  6. processon很不錯,在線免費使用,還能協作共享。我一直用,也可用用https://www.processon.com/i/57747025e4b0e9c1ba9751cc

    來自北京 回復
    1. 我剛注冊processon,玩了一把,挺過癮的。這個在線平臺,支持在線繪制:流程圖,原型圖,UML。并且提供很多模版,每一個回吐工具都有配一小段的使用說明。

      來自上海 回復
    2. 是啊,以前電腦裝了xmind ar 都棄了,雖然這個在線軟件功能不是很全,但是種類多,操作方便簡單,挺好用的,日常工作圖都能滿足。

      來自北京 回復
  7. Html網頁格式的原型圖 缺點
    瀏覽器左側是有顯示目錄結構的

    來自浙江 回復
    1. 對的,需要安裝Axure插件。插件介紹信息,我剛找到了:www.axure.com.cn/4471

      來自上海 回復
    2. 我手機默認瀏覽器打開左側都是有目錄的,我手機可沒裝什么插件

      來自浙江 回復
    3. 新發現,很棒!

      回復
  8. Html網頁格式的原型圖,用chrome瀏覽器可以支持在網頁左側顯示目錄

    來自北京 回復
    1. 謝謝你分享了自己的經驗。歡迎看我的6個專欄文章:www.jianshu.com/p/0abc81f454d3

      來自上海 回復
    2. 不止chrome 所有瀏覽器都可以啊 要裝axure插件

      來自廣東 回復
    3. 哈哈 其他瀏覽器沒試過,我以為插件只在chrome上運行

      來自北京 回復