POST TIME:2018-12-03 21:17
現(xiàn)在的移動開發(fā)越來越趨于小規(guī)模團隊協(xié)作,似乎只要懂得一些APP開發(fā)的人就自稱了解了用戶體驗和用戶界面的重要性,一個好的APP原型設(shè)計理念很容易被糟糕的界面和體驗毀于一旦,如今市面那么多的原型工具幫手我們解決問題,我們又何樂而不為呢?但如何選擇原型工具卻成為設(shè)計師們最頭疼的事情,一方面是由于不懂哪些工具適合本身,另一方面又沒有多余的時間去挨個使用。別擔心,今天就為大家解決這一大“難題”。
首先,,要考慮到那些人將會使用你的原型,然后針對差別的用途選擇最好的原型工具。
1. 個人或小型的設(shè)計團隊:主要要求的是設(shè)計理念和設(shè)計思路,追求的是高效率,此時手繪和白板是最好的工具,或者Balsamiq Mockups也是適用于這個階段的好工具。
2. 公司高層,客戶,投資人等:原型不要求必然要精美華麗,但至少要美不雅觀,在交互邏輯和元素布局上盡可能追求與真實產(chǎn)品接近。主要流程可以走通即可,需要可以在移動端做演示,使用像Mockplus等可以作出傳神的交互效果而且便利在移動端演示的工具。
3. 開發(fā)團隊&視覺設(shè)計師:要求設(shè)計流程完備,最好有操作流程圖。Fluid UI 這種可以完善設(shè)計出各交互元素,并輸出流程圖的工具是不錯的選擇。
其次,要了解好的移動端原型設(shè)計工具應該具備的以下幾個特性(摘自知乎):
1. 組件庫專門對移動端定制過
2. 便利輸出到移動端查看效果
3. 支持移動端的手勢操作
4. 支持移動端視圖切換的轉(zhuǎn)場動畫
5. 可以快速生成全局流程圖
還有一些其他加分的特點:
6. 低保真最好,不要帶太多iOS高光漸變效果
7. 組件庫豐富,有社區(qū)可以看其他設(shè)計師的作品
8. 自帶網(wǎng)格系統(tǒng)
9. 在線協(xié)作&版本辦理
10. 能做一些異常檢查,好比某個按鈕沒設(shè)鏈接,某個list沒有空置狀態(tài)等。
最后,給大家介紹幾款適用于移動APP的原型設(shè)計工具;
Fluid UI
Fluid UI是一款用于移動開發(fā)的原型設(shè)計工具,它能夠幫手設(shè)計師快速高效地完成產(chǎn)品原型圖的設(shè)計。
優(yōu)點:Fluid UI 內(nèi)置超過 1700 款的線框圖和手機UI控件,而且還會經(jīng)常進行更新,適合跨平臺開發(fā)者。符合上面1,2,3,4,5,6,7,8。并且是html5 版,全平臺支持!
缺點:不夠直不雅觀,免費版只能創(chuàng)建一個 1 個項目和 10 個頁面
價格:付費版 25 美元/月,可以創(chuàng)建 10 個項目和無數(shù)個頁面以及使用所有組件庫。
Mockplus:
Mockplus是一款快速簡單的原型設(shè)計工具,主要適用于新手產(chǎn)品經(jīng)理和設(shè)計師。
優(yōu)點:封裝 3000 個圖標和 200 個組件,操作簡單快速,學習成本低。在比來發(fā)布的版本中支持團隊協(xié)作功能,審閱和評論非常便利,聽說在即將到來的3. 2 版本中,支持將Sketch的設(shè)計文檔導出為Mockplus的mp項目文件。導出后,你可以在Mockplus中打開它。說了很久的頁面流程圖也終于要面世了。Mockplus的頁面流程圖可以做到:
– 即時生成;
– 你可以選擇展示全部或任意多個頁面的流程圖;
– 智能生成流程鏈接線,同時也可以手動調(diào)整;
– 展示頁面的批注信息;
– 一次導出頁面流程圖。
缺點:不支持手勢操作,函數(shù)和動態(tài)面板。官網(wǎng)教程較少,例子模板沒有具體的操作步驟。
價格:基礎(chǔ)版永久免費,付費版 118 元/年,終身版: 699 元,無需別的付費更新版本。
Balsamiq Mockups
這個軟件相信很多人都知道了,它是一款低保真的線框圖工具,主要用于原型設(shè)計的初始階段。
優(yōu)點:內(nèi)置了大量的模塊,在需要的時候在搜索框里找,然后拖到畫布里面進行排序組合,畫圖很快速,功能強大(好比在tab選擇框里可以選擇哪個tab是active,哪些是default的)。很快就能畫出想要的app原型。如果你還覺得BM內(nèi)置的模塊點少?Mockups To Go 可以滿足你需要的大部分需求!
缺點:Balsamiq Mockups里面畫的只是草稿,沒有配色,沒有設(shè)計風格。它只是每個頁面的布局,不能進行交互展示。
價格:個人版 89 美元,可以按照項目數(shù)量來購買。
Justinmind
Justmind是一款為移動而生的原型設(shè)計工具,雖然它沒有像Axure那么火,但是對移動APP的原型設(shè)計支持似乎比axure更好。