原創(chuàng)|使用教程|編輯:我只采一朵|2013-12-04 10:05:55.000|閱讀 1051 次
概述:本文講解了如何使用原型設(shè)計工具Indigo Studio的驗證功能,并附相關(guān)示例下載。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
有不少開發(fā)人員提到,有時候想在原型中加入驗證機制,但苦于一直都沒有找到合適的工具。因為大多數(shù)原型工具只有原型設(shè)計的功能,并沒有驗證的功能。現(xiàn)在很多開發(fā)工具都支持驗證功能了,比如Microsoft .NET提供了Required Field validator, Range validator等控件。不過不用擔(dān)心,這里小編就為大家推薦一款支持驗證功能的原型設(shè)計工具——Indigo Studio。
Indigo Studio是著名界面控件提供商 infragistics 的產(chǎn)品,它是一款快速UI原型和交互設(shè)計工具,能幫助創(chuàng)建功能性的、生動的UI原型,而且每一步都保證以用戶體驗為中心。用戶可以創(chuàng)建超過100種不同場景的、內(nèi)置交互控件的框架和專用于桌面、網(wǎng)站和移動應(yīng)用的原型,所有這一切都無需代碼支持。
使用State功能展示比較小的驗證或屏幕從一個狀態(tài)切換另一種狀態(tài)。使用State可以很方便的保存各種狀態(tài),同時也增加了重用性。>>
簡便起見,這里選擇了一個比較簡單的流程,你只需要輸入你的名字然后按下Login按鈕就可以了。如果名字字段為空,文本框上方就會出現(xiàn)紅色的提示文字。如果你輸入了文本,標(biāo)簽又會消失。你可以用Backspace模擬這個過程。>>
演示中有兩個屏幕: (a) Login Page 和(b) Main Page,在原型中也只使用"States"來表示兩個屏幕:
下面是Indigo Studio中呈現(xiàn)的關(guān)于State轉(zhuǎn)換的流程:
問題:state 1.1.1 / 1.2中的按鈕為何會重定向到下一個頁面,而其他state的按鈕卻不會?
答:因為在這兩個State下面,有一個同樣尺寸的登陸按鈕被放置在原始登陸按鈕相同的位置,這個新按鈕是指向下一個頁面的。也就是說原來的登陸按鈕隱藏在新按鈕的下方。
同樣,當(dāng)文本字段被清空時,新按鈕就會被移除,而在下面的原始按鈕又會到上面。
注意:原始按鈕不指向任何頁面,它是在被點擊后顯示紅色提示文字的。
接下來是很重要的一步,就是通過消除冗余來優(yōu)化State。如果一個state與另一個state是類似的,那最好是進行引用而不是進行復(fù)制。
由于state是按照順序進行的,所以應(yīng)該引用轉(zhuǎn)換開始時的那個state。
比如有兩個state由綠色的方框進行強調(diào),但只有底部的綠色方框可以指向頂部的綠色方框。底部的綠色state不是最開始的item,頂部那個才是,所以應(yīng)該引用頂部的state。而灰色方框的state則剛好相反,頂部那個應(yīng)該引用底部那個state。
棕色方框的State細化:
綠色方框的State細化:
下面就是由初始狀態(tài)圖再用Indigo Studio做出來的屏幕草圖:
如果你對Indigo Studio驗證感興趣,那就作進一步研究吧!
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自:慧都控件