交互設計之高效原型設計工具
交互設計之高效原型設計工具-移動閱讀二維碼

工欲善其事必先利器,如今交互設計的工具五花八門?;诘捅U嬖偷膬蓚€要求:輕巧快速和易于修改。在追求短頻快的產品節奏下,企業一般用什么工具進行交互設計?使用哪些工具能夠快速高效的輸出? ?

1.前期

產品前期的討論,強調的是創意或展示流程的核心概念,設計師們關注的是設計方向的可行性和用戶體驗,并提出問題。簡單的手繪在前期階段發揮著不可替代的作用,除了紙筆手繪線框,還可以使用尺子畫出界面通用的控件或基本元素。

交互設計之高效原型設計工具1

交互設計之高效原型設計工具2

2.過程

A. ?思維導圖工具比較多,使用 XMind, Mindmanager 等比較常見。

交互設計之高效原型設計工具3

B. ?低保真原型使用工具也是多樣性的,有visio,早期的設計都還在用(現在看到比較多是IT人在用)。

C. ?Axure,目前主流的使用工具,配合組件庫,可以快速調出需要的控件、基本元素、窗口等快速進行交互原型制作。也可進行制作交互動畫,更清晰展示原型的流程。

這里提供一個ios7組件庫給大家下載:http://pan.baidu.com/s/1bnvT2nd

D. ?Illustrator,矢量工具。特點是操作麻煩,控件需要手動添加,輸出效率較低。Coreldraw道理與Illustrator相同。常見與做文檔輸出,新手或者早期的原型不推薦使用。

E. ?Keynote / PPT,在MAC,WIN環境下的標配,使用的情況也不多,除非是時間緊迫要跟客戶或領導展示產品概念。畫草圖不好展示,用Keynote / PPT可以快速出一些動效,助于概念闡述。缺點也很明顯畢竟不是專業繪圖工具,沒有模板,不利于長期修改。

F.? OmniGraffle,這款繪圖軟件,曾獲得2002年蘋果設計獎。但只能于運行在Mac OS X和iPad平臺之上??梢岳L制普通圖表、樹狀結構圖、流程圖、頁面編排等,基本上交互設計所涉及的都涵蓋了。有MAC的同學可以嘗試下,很多資深交互設計師都推薦的一款軟件。

G. ?其他,交互設計工具多樣化, Photoshop等等也可以。但不管用哪種工具,找到一款適合自己,并熟練使用它,才是真正的高效。

交互設計之高效原型設計工具4

?3.展示

展示部分,分為靜態與動態兩部分闡述。

A. ? 靜態

靜態一般是指文檔規范,比如用Keynote/PPT/InDesign輸出的PDF,文檔,表格,圖片等格式。這類文檔要求交互注釋清晰,流程一目了然??晒╅_發,視覺乃至PM,看清楚你所設計的內容并作為規范。

B. ? 動態

動態的展示,一般是在設計之初展示給領導或客戶看的Demo,以及設計上線展示給用戶的演示。

⑴PC端

常見的有Flash,AfterEffects, Premiere Pro,Keynote/PPT,UIDeigne ,Axure等軟件。輸出兩種,一種是可點擊/拖拽的交互Demo。另外是演示的視頻,這類多用After Effects, Premiere Pro軟件,進行視頻的剪輯,交互動畫的展示。

附畢業設計做的視頻展示供參考:

Listen APP演示 ?http://v.youku.com/v_show/id_XNzExNjY1NzU2.html

Listen設計過程 ?http://v.youku.com/v_show/id_XNzExODU2NTQ4.html

⑵移動端

POP,快現,UIDPlayer等軟件,這里推薦這3個給大家。它們簡單易用,用手機拍手繪草圖,添加熱區,就可以在iPhone/ Android上演示原型,并且POP內嵌的交互動作如側滑、展開、消失??飕F的“搖一搖”等功能,可以滿足一般的動態演示需要。

另外,還有一些在線生產的動效,這里推薦一個:https://www.flinto.com

 

交互設計之高效原型設計工具5

4.其他

除上述之外,一些素材庫,字體,模板等也能幫助你進行高效的輸出有質量的交互文檔。

 

快動動手規劃下你的設計軟件吧^.^

下周寫一編關于交互設計實戰項目,請持續關注~

我是佳佳,歡迎交流。

原型設計工具的那些介紹好文集:
20款優秀的移動產品原型和線框圖設計工具
推薦移動UI/UX設計師和PM使用的原型工具
加速原型設計的那些工具
Flinto — 超能ios原型快速制作工具
創建更好的移動Demo:工具篇

本文由 @SSSStorm 投稿授權發表,轉載請注明出處。

——————————————————————————————————–

【莫貝網原創文章投稿郵箱:mobileui@163.com】

 

本文鏈接:http://www.casaleticia.com/efficient-prototype-design-tools.html
本文標簽: , , , ,