有不少開發(fā)人員提到，有時(shí)候想在原型中加入驗(yàn)證機(jī)制，但苦于一直都沒(méi)有找到合適的工具。因?yàn)榇蠖鄶?shù)原型工具只有原型設(shè)計(jì)的功能，并沒(méi)有驗(yàn)證的功能。現(xiàn)在很多開發(fā)工具都支持驗(yàn)證功能了，比如Microsoft .NET提供了Required Field validator, Range validator等控件。不過(guò)不用擔(dān)心，這里小編就為大家推薦一款支持驗(yàn)證功能的原型設(shè)計(jì)工具——Indigo Studio。

Indigo Studio是著名界面控件提供商 infragistics 的產(chǎn)品，它是一款快速UI原型和交互設(shè)計(jì)工具，能幫助創(chuàng)建功能性的、生動(dòng)的UI原型，而且每一步都保證以用戶體驗(yàn)為中心。用戶可以創(chuàng)建超過(guò)100種不同場(chǎng)景的、內(nèi)置交互控件的框架和專用于桌面、網(wǎng)站和移動(dòng)應(yīng)用的原型，所有這一切都無(wú)需代碼支持。

State

使用State功能展示比較小的驗(yàn)證或屏幕從一個(gè)狀態(tài)切換另一種狀態(tài)。使用State可以很方便的保存各種狀態(tài)，同時(shí)也增加了重用性。>>

Demo

簡(jiǎn)便起見(jiàn)，這里選擇了一個(gè)比較簡(jiǎn)單的流程，你只需要輸入你的名字然后按下Login按鈕就可以了。如果名字字段為空，文本框上方就會(huì)出現(xiàn)紅色的提示文字。如果你輸入了文本，標(biāo)簽又會(huì)消失。你可以用Backspace模擬這個(gè)過(guò)程。>;>

演示中有兩個(gè)屏幕： (a) Login Page 和(b) Main Page，在原型中也只使用"States"來(lái)表示兩個(gè)屏幕:

下面是Indigo Studio中呈現(xiàn)的關(guān)于State轉(zhuǎn)換的流程：

問(wèn)題：state 1.1.1 / 1.2中的按鈕為何會(huì)重定向到下一個(gè)頁(yè)面，而其他state的按鈕卻不會(huì)？

答：因?yàn)樵谶@兩個(gè)State下面，有一個(gè)同樣尺寸的登陸按鈕被放置在原始登陸按鈕相同的位置，這個(gè)新按鈕是指向下一個(gè)頁(yè)面的。也就是說(shuō)原來(lái)的登陸按鈕隱藏在新按鈕的下方。

同樣，當(dāng)文本字段被清空時(shí)，新按鈕就會(huì)被移除，而在下面的原始按鈕又會(huì)到上面。

注意：原始按鈕不指向任何頁(yè)面，它是在被點(diǎn)擊后顯示紅色提示文字的。

總結(jié)

接下來(lái)是很重要的一步，就是通過(guò)消除冗余來(lái)優(yōu)化State。如果一個(gè)state與另一個(gè)state是類似的，那最好是進(jìn)行引用而不是進(jìn)行復(fù)制。

由于state是按照順序進(jìn)行的，所以應(yīng)該引用轉(zhuǎn)換開始時(shí)的那個(gè)state。

比如有兩個(gè)state由綠色的方框進(jìn)行強(qiáng)調(diào)，但只有底部的綠色方框可以指向頂部的綠色方框。底部的綠色state不是最開始的item，頂部那個(gè)才是，所以應(yīng)該引用頂部的state。而灰色方框的state則剛好相反，頂部那個(gè)應(yīng)該引用底部那個(gè)state。

棕色方框的State細(xì)化：

綠色方框的State細(xì)化：

下面就是由初始狀態(tài)圖再用Indigo Studio做出來(lái)的屏幕草圖：

如果你對(duì)Indigo Studio驗(yàn)證感興趣，那就作進(jìn)一步研究吧！