原型設計|6種原型圖的優缺點
原型圖的格式,屬于“道”,“法”,“器”,這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中國認證設計師;喜歡分析不同崗位的思維方式和溝通思路,偶爾網上冒泡,寫篇文章。
本文原創發布于人人都是產品經理。未經許可,禁止轉載。
評論
道和法又分別是什么呢
本文閱讀量已達4W。
1篇4W+閱讀量的文章、等同于5篇上海銀行公眾號的文章、等同于30篇唐碩公眾號的文章。等同于16篇花瓣公眾號的文章。
Mockplus也不錯。最重要的還是熟悉用戶信息,熟悉產品數據;多了解用戶的反饋,收集用戶的需求,分析用戶的特性。
真巧,我們兩名字就差一個字
?? 同姓本家,云字同輩
如果接收文件同事的電腦,沒安裝Axure,就打不開了–這種事情,不是一個共享鏈接就可以搞定了嗎,無須安裝啊,開發人員沒有必要用Axure工具打開看原型吧。我都是丟鏈接,打開直接網頁打開就是原型了。。。。
Axure生成鏈接,操作是:點擊Axure右上角的Axure Share,然后就可以把原型圖發布成鏈接了。不過,對方打開的話,需要Wifi網絡很好才行。我在金融公司上班,網絡不好。原型圖的鏈接打開速度很慢的。
那是因為Axure share 的服務器在國外,你可以借助翻墻,例如用火狐打開,速度就很溜了,即使不翻墻,其實正常的電腦網速也是可以的
processon很不錯,在線免費使用,還能協作共享。我一直用,也可用用https://www.processon.com/i/57747025e4b0e9c1ba9751cc
我剛注冊processon,玩了一把,挺過癮的。這個在線平臺,支持在線繪制:流程圖,原型圖,UML。并且提供很多模版,每一個回吐工具都有配一小段的使用說明。
是啊,以前電腦裝了xmind ar 都棄了,雖然這個在線軟件功能不是很全,但是種類多,操作方便簡單,挺好用的,日常工作圖都能滿足。
Html網頁格式的原型圖 缺點
瀏覽器左側是有顯示目錄結構的
對的,需要安裝Axure插件。插件介紹信息,我剛找到了:www.axure.com.cn/4471
我手機默認瀏覽器打開左側都是有目錄的,我手機可沒裝什么插件
新發現,很棒!
Html網頁格式的原型圖,用chrome瀏覽器可以支持在網頁左側顯示目錄
謝謝你分享了自己的經驗。歡迎看我的6個專欄文章:www.jianshu.com/p/0abc81f454d3
不止chrome 所有瀏覽器都可以啊 要裝axure插件
哈哈 其他瀏覽器沒試過,我以為插件只在chrome上運行