App 產品原型設計用什麼軟體?

axure?MM?visio?


首先如果你小團隊或者個人開發,當然可以用Xcode,如果大公司跨部門審核調整各種,還是有個快速的原型。


如你要求,可交互。包括常用的Axrue,我試用過下面提到的所有軟體,分別完整產出過不同的原型,還有一些市面上的你一看它介紹圖還在用ios6的就知道不必了,說明很久沒更新了。


下面這些是我按照不同的特點進行了歸類,視你的具體情況而定吧。


我在選擇軟體這個過程中糾結了很久,也是用過在領悟真正的原理。但是這段時間的摸索對我以後也有很大幫助。


輕巧型
低保真;無控制項;iOS;少交互;免費。

Pop

非常火的一款原型軟體,第一次滿足了大家人人都是產品經理的感覺。

方法:拍照--添加觸控區--轉場方式--選擇圖片

平台:全手機操作

缺點:分享不便。動畫有如側滑、展開、消失,快現的搖一搖。操作只可以單擊。沒有控制項,所有東西都靠你的照片。


Tapcase


基本和pop一樣,就是軟體本身的UI更ios7一點,其他都一樣,也是導入圖片,加熱區就好了。缺點也是一樣的。

**總結:**輕巧型的就是適合簡單軟體且是早期,在手機上稍微複雜一點的就痛不欲生了。但問題是,如果簡單到這麼輕鬆了,那真的還需要用軟體模擬嗎?真的在紙上畫更輕鬆吧。點擊這種交互也不需要模擬了吧。


專業型
高保真度;自帶控制項;Mac+iOS;全交互;收費+免費

UIDesigner + UIDPlayer


騰訊出品的原型軟體,中文,操作簡單,符合國人習慣,容易上手。方便分享。

方法:windows電腦安裝UIDesigner,使用現成控制項進行可視化搭建,調試後通過網盤等方式發到iOS設備,用UIDPlayer打開即可。

平台:只支持Win+ iOS。可能也是優點,僅有的專門支持Win平台的原型軟體。

缺點:吹毛求疵吧,逼格不高。


Briefs + Briefscase


這是我最近發現非常好的一款軟體,好在對交互的支持上,如果調整細膩一點,幾乎可以以假亂真。我是用它在UI定稿的情況下,提前當完成品測試交互體驗的。當然也自帶控制項,用於原型設計。

還有三種模式,場景模式(Scene View )和細節模式(Details View)分別負責交互設計和UI設計兩個部分,在設計完成後可以在第三個模式(Overview)查看整個APP的架構。

方法:在場景模式中,添加Actors(按鈕,文本段落,文本熱點)和Actions(觸發動作),可以設置界面跳轉時的TRANSITION效果,聲效,延時,Retina 空間等交互體驗輔助特效。

然後在iOS設備上安裝Briefscase,通過Dropbox同步後使用。

缺點:貴。1298元,感受一下。標註起來還是不太趁手。通過dropbox同步有點慢,又沒辦法加快,只能生等。可以先試用一下,覺得好再入手吧。


Blueprint + viewer


我最早用的原型軟體,現在製作出的原型已經出現在App Store里拉。Sakura Day。

當時用免費的功能(2個項目,無法導入dropbox圖片,無自定義控制項)就做出來了。後來接手公司大項目,專門買了完整版128元。

但是注意,這是用iPad做,iPhone或者iPad看,沒有電腦版的。我當時就是為了地鐵上可以用,是優點也是缺點。

方法:基本都一樣,就是在iPad上操作。觸控不那麼精確,但是操作體驗很好,完整版的自定義庫按鈕很多很豐富。

平台:iPad + iOS

缺點:最重要的就是只能在iPad上編輯,我做了個大型的項目,打開還是稍慢點,但是穩定,操作多了有點累。分享需要對方裝軟體,而且生成的項目文件會很大。

總結: 專業軟體還有很多,各有千秋,這兩個是最快支持iOS7的,說明他們很重視產品保證更新。但是價格確實也是不菲,優缺點很明顯,不符合國人習慣。騰訊那個整體是很不錯了,除非你和我一樣只用mac。


HTML型
中保真度;自帶控制項;全平台;需聯網;少交互;收費+免費

Flinto

在Flinto中快速製作iOS原型

我是通過下面提到的Icon Stricker發現的這個網站,試用了一下發現,它的特點是快捷的熱區和轉場操作,但是完全不帶控制項,也就是網頁版的 pop。需要你自己準備好圖片,不管是UI還是UE,這裡只負責交互。

最大的亮點就是支持滾動,前面提到的那些軟體,都需要通過轉場實現長圖滾動,這個可以原生支持。

方法:傳圖,熱區,轉場。看起來操作很簡單。

平台:全平台。

缺點:30天免費期,按月收費。不支持控制項。需要瀏覽器支持。


Fluidui

極簡風格的Fluid UI快速原型圖工具

最受推崇的網頁版原型網站。控制項從iOS到Android到WP。也是可以免費一個項目少量屏幕,然後按月收費。

方法:添加控制項,熱區,轉場。

缺點:我用網頁版的還是感覺有點遲緩,不痛快。勝在控制項實在很全,這個是很多桌面軟體都不支持的。如果針對安卓或者WP,實在沒什麼更好的選擇了。

**總結:**分享方便,輕量級是最大優點。但是按月付費這個我覺得大公司不會承擔這筆費用,小公司有沒有必要花費在這方面都值得商榷。速度也確實有點問題。交互也不如專業型那麼靈活。


超大型
高保真度;可拓展控制項;自定義庫;適配;少交互;收費。

Axure

繞不開的巨人,就像圖片界的PS,文字界的Word。它最大的特點就是別人都用它(雖然大多是盜版),我之前也存了顯出不同逼格的心試了前面那麼多軟體,最後繞了一大圈還是回到了它的懷抱。

回來的原因主要有三

  1. 大家都在用。這個沒辦法,溝通,傳輸,修改都方便,PC+mac都可以看。你自己逼格到了,人家都感受不了有什麼用呢。
  2. 確實強大,熟練使用庫和自定義控制項後,效率大幅提升,遠勝專業型。
  3. 生成的HTML頁面自帶左側目錄邊欄。是的,這就是我棄用OmniGraffle的主要原因。

方法:不再贅述了,總之要用好自定義控制項,這個會讓效率成倍提升。

缺點:生成的原型在移動端很難用。是有方法的,其實也不錯了,但是我還是懶得費心研究。之所以用這個就是為了給開發和寫文檔,很多標註和邏輯流程,沒必要做出交互。所以不考慮用它做交互,你真都做成交互了,難道還要工程師挨個點開才能看到邏輯?


OmniGraffle

為了捍衛mac的逼格,我用了幾天就放棄了。不可否認,OG在調整控制項時的流暢穩健,草圖的美觀(前提是你用英文)等方面,能讓你享受整個製作過程,這是很少見的。但是我一直搞不懂畫布層共享層等等的關係,用起來失誤頻繁,而且,生成的html沒有目錄啊,文檔可讀性差。

方法:不再贅述。

缺點:除了前面所說,僅支持mac,生成的交互原型更難用到手機上。

總結: 是的,這兩個軟體不光是用來做移動交互原型的,他們的強大體現在非常多的領域,但是針對移動交互原型而言,都不適合。A勝在文檔和大家都用,所以在個方面就屈從了吧。


輔助型
特定功能(動畫;圖標;投影)

Quartz Composer

就是專門用來製作交互動畫原型的產品,免費,但是需要蘋果開發者賬號,學習曲線非常高,但是可以製作非常精美的強交互動畫。

Facebook Paper的動畫原型製作工具Origami及實現代碼Pop


Liveview

PS play等都可以快速把電腦上的內容投影到手機上。但是唯獨liveview可以支持交互。打開交互模式後,電腦端可以接受手機的點擊和滑動手勢。非常強大。

Icon Stricker

專門用來測試icon的網站,出自Flinto。快速在主屏查看圖標。

輕量級圖標測試工具ICON STRIKE:快速主屏查看


總結

我現在對原型的流程是這樣的:

  1. 用Axure繪製UE圖,導出成手機尺寸圖片
  2. 導入Briefs或者pop,加入交互,體驗一下
  3. 把UI圖轉成黑白,在Axure里標註,寫文檔,生成html
  4. UI定稿再導入briefs,高保真體驗

如果只是線框圖,那用什麼都行,如果不是對格式有要求,那我就畫在草稿紙上。考慮正規點的,如果後續會進一步細化的,會用axure,如果就到此為止了,那用visio。不過看情況,如果需要保真度高一點,那axure的組件庫比visio豐富多了。

如果像要在設備上實際讓原型顯示出來,並且能測試。那axure和騰訊cdc的uiddesigner,還有在線的fluidUI也可以考慮。其他好像沒有了吧。但除了axure,後兩者所謂的交互其實都是不同的界面截圖之間的切換,說白了就是多節點式結構的ppt,不是真正的交互。axure的思想更接近實際開發,比如通過master實現界面元素的封裝復用,條件判斷,函數,變數。這些功能除了開發工具,原型工具還有誰能比得上axure嗎?

app原型相比網頁,界面結構簡單,但交互複雜得多。界面上的div也不是平鋪的,為了有效利用空間會用到很多層疊,卡片式之類的展示方式。要做這類高保真可交互原型,我覺得非auxre莫屬。比如一個tableview滑動到頂部刷新,底部回彈,不藉助開發只有axure能做出來。

我從07年開始用axure,曾經一度認為做網站原型,axure已經不需要再怎麼改進了。自從做app之後,覺得axure有點根不上時代,但試了其他工具,還是覺得auxre最合適。仔細做過幾個以後,我覺得axure還是完全適合做app原型的。做好以後分享也方便。放到內網,或者axshare上,或者有一個html runtime的app,可以在設備上直接瀏覽axure輸出的html。

當然axure作為一個工具,不可能每個環節都是最好的。比如我希望axure能借鑒一下其他工具和開發思想,把UI和素材分離出來,就像換皮膚一樣,一個控制項可以隨便更換圖片素材。這樣pm或者交互用最簡單的線框設計,確定交互以後,可以把設計師的圖貼上去,這樣就100%保真了。
axure對app設計不友好或者說最落伍的地方,就是支持的事件類型太少。交互上無法模擬出多點觸摸,無法模擬設備運動,無法模擬各類感測器……或許對一個原型工具來說,要求太高了。


justinmind+1,目前最好用的移動設計工具。
中文資料:We? Justinmind


看了一圈,居然沒人提Framer.js. 同樣的問題在國外設計師社區,10個人有7個說的是Framer。看來國內國外差距還是比較大。。。


分享一點個人經驗 我習慣用不同的prototype工具來呈現不同層級的細節

1 概念階段
lucidchart 畫diagram 之前網上很火的Hey Julia的線圖版就是類似那種
這個階段不推薦紙筆或者白板是因為越早期越需要多溝通,
一個很多人可以合作編輯 添加意見並能完整保存的設計工具是必要的

2 V1 Mockup
網點卡紙 列印出1:1的設備屏幕線框 再加一隻黑水筆和幾隻彩色馬克筆就行了
這裡基本上目的就是把主要的流程和MVP畫出來 有多少個屏 每個屏大致有什麼內容
用1:1的好處就是你可以很容易看出一個flow是不是正常,信息的密度是不是合理,
用卡片畫好後貼在白板上,大家可以隨時討論,多列印些空白的好隨時畫新的貼上去,
而且順序什麼的可以隨時調整

3 V2 Mockup
一般會在sketch里做,這裡就可以去設定基本的網格 擺出基本的layout
這個階段需要考慮設計了

4 交互動態展示
Origami或者Frame JS 如果是mobile app基本用origami, 如果是ipad或web端用frame js,
主要原因我覺得Origami在內存管理上有一定欠缺,當圖層過多時會比較慢

上面四步可以一步一步推進,不是所有的項目都需要走全部四步 之所以不同層級,是不同階段的設計需要關注不同的問題,自然採用不同的原型方式,而且一個有規可循的產品設計過程會是很好的自我反思方式,也更方便團隊合作。新的成員加入或者是和不熟悉項目的人溝通時,用幾個層級的原型去演示是最好的詮釋,這樣會收到更有價值的反饋。


分享一下,20款優秀的移動產品原型和線框圖設計工具

【輔助工具】20款優秀的移動產品原型和線框圖設計工具


原型的目的是為了交流和演示。所以根據不同的目的應該選擇不同的工具。

在最原始的階段,設計師為了保存自己的想法,同時與其他人溝通,一般都是採用手繪草圖的方式。方便快捷。實際上在緊密配合的小團隊內,手繪原型完全可以堅持到最後階段。

當產品概念已經慢慢清晰後,需要將產品的內容,結構,流程等元素通過可視化的方法固定下來,一般就會使用軟體繪製低保真的原型圖。這個時候一般會使用Axure,Omnigraffle之類的工具。選擇此類工具的理由就是有大量的模板和組件可用(有經驗的設計師都會有自己總結積累的模版庫),可以提高效率。同時使用軟體繪製原型圖,傳達上會比較清晰一些。

其實很多時候,低保真的原型+說明+交互行為備註+流程圖,已經可以滿足需求了。不過因為app一般都有大量的手勢行為和過場動畫,有時候也需要製作一些更高保真的原型。這時候有幾個好的選擇:
1,google收購的Form,類似QZ的操作。學習曲線比較陡峭,不過熟練之後應該能勝任絕大部分需要了吧。
2,在線原型製作工具,比如前面有同學提到的modao.io,比Form好學易用。缺點就是靈活性就差一點。

任何原型工具都是為了將設計師的想法儘可能高保真的表達出來的工具。所以創意和技能是相輔相成的,需要齊頭並進。


感覺手繪是最快的


自薦下我們團隊做的在線原型工具: https://modao.io

就易用性和上手難易度來說,可以說是目前市面上最簡單易用的原型工具,同時兼顧了線框圖和高保真設計圖,產品經理和UI/UX設計師都可以快速上手做出可直接在手機上查看的App原型。

當然, 必須承認,從功能性上來說,目前和Axure以及國外的InvisionApp/http://Proto.io等大型商業工具還存在一定差距,不過我們產品目前正在快速迭代中,預計到年底可以在主要功能上與這些工具持平。


PPT


紙繪,然後用軟體拍下演示交互。


手機上做原型推薦POP: http://popapp.in


強烈推薦一款國產的:

Mockplus


這是一款基於桌面的用戶體驗工具, 可快速實現移動、Web及桌面應用原型設計 。憑藉著出色的易用性,用戶無需憑藉編程知識即可快速上手。Mockplus擁有良好的所見即所得功能, 例如大家熟悉的彈出菜單交互,3步即可實現:拖一個彈出菜單組件和一個按鈕到畫布,之後拖拽按鈕的鏈接點到彈出菜單,然後運行演示。 總而言之,Mockplus是一款價格便宜且能夠快速建立交互原型的出色工具。 此外,該產品還有個姊妹產品,Chainco,可專門導入UI視覺圖交互演示,簡單好用,UI/UX設計師有福了。

價格:英文版:基礎版——永久免費 高級版——包年支付月均15美元,包月支付每月29美元。
中文版:免費版——永久免費 專業版——包年240人民幣,目前優惠價格118,平均每月不到10元。
有興趣的同學抓緊了解。

看看目前的口碑就知道了。


現在市面上有很多諸如Axure、Shireframe、Pencil Project等產品原型設計軟體,每個產品都有其獨特的優越性,目標都只有一個:高效產出可測試、可交互的產品原型。

毋庸置疑,這些軟體的功能都十分強大,但是事實上並沒我們想像中的高效,除開都需要完成軟體的下載安裝捆綁等繁瑣操作外,便攜性差是他們最令人不滿的地方。

就比如老闆急需要你在手機上給他展示新製作的APP原型,而你艱辛地在Axure上把原型文件導入到手機中,在手機打開卻需要花費幾分鐘,且瀏覽時發現效果甚差——動畫卡、鏈接按鈕丟失、畫面顯示不全...同時滿足高效、可測試、可互動、方便老闆瀏覽做決策等特點就需要選用一些輔助用的工具或軟體了,而HTML5工具似乎是不二的選擇。

縱觀國內的HTML5製作工具,做得比較好的有易企秀、iH5、MAKA、爆米兔等,幾款工具各有利弊但鑒於其交互性的實現,個人還是傾向於iH5。這款工具並非是專業的原型製作工具,它只是能通過高效產出一個產品原型的H5,來彌補Axure等專業工具所不具備的攜帶型掌上展示功能(特別是動畫、動效、交互等元素的展示),以此作為輔助性使用。之前有用過爆米兔給同學做校招的筆試題,網易春招的有道考神,效果還蠻不錯的哦~~

下面向大家展示本人用該HTML5工具臨摹的instagram APP中的一些交互界面(事先在手機上把各界面截圖導出到電腦,然後用PS作切片處理),以及敘述相應的邏輯:

  1. 頁面跳轉:頁面的跳轉主要用的邏輯為:透明按鈕——置頂同層控制項——顯示/隱藏頁面


以點擊第一個icon和第二個icon的頁面跳轉為例,我們需要把已切片的素材導入,先隱藏初始不用顯示的頁面。在下方icon欄處設置畫布,且對應地設置透明按鈕,目的是為了用透明按鈕+事件的邏輯實現頁面跳轉。

對於icon欄的切換,除了可以用iH5的時間軸+遮罩功能來實現,可以用「同層控制項置頂」功能:在需要點擊的按鈕下設置事件,將對應的控制項頂置即可。

另外這個工具帶有「動效」功能,常見的向左進入、向右退出等動效都有,所以我們可以在頁面下放置一個進入和退出的動效即可。

2. 頁面滑動
頁面滑動交互的主要邏輯為:固定頂、底欄——滑動時間軸——長圖頭尾設置軌跡關鍵幀


首先固定首尾欄,設置滑動時間軸,在滑動時間軸下放置用於上下滑動的長圖,用軌跡控制長圖的頭和尾的位置(在時間軸上添加軌跡的關鍵幀add,然後點擊頭幀和尾幀設置坐標屬性)。值得注意的是,滑動時間軸的屬性欄下的「自動跳轉控制點」應選為NO。如果勾選該選項,我們在滑動的過程中鬆手,長圖會自動跳轉到頂部或者尾部。

3. 頁面嵌入視頻
頁面嵌入視頻交互的主要邏輯為:透明按鈕——事件控制播放/暫停

視頻規格似乎是限定MP4格式且不大於50M,在設置屬性時取消自動播放,通過在播放的圖標上設置透明按鈕讓用戶點擊觸發視頻播放和暫停。當然這個播放圖標也可以用時間軸+軌跡的配合實現圖標閃爍、呼吸型伸縮等提示效果。

視頻規格似乎是限定MP4格式且不大於50M,在設置屬性時取消自動播放,通過在播放的圖標上設置透明按鈕讓用戶點擊觸發視頻播放和暫停。當然這個播放圖標也可以用時間軸+軌跡的配合實現圖標閃爍、呼吸型伸縮等提示效果。

當然有很多頁面我還沒詳細表達出來,包括:頁面內的動畫交互、圖片預覽時的放大收縮等,這些都能通過時間軸等功能實現,還有3D型翻轉的相冊類型交互都可以實現

總而言之在整個體驗的過程來說,操作的效率和實現的效果都很好。在使用Axure等工具製作原型時,不妨用H5來作輔助性展示,相信可以更加直觀地提高與老闆交互設計師等對象溝通時的效率,便於作產品全局的決策。


http://pixate.com從beta在用 非常好


這裡有國外主流原型工具的介紹,包括鏈接、價格比較等,可以根據需要挑選:
Digital and Paper Prototyping Tools


這些工具你會用嗎?常見設計工具視頻教程集錦

在產品開發過程中,最常用的展現構思的方式一般來說是紙筆原型,最簡單也最迅速,寥寥一畫,一個大致的線框圖就呈現出來了。但是如果想要把線框圖表現得更完美,你還是有很多工作要做噠~
YouTube上一位大牛在他的視頻里展示了一套完整網路郵件服務的紙質原型線框圖。由兩個人合作完成按鈕點擊和網頁跳轉的展示,看起來邏輯思路都很清晰完整,但是對於當下的快節奏工作環境,製作和展示這樣一套完整的原型還是頗為耗費時間。有網友問展示這套設計排練了多久,也有人擔心紙片片的順序被打亂,或者文件容易缺失的問題。


相較於這種傳統的操作方式,更高級一點的就是藉助於各種線框、原型設計工具。也看到網上有很多關於這類工具的介紹或者總結,爆炸式的陳列出大把大把的工具,但是,你真的會用嗎?授人以魚不如授人以漁。所以,這裡總結了一些常見原型工具的使用教程,希望對你有用。


線框圖工具 - Balsamiq



這款工具據說是首創了手繪風格。界面和操作都比較簡單,只需拖出控制項,調整屬性就可以快速的繪製低保真的線框圖,手繪風格也很討巧。網站上很貼心的在首頁展示了一個3分鐘的短視頻,讓用戶即看即學。更多更詳細的使用教程YouTube上也不少,比如這個2013年11月份製作的Balsamiq Tutorial,達到了65K+的觀看量。


互動式原型設計工具 - Mockplus



Mockplus是一款非常簡單易學的互動式原型工具,特有的鏈接點,讓你輕鬆的在拖拽之間迅速完成組件、頁面交互,非常直觀。中文教程:10分鐘教學視頻,即學即用,快速上手。國外的童鞋也能在YouTube上搜到很多Mockplus的教學視頻,短短几個月的時間,Mockplus的教程已經累積10K+的瀏覽。Mockplus在交互方面的優勢可以從其中一個「30秒製作原型」的視頻中充分體現。


界面編輯工具- Sketch



Sketch 是一款適用於所有設計師的矢量繪圖應用。矢量繪圖也是目前進行網頁,圖標以及界面設計的最好方式。有經驗的設計師花上幾個小時便能將自己的設計技巧在Sketch中自如運用。如果你沒有使用過Sketch也不要緊,跟著我列出來的教程視頻看下去,你會收穫很多的。中文視頻,請移步這裡:Sketch視頻教程專輯。有興趣看更多視頻的同學嗎,可以去YouTube看一下LevelUpTuts家的Sketch App Tutorials - Series Introduction視頻,乾貨不少,兩年多的時間有300K+的觀看,相信有不少看過視頻的同學都已經修鍊成了大神。


界面演示工具 - Invision



InVision 並不是一款嚴格意義上的交互設計工具,但它可以幫助設計師和設計團隊更加高效地做原型設計。用戶製作一個在線原型只需要四部:創建一個工程、上傳視覺設計稿、添加鏈接以及生成在線原型,便於和同事、用戶交流,獲取反饋。與此同時,InVision擁有完備的項目管理功能,團隊協作完成原型設計。3分鐘視頻快速了解Invision。同樣,可以去YouTube找到更多詳細的Invision視頻教程。


Adobe Illustrator
簡稱AI


剛好看到這篇文章,強烈推薦給各位產品汪們哈哈:

產品經理看過來,這 4 款原型圖 App 隨時隨地都能用

各位改變世界的產品經理們,你們在用什麼工具畫原型圖呢?

畫原型圖可謂是產品經理們的必備技能,雖然這個工作很多時候由交互設計師完成,也不能直觀地說明什麼能力,但如果你想要證明自己不是靠讀完《烏合之眾》或者《結網》來勝任這項工作的,一個清晰的原型圖會比長篇大論的 PRD 文檔讓人直觀感受到你的專業度。

下面,AppSo(微信號 appsolution)將在這篇文章中給大家介紹四款原型圖工具。

Marvel : 草圖黨神器 #iOS #Android

Marvel 可謂是草圖黨的神器,告別那些複雜的交互吧,這款應用可以讓你用紙、筆、手機實現原型設計和演示。

Marvel 的邏輯非常簡單清晰,即按照「起始頁面」-「過程交互」-「終點頁面」來描述產品的某個功能。而且,Marvel 對於頁面的展示是基於第三方導入的,而非支持產品內的繪製。

也就是說,我們可以在紙上畫好簡單的草圖,比如「主頁」和「內容頁」,把它們拍成相冊中的照片;在 Marvel 上你就可以導入首頁照片,在相應的位置畫一個熱區,將其鏈接到內容頁,再從既定的動畫中選出一種交互方式,就可以實現兩個頁面的交互示意了。

其實 Marvel 在原型的交互功能實現層面上非常弱勢,畢竟是一款純粹基於手機的原型製作工具。

但它確實能夠讓人隨時隨地記錄、展示自己關於的創意。它很輕很酷,更適合在頭腦風暴或對外演講時使用,而不是跟開發人員進行需求評審時使用——否則你就是在挑釁你的技術團隊,相信我,為了職業前途和生命安全,請不要這樣做。

Marvel 適用於 iOS 9.0+ 的 iPhone 和 iPad 及 Android 3.0+ 的設備,iOS 版 92.2 MB,Android 版 5.6 MB,完全免費。

墨刀:簡易控制頁面元素 #iOS

墨刀是這次推薦中唯一一款國產工具,其核心邏輯與 Marvel 一致,也是以「起始頁面」-「過程交互」-「終點頁面」作為主要分割維度的。相比之下,它比 Marvel 拓展了更多功能。目前墨刀有 Web 端、PC 客戶端和移動客戶端,其核心功能主要由 PC 客戶端實現。

在目前的版本中,墨刀已經支持了對頁面內部元素的精確控制,並引入了母版和動態面板功能,頁面元素在不同前置條件下有了不同的 State,使其在一定程度上可以做到高保真原型。

墨刀的移動端主要功能是演示,並沒有對原型的修改功能,其大量的原型操作細節也很難實現在移動端的修改操作,也確實沒有這個必要。

目前來看墨刀的優勢主要集中在 app 原型的製作上,其操作方式使其在製作 app 原型時更容易,官方預設的套件也明顯是針對 app 原型設計的。

而它的劣勢主要在於在實現複雜交互和特殊交互方面比較困難,這是其產品框架導致的,基於頁面的原型工具都很難再實現細節元素的精確控制。

另外,墨刀作為一個新工具,它的使用者並不多,製作的套件也就相對少,這意味著你在做高保真原型時必須有設計師輔助,你很可能要付出額外的成本來請他吃飯。

MockingBot 墨刀適用於 iOS 8.0+ 的 iPhone 和 iPad 設備,iOS 版 2.9 MB,完全免費。

Flinto : 邏輯清晰的原型工具 #iOS

Flinto 整體體驗都和墨刀很像,可以說是優化版的墨刀。體驗最好的一個優化是 Flinto 將 app 中常見的 Feed 流納入了基本交互,這個十分常用的交互在很多原型工具上製作起來都十分麻煩,不得不說此項優化簡直感人肺腑。

值得一提的是,Flinto 產品本身的操作性也要更強,其偏轉功能使其在做交互時有更清晰地邏輯感,也大大降低了誤操作的可能。

此外,Flinto 的移動端預覽也非常方便:可以將原型直接生成網頁並以簡訊的形式發送至手機,甚至不需要下載 Flinto 的 app,也可以很流暢地在手機上預覽剛剛做好的原型,這種無縫銜接會讓你有一種不需要程序員也可以去創業的錯覺。

Flinto 適用於 iOS 8.1+ 的 iPhone 和 iPad 設備,iOS 版 23 MB,完全免費。

Axure : 行業必備 #iOS #Android

把 Axure 放在最後,是因為它與上面幾個工具有明顯不同的地方。它的功能強大程度與其複雜程度一向是成正比的。

Axure 強大到什麼程度呢?它可以不需要寫任何代碼就能實現一款類似於《雷電》的打飛機小遊戲。上文提及墨刀中的模板、動態面板這些功能放在 Axure 里簡直就是基礎功能。

Axure 是這四款工具中唯一一款完全基於單個「元素」的,這使得它有了無限拓展的可能,只要你有耐心有閑心,你可以做出目前你能想像到的絕大多數交互。因此,它也是目前大部分人做原型圖的首選。

在 Axure 中,你可以去定義你視野中每個元素的狀態,以及其隨時間或操作產生的動態變化,母版、動態面板的重複套用,以及 Repeater(漢化譯為「中繼器」,但並不十分準確)這種十分複雜的工具可以讓你的原型圖達到一個前所未有的保真度。一個簡單的高保真日曆功能就能讓墨刀這類工具束手無策,然而對於 Axure 來說這只是小意思而已。

最重要的是,Axure 是一款非常成熟的產品,前人已經做好了無數可用、好用的套件庫,你只需要把它們載入到你的 Axure 中即可直接調用,可謂站在巨人的肩膀上。

當然,Axure 也有其弊端,比如對 app 原型製作不那麼友好。Axure 產生的年代是 Web 產品橫行的世界,它從一開始設計就沒想過為 app 這種東西服務,雖然在之後的幾個版本迭代過程中不斷針對移動端做出了優化,但墨刀一秒鐘就能實現的操作, Axure 可能需要十幾分鐘。

另外,其移動端的原型預覽機制也很差,所以在手機上你需要下載它的 App AxShare 來幫助你在手機上更流暢地預覽和分享原型圖。

AxShare 適用於 iOS 8.0+ 的 iPhone 和 iPad 設備,iOS 版 51.8 MB,完全免費。

綜上所述,雖然這 4 款產品都是用來畫原型的,然而使用場景各有不同, AppSo(微信號 appsolution)建議各位產品經理在實際使用時,可以根據自己的實際需求來選擇更適合自己的工具。

P.S.獲取更多創業者訪談和大咖精彩分享報道(內容/設計/產品/運營)歡迎關注我專欄哦:MindStore 官方博客 - 知乎專欄


作為一個資深的Axure用戶(08年開始用)表示,Axure在APP時代真的是過時了,說真的,你完全沒辦法用它做出你想要的高保真原型,因為它連基本的操作手勢(滑動、下拉、雙擊各種)都不支持,也不支持頁面載入動畫。

很多產品經理使用axure都只是畫一些簡單的線框圖,這個思路的對的,用來畫高保真其實不合適的,雖然鄙人曾經也用過來畫高保真,但是PS/FW/AI等等顯然是更合適的工具

對了,順便宣傳下我們現在正在做的一個產品,http://www.xxdemo.com/,歡迎給大家不一樣的體驗。下載地址乎之原型 on the App Store on iTunes,希望能讓大家做出想要的高保真原型,歡迎圍觀或吐槽


推薦閱讀:

智能硬體產品經理需要哪些技術基礎?
有哪些適合大學生使用的 app?
歷史上有哪些紅極一時卻最終消失了的產品和品牌?

TAG:設計 | 軟體 | 產品 | app(應用程序) | 原型 |