有不少開發人員提到，有時候想在原型中加入驗證機制，但苦于一直都沒有找到合適的工具。因為大多數原型工具只有原型設計的功能，并沒有驗證的功能。現在很多開發工具都支持驗證功能了，比如Microsoft .NET提供了Required Field validator, Range validator等控件。不過不用擔心，這里小編就為大家推薦一款支持驗證功能的原型設計工具——Indigo Studio。

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

State

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

Demo

簡便起見，這里選擇了一個比較簡單的流程，你只需要輸入你的名字然后按下Login按鈕就可以了。如果名字字段為空，文本框上方就會出現紅色的提示文字。如果你輸入了文本，標簽又會消失。你可以用Backspace模擬這個過程。>>

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

下面是Indigo Studio中呈現的關于State轉換的流程：

問題：state 1.1.1 / 1.2中的按鈕為何會重定向到下一個頁面，而其他state的按鈕卻不會？

答：因為在這兩個State下面，有一個同樣尺寸的登陸按鈕被放置在原始登陸按鈕相同的位置，這個新按鈕是指向下一個頁面的。也就是說原來的登陸按鈕隱藏在新按鈕的下方。

同樣，當文本字段被清空時，新按鈕就會被移除，而在下面的原始按鈕又會到上面。

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

總結

接下來是很重要的一步，就是通過消除冗余來優化State。如果一個state與另一個state是類似的，那最好是進行引用而不是進行復制。

由于state是按照順序進行的，所以應該引用轉換開始時的那個state。

比如有兩個state由綠色的方框進行強調，但只有底部的綠色方框可以指向頂部的綠色方框。底部的綠色state不是最開始的item，頂部那個才是，所以應該引用頂部的state。而灰色方框的state則剛好相反，頂部那個應該引用底部那個state。

棕色方框的State細化：

綠色方框的State細化：

下面就是由初始狀態圖再用Indigo Studio做出來的屏幕草圖：

如果你對Indigo Studio驗證感興趣，那就作進一步研究吧！