目前用到的原型設計工具總結

目前我行手機銀行項目組使用的原型設計工作主要由我和需求工程師配合完成,我主要負責原型的設計開發工作。

需求爲業務部門提出,由需求工程師與業務部門確認業務邏輯,頁面要素,輸入輸出,要素控制等方面要求,並形成需求分析工作說明書,和簡化版線框圖。


我的工作開始了。

先介紹一下原型的幾個種類吧,我自己的理解,原型分爲低保真原型,主要可以是流程圖,線框圖等,高保真原型,靜態圖片和實機效果基本八九不離十,要求高分辨率,全UI要素的呈現,目前主流的設計工具有Sketch,PS等。PS大家都耳熟能詳了,非常全能。而Sketch是最近開始火的移動設計工具,相對於PS來說,更加的輕量級,並且是矢量化的。在高保真原型的基礎上,還可以加上動畫效果,實現真機一比一的原型,在很多情況下動畫效果是可描述的,而且UI設計師的描述開發人員也是可理解的,因此在大部分情況下動畫效果非必須。Sketch有一個很好的基友,叫做Flinto,用來做動效設計真的很棒。目前我們所有的高保真靜態頁面全部用sketch來實現,所有動效都是用flinto去呈現的。


也就是原型和UI設計界的黃金搭檔,Sketch+flinto。

以下是Sketch和flinto的官網

https://www.sketchapp.com

www.flinto.com/


除了官網之外,還有很多可以推薦的網站。

sketch it‘s me http://sketch.im 上面有大量的sketch設計的原型案例,有大量的素材可以參考,上面不乏有非常好的設計,甚至有人手繪了微信的全部UI

sketch中文網http://www.sketchcn.com 上面有sketch的中文說明,比較簡單,論壇不錯,另外也有一些sketch資源站的導航

矢量圖標庫 http://www.iconfont.cn 矢量圖標庫,大家可以下載,但是大部分設計都趨於平庸,大同小異,大家可以下載後快速形成原型。


BTW,目前這兩個工具均只有MAC版,不過做UI設計大部分都是用MAC的吧。


作爲第一篇博客,先寫這麼多吧,希望自己能夠堅持下去,每天早上班個一個小時,寫點東西記錄下。

加油。












發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章