標籤

2010年11月23日 星期二

利用Sketch Tool來做Prototype越來越容易了。

之前做UI prototype真的算是一個不小的efforts,可是不做又不行,requirements 在紙筆上很難有一個flow的概念來呈現所以只好先用VB.net來做desktop的prototype,至於web的軟體就先用HTML做個樣子來跟客戶討論。

軟體開發的變數很多,影響最大的是requirements這一端,requirements不對或是更動的事件幾乎是時有所聞,特別是做project based軟體開發,不讓客戶先瞭解整個UI運作模式的話,requirements 很難不會不更動的,所影響除了驗收收費之外,也會嚴重的影響下一個porject的進行。

今年參加了微軟的TechEd 會議後,他有一款Expression Blend來做Silverlight與WPF UI軟體引起我很大的興趣,特別是裡面所提供的一個Sketchflow功能可以讓開發者來做UI prototype,最近我把它安裝好了之後試了之後,這真的是一個很好的工具啊。

Sketchflow提供你可以在WPF與Silverlight 上來開發UI Prototype,所提供的UI元件相當豐富,幾乎你所想到的都有提供,更棒的是他提供了navigation的功能能讓你做不同UI的連結,你也可以運用animation來做動畫呈現,所製作出來的UI是動態而且是可以操作的。  除了可以demo 你的UI與客戶討論requirements之外,review UI的人也可輸入建議,不過這個步驟有一點鳥,reviewer必須將意見匯出之後再email給開發者匯入置Sketchflow內才看得到comments。 要了解更多或學習如何使用Sketchflow可以到微軟的Expression Blend Site來看更多的資料與Demo,或是直接到這裡來操作一下。

除了微軟的Sketchflow之外,我也review了一下Balamiq Mockups,他所提供的是一款利用Flash來製作UI Prototype的軟體,他其實也算是SaaS的一種,他的Desktop版本一套要79塊美金。 另外一個完全在Web上來製作UI Prototype的是Mocklinkr所提供的,不過免費版的功能很陽春。


Microsoft Expression Blend 的Sketchflow
選擇Sliverlight或WPF來製作Sketchflow專案
這是之前我看的範例

提供相當多的UI elements 來使用

下面提供Flow的連接圖可以很清楚的知道UI flow的狀況

Project run 起來的狀況,左方可以提供使review的人來輸入建議與標示問題


所輸入的建議必須匯出成.feedback檔給開發者來匯入(有一點鳥)


Balamiq Mockups
可以先試用Web Demo 版

提供的elements也不少

隨便拉一下UI Prototype就做好

Mobile Device的UI Prototype也可以做

免費版的很兩光

提供的也是簡單的連接

可以將UI Prototype 匯出成URL link給reviewer


沒有留言:

張貼留言